> For the complete documentation index, see [llms.txt](https://wallleap.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wallleap.gitbook.io/blog/ji-shu-za-tan/html-zhi-shi-dian-da-quan.md).
# HTML 知识点大全
HTML 搭建网页的结构，相当于人体骨架
### 一、HTML 简介
#### 1、HTML
全称为超文本标记语言（Hypetext Markup Language）
* 其中超文本是相对纯文本来说的，HTML 除了纯文本内容（文字、字符）还可以包括超链接、图片、音频、视频
* 负责网页三要素中的结构
* 使用标签(记)的形式来标识网页中的不同组成部分`<标签名>`
* 开始标签 ``，结束标签 ` `
* 超文本标识——超链接、图片等
#### 2、网页标准格式
一个简单的网页可以只有文本内容，也就是内容只写入纯文本，文件名后缀为 `.html` 或 `.htm`，浏览器将会把文本内容自动加到 `body` 标签中，基本内容如下
* `` 根标签，有且只有一个，网页内容写到里面
* html 两个子标签：
* `` 设置网页头部信息 不会在网页中直接显示 给浏览器看 解析网页
* `` 网页主体 页面中可见部分写在这
* `head` 子标签：
* `网页标题
网页正文
```
* Doctype 文档声明，必须放在 html 标签前面，且之前不能放置内容，即使是注释
* html、head、body、title 根标签、头部标签、主体标签、网页标题，html 中的 lang 属性规定元素内容的语言，当然，这个属性其他标签也有
* meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，这里charset设定的字符集为 UTF-8，viewport 主要针对移动端
### 三、语法规范
* HTML 中不区分大小写，一般使用小写
* 注释不能嵌套
* 标签必须结构完整，要么成对出现，要么自结束标签(浏览器尽最大努力正确解析页面，修正不符合语法规范的内容，但是有些情况会修正错)
* HTML 标签可以嵌套，但是不能交叉嵌套
* 属性必须有值，且值必须加引号(单引号、双引号都可以)
### 四、概念
#### 1、标记
又称标签，标签注重的是语义化，即什么标签做什么事（比如一个标题那么就用 `h$` 包裹）
#### 2、元素
一个完整的标签（包含标签括起来的内容）
#### 3、标签分类
（1）根据是否有结束标签
* 单标签：又称自结束标签，例如 `一级标题 `
（2）根据内容是否可替换
* 替换，例如图片标签中没有内容，但是它会被 `src` 中图片替换
* 非替换，常规的文本相关的标签，标签中是什么内容就显示什么内容
（3）根据元素中是否有内容
* 有内容：有结束标签，内容放在开始标签和结束标签中
* 空元素：没有闭合的标签，例如后面讲的 link、hr、br、img 等标签
（4）根据显示模式（这个需要掌握，一般说 HTML 标签，就按这个分）
* 行内元素：`b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bbdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea`——只占据它对应标签的边框所包含的空间
* 块级元素：`address、article、aside、audio、blockquote、canvas、dd、div、dl、fieldset、figcaption、figure、footer、form、h1-6、header、hgroup、hr、noscript、ol、output、p、pre、section、table、tfoot、ul、video`——独占一行
* 行内块元素：`input、td`
这个是常用的分类（然而 MDN 中并没有分行块元素），CSS 中还会再提到
可以看下[HTML行内元素、块状元素、行内块状元素的区别](https://blog.csdn.net/yayedecsdn/article/details/100864500)标签，[HTML元素分类](https://blog.csdn.net/COCOLI_BK/article/details/85553078)特点
注意：img 和 button 标签虽然都是行内标签，但是他们自身有个特性，设置的宽高是能生效的
#### 4、注释
HTML 文档中的注释使用 `` 包裹，写在这里面的内容浏览器能够识别，但是不会在页面中渲染显示出来
```html
```
#### 5、属性
标签的属性（开始标签中添加 `属性名=”属性值”`）
例如：
```html
文字
```
* `p` 就是标签名，这是一个段落标签
* `align`、`style` 就是这个标签的属性名
* 属性名等号后的就是属性值，属性值需要用引号引起来，属性名和属性值一般成对出现（如果属性值为 BOOL 类型，有些可以省略属性值，只写属性名）
* 常见的全局属性
* `lang` 属性
* `title` 属性
* `id`
* `class`
#### 6、路径
* 绝对路径：相对于根目录，`/目录`
* **相对路径**：相对于当前资源所在目录的位置
* `../` 上层路径
* `./` 当前路径
* `目录/` 下层
eg：
```
- /
- img
- picture1.webp
- css
- base.css
- index.css
- js
- script.js
- html
- blog.html
- favicon.ico
- index.html
```
* `index.html` 中引用 `script.js` —— `./js/script.js` 或者 `js/script.js`
* `index.html` 中引用 `favicon.ico` —— `/favicon.ico`，一般都是放在根目录，引用的时候使用绝对目录
* `blog.html` 中引用 `picture1.webp` —— `../img/picture1.webp`
#### 7、进制
满几进一
* 二进制：满二进一，由 0、1 组成，例如 `11111110` 这八位表示 `2^0^ *0+2^1^ *1+2^2^+2^3^+2^4^+2^5^+2^6^+2^7^`，即十进制 254
* 八进制：满八进一，由 0\~7 组成，例如 `O12` 表示十进制 10（`8^0^*2+8^1^*1`）
* 十进制：满十进一，由 0\~9 组成
* 十六进制：由 `0~9、A~F` 组成，例如 `oX1e` 表示十进制 30
#### 8、单位
* 1，看情况，有的是 1=100%，有的 1 指的是 1px
* % 百分比，相同百分比参照物不同，得到的结果不同
* px 像素，有物理像素、CSS 像素、设备像素
* vw/vh 1vw 等于视口宽/高度的 1%
* em 1em 为一个字体大小
* rem 根标签的字体大小
### 五、标签
#### 1、根标签 `html`
一个 HTML 文档的根（顶级元素），所以它也被称为*根元素*。所有其他元素必须是此元素的后代。
通过 `lang` 属性指定整个页面的语言
```html
……
```
#### 2、头标签 `head`
规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
* `title`：网页标题
```html
网页标题
```
* `meta`： 设置网页元信息（meta-information），比如网页字符集、针对搜索引擎和更新频度的描述和关键词，是一个单标签：
* 编码
* 乱码问题原因：计算机只认识 0、1，计算机中保存的内容需要转化为二进制编码来保存，读取内容时需要转换成正确的内容----编码、解码 编码和解码采用的字符集不同
* 常见字符集：ASCII、ISO-8859-1、GBK、GB2312（中文系统的默认编码）、UTF-8（万国码）
* 解决：在中文系统的浏览器中，默认的都是 GB2312 编码，更改编码 Unicode，解码 head 中告诉浏览采用的编码字符集
```html
`元素中定义脚本未被执行时的替代内容。
* `script`：HTML `
```
* 方法二：引入第三方插件 `html5shiv.min.js`
```html
```
#### 2、列表
HTML5 中，对 ol、dl 进行了改良
* `ol`：添加了 `start`、`reversed` 属性
* `start`：可以指定列表编号从多少开始
* `reversed`：列表反向排序
```html
1
2
3
列表值1
列表值2
列表值3
列表值4
列表值5
```
* `dl`：重新定义，`dl` 标签包含多个带名字列表项；每一项包含至少一条带名字的`dt` 元素，用来表示术语；`dt` 后紧跟一个或多个 `dd` 元素，用来表示定义。在一个元素内不允许有相同名字的 `dt`元素，不允许有重复的术语。
* 可以用于解释术语
```html
RSS RSS也叫聚合RSS，是在线共享内容的一种简易方式(也叫聚合内容)……
博客 博客，又译为网络日志，部落格或部落阁等，是一种通常由个人管理……
```
* 可以表示辅助信息
```html
作者
xxx
出版社
xxx出版社
类别
文学
```
#### 3、表单
(1) 表单新增的 `type` 属性
* `email` 提供了默认的电子邮箱的完整验证，要求表单值必须包含 `@` 符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交（submit）
```html
邮箱：
网址：
```
```html
总金额：￥100.00
```
(4) 新增的表单事件
* `oninput`：监听当前指定元素内容的改变，只要\*\*内容改变(添加内容/删除内容)\*\*就会触发这个事件（鼠标粘贴的也能触发）
* 对比：`onkeyup`：**键盘弹起**的时候触发，每一个键的弹起都会触发一次
* `oninvalid`：当验证不通过时触发
```html
```
#### 4、进度条
* `progress`
* max：最大值
* value：当前进度值
* `meter`度量器——衡量当前进度值
* high：规定的较高的值
* low：规定的较低的值
* max：最大值
* min：最小值
* value：当前度量值
```html
您的浏览器不支持视频播放，请更换浏览器！
```
### 八、H5 中的 DOM 操作
#### 1、获取 DOM 元素
query：查询 selector：选择器
* `document.querySelector()` 只能获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素
* `document.querySelectorAll()` 获取满足条件的所有元素——元素数组
#### 2、操作类样式
`classList` 当前元素的所有样式列表——数组
* `.add` 为元素添加指定类名，一次只能添加一个
* `.remove` 为元素溢出指定名称的类样式，一次只能移除一个
* `.toggle` 切换元素的样式，如果元素之前没有指定名称的样式则添加，如果有则移除
* `.contains` 判断元素是否包含指定名称的样式，返回 true/false
```javascript
document.querySelector(‘li’).classList.add(‘red’)
document.querySelectorAll(‘li’)[1].classList.remove(‘blue’)
document.querySelectorAll(‘li’)[2].classList.toggle(‘green’)
console.log(document.querySelectorAll(‘li’)[2].classList.contains(‘green’))
console.log(document.querySelectorAll(‘li’)[2].classList.item(0))
```
以前：
```javascript
document.querySelector(‘li’).className=‘red underline’
```
#### 3、自定义属性
定义：
* `data-` 开头
* `data-` 后必须至少有一个字符，多个单词使用-连接
* 建议小写、无特殊符号、非纯数字
```html
// 定义 data-单词-单词
test
```
### 九、常用 API
#### 1、网络状态改变事件
* ononline：网络连通的时候触发这个事件
* onoffline：网络断开时触发
```javascript
// window.ononline = function () {}
window.addEventListener("online", function(){
// 操作
alert('网络连通了~')
})
// window.onoffline = function(){}
window.addEventListener("offline", function(){
// 操作
alert('网络断开了~')
})
```
#### 2、全屏接口的使用
* requireFullscreen()：开启全屏显示
* 不同浏览器需要添加不同的前缀：Chrome: webkit fireFox: moz ie: ms opera: o
* cancelFullScreen()：退出全屏显示 只能使用document来实现
* fullscreenElement：是否是全屏状态 只能使用document来实现
```html
```
#### 3、文件读取 API
FileReader：读取文件内容
* readAsText()：读取文本文件（可以使用Txt打开的文件），返回文本字符串，默认编码是 UTF-8
* readAsBinaryString()：读取任意类型的文件。返回二进制字符串，这个方法不是用来读取文件展示给用户的，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
* readAsDataURL()：没有返回值，参数是文件
读取文件获取一段以 data 开头的字符串，这段字符串的本质就是 DataURL。DataURL 是一种将文件（这个文件一般就是指图像或者能够嵌入到文档的文件格式）嵌入到文档的方案，将资源转换为 base64 编码的字符串形式，并且将这些内容直接存储在 url 中，优化网站的加载速度和执行效率
```html
```
#### 5、地理定位 API
示例：
```html
```
可以直接使用第三方地图 API，例如百度地图 API：
#### 6、通信 API
Web Sockets 是 H5 提供的在 Web 应用程序中客户端与服务器端之间进行的非 HTTP 的通信机制。
* 建立与服务器之间的通信连接
```javascript
var webSocket = new WebSocket("ws://localhost:9000/socket")
```
调用的是 WebSocket 对应，参数 url 必须以 `ws` 或 `wss` 开头
* 发送数据
```javascript
webSocket.send("data")
```
* 监听
```javascript
// 通过获取onmessage事件句柄来接收服务器传过来的数据
webSocket.onmessage = function(event){
var data = event.data
...
}
// 通过获取onopen事件句柄来监听socket的打开事件
webSocket.onopen = function(event){
// 开始通信时的处理
}
// 通过获取onclose事件句柄来监听socket的关闭事件
webSocket.onclose = function(event){
// 通信结束时的处理
}
```
* 关闭 socket
```javascript
webSocket.close()
```
可以通过读取 `readyState` 的属性值来获取 WebSocket 对象的状态，主要有：
* CONNECTING（0），表示正在连接
* OPEN（1），表示已建立连接
* CLOSING（2），表示正在关闭连接
* CLOSED（2），表示已关闭连接
### 十、web 存储
#### 1、sessionStorage 的使用
可以存储数据到本地，存储的容量 5MB 左右（每个浏览器不同）。这个数据本质是存储在当前页面的内存中；它的生命周期为关闭当前页面，关闭页面，数据会自动清除；
* `setItem(key, value)`：存储数据，以键值对方式存储
* `getItem(key)`：获取数据，通过指定名称的 key 获取对应的 value 值，如果找不到对应名称的 key，那么就会获取 null
* `removeItem(key)`：删除数据，通过指定名称 key 删除对应的值，如果 key 值错误，不会报错，也不会删除数据
* `clear()`：清空所有存储的内容
```html
`，推荐在后面的 `>` 之前不加上 `/`（如果在 xml 中，必须加上 `/`）
* 双标签：具有开始标签和结束标签，内容写在开始标签和结束标签之间，例如 `