这是我参与「第四届青训营」笔记创作活动的的第1天，我将所学到的HTML知识整理成笔记和思维导图，以便未来增删改查。这些知识来自字节青训营的前端课程、B站前端入门课程和MDN文档，不可避免的带有我个人的理解和偏见，若有任何不精准或错漏之处，完全归责于我自己，欢迎大家不吝指正。

HTML入门速记手册

第一篇学前基础

第一章 HTML、网页、网站的概念

第一节 HTML

HTML：HTML是一种超文本标记语言，即用来标记超文本的语言。
超文本的两层含义
1. 超越了文本的限制：不但可以标记文本，还可以标记图片、音视频等资源；
2. 超级链接文本：通过这个链接文本，可以从一个页面转跳到另外一个页面。

第二节网页

网页：网页是构成网站的基本元素。
存在形式：网页是一个以.htm或.html后缀名结尾的文件。
表现形式：网页由浏览器进行解析和显示。

第三节网站

网站：网站是网页的集合。

第二章浏览器和Web标准

第一节浏览器

浏览器：浏览器是运行、渲染、显示网页的平台
浏览器内核：即渲染引擎，负责读取网页内容、整理讯息、计算网页显示方式、显示页面等。

第二节 Web标准

Web标准
1. Web标准是由万维网联盟(W3C)、欧洲计算机制造商协会(ECMA)和其他标准化组织制定的一系列有关Web的标准的集合;
2. Web标准是浏览器厂商应当共同认定和遵循的规则、指南和特性;
3. 遵循Web标准可以让开发人员写出的页面标准和统一;
4. Web标准建议：结构、表现、行为分离。
Web标准的构成
1. 网页的结构：主要是指HTML，用于对网页元素进行整理和分类；
2. 网页的表现：主要是指CSS，用于设置网页元素的外观样式；
3. 网页的行为：主要是指JavaScript，用于定义网页模型，负责用户和网页的交互。
4. WebAssembly：WebAssembly是用于浏览器内客户端脚本的低级、可移植的字节码格式，它最早可以追溯到2012年的asm.js，2019年W3C发布WebAssembly推荐标准，使得它成为第四个Web标准，目前主流浏览器均支持WebAssembly。

第三章 VSCode插件推荐

Open in Browser：用浏览器打开HTML文件
Auto Rename Tag：自动重命名标签

第二篇标签基础

第一章标签简介

第一节标签

标签：由尖括号及其内容组成了一个标签。
作用：创建一个具有特殊语义的HTML元素。通常情况下，可以认为标签、元素是同义。

示例

<br>     <!-- 这是一个br标签，它的语义是换行-->

第二节标签分类

标准标签(Web标准定义的标签)
1. 双标签
  1. 由开始标签 <标签名> 和结束标签 </标签名> 包裹起来组成；
  2. 示例
```
<p> 我是p标签 </p>   
```
2. 单标签
  1. 只有一个开始标签，没有结束标签
  2. 常用(需记忆)的单标签：link、meta、hr、input、br、img、source、embed
  3. 在HTML5规范中，单标签不写反斜杠
```
<meta charset="utf-8">      
<meta charset="utf-8" />    
```
用户自定义标签：几乎不使用，略。

第三节标签的属性

属性用于定义标签的某个性质；

属性书写在开始标签内

有值属性以属性名="属性值"的方式进行书写，属性值需要用引号括起来，推荐使用双引号
无值属性写属性名
多个属性之间用空格分隔
属性值如果有多个取值时，用空格将它们分开，每个取值都是一个属性项

<a href="/" target="_self"> 我是a标签 </a>            <!-- 2个属性href、target -->
<input type="redio" value="橙子" name="tp" checked>   <!-- 3个属性和无值属性checked-->
<div class="nav w900"></div>                          <!-- 具有class属性，并且这个class属性有2个取值-->

属性的分类

标准属性：Web标准定义的标签属性，通常它们具有特定的含义。有些属性是所有标签都具有的，如id、class；有些属性则只有某一个标签才具有，如poster是<video>标签的独有属性。

自定义属性：这类属性由用户定义。它通常配合CSS的属性选择器设置某个CSS样式，或被JavaScript读取用于实现某些逻辑。

<!-- CSS部分 -->
<style>
    /* 选中class属性值为book的元素，设置它的背景色为pink */
    .book {
        background-color: pink;
    }
    /* 选中具有mydata属性且属性值为"checked"的div元素，当鼠标移入时设置它的背景色为blue */
    div[mydata="checked"]:hover {
        background-color: blue;
    }
</style>

<!-- HTML部分，元素div具有内置属性class和自定义属性mydata -->
<div class="book" mydata="checked">
    我是div容器
</div>

全局属性
1. 定义：Web标准定义的所有元素都具有(可设置和使用)的属性。
2. class属性
  1. class属性用于给元素分类，这个分类名(属性值)取决于我们，例如<span class="y-red">。这样做的好处是我们可以根据分类名找到它们，进而设置它们的样式(CSS)和行为(Javascript)。
```

<span class="c_red bgc_bbffcc"> 
    我是span元素
</span>
```
3. id属性
  1. id属性用于标注一个独特的元素，通常，id属性值在页面中是唯一的——这样，我们就可以通过id属性值找到它，进而对它设置样式和行为。
  2. 确保id属性值在页面中是唯一的。因为CSS的ID选择器、Javascript的getElementByID(idName)只会选取第一个匹配id属性值的元素。
4. style属性
  1. style属性用于给元素设置内联的CSS样式，多个CSS样式用空格隔开。
5. MDN: 全局属性

第二章网页的HTML结构

第一节文档声明标签

语法：<!doctype 版本标识>
作用：告知浏览器使用哪个版本的HTML规范解析网页，如<!doctype html>表示使用HTML5规范解析网页
备注
1. 它需要写在HTML文档的第一行；
2. 它是文档声明标签，不是HTML标签

第二节 html、head、body

<html>标签：它是当前HTML文档的根元素，其他HTML元素必须是它的后代。
<html>标签的lang属性
1. 定义当前HTML文档的语言，例如en表示英文网页，zh-CN表示中文网页
2. 这个属性主要是给浏览器的翻译功能和搜索引擎(谷歌、百度等)的爬虫使用的，浏览器显示什么是由其内容和字符编码而定。
<html>标签的子元素
1. <head>标签：表示当前HTML文档的元数据部分，如文档标题、引入的文档样式和脚本等
2. <body>标签：表示当前HTML文档的内容部分，可简单的理解为存放可见的标签

示例

<!doctype html>
<html lang="zh-CN">
    <head>
        <!-- 网页的元数据部分 -->
    </head>

    <body>
        <!--网页的内容部分 -->
    </body>
</html>

第三章实体编码

背景：浏览器在解析HTML时，会对一些字符进行处理，如：
1. 多个空格会被解析为1个空格显示，如何显示多个空格？
2. <、>会被优先当做标签去解析，如a<b || b>c会解析出一个标签<b || b>，如何解决这个问题？
定义：实体编码由一串以&开头;结尾的字符组成，它代表一个特定的字符，浏览器会将实体编码解析为特定的字符进行显示，这样它就解决了空格、<、>等字符的显示问题。
三个常见的实体编码

实体编码代码字符说明
  空格 1个空格
> > 大于号
< < 小于号
更详尽的实体编码见MDN Entity

实体编码	代码字符	说明
` `	空格	1个空格
`>`	`>`	大于号
`<`	`<`	小于号
更详尽的实体编码见MDN Entity

第四章网页中的路径

根目录：当前html文件所在的文件夹即是根目录，用./表示
绝对路径
1. 硬盘中的某个位置，如d:\page\index.html
2. 网页中的URL，如http://www.baidu.com/index.html
相对路径：相对当前html文件的路径
1. 同级目录./：./ico.png
2. 下一级目录./:./src/logo.png
3. 上一级目录../：../book.png

示例：相对路径

    domo
    | -- day01
    | -- -- src
    | -- -- -- logo.png       // 4. 路径4所指文件
    | -- -- demo.html
    | -- day02
    | -- -- src
    | -- -- -- logo.png       // 2. 下一级目录所指文件
    | -- -- index.html        // 0. 当前文件所在位置
    | -- -- ico.png           // 1. 同级目录所指文件
    | -- book.png             // 3. 上一级目录所指文件
    
    
    0. 当前文件所在相对路径：demo\day02\index.html
    1. 同级目录：./ico.png
    2. 下一级目录：./src/logo.png
    3. 上一级目录: ../book.png 
    4. 路劲4: ../day01/src/logo.png

第三篇常用标签

第一章注释标签

语法：
说明：注释标签是一个多行注释标签，它的内容会被浏览器忽略。
它只能注释HTML，不能注释css、js——即不能用于.css文件、.js文件、<style>标签、<script>标签之内

第二章元数据标签

第一节简介

它们是与HTML文档相关的配置信息标签，包括网页标题、样式、脚本等。
它们通常是<head>标签的子元素。不过有些标签也可以书写在其他位置，例如<script>标签可以放入<body>标签内。

第二节 title标签

语义：表示当前网页的标题，显示在浏览器的标题栏或标签页上
使用说明：它内部只应包含文本，如果有标签会被忽略

示例

<!doctype html>
<html>
    <head>
        <title>这是网页标题，会出现在浏览器的标题栏或标签页上</title>
    </head>
    <body>
    </body>
</html>

第三节 link标签

语义：定义一个外部资源的链接，rel属性用于指定外部资源的类型，href属性用于指定外部资源的路径。它是一个单标签，常用于指定CSS样式表和网站图标。
rel属性的常见取值

属性值说明
stylesheet 表示为当前页面引入一个css文件
icon 表示为当前页面指定网页的图标

属性值	说明
stylesheet	表示为当前页面引入一个css文件
icon	表示为当前页面指定网页的图标

示例

<!doctype html> 
<html> 
    <head> 
        <!-- 指定当前页面的图标为根目录(当前html文件所在目录)下的logo.png  -->
        <link rel="icon" href="./logo.png">
        <!-- 为当前页面引入一个css文件，路径为根目录下的css文件夹内的index.css-->
        <link rel="stylesheet" href="./css/index.css">
    </head> 
    <body> 
    </body> 
</html>

第四节 style标签

语义：定义一套样式，样式需要写在<style>标签内
type属性：如果省略type属性，则默认为text/css，即表示该样式为CSS样式
media属性：定义该样式适用的媒体，默认值为all，即所有媒体都引入该样式，更详尽的使用方法见CSS媒体查询。
示例

<!doctype html> 
<html> 
    <head> 
        <!-- 定义1套CSS样式，该样式适用于所有媒体(设备)，只有当屏幕宽度大于800px时，该套样式才会生效 -->
        <style media="all and (min-width:800px)">
            <!-- CSS样式书写位置 -->
            * {
                padding: 0;
            }
        </style>
    </head> 
    <body> 
    </body> 
</html>

第五节 script标签

语义：定义一个可执行的脚本，它可以写在head标签和body标签内
type属性
1. 作用：指定脚本的语言，如果省略该属性，则默认为javascript脚本
2. HTML4引入javascript脚本：type属性取值为text/javascript
3. 兼容性写法：type="text/javascript"
src属性
1. 作用：指定脚本的路径
2. 如果脚本写进<script>标签内，则不要设置src属性；反之，如果设置了src属性，就不要在<script>标签内书写脚本

示例

<!doctype html>
<html>
    <head>
        <!-- 引入并执行外部的js脚本 -->
        <script src="./js/index.js"></script>
    </head>
    
    <body>
        <!-- 引入并执行内嵌的js脚本 -->
        <script>
            console.log("hello world!");
        </script>
    </body>
</html>

第六节 meta标签

语义：定义除<title>、<link>、<style>、<script>之外的元数据信息。它是一个单标签，常用于定义字符集、网页关键字和描述、视口、重定向、浏览器引擎等信息
charset属性
1. 作用：指定文档的字符编码，浏览器会根据这个字符编码解析网页
2. 示例
```

<meta charset="utf-8">
```

name、content属性对：网页关键字和网页描述

name属性值	含义	content属性值	代码
keywords	定义网页的关键字它主要是提供给搜索引擎爬取的	网页的关键字，多个关键字用空格或逗号隔开	`<meta name="keywords" content="掘金,稀土,Vue.js">`
description	定义网页的描述它主要是提供给搜索引擎爬取的	一串描述当前网页的字符串	`<meta name="description" content="这是当前网页的描述">`

name、content属性对：视口

当name取值为viewport时，则表示定义当前页面的视口，它常用于移动端

content属性值的取值

取值	含义
width=devie-width	当前页面的宽度为设备的宽度
initial-scale=1	当前页面的初始缩放比为1倍，可更改为其他倍数
maximum-scale=1	当前页面的最小缩放比为1倍，可更改为其他倍数
minimum-scale=1	当前页面的最大缩放比为1倍，可更改为其他倍数
user-scalable=no	当前页面禁止缩放，允许缩放则no改为yes
viewport-fit=cover	当前页面内容充满视口，这是一个专门针对iPhoneX的属性取值

若有多个取值，则将它们用逗号进行分割写进content属性内

<!-- 
    1. 视口的宽度为设备的宽
    2. 初始缩放比：1
    3. 最小缩放：1
    4. 最大缩放：1
    5. 不可缩放
    6. 网页内容充满视口，匹配iPhoneX
 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

http-equit、content属性对：重定向和渲染引擎

http-equit属性取值	含义	content属性取值	说明	代码
refresh	网页重定向	`数字n` `数字n;路径`	当content取值为`数字n`字符串时，则表示n秒后重新载入当前页面；当content取值为`数字n;路径`时，表示n秒后转跳到指定路径的页面	`<meta http-equit="refresh" content="3">` `<meta http-equit="refresh" content="3;http://www.baidu.com">`
X-UA-Compatible	指定浏览器的渲染引擎	IE=edge	当IE浏览器打开这个页面时使用最新的渲染引擎	`<meta http-equiv="X-UA-Compatible" content="IE=edge">`

第三章内联标签

第一节简介

内联标签：这类标签被内容所撑开，不会独占一行，它们更详细的特征将会在CSS中学习。
要点
1. 除<a>标签外，其他内联标签内只放内联标签
2. <a>标签之内可以放除<a>标签之外的其他标签(块标签、内联标签、替换标签)

第二节超链接a

语义：定义一个链接——点击会转跳到目标

href属性——指定链接的目标

href属性取值	说明	示例
路径	常规链接，点击转跳至路径，可以是绝对路径(硬盘某个位置、URL)，也可以是相对路径	`<a href="http://www.baidu.com">百度</a>`
#	顶部连接，点击转跳至当前页面的顶部	`<a href="#">点完回到顶部</a>`
`javascript:void(0);`	空链接，点击什么都不做，使用javascript实现	`<a href="javascript:void(0);">空链接</a>`
#idname	锚点连接，点击转跳至某个页面id值为idname的元素的位置示例：点击转跳至根目录index.html文档中id属性值为header的元素	`<a href="./index.html/#header"> 锚点连接 </a>`

target属性：指定链接打开的方式

target属性取值说明示例
_self 在当前页面打开链接，默认值 <a href="login.html" target="_self">
_blank 在新页面打开链接 <a href="login.html" target="_blank">

target属性取值	说明	示例
`_self`	在当前页面打开链接，默认值	`<a href="login.html" target="_self">`
`_blank`	在新页面打开链接	`<a href="login.html" target="_blank">`

第三节 span

语义：无语义的内联元素。
使用建议：<span>标签是通用的内联元素，由于无具体的语义，常用于充当某种CSS样式的容器，例如一个三角形。

第四节换行br

语义：换行。它是一个单标签，用于创建一个换行符。
使用建议：它没有自己的尺寸或视觉输出，几乎无法进行样式设计。

第五节文本格式

标签名	含义	语义
strong	粗体	强
b	粗体	弱
em	斜体	强
i	斜体	弱
del	删除线	强
s	删除线	弱
ins	下划线	强
u	下划线	弱

推荐使用语义强的标签。

<div>
    <strong>粗体</strong>
    <em>斜体</em>
    <del>删除线</del>
    <ins>下划线</ins>
</div>
 <div>
    <b>粗体</b>
    <i>斜体</i>
    <s>删除线</s>
    <!-- u标签在这里显示出现了异常 -->
    <u>下划线</u>
</div>

粗体斜体 ~~删除线~~ 下划线

第五节上下标sub、sup

语义：一个上标<sup>或者下标<sub>元素，它们看上去比正常的元素显得更高或更低。常用于数学或化学符号。
使用建议：它们常用于数学或化学符号，如X³(X<sup>3</sup>), H₂O(H<sub>2</sub>O)。如果只想达到<sub>、<sup>的样式目的，也可以使用内联元素的CSS属性vertical-align。

第六节 form

1. form表单域

<form>定义一个表单域，用于收集其内的表单元素的数据。它是一个块标签，之所以放在这里是因为表单元素都是内联元素，便于整理。
action属性：指定表单数据提交至的URL，如<from action="./login.jsp">将表单数据提交至服务器根目录下的login.jsp页面

method属性：指定表单数据提交的方式

method属性取值	说明
post	表单数据会包含在表单体内然后发送给服务器页面
get	表单数据会附加在 `action` 属性的 URL 中，并以 '?' 作为分隔符, 多个表单数据使用`&`分隔，更详细的说明见后续章节`表单数据的提交`

name属性：指定当前表单域的名称，以区分同一页面的多个表单域。
target属性：表单提交后页面的打开方式，默认为_self在当前页面打开，_blank在新页面中打开

示例

<form name="user" action="./login.jsp" method="get" target="_blank">
    <!-- 表单元素 -->
</form>

2. 表单元素：label

作用：<label>标签的for属性可以与某个表单元素的id属性关联起来。关联后，当点击<label>元素内的内容时，会将焦点转移到表单元素上，它可以增强用户体验
可以和<label>进行绑定的表单元素：button、input、select、textarea

示例

<!-- 当点击label标签(姓名:)时，会自动将焦点转到文本框input -->
<label for="labelfor">姓名：</label> 
<input type="text" id="labelfor" name="username">

3. 表单元素：input

简介：<input>是一个单标签，表示一个与用户交互的输入表单，表单具体类型由它的type属性指定。

type属性取值

type属性	表单具体类型	配套属性
text	单行文本框	name：文本框的名称。表单数据提交时它充当一个`键` value：文本框默认显示的文本 maxlength：文本框最大可输入字符数 size：文本框的长度 readonly：无值属性，当前文本框不可进行编辑
password	密码框。其内输入的内容会被遮蔽，通常是`*`	同text
radio	单选框	name：单选框的组别。同一组(name属性值相同)内的单选框只能有一个元素被选中，表单数据提交时它充当一个`键`。 value：当前单选框的取值。表单数据提交时，会以组name为键，该组选中的单选框的value值为值进行提交。 checked：无值属性，表示单选框默认被选中
checkbox	复选框	name：复选框的组别。表单数据提交时它充当`键`。 value：当前复选框的取值。表单数据提交时，以name为键，值为选中复选框的取值组合为一组，若选中多个复选框则用`&`将每一组进行分割 checked：无值属性，表示复选框默认被选中
button	按钮。它通常和javascript配合实现某个功能	value：按钮上显示的文字
reset	重置按钮。点击时重置input、select、textarea为默认值	value：按钮上显示的文字
file	文件域按钮。点击可以选择一个文件。	name：文件域的名称，表单数据提交时它作为`键`，值为选择的文件名
submit	提交按钮。点击后收集当前表单域内的表单数据提交至指定页面。	value：按钮上的文字。

示例

<form action="" name="user">
    <label for="u">姓名：</label>  <input type="text" name="username" id="u"> <br>
    <label for="p">密码：</label>  <input type="password" name="password" id="p"> <br>

    姓别：
        <input type="radio" name="sex" value="man" id="m"> <label for="m">男</label>  
        <input type="radio" name="sex" value="f" id="w"> <label for="w">女</label>  
        <br>

    爱好：
        <input type="checkbox" name="hobby" value="eat" id="gf"> <label for="gf">干饭</label>
        <input type="checkbox" name="hobby" value="sing" id="cg"> <label for="cg">唱歌</label>
        <br>
    
    <label for="lz">来自：</label>
        <select name="" id="lz">
            <option value="">北京</option>
            <option value="">上海</option>
        </select>
        <br>

    <label for="jj">简介：</label> <br>
        <textarea name="brief" id="jj">请输入你的简介</textarea>
        <br>

</form>

label关注.png

4. 表单元素：select、option

简介：<select>表示一个下拉框元素，<option>表示一个下拉框元素的一个选项元素，它们通常配合在一起使用。
<select>的属性name：该组下拉框的名称。表单数据提交时它作为下拉框的键进行提交。
<option>元素的常见属性
1. value属性：当前下拉框选项的取值。表单数据提交时，以下拉框元素(<select>)的name属性值为键，选中的<option>元素的value属性值为值进行提交。
2. selected属性：无值属性，设置后当前下拉选项(<option>)为下拉框(<select>)的默认选项。

示例

<!--
    定义1组下拉框，名称为sel
    下拉框有3个下拉选项，值分别为bj、sh、tj(显示为北京、上海、天津)，其中bj是下拉框的默认值
-->

<label for="city">城市：</label>
    <select name="sel" id="city">
        <option value='bj' selected>北京</option>
        <option value='sh'>上海</option>
        <option value='tj'>天津</option>
    </select>
    </br>

5. 表单元素：textarea

<textarea>表示一个多行文本输入框，又叫文本域
name属性：当前文本域的名称，数据提交时它作为键

示例

<textarea name="ipt">
    这是多行文本输入框的默认内容
<textarea>

6. 表单元素：button

语义：一个按钮，按钮的文字放在标签内，它通常和javascript一起配合完成某些功能。

常见属性

属性名	简介	取值
type	button的类型	submit：默认值，提交按钮 reset：重置按钮 button：普通按钮，无默认行为
form	指定与button关联的form元素 button元素可以不在表单域之中，这时需要使用form属性来进行关联	form元素的id值
disabled	无值属性，表示用户不能与button进行交互

示例
```
<button type="button">点我</button>
```

7 . 表单数据的提交

表单元素	键	值	数据组合示例
单行文本框、密码框、多行文本框	表单的name属性值	文本框的`实际值`，若为空，则值为空字符串	`username="zhangsan199"&password=&brief=`
单选框	表单的name属性值	表单的`value属性值`。如果该组单选框没有元素被选中，将不会提交数据。	`sex="man"`
复选框	表单的name属性值	同上。若有多个复选框被选中，则用`&`进行分割	`hobby="eat"&hobby="sing"`
下拉框	select的name属性值	当前下拉框select被选中的下拉选项option的`value属性值`	`sel="bj"`
文本域	表单的name属性值	选择的`文件名`。如果未选择文件，将不会提交数据	`file="book.xlsx"`

假设当前表单域<from>的元素的action属性值为index.jsp，当前页面的域名为http://www.baidu.com，则用户点击<submit>提交数据时：http://www.baidu.com/index.jsp?username="zhangsan199"&password=&brief=&sex="man"&hobby="eat"&hobby="sing"&sel="bj"&file="book.xlsx"

8 . 表单元素的禁用-disabled

我们可以通过给表单元素<input>、<select>、<option>、<textarea>、<button>设置一个无值属性disabled来禁用它们。禁用<select>会让整个下拉选择框无法交互，禁用<option>会让某一个选项无法交互。
如果想要启用它们，可以通过JS语句ele.removeAttribute("disabled")删除表单元素ele的disabled属性来实现

第四章块标签

第一节简介

块标签：它们最大的特点是独占一行，更详细的特点将在CSS中学习。
块标签内可以放块标签、内联标签和替换标签

第二节 div

语义：无语义的通用块标签。

使用建议：<div>是一个纯粹的块容器，语义上不表示任何特定类型的内容。通常通过它的class或id属性值来人为约定其内容的含义。

<!-- 这个div是一个视图容器(view-container) -->
<div class="view-container"> 
    <!-- 视图容器的其他元素-->
</div>

<!--这个div是一个数据的容器 -->
<div class="databox"> 
    <!-- 视图容器的其他元素-->
</div>

第三节 h1~h6

语义：一个标题标签。
h1~h6是标题标签的简写，它们默认带有粗体的外观样式。<h1>字体最大，<h6>字体最小。

特点：其内的文本无论多长都不会换行显示，只会显示在一行(横向滚动条)

<h1>adsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</h1>

使用建议
1. 一个页面应只有一个<h1>
2. 避免跳过某个标题，始终要从 <h1> 开始，接下来依次使用 <h2> 等等
3. 不要为了减小标题的字体而使用低级别的标题，而是使用CSS属性font-size。

第四节 p

语义：一个段落
特点
1. 带有默认的样式：上下外边距
2. 其内容一行放不下时，会自动换行显示。

第五节 hr

语义：水平线

第六节 table

语义：一个表格
表格的内容
1. <caption>标签：表格的标题，默认带有居中的样式
2. <thead>标签：表格的头部，0或者1个
3. <tbody>标签：表格的主体, 0或者多个
4. <tfoot>标签：表格的尾部，0或者1个
5. <tr>标签：一行单元格
6. <td>、<th>标签：1个单元格
  1. <td>、<th>不是块标签，更详细的解释将在CSS中学习
  2. <th>：默认带有样式，通常是居中、粗体，通常用于表示一个行标或列标单元格
  3. <td>：普通单元格
  4. 单元格属性rowspan：值为正整数，它表示跨行合并单元格，即该单元格占据的行数
  5. 单元格属性colspan：值为正整数，它表示跨列合并单元格，即该单元格占据的列数。

示例

<!-- CSS部分-->
<style>
    /* 表格单元格(th、td)共享边框，即2个单元格之间只有1个边框 */
    table {
        border-collapse:collapse
    }
    /* 表格标题、单元格设置1px的边框 */
    caption, th, td {
        border:1px solid #999;
    }
    /* 取消表格标题的底部边框，这样它与第2行之间只有1px的边框 */
    caption {
        border-bottom: none;
    }
    td {
        color:red;
    }
</style>


<!-- HTML部分-->
<table>
    <caption> 2022年销售统计 </caption>
    
    <tbody>
        <!-- 第一行：图书分类占2行，其他4个单元格各占2列，实际一行占据9(1+2*4)个单元格-->
        <tr>
            <th rowspan="2">图书分类</th>
            <th colspan="2">第一季度</th>
            <th colspan="2">第二季度</th>
            <th colspan="2">第三季度</th>
            <th colspan="2">第四季度</th>
        </tr>
        
        <!-- 第2行：第一个单元格被图书分类占据不用写，写8个(9-1)单元即可 -->
        <tr>
            <th>销售量</th>
            <th>销售额</th>
            <th>销售量</th>
            <th>销售额</th>
            <th>销售量</th>
            <th>销售额</th>
            <th>销售量</th>
            <th>销售额</th>
        </tr>
        
        <tr>
            <th>小说</th>
            <td>a1</td>
            <td>a2</td>
            <td>a3</td>
            <td>a4</td>
            <td>a5</td>
            <td>a6</td>
            <td>a7</td>
            <td>a8</td>
        </tr>

        <tr>
            <th>文艺</th>
            <td>b1</td>
            <td>b2</td>
            <td>b3</td>
            <td>b4</td>
            <td>b5</td>
            <td>b6</td>
            <td>b7</td>
            <td>b8</td>
        </tr>
    </tbody>
</table>

第七节 ul、ol、dl

语义：<ul>是无序列表，<ol>是有序列表，<dl>是描述列表
<ul>、<ol>
1. 它们的子元素只能是<li>标签，<li>标签表示一个列表项
2. 它们默认带有项目符号，例如无序列表项前面可能带有●，有序列表项前面可能带有⒈这类数字项目符号，而且不同浏览器的项目符号样式存在差异。实际上，几乎没人会使用它，它们不够炫酷而且很难交互——通常会设置<ul>、<ol>的CSS属性list-style-type:none来禁用项目符号，然后通过CSS来定义一套好看又好用(可交互)的项目符号。
3. <li>里面可以嵌套放入<ul>或<ol>，不过嵌套层数过多会导致代码变得复杂和难以维护。
<dl>
1. <dt>元素：<dt>的语义是描述词
2. <dd>元素: <dd>的语义是描述细节，默认带有外观样式左外边距，看上去比<dt>多一层缩进
3. 示例
```
<dl class="main">
    <dt>亲爱的，</dt>
    <dt>尼古拉斯.赵四：</dt>
    <dd>
        你就是我温暖的围巾，冰爽的啤酒，帅气的领带，日复一日的梦想
    </dd>
    <dd>
        向来三分钟热度，一天有1440分钟，所以因为你，我每天都沸腾400遍啊400遍。
    </dd>
</dl>
```
  亲爱的，
  
  尼古拉斯.赵四：
  
  你就是我温暖的围巾，冰爽的啤酒，帅气的领带，日复一日的梦想
  
  向来三分钟热度，一天有1440分钟，所以因为你，我每天都沸腾400遍啊400遍。

第八节结构化块标签

1. 背景

背景：早期Web前端开发中<div>被大量使用，<div>标签是一个纯粹的块标签，它很难表示它所包含的内容，虽然可以通过class属性或id属性来约定，但是随着项目越来越大，代码的可读性越来越低。

2. 简介

结构化标签简介
1. 它们是HTML5推出的新标签
2. 它们具有较强的语义，例如<nav>表示一个导航栏，比<div>具有更强的可读性
3. IE浏览器对它们的兼容性较差

分类

标签名	含义	说明
header	头部，即可以是整个网页的头部，也可以是某一部分的头部	一个页面可以出现多个
main	网页的主体部分	建议一个页面只有一个
footer	尾部，即可以是整个网页的尾部，也可以是某一部分的尾部	一个页面可以出现多个
nav	导航栏	一个页面可以出现多个
aside	侧边栏	一个页面可以出现多个
article	独立的文本区域	一个页面可以出现多个
secton	独立的区块	一个页面可以出现多个

第五章替换标签

第一节简介

定义：替换元素是一种外部对象，它们的外观渲染独立于CSS。
特点
1. CSS可以影响它们的位置、大小和定位方式等
2. CSS无法影响它们的内容，例如<iframe>可能有自己的样式表，而且不会继承父文档的样式
3. 它们被内容所撑开，不会独占一行

第二节 img

语义：一个图片元素，它是一个单标签
常用属性

属性名说明其他
src 指定图片的路径必须指定
alt 当图片加载失败时替换的文字
title 当鼠标移到图片上时显示的文字

属性名	说明	其他
src	指定图片的路径	必须指定
alt	当图片加载失败时替换的文字
title	当鼠标移到图片上时显示的文字

使用说明

它的宽、高通常使用CSS来设置。如果不设置，那么它的宽、高就默认为图片的实际大小。

通常，<img>元素需要设置CSS属性vertical-align: middle;来消除它与父元素之间的空隙，空隙出现的原因我们将在CSS中解释

 <!-- 最上面的图片：可以看到它与父元素div底部有一条间隙-->
 <div style="background-color: pink;">
    <img src="./images/img1.jpg">
 </div>

<!-- 下面的图片：图片设置CSS属性vertical-align: middle之后间隙消失 -->
<div style="background-color: blue; ">
    <img src="./images/img1.jpg" style="vertical-align: middle;">
</div>

第三节 video、audio、source、embed

1. 浏览器对音视频格式的兼容性

音频：几乎所有的浏览器(包括IE678)都支持编码为MPEG-1 Audio Layer III的音频文件；其次是编码为ACC的音频文件，ACC是H.264标准的一部分。
视频：几乎所有的浏览器(包括IE678)都支持编码为AVC(H.264)的视频文件
无法从文件名中看出音视频文件的编码方式，例如一个以.mp4结尾的视频文件的视频编码可能是AV1、VP8、VP9或AVC(H.264)。如果它的编码是VP9，那么它将无法在IE浏览器中播放，如果是AVC(H.264)，则可以在绝大部分浏览器中播放。我们可以使用ffmpeg这类开源工具来查看音视频文件的编码。
如果只考虑兼容性，那么音频选择MPEG-1 Audio Layer III编码的文件，视频选择AVC(H.264)编码的文件。

2. video、audio

语义：一个视频或音频元素

常见属性

属性名	属性值	作用	说明
muted	无值属性	静音	设置后音视频为静音。
autoplay	无值属性	自动播放	设置后音视频会自动播放
controls	无值属性	显示控件	设置后提供一个给用户控制音视频播放的控件
loop	无值属性	循环播放	设置后音视频将会循环播放
src	路径	指定音视频资源的路径	不同浏览器支持的音视频编码不同，所以几乎不会设置这个属性，而是通过`<source>`、`<embed>`来指定多个同一内容不同编码的音视频资源，以达到兼容不同浏览器的目标
width	像素值	视频区域的宽	仅`<video>`元素有
height	像素值	视频区域的高	仅`<video>`元素有
poster	路径	指定视频文件的海报帧，它是一个图片文件。它通常在用户播放前、跳帧时被展示	仅`<video>`元素有

3. source

语义：为<video>、<audio>指定相同媒体内容的不同编码格式的音视频资源，浏览器会从上到下选取一个支持的媒体进行播放，它是一个单标签
常用属性
1. src属性：指定音视频资源的路径
2. type属性：指定音视频的MIME类型，常见的取值audio/mp3、video/mp4、video/webm、video/ogg、audio/webm、audio/ogg等

4. embed

语义：嵌入外部内容，它常被IE678浏览器用于嵌入音视频资源，它是一个单标签
常见属性
1. src属性：音视频资源的地址
2. width属性：音视频资源的宽
3. height属性：音视频资源的高
4. type属性：音视频的MIME类型。IE678浏览器仅支持编码为MPEG-1 Audio Layer III、AVC(H.264)音视频文件，所以它的取值通常是audio/mp3和video/mp4

5. 最佳实践

通常，我们会使用<source>来引入相同媒体内容的不同编码格式的音视频文件，最后使用<embed>来提供对IE678的支持，这样浏览器就会从上到下选取一个支持的媒体进行播放。

示例

<video controls poster='视频海报.png' muted width='400' height='400'>
   <source src='x.webm' type='video/webm'>
   <source src='x.mp4' type='video/mp4'>
   <source src='x.ogg' type='video/ogg'>
   <source src='x.3gp' type='video/3gpp'>

   <!-- 支持IE678 -->
   <embed src='x.mp4' type='video/mp4' width='400' height='400' >
</video>

第四节 iframe

语义：嵌套一个内联框架，该内联框架有自己的浏览器上下文——即展示文档的环境
src属性：需要引入浏览器的URL地址
特点：由于浏览器上下文拥有自己的会话记录和DOM树，会占用内存空间和计算资源，所以不推荐嵌入大量的<iframe>

示例

<div>
    <iframe src="https://v.qq.com/txp/iframe/player.html?vid=z33491gz9ul"></iframe>
</div>

第四篇思维导图

思维导图.png

实体编码	代码字符	说明
` `	空格	1个空格
`>`	`>`	大于号
`<`	`<`	小于号
更详尽的实体编码见MDN Entity

实体编码	代码字符	说明
` `	空格	1个空格
`>`	`>`	大于号
`<`	`<`	小于号
更详尽的实体编码见MDN Entity

HTML入门速记手册

HTML入门速记手册

第一篇 学前基础

第一章 HTML、网页、网站的概念

第一节 HTML

第二节 网页

第三节 网站

第二章 浏览器和Web标准

第一节 浏览器

第二节 Web标准

第三章 VSCode插件推荐

第二篇 标签基础

第一章 标签简介

第一节 标签

第二节 标签分类

第三节 标签的属性

第二章 网页的HTML结构

第一节 文档声明标签

第二节 html、head、body

第三章 实体编码

第四章 网页中的路径

第三篇 常用标签

第一章 注释标签

第二章 元数据标签

第一节 简介

第二节 title标签

第三节 link标签

第四节 style标签

第五节 script标签

第六节 meta标签

第三章 内联标签

第一节 简介

第二节 超链接a

第三节 span

第四节 换行br

第五节 文本格式

第五节 上下标sub、sup

第六节 form

1. form表单域

2. 表单元素：label

3. 表单元素：input

4. 表单元素：select、option

5. 表单元素：textarea

6. 表单元素：button

7 . 表单数据的提交

8 . 表单元素的禁用-disabled

第四章 块标签

第一节 简介

第二节 div

第三节 h1~h6

第四节 p

第五节 hr

第六节 table

第七节 ul、ol、dl

第八节 结构化块标签

1. 背景

2. 简介

第五章 替换标签

第一节 简介

第二节 img

第三节 video、audio、source、embed

1. 浏览器对音视频格式的兼容性

2. video、audio

3. source

4. embed

5. 最佳实践

第四节 iframe

第四篇 思维导图

第一篇学前基础

第二节网页

第三节网站

第二章浏览器和Web标准

第一节浏览器

第二篇标签基础

第一章标签简介

第一节标签

第二节标签分类

第三节标签的属性

第二章网页的HTML结构

第一节文档声明标签

第三章实体编码

第四章网页中的路径

第三篇常用标签

第一章注释标签

第二章元数据标签

第一节简介

第三章内联标签

第一节简介

第二节超链接a

第四节换行br

第五节文本格式

第五节上下标sub、sup

第四章块标签

第一节简介

第八节结构化块标签

第五章替换标签

第一节简介

第四篇思维导图

实体编码	代码字符	说明
` `	空格	1个空格
`>`	`>`	大于号
`<`	`<`	小于号
更详尽的实体编码见MDN Entity