标题

1
2
3
4
5
6
7
8
9
10
11
12
13

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推

段落

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车

当然也可以在段落后面使用一个空行来表示重新开始一个段落

粗体斜体

1
2
3
4
5
6
7
8
9
10
11
12
13

*斜体*

_斜体_

**粗体**

__粗体__

***斜粗体***

___斜粗体___

分割线删除线

1
2
3
4
5
6
7
8
9
10
11
12
13

---------------------------------------------------------

---

-----

___

---

---

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西

1
2
3

~~删除线~~

如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线~~即可

1
2
3

<u>下划线</u>

下划线可以通过 HTML 的 <u> 标签来实现

脚注

1
2
3

脚注[^脚注类似这样]

脚注是对文本的补充说明

1
2
3

[^脚注类似这样]: 对对对

列表

1
2
3
4

* 无序列表
* and

或者

1
2
3
4

+ s
+ d

或者

1
2
3
4

- s
- d

无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容

1
2
3
4
5

1. d
2. e
3. r

有序列表使用数字并加上 . 号来表示

列表嵌套只需在子列表中的选项前面添加四个空格即可

1
2
3
4
5
6
7

1. 1
    - ss
    - ss
    - e
2.  w

引用

1
2
3
4
5
6
7
8
9
10
11
12
13

> def
>
> end
>
> > d
> >
> > e
> >
> > > get
> > >
> > > end

Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号

区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推

区块中使用列表，正常使用即可

列表中使用区块，需要在 > 前添加四个空格的缩进

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

* 第一项

  > d
  > 菜鸟教程
  > 学的不仅是技术更是梦想

* 第二项

* >


* > d
  >
  > dd

* d

代码

段落上的一个函数或片段的代码可以用反引号把它包起来

1
2
3

`printf()`

代码区块使用 ``` 包裹一段代码，并指定一种语言（也可以不指定）符

1
2
3

```javascript
document.getElementByTagName("video")[0].click()

1
2
3
4
5
6
7
8
9
10
11

# 链接

```markdown

    [链接](https://www.runoob.com)

    <https://www.runoob.com>

    [1]:https://www.runoob.com

可以通过变量来设置一个链接，变量赋值在文档末尾进行[IT][1]

图片

1
2
3

![Oh](https://pics6.baidu.com/feed/72f082025aafa40f99cb5d63e6222f4679f019ca.jpeg?token=6d0ab25f666cf492c9ff83d037cb74e0)

表格

1
2
3
4
5
6
7
8
9

| b1   | b2   | b3   | b4   |
| ---- | ---- | ---- | ---- |
| d1   | d2   | d3   | d4   |

| b1   | b2   | b3   | b4   |
| :---- | ----: | :----: | ---- |
| d1   | d2   | d3   | d4   |

计算机网络

通信：互联网

• 主体：服务器、客户端浏览器
• 内容：内容
• 方式：响应方式

通信协议：通信遵循的规则约定|通信格式

超文本：网页内容

超文本传输协议：网页内容传输协议 HTTP协议客户端与服务器间进行网页内容传输时需遵守的传输格式 提交&响应

HTTP 请求

HTTP协议模型：请求/响应 交互模型

HTTP 请求消息

HTTP 请求报文

• 请求行：以空格分隔

  • 请求方式：GET、POST等
  • URL：域名之后的url部分
  • 协议版本

• 请求头部：以回车符&换行符分隔，以键值对组成，键值对以冒号分隔

  • Host：服务器域名

  • User-Agent：说明客户端的浏览器类型

  • Connection：客户端与服务器的连接方式

  • Content-Type：发送到服务器的数据格式

  • Content-Length：请求体大小

  • Accept：客户端可接受的返回数据类型

  • Accept-Language：客户端可接收的语言文本类型

  • Accept-Encoding：客户端可接受的内容压缩编码形式

• 空行：回车符or换行符

• 请求体：POST有、GET无

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.81 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: BIDUPSID=028E86627DA4BB24A78F13047AE65439; PSTM=1628179856; BD_UPN=12314753; __yjs_duid=1_0275df3f717d1e5149c8d0bc2305f82d1628213742697; BAIDUID=D5D732CC5CBECD9277FA4AF82CF82B37:FG=1; BDUSS=JzeWVqZmpKdC1kRmFDN2VKRDl4R3d5YUR5WnJzVjV6dWRsdE5tSlotUXdNZGxoRVFBQUFBJCQAAAAAAQAAAAEAAACSPpQhzOy~1bXE1MYxMDAwMDEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCksWEwpLFhQ3; BDUSS_BFESS=JzeWVqZmpKdC1kRmFDN2VKRDl4R3d5YUR5WnJzVjV6dWRsdE5tSlotUXdNZGxoRVFBQUFBJCQAAAAAAQAAAAEAAACSPpQhzOy~1bXE1MYxMDAwMDEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCksWEwpLFhQ3; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BAIDUID_BFESS=D5D732CC5CBECD9277FA4AF82CF82B37:FG=1; BD_HOME=1; H_PS_PSSID=35834_35106_31253_35765_35489_34584_35491_35871_35246_35905_35796_35316_26350_35884_35724_35879_35746; sug=3; sugstore=0; ORIGIN=0; bdime=0; BA_HECTOR=8004al2520258h0lb41h0s1c90q

HTTP 响应消息：HTTP 响应报文

• 状态行
  • 协议版本
  • 状态码：200等
  • 状态码描述
• 响应头部
• 空行
• 响应体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

HTTP/1.1 200 OK
Bdpagetype: 2
Bdqid: 0xbde875de000166a1
Cache-Control: private
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Thu, 17 Feb 2022 08:52:39 GMT
Expires: Thu, 17 Feb 2022 08:52:39 GMT
Server: BWS/1.1
Set-Cookie: BDSVRTM=302; path=/
Set-Cookie: BD_HOME=1; path=/
Set-Cookie: H_PS_PSSID=35834_35106_31253_35765_35489_34584_35491_35871_35246_35905_35796_35316_26350_35884_35724_35879_35746; path=/; domain=.baidu.com
Strict-Transport-Security: max-age=172800
Traceid: 1645087959064662324213684317064108533409
X-Frame-Options: sameorigin
X-Ua-Compatible: IE=Edge,chrome=1
Transfer-Encoding: chunked

请求方法

• GET 查询 - 获取服务器资源

请求数据放在数据头内

• POST 新增 - 提交资源

请求数据放在请求体内

• PUT 修改 - 提交新资源并替换
• DELETE 删除 - 移除资源

请求删除指定的资源

响应状态码

用于标识响应状态

三十进制：字，first类型，then细分

• 1** 信息：收到请并需继续操作（少见）
• 2** 成功：请求成功接收并处理
  • 200 OK 请求成功
  • 201 Created 已创建
• 3** 重定向：需进一步操作以完成请求
  • 301 Moved Permanently 永久移动 使用新URL
  • 302 Found 临时移动 仍使用原有URL
  • 304 Not Modified 未修改 会直接访问缓存内资源
• 4** 客户端错误：请求包含语法错误或无法完成请求
  • 400 Bad Request 语义有误or请求参数有误
  • 401 Unauthorized 需用户验证
  • 403 Forbidden 拒绝执行请求
  • 404 Not Found 无法找到资源
  • 408 Request Timeout 请求超时
• 5** 服务器错误：服务器处理请求出错
  • 500 Internal Server Error 服务器内部错误，无法完成请求
  • 501 Not Implemented 不支持请求方法
  • 503 Service Unavailable 服务器暂时无法处理：超载or系统维护

跨域与 JSONP

同源策略

同源：两页面协议、域名、端口相同

浏览器网页默认端口 80

同源策略：浏览器安全功能-限制来源同一个加载文档脚本与其他源资源的交互

• 阻止读取非同源网页的 cookie、localstorage 与 indexedDB
• 阻止接触非同源网页的 DOM
• 阻止向非同源地址发送 Ajax 请求

跨域：非同源

浏览器会拦截跨域请求回来的数据

JSONP

JSON 的一种使用模式，实现跨域数据访问

由于 script 标签允许请求非同源的 js 脚本

利用 script 标签请求，并传递一个回调函数名作为参数；服务器端把数据作为回调函数参数包装后返回；浏览器自动执行回调函数代码，即实现数据渲染

JSONP：兼容性好、只支持 GET 请求

CORS：支持 GET 与 POST，不兼容低版本浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="divCustomers"></div>
<script type="text/javascript">
  function callbackFunction(result, methodName) {
    var html = "<ul>";
    for (var i = 0; i < result.length; i++) {
      html += "<li>" + result[i] + "</li>";
    }
    html += "</ul>";
    document.getElementById("divCustomers").innerHTML = html;
  }
</script>
<script
  type="text/javascript"
  src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"
></script>

jQuery 实现用户端

采用动态创建与移除 script 标签：向 head 内添加 script 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div id="divCustomers"></div>
<script>
  $.getJSON(
    "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",
    function (data) {
      var html = "<ul>";
      for (var i = 0; i < data.length; i++) {
        html += "<li>" + data[i] + "</li>";
      }
      html += "</ul>";

      $("#divCustomers").html(html);
    }
  );
</script>

<script>
  $.ajax({
      url: 'https:www.sky.icu',
      dataType: 'jsonp', // 必需
      success: (res) => {
          console.log(e);
      },
      jsonp: 'callback'  // 发送至服务器参数名称：可选
      jsonpCallback: 'jQueryxxx',  // 自定义回调函数名称：可选
  })
</script>
<!-- 会自动带一个jQueryXXXX的回调函数名称 -->

服务器端

1
2
3
4
5
6
7
8
9

<?php
    header('Content-type: application/json');
    //获取回调函数名
    $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
    //json数据
    $json_data = '["customername1","customername2"]';
    //输出jsonp格式的数据
    echo $jsoncallback . "(" . $json_data . ")";
?>

节流

节流，就是指连续触发事件但是在 n 秒中只执行一次函数

减少事件触发频率

• 使得鼠标事件仅在单位时间内触发一次
• 降低监测滚动条位置的频率

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 时间戳
function throttle(func, delay) {
  let prev = 0; // 上次触发时间
  return function (...args) {
    const now = Date.now();
    if (now - prev > delay) {
      last = now;
      func.apply(this, args);
    }
  };
}

// 定时器
function throttle(func, delay) {
  let timeout = null;
  return function (...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      });
    }
  };
}

防抖

防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

常用于搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 非立即执行
// 触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
function debounce(func, delay) {
  let timer = null; // 上次调用指向的计时器
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 立即执行
// 触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeOut(timer);
    const cal = !timer;
    timer = setTimeOut(() => {
      timer = null;
    }, delay);
    if (cal) func.apply(this, args);
  };
}

AJAX

Ajax 简介

AJAX = Asynchronous JavaScript And XML

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

Ajax 使用

XMLHttpRequest 对象用于同后台服务器交换数据

1
2
3
4
5
6
7
8
9
10
11
12
13

let request = new XMLHttpRequest();

request.open('POST', 'https://www.baidu.com', true);

request.setRequestHeader('Content-Type', 'application/json');

request.onreadystatechange = function() {
    if(this.readyState === 4 && this.status === 200) {
        console.log(this.responseText)
    }
}

request.send({});

• readyState 请求状态
  • 0：已创建对象未调用open方法
  • 1：已调用open方法
  • 2：已调用send方法已接收响应头
  • 3：数据接收中
  • 4：请求完成，数据接收完成或失败
• status 服务器响应状态
• responseText 请求返回的数据

请求数据类型 Content-Type

• application/x-www-form-urlencoded

url 末尾加， ? 接 = 连接的键值对， 以 & 分隔多个参数

https://www.baidu.com?id=1&name=Lily

中文字符等会进行 URL 编码

使用 decodeURL() 编码，encodeURL() 解码

Ajax 默认请求数据类型

• application/json

json 数据类型

• multipart/form-data

常用于上传文件

Ajax 新特性

• 设置请求时限

1
2
3
4
5
6

// 请求时限
request.timeout = 3000;
// 超时回调函数
request.ontimeout = (e) => {
    console.log(e);
}

• 使用 FormData 对象管理表单

1
2

let data = new FormData();
data.append('key', value);

• 上传文件

1
2
3
4
5
6
7
8

// 获取文件
let files = document.querySelector('input[type=file]').files;
// 检测文件是否已选中
if(files.length <= 0)
    return alert('ERROR');
// 创建 FormData 实例
let data = new FormData();
data.append('file', files[0]);

• 获取数据传输进度信息

1
2
3
4
5
6
7
8

request.upload.onprogress = function (e) {
    // lengthComputable 表示上传的资源是否具有可计算的长度
    if(e.lengthComputable) {
        // loaded 已传输的子节
        // total 需传输的总子节
        let percentComplete = Math.ceil((e.loaded / e.total) * 100);
    }
}

jQuery 的 Ajax

• $.ajax() 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$('#button').on('click', function () {

    const files = $('#file')[0].files;
    if(files.length <= 0) {
        return;
    }

    const data = new formData();
    data.append('file', files[0]);

    $.ajax({
        method: 'POST',
        url: 'https://www.baidu.com',
        data: data,
        // 内容编码类型
        // 默认值: "application/x-www-form-urlencoded"
        contentType: false,
        // 是否进行url编码
        // 默认值: true
        processData: false,
        success: function (res) {
            console.log(res);
        },
    });

});

• $(document).ajaxStart() 方法

在 Ajax 请求发送前执行函数

1
2
3

$(document).ajaxStart(function () {
    $('#loading').show();
});

• $(document).ajaxStop() 方法

在 Ajax 请求结束执行函数

axios

专注于网络数据请求的库

目前最主流的

官方网站

• axios.get & axios.post

1
2
3
4
5
6
7
8
9
10
11
12

axios.get(url, params)
    .then(function (res) {
        // 处理成功情况
        console.log(res);
    })
    .catch(function (err) {
        // 处理错误情况
        console.log(err);
    })
    .then(function () {
        // 总是会执行
    });

axios.get(url[, config])

axios.post(url[, data[, config]])

• axios({})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// promise 语法
axios({
    url: '',
    method: '',
    params: {},    // GET 数据：url参数
    data: {},    // POST 数据：默认json参数对象
}).then(res => {
    // do something with res.data
});

// async-await 语法
const {data} = await axios({
    url: '',
    method: '',
    params: {},
    data: {},
});
// do something with data

正则表达式

正则表达式是使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串的搜索模式

语法

/正则表达式主体/修饰符(可选)

字符串方法

• search() 搜索字符串，返回匹配的字符串下标或-1

1

'123456'.search(/234/)   // 1

• replace() 替换匹配的字符串，返回修改后的字符串

1

'123456'.replace(/345/, 'abc')   // 12abc6

• split() 从指定位置分割字符串，返回一个数组
• match() 搜索字符串，返回由所有子串组成的数组或null

正则表达式修饰符

• i 忽略区别大小写
• g 执行全局匹配
• m 执行多行匹配

正则表达式元字符

• . 查找单个非换行符字符

• \d 查找数字

• \s 查找空白字符

• \b 匹配单词边界

• \w 查找数字、大小写字母及下划线

正则表达式量词

• n+ 匹配一个或多个字符串n
• n* 匹配零个或多个字符串n
• n? 匹配零个或一个字符串n
• ^ 匹配字符串开始(第一个字符)
• $ 匹配字符串结束(最后一个字符)

正则表达式括号

• [0-9] 匹配任何0-9数字
• [a-zA-Z] [A-z] 匹配任意大小写字母
• [abc] 查找[]内的任意字符
• [^abc] 查找[]外的任意字符
• (x|y) 查找()内任意选项

RegExp 对象及其方法

• test() 匹配字符串是否符合给定模式

返回一个布尔值

• exec() 匹配字符串中正则表达式的匹配

返回一个包含搜索结果数组，未查找到返回null

参考链接

MDN 正则表达式

菜鸟教程 正则表达式

W3school 正则表达式

jQuery

简介

官方文档

https://jquery.com/

内容

jQuery JavaScript函数库

jQuery文件结构(function() {} ())，实质是一个自执行函数，给window对象添加一个jQuery属性和$属性

$是一个函数，传一个匿名函数即入口函数；传一个字符串即选择器；传一个dom对象即jQuery对象

可以用jQuery代替$的使用

引入jQuery即执行该js文件内代码

入口函数

$(function() {}) 等价于 window.onload()

可以写多个jQuery入口函数，其执行时机快于window.onload：window.onload等待所有资源加载完毕后执行；jQuery入口函数只等待dom树加载完成

$(document).ready(function(){})入口函数

建议

• 把所有 jQuery 代码置于事件处理函数中

• 把所有事件处理函数置于文档就绪事件处理器中

• 把 jQuery 代码置于单独的 .js 文件中

• 如果存在名称冲突，则重命名 jQuery 库

jQuery对象

概念

• jQuery对象是伪数组，实际是dom对象的一个包装集合

• 通过jQuery($())包装DOM的对象后产生的对象，为jQuery独有

• 与DOM对象无法相互使用彼此方法

• 建议jQuery对象在变量名前加$

jQuery对象获取DOM对象

• [index]
• .get(index)

jQuery对象获取DOM对象

• $()包装

jQuery事件

• 触发点击事件 .click()

• 设置点击事件 .click(function(){})

特别的，仅会返回符合条件的第一个属性值

• 鼠标移入事件 .mouseover() .mouseenter()

特别的，over在移入其本身及其子元素都会触发，enter仅移入其本身才触发

• 鼠标移出事件 .mouseleave .mouseout

特别的，out在移出其本身及其子元素都会触发，leave仅移出其本身才触发

事件添加

简单事件->bind事件->delegate事件->on事件

简单事件：click(function(){}) 不支持同时注册与动态注册

bind事件：.bind(‘click’, function(){}) 不支持动态注册

delegate事件：.delegate(‘selector‘, {click: function(){}})

on事件：

事件注册 $(selector).on(‘click’, function(){})

事件委托 $(selector).on(‘click’, ‘selector’, function() {})

事件解绑

unbind() 不推荐

undelegate() 不推荐

off() 推荐 无参

事件触发

trigger() 触发事件

事件对象

jQuery事件对象是对原生js事件对象的封装，已处理了兼容性

坐标

• screenX|screenY 原点屏幕左上角
• clientX|clientY 原点可见页面区域左上角
• pageX|pageY 原点页面区域左上角

方法

• stopPropagation() 阻止事件冒泡
• preventDefault() 阻止浏览器默认行为

事件响应方法返回false，可阻止事件冒泡与浏览器默认行为

• keyCode 获取按下键盘的键码

jQuery选择器

简单选择器

• id选择器 $(‘#id‘)
• 类名选择器 $(‘.class‘)
• 元素选择器 $(‘tag’)
• 通配选择器 $(‘*’)

选取当前元素 $(this)

复合选择器

• 并集选择器 $(‘selector1‘, ‘selector2‘)
• 交集选择器 $(‘selector1selector2‘)

关系选择器

• 子运算选择器 $(‘father > son‘)

• 后代元素选择器 $(‘grandfather son‘)

过滤选择器

• $(‘:eq(index)’) 特定序号子元素选择
• $(‘:odd’) 奇数子元素选择
• $(‘:even’) 偶数子元素选择

筛选选择器/方法

• .next() 找下一个兄弟元素
• .prev() 找上一个兄弟元素
• .eq(index) 查找指定下标的兄弟元素
• .parent() 查找父元素
• .siblings(selector) 查找不包含自身的兄弟元素
• .find(selector) 后代选择器
• .children(selector) 子类选择器

jQuery HTML元素操作

获取及设置元素内容属性

• 设置元素内文本 .text(*String*) .text(function(i, origText) {return *string*})

  ​ 会覆盖内部所有内容包括子元素内容

  ​ 不会解析字符串中的HTML部分

  ​ 存在隐式迭代现象

  ​ 回调函数形式：回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值，然后以函数新值返回您希望使用的字符串

1
2
3
4

$("#test1").text(function(i,origText){
  return "Old text: " + origText + " New text: Hello world!
  (index: " + i + ")";
});

• 获取元素内所有文本 .text()

• 获取及设置元素内容 .html()

  同text

  可以解析设置内容的元素节点

• 获取及设置表单字段的值 .val()

  同text

• 创建节点 $()

  需要主动添加到页面内

获取及设置元素样式属性

• 设置元素CSS属性 .css(‘property‘, value)

  ​ .css(‘property1‘: value1)

  ​ .css({‘property1‘: value1, ‘property2‘: value2})

  修改与添加

• 获取元素 CSS属性内容 .css(‘property‘)

1
2
3
4
5
6
7
8

$('#box1').css('width', '300px')
$('#box1').css('width', 300)

$('#box1').css({
    width: 300,
    'height': '300px',
    'background-color': 'green'
})

• 获取和设置元素的属性值 .attr()

  同css，回调函数同text

• 移除属性值 .removeAttr(‘tag‘)

• 设置布尔类型的属性：即元素标签内添加起效，不添加不起效的 .attr(‘tag‘)

获取元素尺寸

• 获取或设置元素宽高 .width() .height()
• 获取元素含内边距宽高 .innerwidth() .innerheight()
• 获取元素含内边距及边框宽高 .outerwidth() .outerheight()
• 获取元素含内外边距及边框宽高 .outerwidth(true) .outerheight(true)

获取元素位置

• 获取元素距document位置 .offset()

  返回对象，包括top和left的值

• 获取元素距设置定位属性的父元素offsetParent的位置 .position()

  返回值情况同offset

插入元素

• 在元素开头结尾插入内容 .prepend(string1, …) .append(string1, …)

  $("p").append("Some appended text.");

​ .appendTo() .prependTo()

$(content).appendTo(selector)

• 在元素之前之后插入元素 .before() .after()

  $("img").after("Some text after");

删除元素

• 删除元素及其子元 素 .remove() .remove(selector)

  $("#div1").remove();

  $("p").remove(".italic"); 过滤

• 删除元素子元素 .empty()

  $("#div1").empty();

获取及设置类class

• 添加类 .addClass()

  $("#div1").addClass("important");

  $("div").addClass("important blue");

• 移除类 .removeClass()

  $("h1,h2,p").removeClass("blue");

  $("div").addClass("important blue");

  $("h1,h2,p").removeClass();

• 添加&删除类 .toggleClass()

• 判断类的存在 .hasClass()

  返回布尔值

  $("#div1").hasClass("important");

其他

• 查询并设置元素内容被卷曲出去的宽高度 scrollLeft() scrollTop()

  即元素的子元素宽高度超出元素本身的宽高度

• 克隆元素 .clone()

  克隆的节点需要主动添加至页面上

  参数true表示克隆事件，否则不克隆事件，默认不克隆

jQuery效果与方法

元素隐藏及显示

• 隐藏元素 .hide()

• 显示元素 .show()

• 隐藏及显示元素 .toggle()

  无参数无动画效果，有参数有动画效果

  speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”normal”、”fast” 或毫秒

  callback 参数是 toggle() 方法完成后所执行的函数名称

  实质是修改display属性

元素淡入淡出

• 淡入已隐藏元素 .fadeIn()

  $(selector).fadeIn(speed,callback);

• 淡出可见元素 fadeOut()

  $(selector).fadeOut(speed,callback);

• 淡入或淡出元素 fadeToggle()

  $(selector).fadeToggle(speed,callback);

• 渐变为指定不透明度 fadeTo()

  $(selector).fadeTo(speed,opacity,callback);

  实质是修改opacity属性

元素滑动

• 向下滑动 .slideDown()

  $(selector).slideDown(speed,callback);

• 向上滑动 .slideUp()

  $(selector).slideUp(speed,callback);

• 向下或向上滑动 .slideToggle()

  $(selector).slideToggle(speed,callback);

  实质是修改padding和margin属性等

元素动画(自定义动画)

• 自定义动画 .animate()

  $(selector).animate({params},speed,easing,callback);

  easing 可选 规定在不同的动画点中设置动画速度的 easing 函数（swing缓动 或 linear匀速）

  可以定义相对值（该值相对于元素的当前值），在值的前面加上 += 或 -=

• 停止动画 .stop()

  $(selector).stop(stopAll,goToEnd);

  可选的 stopAll 参数规定是否应该清除动画队列，默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行

  可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false

其他

• 释放 $ 标识符的控制，并返回对$的引用，可创建新的jQuery对象 $.noConflict()

jQuery遍历

祖先

• parent() 获取给定元素的直接父元素

• parents() 获取给定元素的所有祖先元素，直至文档根元素html

  允许参数，以过滤搜索祖先元素

• parentsUntil() 获取直至给定元素间的所有祖先元素

后代

• children() 获取给定元素的所有直接子元素

  可添加参数过滤搜索

• find() 获取给定元素的后代元素

  必须添加参数决定搜索范围

兄弟

• siblings() 获取给定元素的所有兄弟元素，不包括原给定元素
• next() 返回给定元素的下一个兄弟元素
• nextAll() 返回给定元素的之后所有兄弟元素
• nextUntil() 返回给定元素与给定参数间所有跟随的同胞元素
• prev()
• prevAll()
• prevUntil()

过滤

• first() 选取首个元素
• last() 选取最后一个元素
• eq() 选取指定下标的元素，接受参数代表下标
• filter() 选取符合给定规则的所有元素
• not() 选取不符合给定规则的所有元素

jQuery Ajax方法

load() 方法

从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);

必需的 URL 参数规定加载的 URL

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合

可选的 callback 参数是 load() 方法完成后所执行的函数名称

1
2
3
4
5
6
7
8
9

$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #p1");

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
        alert("外部内容加载成功！");
    if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
});

get() 方法

通过 HTTP GET 请求从服务器上请求数据

$.get(URL,callback);

必需的 URL 参数规定请求的 URL

可选的 callback 参数是请求成功后所执行的函数名

第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态

1

$.get("demo_test.asp",function(data,status){});

post() 方法

通过 HTTP POST 请求从服务器上请求数据

$.post(URL,data,callback);

ajax() 方法

通过 HTTP 请求加载远程数据

可自选请求参数

其他

链式编程

如$('div').width(100).height(100).css('backgroundColor', 'red');

返回值需均为相应的jQuery对象才能持续调用

end() 返回调用函数链的原始jQuery对象

each() 遍历jQuery对象集合，为各元素执行一次回调函数，回调函数第一个参数为下标，第二个·参数为对应元素的引用

git

版本控制

版本控制软件

操作简便|易于对比|易于回溯|不易丢失|协作方便

本地版本控制系统->集中化版本控制系统->分布式版本控制系统

git

快照：在原有文件基础上重新生成一个文件，类似于备份

操作：本地执行，云端同步

git 文件状态

• 未跟踪（untracked）未被 git 管理

• 未修改（unmodified）工作区文件内容与 git 仓库内文件相同

• 已修改（modified）表示修改了文件，但还没保存到 git 本地仓库中，自上次检出后，作了修改但还没有放到暂存区域

• 已暂存（staged）表示对一个已修改文件的当前版本做了标记以使之包含在下次提交的快照中，文件已修改并放入暂存区

• 已提交（committed）表示数据已经安全地保存在 git 仓库中，Git 目录中保存着特定版本的文件

git 项目阶段

• 工作区是对项目的某个版本独立提取出来的内容，供用户修改与使用

• 暂存区是一个文件，保存了下次将要提交的文件列表信息

• Git 仓库目录是 Git 用来保存项目的元数据和对象数据库的地方

git 全局配置

文件路径 C:/Users/用户名文件夹/.gitconfig 文件

查看所有全局配置项 git config --list --global

git 帮助

git help <verb>

git 初始化仓库

• 将尚未进行版本控制的本地目录转换为 Git 仓库

git init

• 从其它服务器克隆一个已存在的 Git 仓库

git clone <url> [<storagename>]

• 允许 https 协议等，以及 git 协议与 SSH 协议

git 文件操作

git status 检测文件所处状态

• git status -s

• git status –short

标记 A 表示新建的文件

标记 M 表示修改的文件

标记?? 表示未修改的文件

git diff 显示尚未暂存的改动

git add <filename> 开始跟踪新文件&将已跟踪新文件放至暂存区

git commit [-m "message"] 从暂存区提交更新至 git 仓库

​ git commit -a [-m "message"] 一次性将跟踪的文件暂存并提交

git checkout -- <filename> 撤销对文件的修改：将对应工作区文件修改还原成 git 仓库中保存的版本

git reset HEAD <filename> 从暂存区移除文件

git rm {-f|--cached} <filename> -f 从仓库与工作区移除文件:–cached 仅从仓库移除文件，但保留工作区文件

git mv <filefrom> <fileto> 移动文件或重命名文件

git 忽略文件

创建 .gitignore 的文件列出要忽略的文件的模式

• 所有空行或者以 # 开头的行都会被 Git 忽略
• 可以使用标准的 glob 模式匹配，它会递归地应用在整个工作区中
• 匹配模式可以以（/）开头防止递归
• 匹配模式可以以（/）结尾指定目录
• 要忽略指定模式以外的文件或目录，可以在模式前加上叹号（!）取反
  • glob 模式是指 shell 所使用的简化了的正则表达式
  • 星号（*）匹配零个或多个任意字符
  • [abc] 匹配任何一个列在方括号中的字符 （这个例子要么匹配一个 a，要么匹配一个 b，要么匹配一个 c）
  • 问号（?）只匹配一个任意字符；如果在方括号中使用短划线分隔两个字符， 表示所有在这两个字符范围内的都可以匹配（比如 [0-9] 表示匹配所有 0 到 9 的数字）
  • 使用两个星号（**）表示匹配任意中间目录，比如 a/**/z 可以匹配 a/z 、 a/b/z 或 a/b/c/z 等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 忽略所有的 .a 文件
*.a

# 但跟踪所有的 lib.a，即便你在前面忽略了 .a 文件
!lib.a

# 只忽略当前目录下的 TODO 文件，而不忽略 subdir/TODO
/TODO

# 忽略任何目录下名为 build 的文件夹
build/

# 忽略 doc/notes.txt，但不忽略 doc/server/arch.txt
doc/*.txt

# 忽略 doc/ 目录及其所有子目录下的 .pdf 文件
doc/**/*.pdf

参考链接

git 查看文件历史

git log

​ -<number> 显示指定的提交历史

按 q 退出

开源

开源：open source code

开源许可协议：open source license

​ GPL MIT 等

开源项目托管平台：github、gitlab、gitee

远程仓库访问方式

• HTTPS 无需配置，每次需输入账号密码

git remote add <本地版本库> <远程仓库url> git remote add origin gitutl-https
git push <远程主机名> <本地分支名>:<远程分支名> git push origin master

• SSH 需额外配置，每次无需输入账号密码

SSH key

• 个人私钥
• git 服务器公钥

分支

查看、创建、切换、合并、删除、跟踪、拉取

主分支 master
实际用于保存及记录整个项目已完成及审计的代码

功能分支：专门用于开发新功能的分支

查看分支

git branch

分支前的 * 代表当前分支

创建分支

git branch <branch-name>

相较于当前分支创建分支

创建分支时不改变原所在分支

切换分支

git checkout <new-branch-name>

快速创建切换分支

git checkout -b <new-branch-name>

合并分支

git merge <branch-name>

将指定分支合并到当前分支

若两分支存在分歧，需要主动处理冲突

删除分支

git branch -d <branch-name>

git branch -D <branch-name> 强制删除

推送分支至远程仓库

git push -u <remote-repository> <local-branch>:<remote-branch> 第一次

之后直接 git push 即可

查看远程仓库分支列表

git remote show <remote-repository>

跟踪[远程仓库]分支

git checkout <remote-branch>

git checkout <local-branch> <remote-repository>/<remote-branch> 同时重命名本地分支

拉取[远程仓库最新]分支

git pull 相较于当前分支

删除[远程仓库]分支

git push <remote-repository> --delete <remote-branch>

1. 样式继承&样式覆盖

CSS 为一个元素设置的某个样式，如果这个样式是允许继承的，那么这个样式也会应用到它的后代元素上

注意：不是所有样式都会被继承，只有可继承的样式才会从祖先元素基础
样式的继承性建议查阅相应元素的参考手册

当一个元素同时被应用上多个相同的样式属性时，浏览器必须从中选择一个属性值，这个过程就是样式覆盖

样式继承有如下的规则：

• 当元素继承的样式发生冲突时，从最近祖先继承的样式有效
• 继承的样式和元素自身设置的样式冲突时，自身设置的样式有效
• 元素自身设置的样式发生冲突时，样式权值高的有效

样式权值按如下的列表相加确定

• 内联样式： 1,0,0,0
• id 选择器： 0,1,0,0
• 类及伪类选择器： 0,0,1,0
• 标签及伪元素选择器： 0,0,0,1
• 通配选择器： 0,0,0,0

即：内联样式>>id选择器>>类及伪类选择器>>标签及伪元素选择器>>通配选择器

• 样式权值相同时，后设置的有效
• !important的样式属性不被覆盖（除非同样为 !important 时，后设置的起效）

可以使用!important来阻止样式被覆盖

注意：除非不得已，尽量避免使用!important

2. 文档流模型

（1）概念

网页是一个多层结构，通过 CSS 可以给每层设置样式，上层会覆盖下层的内容，覆盖的内容不会被用户看到

这些多层结构中，最底下的一层即为文档流，默认情况下元素都在文档流中排列

（2）元素在文档流中特点

• 块元素

在页面中独占一行

默认情况下，宽度会把父元素撑满，即宽度由父元素宽度决定

默认情况下，高度会被内容撑开，即高度由内容的高度决定

• 行内元素

不会在页面中独占一行，只占自身大小

行内元素在页面中从左至右排列，如果一行不能容下，则换到第二行继续自左往右排列，即会自动换行

默认情况下，宽度和高度都被内容撑开，即宽高均由内容决定

（3）元素脱离文档流特点

元素从文档流中脱离，不占据文档流中位置

元素脱离文档流后，无论块元素和行内元素，均会表现为块元素，有以下特点：

• 不会在页面中独占一行
• 宽高默认被内容撑开

设置 float、position、flex 等属性可使元素脱离文档流

3. 盒模型

（1）盒模型概念

所有 HTML 元素都可以视为一个盒子，在盒子模型中对页面的布局实际上就变成将不同的盒子摆放到不同位置

盒子模型包括：外边距、边框、内边距以及内容

• 内容 content 框的内容，其中显示子元素的内容
• 内边距 padding 内容周围的区域，内边距是透明的
• 边框 border 围绕内边距和内容的边框
• 外边距 margin 边界外与其他元素不覆盖的区域，外边距是透明的

（2）可见框概念

可见框即元素可以看到的区域，由内容区、边框、内边距组成，不包括外边距

4. 内容区-content

（1）width 属性及 height 属性

分别设置内容区的宽度与高度

可以取以下值：

• auto 让浏览器计算高度和宽度【默认】
• length 以 px 等单位定义高度或宽度
• % 以包含块的百分比定义高度或宽度
• initial 将高度或宽度设置为默认值
• inherit 从其父值继承高度或宽度

这也是大多数与长度<length>有关的属性的合法取值

（2）min-width 属性 min-height 属性及max-width 属性 max-height 属性

设置元素的最大/最小的宽度/高度

默认值为none，即表示忽略该属性

5. 内边距-padding

（1）padding 属性

设置四个方向内边距

（i）取值

长度单位，要求为正值

或取值为auto

（ii）值个数

可为1~4，不同数量下取值按如下情况所示

按顺时针顺序依次指定值

• 四个值：上 右 下 左 按顺序分别设置上边距，右边距，下边距，左边距
• 三个值：上 左右 下 按顺序分别设置上边距，左右边距，下边距
• 两个值：上下 左右 按顺序分别设置上下边距，左右边距
• 一个值：上下左右 同时设置上下左右边距

（2）padding-top、padding-right、padding-bottom、padding-left属性

单独设置某方向内边距

6. 边框-border

（1）border-style 属性

指定边框类型，必需，简写属性

（i）取值

• dotted 定义点线边框
• dashed 定义虚线边框
• solid 定义实线边框
• double 定义双边框
• none 定义无边框【默认】
• hidden 定义隐藏边框
• groove 定义 3D 坡口边框，效果取决于 border-color 值
• ridge 定义 3D 脊线边框，效果取决于 border-color 值
• inset 定义 3D inset 边框，效果取决于 border-color 值
• outset 定义 3D outset 边框，效果取决于 border-color 值

（ii）border-top-style、border-right-style、border-bottom-style、border-left-style属性

指定一个方向的边的边框类型

（2）border-width 属性

指定边框的宽度，简写属性

（i）取值

长度，只能为正值

亦可取预设值thin、medium【默认】、strong

（ii）border-top-width、border-right-width、border-bottom-width、border-left-width属性

指定一个方向的边的边框宽度

（3）border-color 属性

指定边框的颜色，简写属性

（i）取值

允许所有颜色模式，如rgb()等
亦可取transparent表示透明色

（ii）border-top-color、border-right-color、border-bottom-color、border-left-color属性

指定一个方向的边的边框颜色

（4）border属性

同时设置四条边框宽度、颜色、样式，是border-width、border-style 以及 border-color 的简写属性

（i）取值

border: width color style

如果不设置其中的某个值也是允许的

（ii）值个数

• 四个值：上 右 下 左 按顺序分别设置上边框，右边框，下边框，左边框
• 三个值：上 左右 下 按顺序分别设置上边框，左右边框，下边框
• 两个值：上下 左右 按顺序分别设置上下边框，左右边框
• 一个值：上下左右 同时设置上下左右边框

（5）border-top、border-right、border-bottom、border-left属性

同时设置一个方向的一条边框宽度、颜色、样式，简写属性

7. 外边距-margin

（1）margin属性

为元素的四周指定外边距的属性

（i）取值

长度单位，允许负值的使用
允许取值为auto

（ii）值个数

• 四个值：上 右 下 左 按顺序分别设置上边距，右边距，下边距，左边距
• 三个值：上 左右 下 按顺序分别设置上边距，左右边距，下边距
• 两个值：上下 左右 按顺序分别设置上下边距，左右边距
• 一个值：上下左右 同时设置上下左右边距

（2）margin-top、margin-right、margin-bottom、margin-left属性

为元素的四周分别指定外边距的属性

8. 块元素盒模型

拥有margin、border、padding、content等结构

（1）水平方向布局

一般而言，子元素在父元素内的元素总宽度应满足公式：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

若不成立，称为过度约束，此时遵循如下规则确定元素的实际宽度

• 如果七个值中没有 auto，则会调整 margin-right 的值使等式成立

比如子元素 width 超过父元素内容区大小，margin-right 会调整为负值，使子元素溢出父元素

• 如果 width、margin-left、margin-right中有一个设置为 auto，则会调整被设置为 auto 的那个值，使等式成立

比如 width 默认值为 auto，所以块元素默认宽会充满整个父元素

• 如果 width、margin-left、margin-right 中有两个及以上设置为 auto

如果 width 设置为固定值，margin-left 和 margin-right 设置为 auto，则同时调整 margin-left 与 margin-right 使等式成立，此时子元素居中
如果 width 设为 auto，则子元素 width 调为最大，其余被设置为 auto 的属性取值为 0

设置 margin: auto 是设置子元素在父元素内水平居中的一种常用方法

（2）垂直方向布局

一般而言，默认情况下父元素高度被内容撑开，子元素在父元素内的元素总高度应满足公式

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

若父元素设置了高度，且子元素高度大于父元素，此时公式不成立，称为溢出，此时子元素会从父元素溢出：

此时可设置overflow属性来处理溢出问题

（3）overflow属性

定义溢出元素内容区的内容的处理方式
是 overflow-x 与 overflow-y 的简写属性

（i）取值

• visible【默认】 内容不会被修剪，会呈现在元素框之外
• hidden 内容会被修剪，并且其余内容是不可见的
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（无论有无溢出都会产生滚动条）
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（有溢出才会产生滚动条）

（ii）overflow-x 与overflow-y属性

指定元素在x轴上或者y轴上对溢出元素内容区的内容的处理方式

9. 行内元素盒模型

行内元素盒模型的结构和块元素基本相同

但亦存在以下几点区别：

• 行内元素不支持设置 width 和 height，内容区宽高只由其内容决定
• 可以设置 border，但是垂直方向 border 不会影响布局
• 可以设置 padding，但是垂直方向 padding 不会影响布局
• 可以设置 margin，但是垂直方向 margin 不会影响布局

10. 盒子大小-box-sizing属性

默认情况下width属性及height属性指的是内容区的大小

box-sizing属性可以改变盒子尺寸计算方式

取值有

• content-box【默认值】 宽高用来设置内容区大小 width = content
• border-box 宽高用来设置盒子可见框的大小 width = content + padding + border

box-sizing: border-box 在前端开发中应用非常广泛，可以用于 控制盒子的可见区域大小

选择器

选择器用于选取需要设置样式的 HTML 元素

（1）简单选择器

（i）元素选择器

• 作用：根据元素名选中指定元素
• 语法：**elementname {}**

（ii）id 选择器

• 作用：根据元素 id 属性值选中一个元素
• 语法：**#idname {}**

（iii）类选择器

• 作用：根据元素的 class 属性值选中一组元素
• 语法：**.classname {}**

（iv）通配选择器

• 作用：选中页面中所有元素
• 语法：*** {}**

（2）复合选择器

（i）交集选择器

• 作用：选中同时符合多个条件的元素
• 语法：**_selector1selector2selector3 _{}**

注意：交集选择器中如果有元素选择器，必须以元素选择器开头

（ii）并集选择器

• 作用：同时选中多个选择器对应的元素
• 语法：**_selector1，selector2，selector3 _{}**

1
2
3
4
5
6
7
8
9
10
11
12

/*
 * 选择器1 * {}
 * 选择器2 span {}
 * 选择器3 .outer {}
 * 选择器4 #inner {}
 * 选择器5 span.inner {}
 * 选择器6 .outer, .inner {}
 */
<div class="outer">  /* 选中的选择器：1|3|6 */
  <span class="inner"></span>  /* 选中的选择器：1|2|5|6 */
  <div class="inner" id="inner"></div>  /* 选中的选择器：1|4|6 */
</div>

（3）关系选择器

关系选择器根据元素之间的关系选取元素，一般直系后代选择器与后代选择器使用的较多一些

（i）直系后代选择器

• 作用：选中指定父元素的指定子元素
• 语法：father > son

（ii）后代选择器

• 作用：选中指定元素的指定后代元素
• 语法：ancestor progeny

（iii）相邻兄弟选择器

• 作用：选择下一个相邻兄弟元素
• 语法：prior + next

注意：一定是选中下一个、相邻的兄弟弟元素

（iv）通用兄弟选择器

• 作用：选择之后所有兄弟元素，不包括自己本身
• 语法：elderbrother ~ youngerbrother

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<main>
  <p>我是p元素</p>
  <div>
    <span>span0</span>
  </div>
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
</main>

<style>
  /* 样式1 没有元素字体变红色 */
  p + span {
    color: red;
  }
  /* 样式2 span1 字体变红色 */
  div + span {
    color: red;
  }
  /* 样式3 span1、span2、span3 字体变红色 */
  p ~ span {
    color: red;
  }
  /* 样式4 span1、span2、span3 字体变红色 */
  main > span {
    color: red;
  }
  /* 样式5 span0、span1、span2、span3 字体变红色 */
  main span {
    color: red;
  }
</style>

（4）属性选择器

属性选择器根据 HTML 元素具有的 HTML 属性选取相应的元素

一般属性选择器使用相对较少，通常用于根据表单元素的type属性选取相应的元素以设置样式

以下 attribute 代表 HTML 属性，value 代表 HTML 属性值

（i）[attribute] 选择器

选取带有指定属性的元素

（ii）[attribute=”value”] 选择器

选取带有指定属性和值的元素（值必须是完整或单独的单词）

（iii）[attribute~=”value”] 选择器

选取属性值包含指定词的元素

（iv）[attribute|=”value”] 选择器

选取指定属性以指定值开头的元素（值必须是完整或单独的单词）

（v）[attribute^=”value”] 选择器

选取指定属性以指定值开头的元素（值不必是完整单词）

（vi）[attribute$=”value”] 选择器

选取指定属性以指定值结尾的元素（值不必是完整单词）

（vii）[attribute*=”value”] 选择器

选取属性值包含指定词的元素（值不必是完整单词）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

a {
  color: blue;
}

/* 包含href属性的超链接元素 */
a[href] {
  background-color: white;
}

/* href属性以 "#" 开头的超链接元素 */
a[href^="#"] {
  background-color: gold;
}

/* href属性包含 "example" 的超链接元素 */
a[href*="example"] {
  background-color: silver;
}

/* href属性包含 "insensitive" 的超链接元素,，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* href属性包含 "cAsE" 的超链接元素，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}

/* href属性以 ".org" 结尾的超链接元素 */
a[href$=".org"] {
  color: red;
}

（5）伪类选择器

伪类选择器是用于选择处于特定状态的元素的选择器

（i）子元素的伪类（序号）

• :first-child 选中父元素的第一个子元素
• :last-child 选中父元素的最后一个子元素
• :nth-child() 选中父元素的第 n 个子元素

特殊值：

• n 选中父元素的所有子元素
• 2n 或 even 选中父元素的所有偶数个子元素
• 2n+1 或 odd 选中父元素的所有奇数个子元素
• :nth-last-child() 选中父元素从末尾开始数的第n个元素
• :only-child 选取没有任何兄弟元素的元素

（_以上伪类根据父元素的所有子元素排序计数_）

（ii）子元素的伪类（类型）

• :first-of-type 选中父元素中第一个同类的子元素
• :last-of-type 选中父元素中最后一个同类的子元素
• :nth-of-type() 选中父元素中第 n 个同类的子元素
• :nth-last-of-type() 选中父元素中第 n 个同类的子元素
• :only-of-type 选取没有任何相同类型的兄弟元素的元素

（_以上伪类根据父元素的同类子元素排序计数_）

（iii）超链接的伪类

建议按LVHA 顺序 :link — :visited — :hover — :active 声明超链接样式，否则可能会覆盖预期的样式

• :link 选取表示没访问过的链接（正常链接）
• :visited 选取表示访问过的链接

由于隐私原因，这个伪类只能修改链接的文字颜色、背景颜色、边框颜色、轮廓颜色，且无法修改链接的透明度

• :any-link 选取任一具有href属性的链接

实际效果相当于同时匹配 :link 或 :visited

（iv）用户交互相关伪类

• :hover 选取处于鼠标移入状态的元素

注意这个伪类在触摸屏上使用会存在一些问题，不建议在触摸屏设备上使用

• :active 选取表示鼠标点击状态的元素，即鼠标点击至松开之间的阶段

（v）表单相关伪类

• :checked 选取被选中的input:radio元素或input:checkbox元素或option元素
• :focus 选取获得焦点的input元素

常见的情形如表单输入时显示提示性的样式

• :focus-within 选取自身或自身子元素获得焦点的元素

相当于其自身或其子元素匹配到:focus伪类的元素

• :indeterminate 选取处于不确定状态的input元素

不确定状态如存在未选中的相同name的input:radio元素或input:checkbox元素的indeterminate设定为true或不确定的progress元素

• :default 选取默认状态的input元素

允许在input:radio元素或input:checkbox元素或option元素或button元素上使用

• :placeholder-shown 选取placeholder文本起效时的input或textarea元素
• :disabled 选取被禁用的input元素
• :enabled 选取被启用的input元素

以上两个属性可能需要使用input元素或form元素的disabled属性

• :in-range 选取值在规定范围内的input元素
• :out-of-range 选取值超出规定范围内的input元素

一般需要规定input的type属性为number
以上两个属性需要规定input元素的min属性或max属性以确定数值范围，否则没有意义

• :invalid 选取具有非法值的input元素
• :valid 选取具有合法值的input元素或form元素
• :optional 选取非必须的input元素或select元素或textarea元素
• :required 选取必须的input元素或select元素或textarea元素

以上两个属性可能需要使用input元素或form元素的required属性

• :read-only 选取规定只读的元素
• :read-write 选取规定可写的元素

以上两个属性可能需要使用表单元素的readonly属性或其他元素的contenteditable属性

（vi）类函数伪类

• :not() 接收一个选择器参数，将符合条件的元素从原选择器选中元素中去除
• :is() 接收任意数量的选择器参数，匹配符合任一选择器的元素
• :where() 接收任意数量的选择器参数，匹配符合任一选择器的元素

:where() 和 :is() 的不同之处在于:where() 的优先级总是为 0 而 :is() 的优先级总是由它的选择器列表中优先级最高的选择器决定的

（vii）其他伪类

• :root 选取文档的根元素

通常网页中指html元素，且优先级较高
通常用于声明全局 CSS 变量

• :scope 匹配选择器应匹配的参考点的元素

在样式表使用时，等价于:root
在 DOM API 使用时，等价于调用 API 的元素

• :target 选取唯一的页面元素(目标元素)，其id 与当前URL片段匹配

如https://www.baidu.com.html#p2，:target可以匹配到id为p2的任意类型的元素

• :empty 匹配没有子元素或内部没有文本的每个元素
• :lang() 根据元素的语言属性选取元素

lang可能由元素的 lang 属性决定或文档head标签内的 meta 标签规定的 lang 属性决定

• :fullscreen 选取处于全屏状态的元素
• :defined 选取已定义的元素：包括原生元素以及自定义元素

可以用于控制复杂的自定义组件加载完成前的显示，使其仅在加载完成后显示

（6）伪元素选择器

伪元素选择器用于选取页面中一些特殊的并不存在的元素或是特殊的位置

• ::first-letter 选择文本第一个字母

只适用于块状元素

• ::first-line 选择文本第一行
• ::placeholder 选取表单元素的placeholder属性规定的文本
• ::selection 表示选中的内容
• ::marker 选取列表项目的符号或是数字

注意：以上四个伪元素选择器仅允许使用特定的CSS属性

• ::before 选择元素的开始，可以在元素开始插入一些内容

必须结合 content 属性使用

• ::after 选择元素的最后，可以在元素结束插入一些内容

必须结合 content 属性使用

• ::backdrop 选取全屏模式下的元素的背景，会在当前元素之下但在其他元素之上

可以用于在一些元素的全屏模式下修改默认的背景表现

1. CSS简介

CSS 即层叠样式表 (Cascading Style Sheets)，用于设置网页中元素的样式
最新的CSS版本为CSS3

2. CSS 基本语法

（1）CSS 结构

• 选择器 选择器用于选中页面中指定元素
• 声名块 声名块内包含为元素设定的样式
  • 声名 声名组成声名块，声明是键值对的形式

（2）CSS 注释

1
2
3
4
5

/* 这是一条CSS注释 */

/*
 * 这也是一条CSS注释
 */

可以在代码中的任何位置添加注释，注释可以横跨多行

（3）HTMLclass属性与id属性

**class** 属性规定元素的一个或多个 class 名称
**id** 属性规定元素的唯一 id 值
两者都是 HTML 元素的全局属性
区别在于，同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

（4）CSS 样式表插入位置

有三种插入样式表的方法：

• 内联样式，在标签内通过 style 属性设置元素样式
• 内部样式表，将样式写在 head 标签的 style 标签里
• 外部样式表，在外部 CSS 文件中写样式，再通过 link 标签导入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML>

<html>

  <head>
    <meta charset="utf-8">
    <title>css</title>

    <!-- 外部样式表 -->
    <link rel="stylesheet" type="text/css" href="example.css">

    <!-- 内部样式表 -->
    <style type="text/css">
      div {
        width: 100px;
      }
    </style>
  </head>

  <body>
    <!-- 内联样式 -->
    <div class="e" id="e0" style="height: 100%"></div>
  </body>

</html>

3. CSS 颜色

在HTML中，我们已经了解了一些颜色使用方式，如

• 颜色关键字，如 white 等
• 十六进制颜色，如 #de34e3
• rgb 函数及 rgba 函数，如 rgb(12,34,250)

与之对应的是RGB颜色模式，取值均从0至255

• 红色（red）
• 绿色（green）
• 蓝色（blue）

以下是其他一些在CSS中的颜色使用方法

• hsl函数及hsla函数 hsl(hue, saturation, lightness) hsla(hue, saturation, lightness, alpha)

与之对应的是HSL颜色模式

• 色相（hue）是色轮上从 0 到 360 的度数，0 是红色，120 是绿色，240 是蓝色

• 饱和度（saturation）是一个百分比值，可以认为是颜色的强度，0％ 表示灰色阴影，而 100％ 是全色

• 亮度（lightness）也是百分比，可以认为是应为颜色赋多少光，0％ 是黑色，50％ 是既不明也不暗，100％是白色

• transparent 关键字 | 指定透明色

• currentColor 关键字 | 指定从当前元素的文字颜色获取当前属性应指定的颜色

4. CSS 单位

许多 CSS 属性接受“长度”值，长度是一个后面跟着长度单位的数字，数字和单位之间不能出现空格；但若数字为 0，则可以省略单位

长度单位有两种，分别是绝对单位和相对单位

• 绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸
• 相对长度单位规定相对于另一个长度属性的长度

其中最常用的是px

1. 超链接标签及媒体元素标签

（1）超链接标签<a>

简介

超链接可以用于跳转到新的文档或网页或者当前文档中的某个部分，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，一块区域等等
超链接标签内可以包裹其他任意标签（超链接标签本身除外）

属性

• href 定义指向一个文件或是一个网址的 url 或是一个 url 片段
• target 定义超链接的跳转方式
  • _self：在当前页面中打开超链接【默认值】
  • _blank：在新页面中打开超链接
• download 定义下载 url 指向的文件而不是打开链接，会提示用户保存该文件

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 跳转到网页 -->
<a href="https://baidu.com">百度</a>

<!-- 新窗口打开网页 -->
<a href="https://baidu.com" target="_blank">百度</a>

<!-- 链接到同目录下另一个 html 文件 -->
<a href="another.html">HTML</a>

<!-- 页面书签 -->
<a name="label">看这里</a>
<a href="#label">书签</a>

<!-- 页面书签：利用元素id属性实现 -->
<p id="label">看这里</p>
<a href="#label">书签</a>
<!-- 特别的：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端，不会产生任何错误 -->
<a href="#">去顶部</a>

<!-- # 可作为超链接路径占位符 -->
<a href="#">我是假的超链接</a>
<!-- 也可用 javascript 方式占位 -->
<a href="javascript:;">我是假的超链接</a>

<!-- 发送电子邮件：将用户的电子邮件程序打开来发送新邮件 -->
<a href="mailto:nowhere@mozilla.org">Send email to us.</a>

（2）图像标签<img>

简介

图像标签可以用于向网页中嵌入一幅图像

属性

• src 规定图片的 url 路径
• alt 规定图片的描述
  • 当图片无法加载时会显示 alt 属性内的描述
  • 同时屏幕阅读器会将 alt 属性内的描述读给需要使用阅读器的使用者听，便于理解图像的含义
  • 搜索引擎会根据 alt 中内容识别图片，不给出 alt 属性不会收录图片
  • 空alt属性表明该图像不是内容的关键部分
  • 建议：alt 属性的值应能够清晰、简洁地描述图像的内容而不仅仅是图片文件名或是用于体现图片的存在
• width 及 height 指定图片的宽与高
  • 图片实行的是等比例缩放
  • 建议仅指定 width 和 height 属性中其一，不同时使用，否则可能会扭曲图片的比例
  • 建议仅使用像素px作为图片标签的单位，不推荐使用百分比作为图片标签的单位
  • 可以用CSS的width属性和height属性替代
• decoding 规定图片的解码方式
  • sync 同步解码图片，会阻碍其他内容的显示，可能会导致页面渲染时间增长
  • async 异步解码图片，不会阻碍其他内容显示
  • auto 浏览器自动决定 【默认值】
• importance 规定图片加载时的优先级
  • high 规定图片加载优先级较高
  • low 规定图片加载优先级较低，图片可能会延后显示
  • auto 图片加载优先级由浏览器自动决定 【默认值】
• loading 规定图片的加载方式
  • eager 立即加载图片 【默认值】
  • lazy 延迟加载图片，直至其与浏览器视窗接近一定距离再开始显示，可以加快网页页面的显示

图片格式

• jpeg（jpg）
  • 支持颜色比较丰富，不支持透明效果，不支持动图
  • 一般用来显示照片
• gif
  • 支持的颜色比较少，支持简单透明，支持动图
  • 颜色单一的图片，动图
• png
  • 支持颜色丰富，支持复杂透明，不支持动图
  • 颜色丰富、复杂透明图片（转为网页而生）
• webp
  • 新推出的专用于表示网页中表示图片的格式，具备其他图片格式的所有优点，而且图片特别小
  • 缺点：兼容性较弱（IE 等）

（3）音频标签<audio>

简介

用于向当前页面嵌入一个外部音频文件

属性

• src 音频的 url 路径
• controls 规定向用户提供显示控制元件，比如播放按钮
  • 唯一合法取值 controls
• loop 规定音频应循环播放
  • 唯一合法取值 loop
• autoplay 规定音频应自动播放，无需等待整个音频文件加载完成
  • 唯一合法取值 autoplay
• muted 规定音频是否静音
  • 默认取值为 false，即不静音；true 代表静音
• preload 建议音频的加载方式
  • none 提示浏览器无需缓存音频
  • metadata 提示浏览器获取音频元信息但不加载
  • auto 提示浏览器需缓存音频
  • 空字符串 等效于auto属性

其他

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

1
2
3
4
5
6
7
8
9
10
11
12

<!-- 常规用法 -->
<audio src="someaudio.wav" controls="controls" autoplay="autoplay" loop="loop">
  您的浏览器不支持 audio 标签
</audio>

<!-- 考虑音频文件兼容性的写法 -->
<!-- 仅做了解即可 -->
<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>

（4）视频标签<video>

简介

用于向当前页面引入一个外部视频文件，也可以用来引入一个外部音频文件（但建议使用 audio 标签）

属性

• src 规定视频 url 路径
• controls 规定向用户显示控制元件，比如播放按钮
  • 唯一合法取值 controls
• loop 规定视频循环播放
  • 唯一合法取值 loop
• autoplay 规定视频应自动播放，无需等待缓存完成
  • 唯一合法取值 autoplay
• width height 规定视频播放器宽度及高度
  • 单位是像素
  • 推荐在使用<video>标签时都规定视频播放器的高度和宽度
• muted 规定视频是否默认静音
  • 默认取值为 false，即不静音；true 代表静音
• poster 规定视频的海报帧，默认未指定时使用视频的第一帧替代
• preload 建议视频的加载方式
  • none 提示浏览器无需缓存视频
  • metadata 提示浏览器获取视频元信息但不加载
  • auto 提示浏览器需缓存视频
  • 空字符串 等效于auto属性

其他

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- 建议用法 -->
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

<!-- 考虑兼容 IE 8 -->
<!-- 仅做了解即可 -->
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

2. 表格

（1）表格简介

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

1
2
3
4
5
6
7
8
9
10
11

<!-- 一个简单的表格示例 -->
<table>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

效果如图

（2）<th> 标签

表格的表头单元格使用 标签进行定义

一般表头会显示为粗体居中的文本

（3）合并单元格

colspan 属性规定单元格可横跨的列数

rowspan 属性规定单元格可横跨的行数

以上两个属性具有最大值 65534，超出的值会自动当作 65534 处理

（4）<caption> 标签

<caption> 标签用于定义表格标题

<caption> 标签必须紧随 table 标签之后。只能对每个表格定义一个标题，通常标题会居中于表格主体内容之上

（5）空单元格问题

如果某个单元格是空的（没有内容），部分浏览器可能无法显示出这个单元格的边框，为此可以在空单元格中添加一个空格占位符从而避免这种状况出现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table border="1">
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    <td>row 1, cell 3</td>
  </tr>
  <tr>
    <td colspan="2">row 2, cell 1&2</td>
    <td rowspan="2">row 2&3, cell 3</td>
  </tr>
  <tr>
    <td>row 3, cell 1</td>
    <td>row 3, cell 2</td>
  </tr>
</table>

（6）<thead>标签及<tbody>标签及<tfoot>标签

这些标签常作为语义化标签

<thead>标签定义表格的列首行
<tbody>标签定义表格的内容主体行
<tfoot>标签定义表格的汇总行

3. 列表

（1）无序列表

无序列表是一个项目的列表，列表项使用粗体圆点进行标记
无序列表使用 <ul> 标签定义，各列表项使用 <li> 定义

• type 规定无序列表的序号类型

注意：不推荐使用该 HTML 属性，而是建议使用 CSS 的 list-style-type 属性替代

1
2
3
4
5

<ul>
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ul>

（2）有序列表

有序列表也是一列项目，列表项目使用数字进行标记
有序列表使用 <ol> 标签定义，各列表项使用 <li> 标签定义
以下属性是 <ol> 标签的 HTML 属性

• reversed 规定有序列表的项是否反向排列，即序号自大而小排列

• start 规定有序列表的起始项的序号，默认值是 1

• type 规定有序列表的序号的种类，默认值是 1

  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号
  • 注意：不推荐使用该 HTML 属性，而是建议使用 CSS 的 list-style-type 属性替代
    以下属性是 <li> 标签在<ol> 标签内可选的 HTML 属性

• value 规定项的序号，只允许使用数字，其后的项会从设置的该项的序号开始计数

1
2
3
4
5

<ol>
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ol>

（3）自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表使用 <dl> 标签定义，各自定义列表项使用 <dt>定义 ，各自定义列表项的定义使用<dd> 定义

1
2
3
4
5

<dl>
  <dt>结构</dt>
  <dd>结构表示网页结构</dd>
  <dd>规定网页中哪里是标题，哪里是段落</dd>
</dl>

（4）列表的使用

实际用的时候直接用列表原生样式比较少（由于样式比较简陋）
使用时更主要是使用其代表的结构和语义
其中无序列表用的比较多，多用于网页导航栏（nav），或者侧边栏等地方；自定义列表可以实现下拉框
另外，列表允许互相嵌套

4. 表单

HTML 表单用于收集不同类型的用户输入并发送给服务器

（1）<form> 标签

<form> 标签用于为用户输入创建 HTML 表单

建议：所有的表单元素都应当包含于<form> 标签内

• name 属性 规定表单的名称

该属性的值必须是独有的值且不能是空字符串

另外，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，所以一般收集信息的_表单元素_都应设置 name 属性

• action 属性 规定当提交表单时，向何处发送表单数据，即发送信息的目标服务器的 URL
• method 属性 规定如何发送表单数据，即HTTP 请求方法
  • 取值：’post’ 或 ‘get’等
• target 属性 规定在提交表单信息后如何显示响应信息
  • _self 在当前的浏览上下文加载
  • _blank 在新的浏览上下文加载
• autocomplete属性 建议浏览器是否应自动补全表单元素内容
  • on 开启
  • off 关闭
  • 该属性的效果取决于浏览器如何处理该属性
• novalidate属性 规定浏览器提交表单前是否应验证表单元素内容的合法性
  • 唯一取值为 novalidate

（2）表单输入元素

<input> 标签用于搜集用户信息

根据不同的 type 属性值，输入字段可以拥有非常非常多样的形式

• type 属性 规定 input 元素的类型
  • （以下标粗的是推荐掌握的）
  • button 定义按钮（通常用于通过 JavaScript 启动脚本）
  • checkbox 定义复选框
  • file 定义输入字段和 “浏览”按钮，用于文件上传
  • hidden 定义隐藏的输入字段
  • image 定义图像形式的提交按钮
  • password 定义密码字段，该字段中的字符会被掩码
  • radio 定义单选按钮
  • reset 定义重置按钮（会清除表单中的所有数据）
  • submit 定义提交按钮（会把表单数据发送到服务器）
  • text 定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符
  • number 定义输入数字的控件
  • range 定义输入数字的滚动条
  • tel 定义输入电话号码的控件
  • email 定义输入电子邮件地址的控件
  • url 定义输入 url 的控件
  • color 定义指定颜色的控件
  • month 定义输入日期-年月的控件
  • date 定义输入日期-年月日的控件
  • datetime-local 定义输入日期时间的控件
  • time 定义输入时间的控件
  • week 定义输入日期-年与周数的控件
  • search 定义用于搜索字符串的单行文字区域
• value 属性 规定 input 元素的值，对不同的 input 元素会有不同的效果
• disabled 属性 规定 input 元素是否可使用
• placeholder 属性 规定 input 元素输入为空且未获得焦点时控件显示的内容
• spellcheck 属性 规定是否应检测输入的拼写语法
• required 属性 规定 input 元素是必须的且应检查值的合法性

（仅对 password, search, tel, text, url 有效）

• checked 属性 规定 input 元素是否初始时应被选中

（仅对 radio、checked 有效）

• autofocus 属性 规定 input 元素在加载后自动聚焦
• autocomplete 属性 建议 input 元素应使用自动填充功能
• multiple 属性 规定可选择多个选项

（仅对 email file 有效）
更多 input 元素的 HTML 属性，可以参考 链接

（3）下拉列表

<select> 标签用于定义下拉列表

列表选项应使用 <option> 元素定义，通常会把首个选项显示为被选选项，但可以通过对特定的 <option> 元素添加 selected 属性来定义预定义选项
select 标签拥有 autocomplete、autofocus、disabled、multiple、required 等属性

option 标签拥有 disabled、value 等属性，其中若 value 属性未指定值则默认是元素的文本内容

1
2
3
4
5

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
</select>

（4）文本域

<textarea> 标签定义多行输入字段（即文本域）

• autocomplete、autofocus、disabled、value 等属性
• cols 属性 和 rows 属性规定文本可见宽度及高度，推荐使用 CSS 选择器替代

（5）按钮

<button> 标签定义可点击的按钮

• type属性 规定 button 的类型
  • 取值可为：button reset submit
• autocomplete、autofocus、disabled、maxlength、minlength、placeholder、required、value 等属性

效果同相同type属性取值的 <input> 标签，但可以在 button 标签内放置更多的元素因而可以有更加多样的样式表现

注意：请始终应为按钮规定 type 属性，因为其默认值在不同浏览器中不同

（6）<label> 标签

标签为 input 元素定义标注

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
标签的 for 属性应当与相关元素的 id 属性相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- 参考代码 -->
<form method="post" action="#" name="post">
  <input type="text" name="text" maxlength="25" /> <br />
  <input type="password" name="password" /> <br />
  <input type="radio" name="radio" checked />r <br />
  <input type="checkbox" name="checkbox" />c1 <br />
  <input type="checkbox" name="checkbox" />c2 <br />
  <input type="button" value="按钮" /> <br />
  <input type="submit" /> <br />
  <input type="reset" /> <br />
  <input type="file" name="file" accept="image/jpg" /> <br />
  <input
    type="image"
    name="image"
    src="https://www.xidian.edu.cn/__local/C/BD/8E/B4E1319F602F3F83CF5538DDABD_CA336AC2_43244.jpg"
    alt=""
    width="100"
  />
  <br />
  <input type="hidden" /> <br />
  <hr />

  <select name="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
  </select>
  <br />

  <textarea name="textarea" placeholder="..." cols="20" rows="20"></textarea>
  <br />
</form>

参考效果

5. 内联框架

iframe 用于在网页内嵌入另外一个网页

1

<iframe src="URL"></iframe>

• src 属性 设置内联网页的 url
• width 属性 和 height 属性 设置内联框架的宽度和高度

实际使用内联框架情况比较少见，常常是用来引用 bilibili 播放器等开放资源，如

1
2
3
4
5
6
7
8
9

<iframe
  src="//player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen="true"
>
</iframe>