HTML元素大全(1)
01、基础元素
标题
从大h1到小h6，块元素，有6级标题。是一种标题类语义标签，内置了字体、边距样式。
- 合理使用h标签，主要用于标题，不要为了加粗效果而随意使用。
h1用于最重要的标题内容，会被搜索引擎使用，用得太多影响SEO效果。
标题标签h1/2/3/4/5/6：一级标题
2级标题
3级标题
4级标题
5级标题
6级标题
| 属性 | 描述 | 值 |
|---|---|---|
| align | 标题的水平对齐方式 | left、center、right |
段落元素
段落元素 内容
段落文字1
段落文字2
012
普通文字1，用br换行
普通文字1
换行
换行元素（Break）：
水平线
水平线元素：color、长度width、粗细size、对齐align等属性，CSS中可用border设置样式。
| 属性 | 描述 | 值 |
|---|---|---|
| color | 线颜色 | 颜色 |
| width | 宽度 | 像素、百分比 |
| size | 线粗细 | 整数，像素 |
| align | 水平对齐方式， | left、center、right |
列表标签
列表都是块元素，li中可以放任何东西，常用来组织列表相关内容，如商品列表、树形结构、导航等。
- 无序列表
li为列表项，属性type可定义符号样式，默认disc（实心圆）。 - 有序列表
li为列表项，属性type可定义排序样式，默认1（数字）。
| 属性 | 描述 | 值/示例 |
|---|---|---|
| type | 序号类型 | 无序列表：disc=实心圆、square=方块、circle=空心圆有序列表： 1=数字、a/A=字母、i/I=阿拉伯数字 |
| start | 有序列表：序号开始的值，默认1 | |
| reversed | 有序列表：倒序排列 | |
value |
有序列表：设置序号值，会影响后面 | |
- l1
- l1的嵌套子节点
- l2
- l3
- l1
- l2
- l3
- l4
- l5
- 无序标签、有序标签可以多层（相互）嵌套。
- 列表项中的内容可以是文本，也可以是其他标签，如图片img、a标签。
- 使用场景：新闻列表，导航按钮。
- list-style-type：在css中设置列表符号样式，如
ul li{list-style-type:disc} ``ol li{}，枚举值-菜鸟教程。
- disc、circle...：实心、空心符号
- decimal...：数字
??快捷键（VSCode）：
标签名*数量>子标签名*数量，快速输入多组父子标签，加大括号则为标签中内容。ul>li*3：快速输入ul标签+3组子li标签。
语义化描述列表
作用同
| 元素/属性 | 描述 |
|---|---|
description list，描述列表，包含多组 |
|
| ? | description term( /t??rm/ 术语，项 )描述术语（标题）， |
| ? | description definition(/?def??n??n/，定义)描述内容，margin-inline-start: 40px |
- 人物简介：
- 一代诗仙
- 代表作：
- 仰天大笑出门去，下楼排队做核酸
/引用元素
引用元素
语义化引用元素，代表其中的文字是引用内容。
| 元素/属性 | 描述 |
|---|---|
|
块级引用元素(quote /kwo?t/ 引用、引文)，默认会增加缩进，一般都会加上额外的自定义样式。 |
| ?cite | (/sa?t/ 引用)标注引文相关资源的url地址或相关解释信息，但并不会显示 |
|
行内引用行内元素，默认样式是用伪元素添加了引号“” |
| ?cite | 同上块引用 |
??注意：默认样式不同浏览器不同，所以最好通过css统一样式。
块引用blockquote文本行内引用q
行内引用q
文本元素
针对文本内容的常规元素。除了pre是块元素，其他都是行内元素。文本标签一般会嵌套在标签中使用，实现不同语义/效果。
| 元素/属性 | 描述 | 值/示例 |
|---|---|---|
| <span> | （ /sp?n/）无特定含义，是用来组织文档的行内元素（行内容器），外观取决于css | span内容 |
| 设置文本字体样式的文本元素，文本在标签里 | ||
| ?face | 字体类型，值为字体名称 | face="楷体" |
| ? |
字体大小，从 1 到 7 的数字，默认3。不同于字号，已废弃不推荐使用。 | 推荐css代替 |
| ?color | 字体颜色 | 颜色 |
| 块元素 | 预格式的文本（predefine /?pri?d??fa?n/ 预定义），保留空格、换行符，默认等宽字体。只能包含文本/行内元素，不能再包含其他块元素了。 | |
|
粗体样式（Bold），单纯样式效果 | |
| <strong> | 粗体效果，加重语气，更强调语义，语义在搜索引擎、语音阅读时有效 | |
|
_斜体_样式，单纯样式效果 | |
| <em> | _斜体_效果（emphasis/?emf?s?s/强调），着重语气，和i相比强调的语义 | |
|
下划线 | |
| 删除线 | ||
| 下标(字体小) | ||
| 上标(字体小) |
span内容
font标签内容
pre字体内容 ，
支持回车和空 格
粗体b
粗体strong
斜体i
em标签
下划线u
删除线del
下标sub
上标sup
语义元素
表示特点语义的元素，默认提供了一些样式（吃藕丑）。
| 元素/属性 | 描述 |
|---|---|
| 行内元素 | 缩略语或缩写（abbreviation /??bri?vi?e??n/ 缩略），默认样式：下划线（虚线） |
| ?title | 用title解释其含义，鼠标提示显示 |
| 块元素 | 联系方式的元素，如地址、URL，邮箱等。默认样式：斜体+块元素 |
|
计算机代码，默认样式：等宽字体 |
| 行内元素 | 变量名称：数学表达式或编程中的变量，默认样式：斜体 |
| 行内元素 | 键盘、用户输入，默认样式：monotype 字体 |
| 行内元素 | 计算机程序输出，（sample，样本）默认样式：monotype 字体 |
| 行内元素，IE?? | 时间日期，用于根据不同的语言输出不同的格式 |
| ?datetime | 合法的日期时间值 |
及语义
是一个容器元素，是一个“纯粹的”、“无任何语义的”容器块元素，用来把不同的内容分区管理。本身无任何表现效果，配合css使用。
在HTML5中增加了和div相同作用的语义化块布局元素标签，这些元素定义了一个大概的语义范围，并没有一个严格的界限，同样也么有任何样式。语义块元素可读性更好，也更有利于SEO。
元素/属性
描述
块级无语义元素(division 分区)
?align
内部内容的对齐方式，已废弃
页眉：文档头部相关区域
导航栏：主导航相关区域
页脚：底部相关区域，如页面下面的版权信息、文章后面的申明信息等
侧边栏：页面内容以外的区域，如侧边栏、呼出框等
主内容：文档主内容区域
文章，表示一个独立的、可重复的内容块，如一篇博客、一条评论、一篇帖子
段落部件，文档中的章节、页眉、页脚，把article分为多个section
??注意：语义化块元素在_一些古老_的浏览器存在兼容性问题，如IE8。
div布局
div class="header"
div class="left"
div class="right"
语义布局
header class="header"
article class="right"
超链接
资源路径。
?? 锚点/文档片段：页面内部跳转，用#号标识， 作为文档片段使用，跟在url后面
?● href="#"，或不设置，跳转到头部
?● 用name属性作为锚点，href="#name"：http://url#id
?● 用其他标签的id属性作为锚点，href="#id"：http://url#name
?? 电子邮件连接：href="mailto:URL"
?? 电话：href="tel:号码"
name
元素名称，可作为锚点
设置锚点
target
告诉浏览器用什么方式来打开目标页面
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示；_top：在顶级窗口中显示。
rel
与目标对象的关系
download
指示这是一个下载地址
值为本地保存文件名
??当不希望a标签执行跳转，用来执行其onclick事件时，需设置href="javascript:void(0)"，申明不执行跳转。
显示的内容=a标签=百度
相对地址
默认#-跳转到头部
a标签的name属性作为锚点
任意元素的id属性作为锚点
不执行a标签跳转
当a标签设置了href属性后，就是一个可以点击操作的超链接了，鼠标样式为小手形状（pointer），同时有三种显示模式（默认样式），都可以通过css样式（伪元素选择器）调整。
- 未点击时，显示为蓝色字体+下划线
- 点击访问过，显示为紫色字体+下划线
- 鼠标点击链接时，显示为红色字体+下划线
02、
表格
是一个嵌套组合的复合元素，块元素，一个表格table，有多个行，每行有多个单元格组成，常用于展示集合数据。包含多种特有的子元素，构成表格的各个部分。
表格元素结构/顺序：??/?
元素/属性
描述
值/备注
定义表格元素
?border
表格外边框粗细，>=1，会同时开启单元格边框（1），通过css合并
像素
?align
整个表格相对于父容器的对齐方式
right、center、left
?width、height
表格宽度、高度，table/tr/td/th都支持
像素、百分比
?bgcolor
背景色，table/tr/td/th都支持
bgcolor="#F5F5F5"
表格行(table row)，包含多个th或td
?align
行内（单元格）内容的水平对齐方式，默认left
right、center、left
?valign
vertical，垂直对齐默认middle，对应的css属性为vertical-align
top、middle、bottom
?rowspan
行（水平）单元格合并，合并下面的单元格，需去掉对应的单元格
合并单元格的数量
基本单元格（table data cell），的子元素
?align
单元格内容的对齐方式
right、center、left
?width
单元格宽度，一列中多个高度设置则取最大值。
?colspan
列（垂直）单元格合并，合并右边的单元，需去掉对应的单元格
合并单元格的数量
其他语义化子元素
让表格结构更清晰，也更容易进行样式管理
表头，1个可选，包0或多个 元素
表头单元格(table header cell)，同，默认样式：居中、加粗
?scope
表头类型，（/sko?p/范围）row=行表头，col=列表头。
便于阅读器理解表格
表格标题，1个可选，可用css的caption-side设置位置
表格列分组，0个或多，包含多个
?span
横跨的列数，还有width、class、style用于管列样式
css支持的样式好像不多
?
列：
表格主体数据区域，零个或多个 ，包含多个元素
DOM中一直都会有的
汇总行，1个可选，包含0 或多个 元素
??快捷键（VSCode）：
多组标签文本输入：标签名*数量{文本内容}，后面加上花括号，自动补充标签内容。如table>tr*2>td*4{单元格}
name
age
birthday
zhangsan
22
2000-12-12
23
2000-12-12
多了一格
03、多媒体与嵌入
像![]()
![]()
图片
图片标签![]()
（image）单标签、行内元素，最核心属性src指向图片地址，可以是网络路径、文件地址。行内元素，不会自动换行，可嵌套在a标签里面，实现图片点击跳转效果。
元素/属性
描述
值/备注
src
图片资源的地址，支持网络路径、文件路径。
资源路径说明
alt
图片无效时的占位文字，建议填写有意义内容（或空），阅读器会读
这是一个充满人性化的属性！
height、width
高宽，只设置一个属性会自动等比缩放，所以一般设置一个即可
尺寸，图片无效时尺寸也无效了
srcset
候选图像：图像url 宽度w/像素密度x，多个逗号分割，优先于src。
根据屏幕密度，和sizes的设置来选择（下载）图像。
配合sizes实现响应式图片
sizes
资源的大小：媒体条件 尺寸值，多个逗号隔开。
基于媒体查询选择最合适图像（srcset）及设置图像显示大小
sizes="(max-width: 600px) 200px, 50vw
border边框粗细，已废弃，由css的border代替
像素
align相对于父容器内的对齐排列方式。已废弃
top、bottom、middle、left、right
新的srcset、sizes属性可用来更好的实现响应式图片，以适应不同分辨率的设备。不过老旧的浏览器并不支持，所以仍需保留src，以便更好的兼容。
??注意：在调试srcset、sizes的时候，img会缓存图片，手动调整浏览器窗口大小并不会立即生效，需清除缓存（或禁用缓存）。而
.png "鼠标悬停显示文字")
![图片不存在]()
.png)
.png)
现代图片
![]()
![]()
元素/属性
描述
媒体资源
?srcset
资源url
?media
媒体查询
media="(min-width: 800px)"大于800px时命中
?type
资源的MIME 类型
type="image/svg+xml"
在图片格式上，推荐多用新的图形，如.svg、.webp、.jpeg，可以在有高质量的同时有较低的文件大小。
内容块语义元素
为了更好的展示图片内容，可使用 HTML5 的 和 元素，专门用来展示图形内容的语义化容器元素，不过本身并没有什么特别的样式，需css。
元素/属性
描述
块元素 可附标题内容元素(figure /?f?ɡ?(r)/ 图形)，代表一段独立的内容。不一定要是一张图片，可以是几张图片、一段代码、音视频、方程、表格或别的。默认样式：缩进
块元素 描述了
洗一洗，那是我逝去的青春！
元素/属性
描述
媒体播放器，除了属性，还有很多JS方法事件用于视频播放控制
?src
视频资源url，MP3 (音频) 和 MP4/H.264 (视频) 是被广泛支持的两种格式，MP4专利到2027
?controls
启用视频控制功能
?width、height
宽高
?autoplay
启用自动播放，一般不建议使用
?loop
启用循环播放（ /lu?p/ 循环）
?muted
开启静音（muted /?mju?t?d/）
?poster
默认显示的海报图片URL（/?p??st?(r)/ 海报）
媒体资源，代替src，可以放多个，提升浏览器对媒体格式的兼容性。
时序字幕，
?标签内的内容
当浏览器不支持
音频播放器( /???di??/ )
?同
和
??注意：语义化块元素在_一些古老_的浏览器存在兼容性问题，如IE8。 资源路径。 ??当不希望a标签执行跳转，用来执行其onclick事件时，需设置 当 ??快捷键（VSCode）： 像 图片标签 新的 ??注意：在调试srcset、sizes的时候，img会缓存图片，手动调整浏览器窗口大小并不会立即生效，需清除缓存（或禁用缓存）。而 在图片格式上，推荐多用新的图形，如 为了更好的展示图片内容，可使用 HTML5 的
在HTML5中增加了和div相同作用的语义化块布局元素标签，这些元素定义了一个大概的语义范围，并没有一个严格的界限，同样也么有任何样式。语义块元素可读性更好，也更有利于SEO。
元素/属性
描述
块级无语义元素(division 分区)
?
align内部内容的对齐方式，已废弃
页眉：文档头部相关区域
导航栏：主导航相关区域
页脚：底部相关区域，如页面下面的版权信息、文章后面的申明信息等
侧边栏：页面内容以外的区域，如侧边栏、呼出框等
主内容：文档主内容区域
文章，表示一个独立的、可重复的内容块，如一篇博客、一条评论、一篇帖子
段落部件，文档中的章节、页眉、页脚，把
article分为多个section
div布局
语义布局
超链接
?? 锚点/文档片段：页面内部跳转，用#号标识， 作为文档片段使用，跟在url后面
?● href="#"，或不设置，跳转到头部
?● 用标签的name属性作为锚点，href="#name"：http://url#id
?● 用其他标签的id属性作为锚点，href="#id"：http://url#name
?? 电子邮件连接：href="mailto:URL"
?? 电话：href="tel:号码"
name
元素名称，可作为锚点
设置锚点
，跳转到锚点
target
告诉浏览器用什么方式来打开目标页面
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示；_top：在顶级窗口中显示。
rel
与目标对象的关系
download
指示这是一个下载地址
值为本地保存文件名
href="javascript:void(0)"，申明不执行跳转。显示的内容=a标签=百度
相对地址
默认#-跳转到头部
a标签的name属性作为锚点
任意元素的id属性作为锚点
不执行a标签跳转
a标签设置了href属性后，就是一个可以点击操作的超链接了，鼠标样式为小手形状（pointer），同时有三种显示模式（默认样式），都可以通过css样式（伪元素选择器）调整。
02、
表格
是一个嵌套组合的复合元素，块元素，一个表格table，有多个行，每行有多个单元格组成，常用于展示集合数据。
包含多种特有的子元素，构成表格的各个部分。
表格元素结构/顺序：?
?/?
元素/属性
描述
值/备注
定义表格元素
?border
表格外边框粗细，>=1，会同时开启单元格边框（1），通过css合并
像素
?align
整个表格相对于父容器的对齐方式
right、center、left
?width、height
表格宽度、高度，table/tr/td/th都支持
像素、百分比
?bgcolor
背景色，table/tr/td/th都支持
bgcolor="#F5F5F5"
表格行(table row)，包含多个th或td
?align
行内（单元格）内容的水平对齐方式，默认left
right、center、left
?valign
vertical，垂直对齐默认middle，对应的css属性为
vertical-aligntop、middle、bottom
?rowspan
行（水平）单元格合并，合并下面的单元格，需去掉对应的单元格
合并单元格的数量
基本单元格（table data cell）， 的子元素
?align
单元格内容的对齐方式
right、center、left
?width
单元格宽度，一列中多个高度设置则取最大值。
?colspan
列（垂直）单元格合并，合并右边的单元，需去掉对应的单元格
合并单元格的数量
其他语义化子元素
让表格结构更清晰，也更容易进行样式管理
表头，1个可选，包0或多个 元素
表头单元格(table header cell)，同 ，默认样式：居中、加粗
?scope
表头类型，（/sko?p/范围）row=行表头，col=列表头。
便于阅读器理解表格
表格标题，1个可选，可用css的caption-side设置位置
表格列分组，0个或多，包含多个
?span
横跨的列数，还有width、class、style用于管列样式
css支持的样式好像不多
?
列：
表格主体数据区域，零个或多个 ，包含多个元素
DOM中一直都会有的
汇总行，1个可选，包含0 或多个 元素
多组标签文本输入：标签名*数量{文本内容}，后面加上花括号，自动补充标签内容。如table>tr*2>td*4{单元格}
name
age
birthday
zhangsan
22
2000-12-12
23
2000-12-12
多了一格
03、多媒体与嵌入
这样的元素被称之为替换元素，因为这些元素的内容和尺寸由外部资源所定义，而不是元素自身。图片
（image）单标签、行内元素，最核心属性
src指向图片地址，可以是网络路径、文件地址。行内元素，不会自动换行，可嵌套在a标签里面，实现图片点击跳转效果。
元素/属性
描述
值/备注
src
图片资源的地址，支持网络路径、文件路径。
资源路径说明
alt
图片无效时的占位文字，建议填写有意义内容（或空），阅读器会读
这是一个充满人性化的属性！
height、width
高宽，只设置一个属性会自动等比缩放，所以一般设置一个即可
尺寸，图片无效时尺寸也无效了
srcset
候选图像：
图像url 宽度w/像素密度x，多个逗号分割，优先于src。
根据屏幕密度，和sizes的设置来选择（下载）图像。配合
sizes实现响应式图片
sizes
资源的大小：
媒体条件 尺寸值，多个逗号隔开。
基于媒体查询选择最合适图像（srcset）及设置图像显示大小sizes="(max-width: 600px) 200px, 50vw
border边框粗细，已废弃，由css的border代替
像素
align相对于父容器内的对齐排列方式。已废弃
top、bottom、middle、left、right
srcset、sizes属性可用来更好的实现响应式图片，以适应不同分辨率的设备。不过老旧的浏览器并不支持，所以仍需保留src，以便更好的兼容。
元素/属性
描述
媒体资源
?srcset
资源url
?media
媒体查询
media="(min-width: 800px)"大于800px时命中
?type
资源的MIME 类型
type="image/svg+xml".svg、.webp、.jpeg，可以在有高质量的同时有较低的文件大小。
元素/属性
描述
可附标题内容元素(figure /?f?ɡ?(r)/ 图形)，代表一段独立的内容。不一定要是一张图片，可以是几张图片、一段代码、音视频、方程、表格或别的。默认样式：缩进
描述了
元素/属性
描述
媒体播放器，除了属性，还有很多JS方法事件用于视频播放控制
?src
视频资源url，MP3 (音频) 和 MP4/H.264 (视频) 是被广泛支持的两种格式，MP4专利到2027
?controls
启用视频控制功能
?width、height
宽高
?autoplay
启用自动播放，一般不建议使用
?loop
启用循环播放（ /lu?p/ 循环）
?muted
开启静音（muted /?mju?t?d/）
?poster
默认显示的海报图片URL（/?p??st?(r)/ 海报）
媒体资源，代替src，可以放多个，提升浏览器对媒体格式的兼容性。
、、
时序字幕，
、的子元素
?标签内的内容
当浏览器不支持
时会显示，降级方案
音频播放器( /???di??/ )
?同
和
基本相同，除了没有width、height、poster属性