1、文档声明、文档结构、功能标签

注：
HTML/HTML5 骨架相关基础标签

分类标签名称描述
文档声明<!DOCTYPE>用于告诉浏览器此文档的类型是什么<br/>处于标签之前。用于告诉浏览器此文档的类型是什么。目前开发中常用的声明是<!DOCTYPE html>，表示声明一个 HTML5 文档。<br/>它不属于 HTML 标签，而是一条指令
文档结构标签html，head，title，body（1）html 标签：每创建一个 HTML 文件，都需要创建 html 标签对。除了声明文档类型的代码，其他的所有内容都存放在 html 标签对中；<br/>（2） head 标签：定义文档的头部，用来包含网页的配置（例如网页的标题 title，网页的基础配置 meta 都放在 head 中）；<br/>（3）title 标签：定义网页的标题，标题内容会显示在浏览器的标签栏上<br/>（4）body 标签：定义网页的主体，例如：网页中的图片、文字等
功能标签meta元标签，用来表示网页的基础配置

2、块级元素

注：
块级元素可以独占一行，默认自上而下排列，可以设置宽高。

标签名称描述
h1 ~ h6一级标题 ~ 六级标题
p段落标签，用来描述网页中的段落内容
div用于页面区域的划分。它就像一个容器，用来放某一个区域的内容
ul，ol定义无序列表，定义有序列表
li定义列表项，与 ul 或者 ol 配合使用
dt，dd定义列表中的项目， 描述列表中的项目
figure定义一段独立的内容（不常用，了解即可）
figcaption定义 figure 元素的标题（不常用，了解即可）
form表单标签，里面包含很多搜集信息的表单元素，如输入框，复选框等
table，canvas定义 HTML 表格，通过脚本（通常是 JavaScript）来绘制图形
pre预格式化的文本

3、区块标签

注：
html5 新增的语义化标签

标签名称描述
header定义页头
nav定义导航
main定义页面的主体区域
aside可用作文章的侧栏
article可用作文章的内容
section可用作文档的区域块，类似于 div
footer定义页脚

4、内联元素

注：
内联元素不会自占一行，与其他内联元素在同一行显示，且宽高由内容撑起。

标签名称描述
a超链接标签，用于从一张页面链接到另一张页面
span用来组合文档中的行内元素，一般用来包裹文字
label为 input 元素定义标注（标记）label 可设置 for 属性
b，u字体加粗标签，下划线文本标签（不常用，了解即可）
i，strong斜体文本标签，用于强调文本的标签字体会加粗（不常用，了解即可）
em用于强调文本的标签，字体变成斜体（不常用，了解即可）
mark突出显示文本的标签，字体会有背景颜色，默认的是黄色（不常用，了解即可）
datalist标签/控件，需要结合 option 标签使用（不常用，了解即可）

5、特殊内联元素

注：
可以设置宽高，但不独占一行

标签名称描述
img图片标签，用于在网页中嵌入图片
audio音频标签，用于在页面中引入音频
video视频标签，用于在页面中引入视频
input定义用户可输入数据的输入字段。例如登录页面的用户名和密码框，都是使用 input 标签
select定义下拉列表
option定义下拉列表项，需要与 select 配合使用（块元素，写在这里是因为它需要跟 select 标签一起使用）
textarea定义多行文本框，常用于留言框、备注框等

6、转义字符

标签名描述
&nbsp;表示空格符号
&lt;表示小于号“<”
>表示大于号“>”
©表示版权符号“©”

7、表格标签

标签名描述
table表格标签
tr表格行
td表格列
th标签，可替代 td 标签，用来设置表格的标题
thead定义表格头部
tbody定义表格主体内容
tfoot定义表格尾部
caption设置表格的标题

8、标签中的属性

属性名描述
langhtml 标签的属性，用来标记网页的语言；<br/>常见属性值有："en"和"zh"；en 代表英语, zh 代表中文
charsetmeta 标签的属性，声明页面文档使用的字符编码类型。<br/>常用的属性值有：UTF-8 和 GB2312
type修改无序列表与有序列表默认的前导样式（已被废弃，了解即可）<br/>1、type 属性写在无序列表中，属性值有：<br/>（1）disc：默认值，实心圆样式<br/>（2）circle： 空心圆样式<br/>（3）square：实心方块样式<br/>2、type 属性写在无序列表中，属性值有：<br/>（1）1：默认值，数字编号<br/>（2）A：大写英文编号<br/>（3）i：小写罗马数字编号<br/>（4）I：大写罗马数字编号<br/>（5）a：小写英文编号
start有序列表的属性，指定列表编号的起始值，能修改有序列表标签默认的前导样式（不常用，了解即可）
reversed有序列表的属性，指定列表中的条目是否倒序排列的（不常用，了解即可）
src（1）img 标签的属性，指定图片的路径<br/>（2）audio 标签和 video 标签也可以设置 src 属性，指定音频、视频的路径
altimg 标签的属性，用来对引入的图片进行文本描述
width规定元素的宽度。此属性不常用，了解即可。后续学习 css，会使用 css 样式设置元素宽度
height规定元素的高度。此属性不常用，了解即可。后续学习 css，会使用 css 样式设置元素高度。<br/>注意，height 或者 width 如果省略其中一个属性，则按照图片原始比例缩放图片
hrefa 标签属性，规定该链接要跳转到目标页面的地址
titlea 标签属性，设置鼠标悬停的文本
targeta 标签属性，规定在何处打开链接文档；<br/>如果属性值为 blank 或_blank，会打开新的标签页
controlsaudio/video 的属性，用于显示播放控件
autoplayaudio/video 的属性，设置音频/视频自动播放
loopaudio/video 的属性，设置音频/视频可以循环播放
class所有标签都可以使用这个属性，用来定义元素的类名（后续学习 css，会有详细的讲解）
actionform 标签的属性，用来设置 form 表单的数据要提交到哪个地址。提交到哪个地址，后端开发会告诉我们（不常用，了解一下。提交数据常用 ajax，后面会学习到的）
methodform 标签的属性，用来设置表单的提交方式，常用的方式有 get 或 post（不常用，了解即可）
rowstextarea 标签属性，设置多行文本框有多少列
colstextarea 标签属性，设置多行文本框有多少行
listdatalist 控件的属性，二者结合，可以与输入框绑定，为输入框设置备选项（不常用，了解即可）
border边框属性，可为 table 添加边框
border-collapsecss 样式，通常给表格设置 border-collapse：collapse；让表格边框合并，成为单线表格;
colspan表格标签的属性，实现跨列合并的效果，用来设置 td 或 th 跨列合并
rowspan表格标签的属性，实现跨列合并的效果，用来设置 td 或 th 跨行合并
cellspacing设置表格单元格内容与边框之间的间隙（不常用，了解即可）
cellpadding设置两个单元格之间的间隙（不常用，了解即可）

9、input 元素中的属性

属性名称描述
type用来定义表单元素的类型。属性值如下：<br/>（1）text：单行文本输入框<br/>（2）radio：单选按钮<br/>（3）checkbox：复选框<br/>（4）password：密码框<br/>（5）button：普通按钮，也可以直接写成 button 按钮，例如：<br/>（6）submit：提交按钮<br/>（7）reset：重置按钮<br/>（8）color：颜色控件（不常用，了解即可）<br/>（9）date：日期控件<br/>（10）time：时间控件<br/>（11）email：电子邮件输入控件<br/>（12）file：文件选择控件，需要上传本地文件时，可以使用它<br/>（13）number：表示数字输入控件<br/>（14）range：表示拖拽条（不常用，了解即可）<br/>（15）search：t 表示搜索框（不常用，了解即可）<br/>（16）url：表示网址输入控件
value用于为 input 元素设定值，value 值一般是给后端发送数据时使用，后续学习了相关课程就会了解
name规定 input 元素的名称
checked用来设置单选按钮、多选按钮的默认选中项
placeholder表示提示文本，用来设置输入框的提示信息，告诉用户该输入框需要输入什么内容
disabled用于禁用 input 元素，表示只读
maxmax 表示最大值，表示数字输入控件（即 type="number"的 input 元素）允许输入的最大值
minmin 表示最小值，最小值，表示数字输入控件（即 type="number"的 input 元素）允许输入的最小值
require表示必填字段，约束某项内容是必填项，比如规定”用户名“项，是必填项

CSS

CSS属性按字母顺序查找，本部分包含属于最新CSS3规范的标准属性的完整列表。所有属性都分为动画属性、背景属性、边框属性、颜色属性、高度宽度尺寸大小、Flex弹性盒子、字体属性、列表项属性、边距属性、轮廓属性、文字字体属性、视觉属性等等。

动画属性(Animation)

属性描述
animation指定基于关键帧的动画。
animation-delay指定动画何时开始。
animation-direction指定动画是否应在交替的循环中反向播放。
animation-duration指定动画完成一个周期应花费的秒数或毫秒数。
animation-fill-mode指定CSS动画在执行之前和之后应如何将样式应用于其目标。
animation-iteration-count指定在停止之前动画循环应播放的次数。
animation-name指定@keyframes应应用于所选元素的已定义动画的名称。
animation-play-state指定动画是运行还是暂停。
animation-timing-function指定CSS动画在每个周期内应如何进行。

背景属性(Background)

属性描述
background在一个声明中定义各种背景属性。
background-attachment指定背景图像是在视口中固定还是滚动。
background-clip指定背景的绘制区域。
background-color定义元素的背景色。
background-image定义元素的背景图像。
background-origin指定背景图像的定位区域。
background-position定义背景图像的原点。
background-repeat指定是否/如何平铺背景图像。
background-size指定背景图像的大小。

边框属性(Border)

属性描述
border设置元素边框所有四个侧面的宽度，样式和颜色。
border-bottom设置元素底部边框的宽度，样式和颜色。
border-bottom-color设置元素底部边框的颜色。
border-bottom-left-radius定义元素的左下边界角的形状。
border-bottom-right-radius定义元素右下边界的形状。
border-bottom-style设置元素底部边框的样式。
border-bottom-width设置元素底部边框的宽度。
border-color设置元素所有四个侧面的边框颜色。
border-image指定如何使用图像代替边框样式。
border-image-outset指定边框图像区域超出边框超出范围的数量。
border-image-repeat指定图像边框应重复，四舍五入还是拉伸。
border-image-slice指定图像边框的向内偏移。
border-image-source指定要用作边框的图像的位置。
border-image-width指定图像边框的宽度。
border-left设置元素左边框的宽度，样式和颜色。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素左边框的样式。
border-left-width设置元素左边框的宽度。
border-radius定义元素边界角的形状。
border-right设置元素右边框的宽度，样式和颜色。
border-right-color设置元素右边框的颜色。
border-right-style设置元素右边框的样式。
border-right-width设置元素右边框的宽度。
border-style在元素的所有四个面上设置边框的样式。
border-top设置元素顶部边框的宽度，样式和颜色。
border-top-color设置元素顶部边框的颜色。
border-top-left-radius定义元素左上角的形状。
border-top-right-radius定义元素的右上边界角的形状。
border-top-style设置元素顶部边框的样式。
border-top-width设置元素顶部边框的宽度。
border-width设置元素所有四个侧面的边框宽度。

颜色属性(Color)

属性描述
color指定元素文本的颜色。
opacity指定元素的透明度。

尺寸属性(Size)

属性描述
height指定元素的高度。
max-height指定元素的最大高度。
max-width指定元素的最大宽度。
min-height指定元素的最小高度。
min-width指定元素的最小宽度。
width指定元素的宽度。

内容属性(Content)

属性描述
content插入生成的内容。
quotes指定嵌入引号的引号。
counter-reset创建或重置一个或多个计数器。
counter-increment递增一个或多个计数器值。

弹性Flex盒子布局(Flex)

属性描述
align-content指定伸缩容器中伸缩容器的项目的对齐方式。
align-items为flex容器中的项目指定默认对齐方式。
align-self指定弹性容器中选定项目的对齐方式。
flex指定弹性长度的分量。
flex-basis指定弹性项目的初始主要尺寸。
flex-direction指定弹性项目的方向。
flex-flowflex-direction和flex-wrap属性的简写属性。
flex-grow指定弹性项目相对于弹性容器内其他项目的增长方式。
flex-shrink指定flex项目相对于flex容器内其他项目的收缩方式。
flex-wrap指定是否应包装柔性物品。
justify-content指定在解决了任何弹性长度和自动页边距之后，弹性项目如何沿弹性容器的主轴对齐。
order指定弹性项目在弹性容器中的显示和布局顺序。

字体属性(Fonts)

属性描述
font在一个声明中定义各种字体属性。
font-family定义元素的字体列表。
font-size定义文本的字体大小。
font-size-adjust发生字体回退时，保留文本的可读性。
font-stretch从字体中选择一个普通的，压缩的或扩展的字体。
font-style定义文本的字体样式。
font-variant指定字体变体。
font-weight指定文本的字体粗细。

列表项属性(Lists)

属性描述
list-style定义列表和列表元素的显示样式。
list-style-image指定用作列表项标记的图像。
list-style-position指定列表项标记的位置。
list-style-type指定列表项的标记样式。

边距属性(Margin)

属性描述
margin在元素的所有四个面上设置边距。
margin-bottom设置元素的底边距。
margin-left设置元素的左边距。
margin-right设置元素的右边距。
margin-top设置元素的上边距。

多列布局属性(Column)

属性描述
column-count指定多列元素中的列数。
column-fill指定如何填充列。
column-gap指定多列元素中各列之间的间隔。
column-rule指定在多列元素的每一列之间绘制的直线或“规则”。
column-rule-color指定在多列布局中的列之间绘制的规则的颜色。
column-rule-style指定在多列布局中的列之间绘制的规则的样式。
column-rule-width指定在多列布局中的列之间绘制的规则的宽度。
column-span指定元素在多列布局中跨越多少列。
column-width指定多列元素中列的最佳宽度。
columns用于设置column-width和column-count属性的简写属性。

轮廓属性(Outline)

属性描述
outline设置元素轮廓的所有四个边的宽度，样式和颜色。
outline-color设置轮廓的颜色。
outline-offset设置轮廓和元素边框之间的空间。
outline-style设置轮廓样式。
outline-width设置轮廓的宽度。

填充属性(Padding)

属性描述
padding在元素的所有四个面上设置填充。
padding-bottom将填充设置为元素的底侧。
padding-left将填充设置为元素的左侧。
padding-right将填充设置为元素的右侧。
padding-top将填充设置为元素的顶部。

打印属性(Print)

属性描述
page-break-after在元素之后插入分页符。
page-break-before在元素之前插入分页符。
page-break-inside在元素内插入分页符。

表属性(Table)

属性描述
border-collapse指定是连接还是分隔表格单元格边界。
border-spacing设置相邻表格单元格的边界之间的间距。
caption-side指定表格标题的位置。
empty-cells显示或隐藏空表单元格的边框和背景。
table-layout指定表布局算法。

文字属性(Text)

属性描述
direction定义文本方向/书写方向。
tab-size指定制表符的长度。
text-align设置内联内容的水平对齐方式。
text-align-last指定当text-alignis时如何对齐块的最后一行或强制换行符之前的行justify。
text-decoration指定添加到文本的装饰。
text-decoration-color指定的颜色text-decoration-line。
text-decoration-line指定将哪种线条装饰添加到元素。
text-decoration-style指定text-decoration-line属性指定的线条样式
text-indent缩进文本的第一行。
text-justify指定当text-align属性设置为时要使用的对正方法justify。
text-overflow指定当文本内容溢出块容器时将如何显示。
text-shadow将一个或多个阴影应用于元素的文本内容。
text-transform转换文本的大小写。
line-height设置文本行之间的高度。
vertical-align设置元素相对于当前文本基线的垂直位置。
letter-spacing设置字母之间的额外间距。
word-spacing设置单词之间的间距。
white-space指定如何处理元素内的空白。
word-break指定如何在单词内换行。
word-wrap指定在内容超出其容器边界时是否中断单词。

转换属性(Transform)

属性描述
backface-visibility指定当面对用户时，转换后的元素的“背面”是否可见。
perspective定义从中查看对象的所有子元素的透视图。
perspective-origin定义透视图属性的原点（3D空间的消失点）。
transform将2D或3D变换应用于元素。
transform-origin定义元素的变换原点。
transform-style指定如何在3D空间中渲染嵌套元素。

过渡属性(Transition)

属性描述
transition定义元素的两种状态之间的过渡。
transition-delay指定过渡效果何时开始。
transition-duration指定过渡效果要花费的秒数或毫秒数。
transition-property指定应将过渡效果应用到的CSS属性的名称。
transition-timing-function指定过渡效果的速度曲线。

视觉格式属性

属性描述
display指定元素在屏幕上的显示方式。
position指定如何定位元素。
top指定所定位元素的上边缘的位置。
right指定所定位元素的右边缘的位置。
bottom指定所定位元素底边的位置。
left指定定位元素左边缘的位置。
float指定一个框是否应该浮动。
clear指定相对于浮动元素的元素位置。
z-index指定定位元素的分层或堆叠顺序。
overflow指定对溢出元素框的内容的处理。
overflow-x指定当内容超出元素内容区域的宽度时如何管理内容。
overflow-y指定当内容超出元素内容区域的高度时如何管理内容。
resize指定元素是否可由用户调整大小。
clip定义裁剪区域。
visibility指定一个元素是否可见。
cursor指定游标的类型。
box-shadow将一个或多个阴影应用于元素的框。
box-sizing更改默认的CSS框模型。
最后修改：2023 年 09 月 17 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏