HTML常用标签
一、HTML页面标签
<!DOCTYPE>：声明必须是HTML文档的第一行，用来指示浏览器关于页面使用哪个HTML版本进行编译的指令。
<html></html>：用来声明是一个HTML文档。
<head></head>：用于定义文档的头部，它是所有头部元素的容器。
<meta></meta>：定义关于 HTML 文档的元信息。
<title></title> ：定义文档的标题，在所有 HTML 文档中是必需的。
<body></body>：body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
二、HTML基本标签
<h1>~<h6>：标题标签，是标明文章、作品等内容主题的简短语句。
<p></p>：段落标签，在网页中描述一段相对完整的内容。
<em></em>：斜体标签，用于实现倾斜的字体样式。
<strong></strong>：粗体标签，实现加粗的字体样式。
<hr>：水平线标签，在网页中加入平行线用来区分上下文。
<br>：换行标签，用于跳到下一个新行。
<img>：图像标签，用于在网页中添加图片。
<a></a>：超链接标签，HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面。
三、HTML列表和表格标签
<ul></ul>：用来声明无序列表，表示一个无序列表的开始和结束。必须和<li>标签配合使用，不能单独使用。
<ol></ol>：用来声明有序列表，表示一个有序列表的开始和结束。必须和<li>标签配合使用，不能单独使用。
<li></li>：用来表示列表项，在一个列表中可以包含多个列表项。
<dl></dl>：用来声明自定义列表。<dl>标签和<dt>、<dd>标签必须配合使用，不能单独使用。<dl>标签内部不能存在任何其他标签。
<dt></dt>：用来表示列表标题。
<dd></dd>：用来表示列表内容。
<table></table>：表格标签，用来定义表格。
<tr></tr>：用来定义表格由若干行组成。
<th></th>：用来定义表格中的表头单元格。
<td></td>：用来定义每行被分割为若干单元格。
四、HTML表单标签
<form></form>：表单标签，用于创建供用户输入的 HTML 表单。
<input></input>：规定了用户可以在其中输入数据的输入字段，type类型可包括text、number、tel、range、radio、checkbox、email、
password、search等。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。
<label></label> ：为 <input>元素定义标注（标记），<label> 元素不会向用户呈现任何特殊效果，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<select></select>：下拉列表标签，用来创建下拉列表。
<option></option>：选项标签，用来定义列表中的可用选项。
<textarea></textarea>：文本域标签，定义一个多行的文本输入控件。
<filedset></filedset>：用来对表单中的相关元素进行分组。需要和<legend>标签配合使用。
<legend></legend>：为 <fieldset> 元素定义标题。
<button></button> ：定义一个按钮，在 <button> 元素内部可以放置内容，比如文本或图像，这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
五、HTML其他标签
<style></style> ：定义 HTML 文档的样式信息。
<audio></audio>：定义音频内容。
<video></video>：定义视频内容。
<div></div>：块标签，定义 HTML 文档中的一个分隔区块或者一个区域部分。常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
<span></span>： 用于对文档中的行内元素进行组合，提供了一种将文本的一部分或者文档的一部分独立出来的方式。当对它应用样式时，它才会产生视觉上的变化。
<link>：定义文档与外部资源的关系，可用来导入外部CSS文件。
CSS常用样式
一、CSS基础样式
1 字体样式
| 分类 |
描述 |
| font |
字体属性，包含字体风格、字体粗细、字体大小、字体类型，属性值之间有先后顺序 |
| font-family |
字体类型 |
| font-size |
字体大小 |
| font-style |
字体风格 |
| font-weight |
字体粗细 |
2 文本样式
| 分类 |
描述 |
| color |
设置文本颜色 |
| text-align |
设置元素水平对齐方式 |
| text-indent |
设置首行文本的缩进 |
| line-height |
设置文本的行高 |
| text-decoration |
设置文本的装饰 |
2.1 text-decoration 文本装饰
| 分类 |
描述 |
| none |
默认，标准文本 |
| underline |
定义文本下划线 |
| overline |
定义文本上划线 |
| line-through |
定义穿过文本的一条线 |
3 鼠标样式（cursor）
| 分类 |
描述 |
| default |
默认光标 |
| help |
提示可用的帮助 |
| text |
指示文档 |
| pointer |
超链接指针 |
| wait |
等待状态 |
| crosshair |
鼠标呈现十字状 |
4 背景样式
| 分类 |
描述 |
| background |
背景属性，包含图片地址、图片重复方式、背景颜色、背景定位，属性值之间没有先后顺序。 |
| background-color |
背景颜色 |
| background-repeat |
背景重复方式 |
| background-position |
背景定位 |
| background-image |
背景图片 |
4.1 background-repeat 背景重复方式
| 分类 |
描述 |
| no-repeat |
不重复 |
| repeat-x |
水平重复 |
| repeat-y |
垂直重复 |
| repeat |
默认重复 |
4.2 background-position 背景定位
| 分类 |
描述 |
| 水平方向 |
left、center、right |
| 垂直方向 |
top、center、bottom |
5 列表样式
| 分类 |
描述 |
| list-style |
列表属性，包含列表类型、自定义列表标记图片、列表定位 |
| list-style-type |
列表类型 |
| list-style-image |
自定义列表标记图片 |
| list-style-position |
列表定位 |
5.1 list-style-type 列表类型
| 分类 |
描述 |
| disc |
实体圆心（默认） |
| circle |
空心圆 |
| square |
实体方心 |
| none |
无列表标记 |
5.2 list-style-position 列表定位
| 分类 |
描述 |
| outside |
默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 |
| inside |
列表项目标记放置在文本以内，且环绕文本根据标记对齐 |
6 CSS伪类
| 分类 |
描述 |
| link |
单击访问前 |
| visited |
单击访问后 |
| hover |
鼠标悬浮其上 |
| active |
单击未释放 |
二、盒子模型
1 边框（border）
1.1 边框样式
| 分类 |
描述 |
| border-top-style |
上边框样式 |
| border-right-style |
右边框样式 |
| border-bottom-style |
下边框样式 |
| border-left-style |
左边框样式 |
| border-style |
同时设置四个边框样式 |
1.1.1 边框样式值
| 分类 |
描述 |
| none |
无边框 |
| solid |
实线边框 |
| dashed |
虚线边框 |
| dotted |
点状边框 |
| double |
双线边框 |
| hidden |
与none相同，应用于解决边框冲突 |
1.2 边框颜色
| 分类 |
描述 |
| border-top-color |
上边框颜色 |
| border-right-color |
右边框颜色 |
| border-bottom-color |
下边框颜色 |
| border-left-color |
左边框颜色 |
| border-color |
同时设置四个边框颜色 |
1.3 边框粗细
| 分类 |
描述 |
| border-top-width |
上边框粗细 |
| border-right-width |
右边框粗细 |
| border-bottom-width |
下边框粗细 |
| border-left-width |
左边框粗细 |
| border-width |
同时设置四个边框粗细 |
1.4 边框简写
| 分类 |
描述 |
| border-top |
同时设置上边框粗细、颜色、样式 |
| border-right |
同时设置右边框粗细、颜色、样式 |
| border-bottom |
同时设置下边框粗细、颜色、样式 |
| border-left |
同时设置左边框粗细、颜色、样式 |
| border |
同时设置四个边框的粗细、颜色、样式 |
2 内边距（padding）
| 分类 |
描述 |
| padding-top |
顶部内边距 |
| padding-right |
右侧内边距 |
| padding-bottom |
底部内边距 |
| padding-left |
左侧内边距 |
| padding |
同时设置顶部、右侧、底部、左侧内边距 |
3 外边距 (margin)
| 分类 |
描述 |
| margin-top |
顶部外边距 |
| margin-bottom |
底部外边距 |
| margin-right |
右侧外边距 |
| margin-left |
左侧外边距 |
| margin |
同时设置顶部、右侧、底部、左侧外边距 |
4 box-sizing属性
| 属性值 |
描述 |
| content-box |
盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框 |
| border-box |
盒子的实际高度和宽度包括元素内容、边框和内边距 |
5 display属性
作用：控制元素的显示和隐藏，块级元素和内联（行内）元素的转变。
| 属性值 |
描述 |
| none |
设置元素不会被展示 |
| inline |
元素显示为内联（行内）元素 |
| block |
元素会被显示为块级元素 |
| inline-block |
行内块元素 |
三、 CSS浮动
1 float属性
作用：css样式中的定位属性，用于设置标签对象的浮动布局。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
| 属性值 |
描述 |
| none |
默认值，元素不浮动 |
| left |
元素向左浮动 |
| right |
元素向右浮动 |
2 clear属性
作用：clear属性规定了在元素的哪一侧不允许有浮动。
| 属性值 |
描述 |
| none |
默认值，允许浮动元素出现在两侧 |
| left |
在左侧不允许浮动元素 |
| right |
在右侧不允许浮动元素 |
| both |
在左右两侧均不允许浮动元素 |
3 overflow属性
作用：设置当div容器中的内容超出div高度时的布局，使用overflow属性扩展盒子高度减少代码量，也减少了空的HTML标签，使代码更加简洁，清晰，从而提高了代码的可读性和网页性能。
| 属性值 |
描述 |
| auto |
自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容 |
| scroll |
超出内容会被修剪，但是浏览器会显示滚动条以便查看超出内容 |
| hidden |
超出内容会被修剪，并且超出内容是不可见的，隐藏的 |
| visible |
超出内容不会被修剪，会正常显示在容器外部 |
四、 CSS定位
1 position属性
作用：position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。
| 属性值 |
描述 |
| static |
默认值，没有定位，元素会以标准文档流输出 |
| relative |
相对定位，相对定位相对的是它原本在文档流中的位置而进行的偏移，相对定位也是遵循正常的文档流，没有脱离文档流 |
| absolute |
绝对定位，元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位 |
| fixed |
固定定位，相对于浏览器窗口进行定位。不会根据滚动条的滚动而进行偏移 |
1.1 相对定位
| 分类 |
描述 |
| top |
相对自身原来位置向顶部进行偏移 |
| right |
相对自身原来位置向右侧进行偏移 |
| left |
相对自身原来位置向左侧进行偏移 |
| bottom |
相对自身原来位置向底部进行偏移 |
1.2 绝对定位
| 分类 |
描述 |
| top |
根据离本身最近的已经定位的祖先元素进行顶部偏移，如没有，则根据浏览器窗口进行偏移 |
| right |
根据离本身最近的已经定位的祖先元素进行右侧偏移，如没有，则根据浏览器窗口进行偏移 |
| left |
根据离本身最近的已经定位的祖先元素进行左侧偏移，如没有，则根据浏览器窗口进行偏移 |
| bottom |
根据离本身最近的已经定位的祖先元素进行底部偏移，如没有，则根据浏览器窗口进行偏移 |
2 z-index属性
z-index属性默认值为0。
作用：调整元素定位时重叠层的上下位置。
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方。
五、 其他属性
1 transition属性
作用：设置元素的过渡效果。
2 transform属性
作用：应用于元素的2D或3D转换。可将元素旋转、缩放、移动、倾斜等。
3 border-radius属性
作用：设置元素的外边框圆角。