HTML常用标签及CSS常用样式

HTML常用标签

一、HTML页面标签

：声明必须是HTML文档的第一行，用来指示浏览器关于页面使用哪个HTML版本进行编译的指令。
：用来声明是一个HTML文档。
：用于定义文档的头部，它是所有头部元素的容器。
：定义关于 HTML 文档的元信息。
：定义文档的标题，在所有 HTML 文档中是必需的。
：body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

二、HTML基本标签

~

：标题标签，是标明文章、作品等内容主题的简短语句。

：段落标签，在网页中描述一段相对完整的内容。
：斜体标签，用于实现倾斜的字体样式。
：粗体标签，实现加粗的字体样式。

---

：水平线标签，在网页中加入平行线用来区分上下文。

：换行标签，用于跳到下一个新行。
：图像标签，用于在网页中添加图片。
：超链接标签，HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面。

三、HTML列表和表格标签

：用来声明无序列表，表示一个无序列表的开始和结束。必须和

标签配合使用，不能单独使用。

：用来声明有序列表，表示一个有序列表的开始和结束。必须和

标签配合使用，不能单独使用。

：用来表示列表项，在一个列表中可以包含多个列表项。

：用来声明自定义列表。

标签和

、

标签必须配合使用，不能单独使用。

标签内部不能存在任何其他标签。

：用来表示列表标题。

：用来表示列表内容。
：表格标签，用来定义表格。
：用来定义表格由若干行组成。
：用来定义表格中的表头单元格。
：用来定义每行被分割为若干单元格。

四、HTML表单标签

：表单标签，用于创建供用户输入的 HTML 表单。
：规定了用户可以在其中输入数据的输入字段，type类型可包括text、number、tel、range、radio、checkbox、email、
password、search等。 元素在

元素中使用，用来声明允许用户输入数据的 input 控件。
：为 元素定义标注（标记）， 元素不会向用户呈现任何特殊效果，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
：下拉列表标签，用来创建下拉列表。
：选项标签，用来定义列表中的可用选项。
：文本域标签，定义一个多行的文本输入控件。
：用来对表单中的相关元素进行分组。需要和

标签配合使用。

：为

元素定义标题。
：定义一个按钮，在 元素内部可以放置内容，比如文本或图像，这是该元素与使用 元素创建的按钮之间的不同之处。

五、HTML其他标签

：定义 HTML 文档的样式信息。
：定义音频内容。
：定义视频内容。

：块标签，定义 HTML 文档中的一个分隔区块或者一个区域部分。常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
： 用于对文档中的行内元素进行组合，提供了一种将文本的一部分或者文档的一部分独立出来的方式。当对它应用样式时，它才会产生视觉上的变化。
：定义文档与外部资源的关系，可用来导入外部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属性

作用：设置元素的外边框圆角。