Web前端基础

1 HTML

1.1 HTML简介

HTML的概念：超文本标记语言，用于编写网页的
HTML的语法要求：
- 语法特点：
  - 文件后缀名是：.html, .htm
  - html不需要编译，可以使用浏览器直接打开
  - html不区分大小写
  - 由一堆标签组成的：
    - 每个标签都是预定义好的，有功能的 ==》需要什么样的功能，就找什么样的标签
    - 开始标签上可以加属性 ==》对标签做进一步修饰

1.2 文字排版标签

标题标签：h1~h6
横线标签：hr
- color：横线颜色
- size：横线的粗细
- width：横线长短（宽度）
- align：横线的水平位置
段落标签：p
换行标签：br
文字标签：font
- color：文字的颜色
- size：文字的字号，最小1，最大7，默认3
- face：文字的字体
粗体字标签：b
斜体字标签：i

1.3 图片标签

图片标签：一切图片都使用img标签

src：图片的路径

相对路径:  -- 实际开发中一般不推荐使用. 
	./  当前目录
	../ 上一级目录
绝对路径:
	1. 带盘符的绝对路径  -- 不推荐使用
	2. 带HTTP协议的路径
		<img src="https://www.baidu.com/img/bd_logo1.png">

width：图片显示的宽度
height：图片显示的高度。开发中通常只设置宽或高，如果都设置，图片可能会变形
title：鼠标悬浮提示
alt：图片加载不出来的时候，显示的文字描述

1.4 清单和超链接

超链接标签

<a href="http://www.baidu.com" target="_blank">点我跳转到百度</a>
<a href="../_02图片显示/_02练习-图片显示.html">点我跳转到图片显示页面</a>

- href：跳转的路径
- target：在哪显示新页面，常用值有：
  - _self：在当前窗口显示（默认值，原页面被覆盖掉）
  - _blank：在新窗口显示

清单
- ul标签(无序清单)的type属性：每个清单项前边的符号类型，常用值有：
  - disc：小圆点，默认值
  - circle：小圆圈
  - square：小方块
- ol标签(有序清单)的type属性：每个清单项前边的序号类型，常用值有：
  - 1：阿拉伯数字序号
  - a/A：英文字母序号
  - i/I：罗马数字序号

1.5 表格

表格是一套标签：哪怕一行一列的表格，也必须写完整

table：表格本身
- width：表格的宽度
- height：表格的高度
- align：表格的水平位置。left左，center中，right右
- bgcolor：表格的背景颜色
- cellspacing：单元格之间的间隔。设置为0，看起来是单线条
- border：表格的边框
tr：行，作为table的子标签使用
- height：行高
- align：行里内容的水平位置
td：单元格
- align：单元格里内容的水平位置
th：表头单元格。
- 是一种特殊的td，用法和td完全相同
- 只是自带样式：内容加粗，并居中显示
caption：表格的标题
- 作为table的子标签使用
合并单元格 th|td
colspan: 合并列
rowspan: 合并行

1.6 表单

form标签：表单标签，要把表单项放到form标签内部，才能够提交数据
- name：名称
- action：表单数据提交的路径, "#"表示提交到当前路径
- method：表单数据提交的方式，常用的get， post
  
  * 表单项中的数据要想被提交：必须指定其name属性
input标签：输入项标签
- type：输入项的类型
  - text：默认值，是文本框
  - password：密码框
  - radio：单选按钮。
    - 如何互斥：name相同的radio属于同组，同组选择互斥
    - 默认值设置：在需要默认选中的选项上，增加属性checked="checked" 或者 checked
  - checkbox：复选框
    - name相同的checkbox属于同组，同组的目的仅仅是方便将来服务端接收数据
    - 默认值设置：在需要默认选中的选项上，增加属性checked="checked" 或者 checked
  - button：普通按钮，没有功能。可以通过JavaScript给普通按钮自定义功能
  - submit：提交按钮，提交表单
  - reset：重置按钮，把表单项的数据重置成默认值
  - image：图片提交按钮，用一张图片作为提交按钮来使用
  - file：文件选择框。默认提交的是文件名称，而不是上传文件
  - hidden：隐藏域，不会显示到页面上的表单项。但是如果有name，数据也会提交
- name：表单项的名称
  - 如果表单项的数据要提交，就必须有name属性；否则表单项数据不会提交的
- value：表单项的值，在不同的type里有不同的用法/作用
  - 在text里：value是默认值
  - 在password里：value是默认值
  - 在radio里：value是一个选项的值。选中哪个选项，就提交哪个选项的value值
  - 在checkbox里：value是一个选项的值。选中哪个选项，就提交哪个选项的value值
  - 在button里：value是按钮上的文字
  - 在submit里：value是按钮上的文字
  - 在reset里：value是按钮上的文字
  - 在image里：value没有什么用处
  - 在file里：value无效
  - 在hidden里：value是隐藏域的值
select下拉框：
- select标签：下拉框本身
  - name：如果数据要提交，就必须有name属性
- option标签：下拉选项，作为select的子标签
  - value：选项的值。选中哪个选项，就提交哪个选项的value值
- 默认值：
  - 如果没有手动设置：默认选中第一个选项
  - 如果想要手动设置：在option上增加属性selected="selected"或者selected
textarea：文本域
- name：如果数据要提交，就必须有name
- 默认值：没有value属性，默认值要写在标签体里（开始标签和结束标签中间）
get提交和post提交的区别（面试题)
- get提交，参数会显示到地址栏，不安全，有长度限制
- post提交，参数不会显示到地址栏，相对安全，没有长度限制

2 CSS

2.1 选择器

基本选择器
- 标签选择器：根据标签名称选择元素
  - 语法：标签名称{css样式名:值; css样式名:值; ...}
- ID选择器：根据标签的id值选择元素
  - 语法：#id值{css样式名:值; css样式名:值; …}`
- 类选择器：根据标签的class值选择元素
  - 语法：.类名{css样式名:值; css样式名:值; …}`
- 三种选择器的优先级：
  - ID选择器 > 类选择器 > 标签选择器
  - 如果优先级相同：后加载的会覆盖掉先加载
扩展选择器：
- 层级选择器：使用空格连接的多个选择器，其中空格表示后代
- 属性选择器：通过html标签的属性，做进一步过滤input[type="text"]是文本框
- 伪类选择器：
  - a:link 正常状态的超链接
  - a:visited点击过之后的超链接
  - a:hover鼠标移入的超链接
  - a:active鼠标点下去的超链接
优先级:内联样式>内部样式=外部样式

2.2 盒子模型

类别

- 标准盒子模型：
  - 是默认的盒子模型
  - 样式：`box-sizing:content-box;`
  - 特性：width和height是内容区域的大小。如果增加了内边距和边框，盒子会撑大
- 怪异盒子模型：
  - 样式：`box-sizing:border-box;`
  - 特性：width和height是盒子的大小。如果增加了内边距和边框，内容会缩小，盒子大小不变

盒子模型包含的样式有：
- width：宽度
- height：高度
- border：边框
- padding：内边距，盒子边框和内容之间的距离
- margin：外边距，盒子向外延伸多占用的空间

3 JavaScript

js简介：JavaScript，在浏览器里运行，大小写敏感，在web开发里不可缺少的脚本语言
js作用：和用户交互，实现动态效果的
js组成：
- ECMAScript：基本语法规范
- BOM：提供了操作浏览器的方法
- DOM：提供了操作网页的方法
一个script标签的功能要单一：要么是内部js，要么是外部js，不能混用
js越晚加载越好，建议放在body结束标签之前（css建议放在head里）

let与var区别

- 在ES5及更低版本中，使用`var`定义变量
- 在ES6及更高版本中，使用`let`定义变量
- 两者的区别是：
  - `let`定义变量仅在当前代码块有效；`var`定义变量是全局变量
  - `let`不允许重复定义变量；`var`允许重复定义变量
  - 开发中建议使用`let`定义变量，语法更严谨
  
  注:使用`var`和不使用`var`的区别:
  	`var`在方法内声明变量的话,则为局部变量
	如果`不使用var`,事实上是对属性赋值操作。首先，它会尝试在当前作用域链（如在方法中声明，则当前作用域链代表全局作用域和方法局部作用域etc。。。）中解析num，如果在任何当前作用域链中找到num，则会执行对num属性赋值，如果没有找到num，它才会在全局对象（即当前作用域链的最顶层对象，如window对象）中创造num属性并赋值。

`注意！它并不是声明了一个全局变量，而是创建了一个全局对象的属性`

★面试题

题目1：
var a = 99;            // 全局变量a
f();                   // f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
      
      
  console.log(a);      // 当前的a变量是下面变量a声明提升后，默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}

// 输出结果：
undefined
10
99

数据类型:number,boolean,string,object,undefined
函数:
- js函数没有***重载***; 同名函数会覆盖掉, 只有最后一个有效
- 形参个数和实参个数无关：在函数里可以使用隐含的arguments来得到所有的实参数组

函数声明提升:

函数 变量形式声明 和普通变量一样 提升的 只是一个没有值的变量。

函数声明式的提升现象和变量提升略有不同，函数声明式会提升到作用域最前边，并且将声明内容一起提升到最上边。

bar();				
var bar = function(){
      
      
    alert(10);
}
// 报错

bar();
function bar(){
      
      
    alert(10);
}
// 输出10

变量提升总结:
- 所有的声明都会提升到作用域的最顶上去。
- 同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。
- 函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。
开启定时器的语法:setInterval(fn, ms) 返回值：定时器的id
流程控制语句：和Java非常相似，不同的：
- if判断条件可以是任意类型
  - number类型：0是false，非0是true
  - string类型："“是false，非”"是true
  - ojbect类型：null是false，非null是true
  - undefined类型：始终是false
bom对象:
- window：浏览器窗口对象，是其它bom对象的顶级对象
- location：浏览器地址对象，可以实现网页跳转。window.location，可以简写成location
- history：浏览器历史记录对象，可以实现历史记录切换。window.history，简写成history
- screen：浏览器的屏幕显示信息对象，可以操作浏览器窗口大小、位置、颜色等信息window.screen
- navigator：浏览器信息对象，只读的。可以获取浏览器的内核、版本、操作系统等信息 window.navigator，简写成navigator
- windows
  - window提供了弹窗方法：可以让浏览器弹窗
    - 普通弹窗：alert("普通弹窗")，没有返回值
    - 确认弹窗【重点】：confirm("确定要删除吗？")，点击确定返回true，点击取消返回false
      - 通常删除一些数据之前，要先弹出确认窗口。用户点击了确定之后，再删除，避免误删
    - 输出弹窗：prompt("请输入姓名：")，点击确定返回输入的内容，点击取消返回null
  - window提供了定时器【会用】
    - 执行多次的定时器
      - 开启：let timer = setInterval(fn, ms)
      - 清除：clearInterval(定时器的id)
    - 执行一次的定时器
      - 开启：let timer = setTimeout(fn, ms)
      - 清除：clearTimeout(定时器的id)
  - window提供了一些全局函数【了解】
    - parseInt()：转换成整数
    - parseFloat()：转换成小数
    - eval()：把字符串作为js代码执行一次
- location
```
获取网址：`let url = location.href;`
设置网址（网址跳转）【重点】：`location.href = "跳转的地址"`
重新加载当前页面：`location.reload()`
```
- history
```
history.forward():前进一步
history.back():后退一步
history.go(n):前进n步/整数前进,负数后退
```
dom
- 获取标签：
  - document.querySelector("选择器")：查询一个标签，返回的是Element
  - document.querySelectorAll("选择器")：查询一批标签，返回的是Element的数组
- 创建标签：
  - document.createElement("标签名称")，返回值是创建出来的标签Element对象
  - 创建出来的标签，如果不插入到dom树里，是不会生效的
- 插入标签：
  - 父标签对象.appendChild(子标签对象)
- 删除标签：
  - 标签对象.remove()

4、Bootstrap

响应式布局

* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
	1. 定义容器。相当于之前的table、
		* 容器分类：
			1. container：两边留白
			2. container-fluid：每一种设备都是100%宽度
	2. 定义行。相当于之前的tr   样式：row
	3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
		* 设备代号：
			1. xs：超小屏幕 手机 (<768px)：col-xs-12
			2. sm：小屏幕 平板 (≥768px)
			3. md：中等屏幕 桌面显示器 (≥992px)
			4. lg：大屏幕 大桌面显示器 (≥1200px)

	* 注意：
		1. 一行中如果格子数目超过12，则超出部分自动换行。
		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
		3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

css样式和js插件

1. 全局CSS样式：    
	* 按钮：class="btn btn-default"    
	* 图片：        
        *  class="img-responsive"：图片在任意尺寸都占100%       
        *  图片形状            
            *  <img src="..." alt="..." class="img-rounded">：方形            
            *  <img src="..." alt="..." class="img-circle"> ： 圆形            
            *  <img src="..." alt="..." class="img-thumbnail"> ：相框    
	* 表格        
        * table        
        * table-bordered        
        * table-hover    
	* 表单        	
		* 给表单项添加：class="form-control" 
2. 组件：    
    * 导航条    
    * 分页条
3. 插件：    
    * 轮播图

5、XML

XML的解析方式：

1. DOM方式解析: 将整个XML文件加载到内存,形成一个DOM树
	优点: 操作方便,可以进行CRUD的操作.
	缺点: 占用内部较大
	
2. SAX方式解析: 逐行解析
	优点: 几乎不占内存
	缺点: 只能读取,无法进行CRUD

Jsoup 解析方案

编写步骤

步骤:
	1. 导入jar包
	2. 编写代码
		1. 解析XML文档,获取Document对象
		2. 获取需要的元素Element对象
		3. 获取元素的文本/属性

Jsoup对象方法

工具类，可以解析html或xml文档，返回Document
	* parse：解析html或xml文档，返回Document
   	 	 * parse(File in, String charsetName)：解析xml或html文件的。 ★★★
   		 * parse(String html)：解析xml或html字符串
   		 * parse(URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象

Document 对象方法

获取元素的方法:
	getElementById(id) 获取一个指定元素
	getElementsByTag(标签名)  根据标签名获取元素的集合
	getElementsByAttribute(属性名) 根据属性名获取元素的集合
	getElementsByAttributeValue(属性名,属性值) 根据属性名和属性值获取元素的集合.

Element对象方法

1. 获取元素的方法(Document 对象方法一致)
2. 获取属性:
	元素对象.attr(String 属性名)
3. 获取标签体内容:
		1. 获取文本  
				元素对象.text();
		2. 获取子标签
				元素对象.html();

Xpath 使用

作用: 快速查找.
使用步骤:
	1. 导入jar包
	2. 编写代码
		1. 解析XML文件,获取Document对象
		2. 根据document对象，创建JXDocument对象
			JXDocument jxDocument = new JXDocument(document);
	jxDocument对象方法:
		jxDocument.selN(表达式);  获取所有符合条件的Node集合
		jxDocument.selNOne(表达式);  获取符合条件的指定节点.
		
	表达式语法:
		/    表示从文档的根元素开始查找.
		//   从文档的任意位置去查找
		@	 根据元素的属性获取
				selN("//student/name[@id]")
				selN("//student/name[@id='itcast']")

6、案例

package com.itheima.xml;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import java.io.File;
import java.io.IOException;
import java.lang.reflect.Method;
import java.util.Scanner;

/**
 * 模拟简单的Servlet执行
 */
public class DemoXml {
      
      

    public static void main(String[] args) throws Exception {
      
      
       // 1. 获取控制台输入路径
        Scanner scanner = new Scanner(System.in);
        String path = scanner.nextLine();
        //System.out.println(path);

       // 2. 解析XML文件. 根据输入的path路径获取<servlet>标签
        String filePath = DemoXml.class.getClassLoader().getResource("web.xml").getPath();
        Document document = Jsoup.parse(new File(filePath), "utf-8");

        Elements elements = document.getElementsByAttributeValue("url", path);
        Element serlvet_element = elements.get(0);

        // 3. 获取<servlet>标签的class属性值
        String className =  serlvet_element.attr("class");

        //4. 使用反射机制,创建类的对象,并执行类的方法
        // 获取字节码对象
        Class clazz =   Class.forName(className);
        // 获取方法对象
        Method method = clazz.getMethod("service");
        // 执行方法
        method.invoke(clazz.newInstance());

    }
}

注意：

1. 扩展名*.xml
2. XML文件有约束头, 只能写在第一行第一列
	<?xml version="1.0" encoding="UTF-8" ?>
3. 标签名自定义(可扩展)
4. 标签名严格区分大小写
5. XML文件必须有根标签
6. 属性值必须使用引号(单双都可以)

jQuery

js和jQuery之间的对象和方法不可相互使用,需要相互转换对象后才可调用对方的方法.
能够使用不同选择器，获取标签对象：$(“选择器”)
- 基本选择器【重要】
  - $("div")：标签选择器，选择所有的div
  - $("#username")：ID选择器，获取id为username的元素
  - $(".inputItem")：获取类名为inputItem的元素
- 属性选择器
  - $("a[href]")：含有href属性的a标签
  - $("a[target='_blank']")：获取target属性值为_blank的a标签
  - $("a[class][target='_blank']")：获取含有class属性，并且target值为_blank的a标签
- 层级选择器【重要】
  - $("li img")：获取li里的所有img标签，无论是子元素、孙子元素、…
  - $("li>img")：获取li的子标签img
- 基本过滤选择器
  - $("div:first")：获取第一个div
  - $("div:last")：获取最后一个div
  - $("div:not(.cls)")：获取div，但是要排除.cls的结果不要
  - $("div:even")：获取索引为偶数的div
  - $("div:odd")：获取索引为奇数的div
  - $("div:eq(2)")：获取索引为2的div
  - $("div:gt(2)")：获取索引大于2的div
  - $("div:lt(2)")：获取索引小于2的div
- 表单属性选择器【重要】
  - $("input[type='text']:disabled")：获取禁用的文本框
  - $("input[type='text']:enabled")：获取禁用的文本框
  - $("input[type='checkbox']:checked")：获取被选中的复选框
  - $("input[type='radio']:checked")：获取被选中的单选按钮
  - $("option:selected")：获取被选中的下拉选项

dom操作

- html()：获取标签体里的内容
- html(string)：设置标签体内容。是覆盖式设置，设置的html代码会生效
- text()：获取标签体里的文本
- text(string)：设置标签体文本。是覆盖式设置，设置的html代码不会生效

- val()：获取表单项的值
- val(值)：设置表单项的值
- 注意：仅仅适用于表单项标签，而不适用于div、span.....非表单项标签

获取和设置属性
- 第一类方法：
  - `attr(name)`：获取属性值
  - `attr(name, value )`：设置属性值
- 第二类方法：
  - `prop(name)`：获取属性值
  - `prop(name,value)`：设置属性值
- 使用的时候要注意：
  - 如果要操作的是checked、selected属性，必须使用prop方法
  - 其它属性，优先尝试attr，如果不行再用prop

Web前端从零基础到入门

Web前端基础

1 HTML

1.1 HTML简介

1.2 文字排版标签

1.3 图片标签

1.4 清单和超链接

1.5 表格

1.6 表单

2 CSS

2.1 选择器

2.2 盒子模型

3 JavaScript

4、Bootstrap

5、XML

Jsoup 解析方案

jQuery

猜你喜欢