背景样式

**设置背景样式的属性**
属性	含义
color	设置前景颜色。
background-color	设置背景色
background-image	设置背景图片的URL地址
background-repeat	设置背景图片的平铺方式
background-position	用于改变背景图片的位置。此位置是相对于左上角的相对位置。
background-attachment	指定背景图像是否随着用户滚动窗口而滚动。该属性有两个属性值，fixed表示图像固定，scroll表示图像滚动

background-repeat属性取值：repeat（指定图片横向和纵向都平铺）、repeat-x（指定图片横向平铺）、repeat-y（指定图片纵向平铺）、no-repeat（指定图片不平铺）。

边框样式

**设置边框样式的属性**
边框相关属性	描述
border-color	定义边框颜色
border-width	定义边框大小
border-style	定义边框样式
border-left-*	定义左边框
border-right-*	定义右边框
border-top-*	定义上边框
border-bottom-*	定义下边框

border-style常用的边框样式有 solid（实线）、 dashed（虚线）和 dotted（点线）三种样式。

文字样式

**设置文字样式的属性**
字体相关属性	描述
font-family	定义字体类型
font-size	定义字体大小
font-weight	定义字体粗细
font-style	定义字体样式
font-variant	设置小型大写字母的字体显示文本，也就是说，所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。可以是下面的值。 normal：默认值。指定显示一个标准的字体。 small-caps：指定显示小型大写字母的字体。 inherit：指定应该从父元素继承font-variant属性的值。
color	定义字体颜色

font-style属性一般可用来设置文字的斜体效果，其取值有normal（正常体（默认））、italic（斜体）和oblique（斜体）三种，在没有斜体变量（itallic）的特殊字体，要应用oblique。

段落样式

**设置段落样式相关属性**
段落相关属性	描述
text-decoration	定义文本装饰
text-transform	定义文本大小写
text-indent	定义文本缩进
text-align	定义文本对齐方式
line-height	定义行高
letter-spacing	定义字间距
word-spacing	定义词间距

text-decoration

text-decoration可以给段落添加下划线、删除线、顶划线等效果。

**text-decoration取值**
取值	效果
none	无装饰线（默认）
underline	下划线
line-through	删除线
overline	顶划线
blink	文本闪烁

一般情况下，text-decoration属性常用none、underline、line-through这三个值，而overline和blink用得很少，而且blink闪烁效果目前浏览器都不支持。

text-transform

**text-transform**
取值	效果
none	无转换发生（默认）
uppercase	转换成大写
lowercase	转换成小写
capitalize	将每个英文单词的首字母转换成大写，其余无转换发生

text-indent

text-indent最常见的用途是将段落的首行进行缩进。

css单位长度

在CSS中常用的单位长度是px、em、rem，它们之间的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem是相对长度单位，em相对于父元素，rem相对于根元素（rem中的r是指root）。

line-height

line-height属性用来设置行高，所谓行高就是“一行的高度”，指的是文本大小加上行与行之间的间距，行高中的上间距和下间距是等值关系。

letter-spacing

letter-spacing属性用来设置字间距。letter-spacing控制的是字间距，每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”。

word-spacing

word-spacing属性是用来设置词间距。以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

复合样式

1、background

background属性是背景样式的复合写法。（背景的多组样式用空格隔开，且不分先后顺序。）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>复合样式</title>
</head><body><div style="width: 400px; height: 100px; background-color: yellow;background-image: url(logo.png); background-repeat: no-repeat;background-position: right bottom;"></div><br><div style="width: 400px; height: 100px;background: yellow url(logo.png) no-repeat right bottom;"></div>
</body></html>

2、border

border属性是边框样式的复合写法。（同背景一样，边框复合样式也不区分先后顺序，只通过空格隔开即可。）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>复合样式</title>
</head><body><div style="width: 400px; height: 100px; border-color: red;border-width: 5px; border-style: solid;"></div><br><div style="width: 400px; height: 100px;border: 5px red solid;"></div>
</body></html>

单独针对某一方向的边框，可以采用复合样式，例如右边框复合样式：

border-right: 5px blue dashed;

3、font

font属性是字体样式的复合写法。（字体的复合样式是有顺序的，必须先写样式和粗细，再写大小，最后才能写文字类型。）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>复合样式</title>
</head><body><p style="width: 400px; font-family: monospace; font-size: 20px;font-style: italic; font-weight: bold;"></p>视频提供了功能强大的方法帮助您证明您的观点。当您单击联机视频时，可以在想要添加的视频的嵌入代码中进行粘贴。您也可以键入一个关键字以联机搜索最适合您的文档的视频。为使您的文档具有专业外观，Word 提供了页眉、页脚、封面和文本框设计，这些设计可互为补充。例如，您可以添加匹配的封面、页眉和提要栏。单击“插入”，然后从不同库中选择所需元素。    <br><p style="width: 400px; font: italic bold 20px monospace"></p>视频提供了功能强大的方法帮助您证明您的观点。当您单击联机视频时，可以在想要添加的视频的嵌入代码中进行粘贴。您也可以键入一个关键字以联机搜索最适合您的文档的视频。为使您的文档具有专业外观，Word 提供了页眉、页脚、封面和文本框设计，这些设计可互为补充。例如，您可以添加匹配的封面、页眉和提要栏。单击“插入”，然后从不同库中选择所需元素。
</body></html>

字体的复合样式还能把行高加进去。

font : italic bold 20px/40px KaiTi;

复合写法注意事项：

尽量采用复合样式书写CSS。尽量避免复合样式与单一样式混写。如果混写要注意先写复合样式，后写单一样式，否则可能会出问题，因为后写的样式会覆盖先写的样式。

选择符

id选择符

id选择符是可以给指定的标签设置一个id属性和一个id值，然后通过id选择符（即“# + id值”）找到对应的标签为其设置id值，即添加CSS样式。

id选择符的特点是，在同一个页面中，不允许出现两个相同的id值，就像每个人的身份证号都是唯一的一样，id选择符也具有唯一性。

class选择符

class选择符也叫“类”选择符，可以给指定的标签设置一个class属性和class值，然后通过class选择符（即“. + class值”）找到对应的标签为其设置class值，即添加CSS样式。

class选择符的特点跟id选择符不同，在同一个页面中，class值可以重复出现，即可以重复利用CSS样式。

伪类选择符

为了提高用户体验，在定义超链接时，经常需要为超链接指定不同的状态，表示超链接在单击前、单击后和鼠标悬停时的不同的样式。在CSS中，通过链接伪类选择符可以实现不同的链接状态。伪类选择符用于向某些HTML标签添加特殊的效果。伪类选择符包含的内容很多，基础的有link、hover、active和visited四个伪类选择符，其中的link、visited这两个伪类选择符只能用在<a>标签上，hover、active这两个伪类选择符则可以用在所有的标签上。伪类选择符通过冒号（:）的方式来设置。

link伪类是用来设置<a>标签“未访问”时的样式（未访问过的超链接）。

hover伪类是用来设置HTML标签“鼠标滑过”时的样式（鼠标指针放上去、悬停状态时的样式）。

active伪类是用来设置HTML标签“鼠标按下”时的样式（鼠标点击时的样式）。

visited伪类是用来设置<a>标签“访问过后”时的样式（访问过的超链接）。

CSS外部引入方式

1、链接式

链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网页的<head></head>标签中使用<link>标记将外部样式表文件链接到HTML文档中。其语法格式如下：

<link href="style.css" rel="stylesheet" type="text/css" />

语法中必须指定<link>标记的三个属性，其中href是定义链接外部样式表文件的url，可以是相对路径和绝对路径；rel是定义当前文档与被链接文档之间的关系，这里指定为stylesheet，表示被链接的文档是样式表文件；type是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。

这里面涉及三个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。type="text/css"规定被链接文档的MIME类型。href="style.css"规定被链接文档的位置。

2、导入式

导入式是将一个独立的.css文件导入HTML文档中，其是在HTML文档<head>标签中应用<style>标签，并在<style>标签中的开头处用@import 语句，即可导入外部样式表文件。其基本语法格式如下：

<style type="text/css">@import url(CSS文件路径); 或 @import "CSS文件路径"/* 此处还可存放其他CSS样式 */
</style>

语法中，style标签内还可以存放其他的内嵌样式，@import 语句需要位于其他内嵌样式的上面。

导入式会在整个网页加载完后再加载CSS文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况。这是导入式固有的一个缺陷。

虽然导入式和链接式功能基本相同，但大多数网站都是采用链接式引入外部样式表，这是因为两者的加载时间和顺序不同。加载页面时，<link>标签引用的CSS样式表将同时被加载，而@import 引用的CSS样式表会等整个网页下载结束后再被加载。可能会显示无样式的页面，造成不好的用户体验。因此，大多数的网站采用链接式的引入方式。

样式的继承

样式的继承可以理解为子类的样式从父标签或祖先标签中继承过来。

总结：与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在网页上的布局相关的样式不会被继承。在样式中使用inherit这个特别设立的值可以强行继承，明确指示浏览器在该属性上使用父元素样式中的值。

样式的优先级

1、相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

2、内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

3、单一样式优先级

单一样式的优先级规则如下所示：

style行间样式 > id选择符 > class选择符 > tag选择符 > 默认继承

（1）tag选择符与默认继承优先级比较，tag选择符的优先级高于默认继承。

（2）class选择符与tag选择符优先级比较，class选择符的优先级比tag选择符的优先级高。

（3）id选择符与class选择符优先级比较。id选择符的优先级比class选择符优先级高。

（4）style行间样式与id选择符优先级比较，style行间样式优先级比id选择符优先级高。

（style行间样式就是写在标签体内的样式，如：<div style="width: 100px;">...</div>，这里面的width就是行间样式。）

4、!important

!important表示“重要的”，用来提升样式优先级。当给指定的样式添加!important时，表示当前样式优先级最高。（注意!important对默认继承不起作用）。

5、标签+类与单类

标签+类的优先级要大于单类的优先级。

6、分组优先级

分组选择符与单一选择符的优先级相同，靠后写的优先级高。

7、包含优先级

包含选择符的优先级相对比较复杂，可以利用“约分法”来比较包含选择符的优先级高低。“约分法”的做法是将相同类型的选择符进行约分处理，比如id选择符与id选择符进行约分，class选择符与class选择符进行约分，然后用最终约分后的结果来比较优先级高低。

padding复合写法

padding:上边距 右边距 下边距 左边距;
padding:上下边距 左右边距;
padding:上下左右边距;

margin复合写法

margin:上边距 右边距 下边距 左边距;
margin:上下边距 左右边距;
margin:上下左右边距;

margin叠加和传递

1、margin叠加

当给两个盒子同时添加上下外边距时，就会出现叠加问题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin叠加</title><style>#box1 {width: 200px;height: 100px;background: blue;color: white;margin-bottom: 20px;}#box2 {width: 200px;height: 100px;background: blue;color: white;margin-top: 30px;}</style>
</head><body><div id="box1">做真实的自己，快乐的自己！</div><div id="box2">做真实的自己，快乐的自己！</div>
</body></html>

第一个<div>标签设置了margin-bottom值为20px，第二个<div>标签设置了margin-top值为30px，理论上可能会认为它们之间的距离为50px，但实际上它们之间的距离为30px。这是因为margin上下值同时存在时，不是把上下值累加到一起，而是把上下值中较大的一个值作为它们之间的距离，因此为30px。

上下margin会存在上下叠加问题，而左右margin不存在叠加问题。

2、margin传递

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin传递</title><style>body{border: 1px black dashed;}#box1 {width: 200px;height: 200px;background: blue;color: white;}#box2 {width: 100px;height: 100px;background: yellow;color: white;margin-top: 30px;}</style>
</head><body><div id="box1"><div id="box2">做真实的自己，快乐做自己！</div></div>
</body></html>

当子标签添加margin-top值时，会将值传递给父标签，但有时可能不想将此值传递给父标签，可以用父标签设置padding-top值来取代子标签的margin-top值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin传递</title><style>body{border: 1px black dashed;}#box1 {width: 200px;height: 200px;background: blue;color: white;padding-top: 30px;}#box2 {width: 100px;height: 100px;background: yellow;color: white;}</style>
</head><body><div id="box1"><div id="box2">做真实的自己，快乐做自己！</div></div>
</body></html>

这种方式略显复杂，需要重新计算高度值，从而保证容器的大小。当然也可以直接解决margin-top的传递问题，例如给父容器添加边框或overflow属性（即溢出隐藏）

为父容器添加边框来消除margin传递问题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin传递</title><style>body{border: 1px black dashed;}#box1 {width: 200px;height: 200px;background: blue;color: white;border: 1px black solid;}#box2 {width: 100px;height: 100px;background: yellow;color: white;margin-top: 30px;}</style>
</head><body><div id="box1"><div id="box2">做真实的自己，快乐做自己！</div></div>
</body></html>

为父标签添加overflow属性消除margin传递问题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin传递</title><style>body{border: 1px black dashed;}#box1 {width: 200px;height: 200px;background: blue;color: white;overflow: hidden;}#box2 {width: 100px;height: 100px;background: yellow;color: white;margin-top: 30px;}</style>
</head><body><div id="box1"><div id="box2">做真实的自己，快乐做自己！</div></div>
</body></html>

通过添加边框或设置overflow属性可以解决margin传递问题。

块与内联

1、块特点

1）独占一行

块标签的特点是独占一行，当设置两个<div>标签时，默认为上下排列。

块标签默认独占一行，块标签不允许其他标签跟在它的后面。

2）支持所有样式

块标签支持所有样式，任何样式添加到块标签上都会起作用，包括盒子模型中的所有属性。

3）不设置宽时，其宽等于父标签的宽

当块标签不设置宽时，其宽等于父标签的宽。

在盒子模型中，当不设置宽，只设置内边距时，宽等于父标签宽减去子标签的内边距。

2、内联特点

1）在一行显示

当设置两个<span>标签时，默认为显示在一行左右排列。

内联标签在一行显示，内联标签允许其他标签跟在它的后面。

2）不支持宽高，在margin和padding也有一些问题

<span>标签不支持宽高，即当给<span>标签设置宽高时，不起作用。

<span>标签在margin和padding上也会有一些问题，当设置margin和padding边距时，上下内外边距显示可能会出现问题，左右内外边距显示没有问题。

3）宽度由内容撑开

内联标签不支持宽高。内联标签的宽由内容撑开，高也由内容决定。

4）代码换行会被解析

因代码换行会被解析，所以两行定义的两个<span>标签之间会出现一个小空隙。

当把两行定义<span>标签的代码写到一行时，空隙就会消失。

3、块标签与内联标签的比较

1）区别

块标签的特点是独占一行、支持所有的样式和当块标签不设置宽时，等于父标签宽。内联标签的特点是在一行显示、不支持宽高，margin和padding也有问题，宽度由内容撑开和代码换行会被解析。

2）分类

HTML标签大致可划分为块与内联这两大类，其中具有块特点的标签有<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>和<p>标签等。有内联特点的标签有<strong>、<em>、<sub>、<sup>、<del>、<ins>、<blockquote>、<q>、<abbr>、<address>、<cite>和<a>标签等。

3）适合场景

因为块标签支持所有样式，并且兼容性极好，因此非常适用于网页布局，而内联标签由于很多样式不支持，并且代码换行会被解析出小空隙，因此不适用于网页布局，一般只用于内容修饰和语义化。

after伪类

after伪类方式是优化空标签方式的一种做法。它可以通过CSS方式给HTML标签添加内容，内容会被添加到HTML标签内的最后位置。

after伪类的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪类</title><style>#box:after {content: "_css";}</style>
</head><body><div id="box">hello</div>
</body></html>

before伪类

与after伪类类似的还有一个before伪类，它是把内容添加到hello内容的前面。

before伪类的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪类</title><style>#box:after {content: "_css";}#box:before {content: "say:";}</style>
</head><body><div id="box">hello</div>
</body></html>

BFC模式

BFC是“Block fomatting context”的缩写，即“块级格式化上下文”的意思。当创建了BFC的元素就会形成一个独立的盒子。盒子里的布局不受外部影响，当然也不会影响到外面的元素。下面列举了四个能够触发BFC模式的属性，具体如下。

float的值为left或right；
overflow的值为hidden或scroll；
display的值为inline-block；
position的值为absolute或fixed。

可以发现，overflow、display等属性可以清除浮动是因为它们不会影响周围的布局，而成为独立的盒子。

CSS定位

1、定位属性

1）定位模式

在CSS中，position属性用来定义元素的定位模式，其常用的属性值有四个，分别表示不同的定位模式。

**position属性的常用值**
属性值	含义
static	静态定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位就是默认的方式，当position属性值为static时，可以将元素定位于静态位置。静态位置就是各个元素在HTML文档流中默认的位置。

在默认状态下任何元素都会以静态定位来确定位置。因此，当元素未设置position属性时，会遵循默认值显示为静态位置。

2）位置属性

定位模式仅仅定义了元素的定位方式，而并不能确定元素的具体位置。在CSS中，位置属性用来精确定义定位元素的位置，其取值为不同单位的数值或百分比，定位属性包括top、bottom、left和right。

**位置属性含义**
边偏移属性	含义
top	顶部偏移量
bottom	底部偏移量
left	左侧偏移量
right	右侧偏移量

2、相对定位

相对定位是元素相对于它在原文档流中的位置来进行定位，position属性的取值为relative。

给元素只添加relative值，对元素本身并没有任何影响，只是设置其相对定位，因此还需要通过定位属性来改变元素的位置，但它在文档流中的位置仍然保留。

需要注意，定位模式和位置属性是配合在一起使用的，如果只定义一种，则对元素不起任何作用。

3、绝对定位

绝对定位是元素相对于已经定位（相对、绝对或固定定位）的父元素进行定位。若所有父元素都没有定位，则依据浏览器窗口左上角进行定位。当position属性值为absolute时，可以将元素的定位模式设置为绝对定位。（绝对定位会脱离文档流）

绝对定位的特点

1）与浮动类似，块元素添加绝对定位后，默认宽与内容的宽相同。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS定位</title><style>div {background: red;position: absolute;}</style>
</head><body><div>这是一个标签</div>
</body></html>

2）嵌套结构中的绝对定位。当父元素或祖先元素中有相对定位或绝对定位时，子元素的绝对定位将相对于父元素或祖先元素进行定位。当父元素或祖先元素都没有定位属性时，子元素将相对于浏览器窗口进行偏移。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS定位</title><style>#box1 {width: 50px;height: 50px;background: red;margin-left: 50px;position: relative;}#box2 {width: 50px;height: 50px;background: green;position: absolute;top: 50px;left: 50px;}</style>
</head><body><div id="box1"><div id="box2"></div></div>
</body></html>

4、固定定位

固定定位通过将position属性值设置为fixed来实现。固定定位与绝对定位类似，也是脱离文档流。二者的不同点是当元素的position属性设置为fixed时，元素将被固定，即不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置不会改变。

固定定位

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS定位</title><style>body {height: 10000px;}#box1 {width: 50px;height: 50px;background: red;}#box2 {width: 50px;height: 50px;background: green;position: fixed;top: 50px;left: 50px;}#box3 {width: 50px;height: 50px;background: blue;}</style>
</head><body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body></html>

固定定位与绝对定位还有一个不同点是固定定位永远都是相对浏览器窗口左上角进行偏移。网页中的回到顶部按钮就是用固定定位实现的。

5、定位的层级

当多个元素添加定位操作时，可能会出现叠加情况，即在默认的情况下输出的HTML结构层级就会越高。

定位层级与定位属性配套使用，用于调节层级的z-index属性，其属性值用数字表示，数字越大，层级越高。

标签规范

1、嵌套问题

HTML标签规范对结构嵌套的方式有着较为严格的要求，其要求分为固定嵌套规则和限制嵌套规则两类。

1）固定嵌套规则

（1）<ul>、<ol>标签只能嵌套<li>标签，不可嵌套其他标签。

（2）<dl>标签只能嵌套<dt>、<dd>标签，不允许嵌套其他标签。

（3）<table>标签只能嵌套<tr>、<caption>、<thead>、<tbody>、<tfoot>标签，不可嵌套其他标签。

2）限制嵌套规则

（1）<p>、<dt>、<h1>...<h6>标签不允许嵌套任何块标签。

（2）<a>标签不允许嵌套<a>标签。

（3）块标签可以嵌套内联标签，但是内联标签不能嵌套块标签。

2、格式问题

在HTML标签规范中，对标签格式也有着很重要的要求。

（1）必须添加文档头信息，即<!DOCTYPE html>，它是在告知浏览器浏览网页时，所使用的HTML规范。如果没有头信息，可能会产生一些错误。

（2）规范要求所有HTML标签和属性都必须小写（大写不会产生错误）。

（3）规范要求所有属性都必须使用双引号，虽然单引号也不会报错。

（4）规范要求所有的单标签无须使用斜杠结束。

（5）规范要求所有的双标签必须进行闭合处理。

HTML扩展

1、<link>标签

<link rel="stylesheet" type="text/css" href="style.css">

rel属性用来规定当前文档与被链接文档之间的关系。type属性规定被链接文档MIME类型。MIME(Multipurpose Internet Mail Extensions)是描述消息内容类型的因特网标准，即当前文件类型。text/css表示文件是css类型。href属性用来规定链接文件地址。

（1）media属性可以针对不同的媒介类型进行样式设定。

media属性取值
值	描述
screen	计算机屏幕（默认）
tty	电传打字机以及类似的使用等宽字符网格的媒介
tv	电视机类型设备（低分辨率、有限的滚屏能力）
projection	放映机
handheld	手持设备（小屏幕、有限带宽）
print	打印预览模式/打印页面
braille	盲人点字法反馈设备
aural	语音合成器
all	适用于所有设备

（2）设置网站的缩略标志。

有些网站在标题前面会出现一个图标，这个图标就是网站的缩略标识，用于区分不同的网站来源。通过<link>标签可实现添加图标功能。

<link rel="icon" href="webicon.ico" type="image/x-icon">

将<link>标签rel属性设置为icon值，将type属性设置成image/x-icon值。注意：href属性链接地址中的图标命名与格式必须是webicon.ico形式。

（3）苹果设备的私有设置。

苹果为iOS设备配备了apple-touch-icon私有属性，该属性是用来在iPhone和iPad上创建快捷键时使用。在HTML文档头部中添加<link>标签可以将网站的快捷按钮添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<head>标签加入以下示例代码。

<link rel="apple-touch-icon" href="logo.png">

apple-touch-icon标签支持sizes属性，可以用来放置不同对应的设备。

2、<meta>标签

设置文档的编码方式，需要在<head>标签中通过以下方式进行设置。

<meta charset="UTF-8">

除了可以设置文档的编码方式外，还可以设置其他的元信息方式。

（1）设置网站的关键词和内容描述。

通过<meta>设置网站的关键词和内容描述，可以让搜索引擎了解当前网站的关键词和网站的主要内容，有利于SEO搜索引擎优化。

<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="description" content="learning HTML CSS JavaScript">

（2）设置网站的作者和版权信息。

可以通过<meta>设置网站的作者和版权信息。

<meta name="author" content="KWLShadow">
<meta name="copyright" content="2016-2019 KWLShadow">

（3）是否允许搜索引擎索引。

可以通过<meta>设置是否允许搜索引擎索引。

<meta name="robots" content="index,follow">

content中的值决定了允许其抓取的类型，必须同时包含是否允许索引（index）和是否跟踪链接（follow）两个值，其共有四个参数可选，组成四个组合。

**content取值不同组合**
组合	含义
index,follow	允许抓取本页和跟踪链接
index,nofollow	允许抓取本页，但禁止跟踪链接
noindex,follow	禁止抓取本页，但允许跟踪链接
noindex,nofollow	禁止抓取本页，同时禁止跟踪本页中的链接

此外，index，follow可以写成all，noindex，nofollow可以写成none。

3、<area>标签

在网页中，添加链接一般都是在文字或矩形区域中添加。对于在一些特殊形状区域（如：多边形，圆形等）添加链接，则需要用到<area>标签。<area>标签的作用是可单击区域的图像映射。

<img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap" id="planetmap><area shape="rect" coords="0,0,110,260" href="#" alt="Sun" /><area shape="circle" coords="129,161,10" href="#" alt="Mercury" /><area shape="circle" coords="180,139,14" href="#" alt="Venus" />
</map>

定义和用法

<area>标签定义图像映射中的区域（注：图像映射指的是带有可点击区域的图像）。

area元素总是嵌套在<map>标签中。

<img>标签中的usermap属性与map元素name属性相关联，创建图像与映射之间的联系。

注意：<img>中的usermap属性可引用<map>中的id或name属性（由浏览器决定），所以我们需要同时向<map>添加id和name两个属性。

<area>标签的alt属性

定义和用法

alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

网速太慢
src 属性中的错误
浏览器禁用图像
用户使用的是屏幕阅读器

<area> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

<area>标签的coords属性

定义和用法

coords 属性规定区域的 x 和 y 坐标。

coords属性与shape属性配合使用，来规定区域的尺寸、形状和位置。

图像左上角的坐标是 "0,0"。

详细解释：

<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

下面列出了每种形状的适当值：

圆形：shape="circle"，coords="x,y,z"

这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。

多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

提示：如果某个area标签中的坐标和其他区域发生了重叠，会优先采用最先出现的area标签。浏览器会忽略超过图像边界范围之外的坐标。

语法

<area coords="value">

属性值

值	描述
x1,y1,x2,y2	如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius	如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn	如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

<area>标签的shape属性

定义和用法

shape属性与coords属性配合，可以规定区域的尺寸、形状和位置。

详细解释：

shape 属性用于定义图像映射中对鼠标敏感的区域的形状：

圆形（circ 或 circle）
多边形（poly 或 polygon）
矩形（rect 或 rectangle）

shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。在实际中，浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略整个区域。

可以识别 shape 属性的 default 值的浏览器，可以提供一个包括全部热点的区域，以用于在超过其他热点定义的范围之外单击的情况。由于区域在 <map> 标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。

浏览器在形状名称的实现方面没有严格要求。例如，对于矩形，Netscape 4 不能识别 "rectangle"，却能识别 "rect"。出于这个原因，我们建议使用缩写的名称。

语法

<a shape="value">

属性值

值	描述
default	规定全部区域。
rect	定义矩形区域。
circ	定义圆形。
poly	定义多边形区域。

4、<pre>标签

<pre>标签的作用是定义预格式化的文本。在pre元素中，文本通常会保留空格和换行符。<pre>标签常用来表示计算机的源代码。

<pre>标签展示效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML扩展</title><style></style>
</head><body><pre>&lt;&ul&gt;&lt;&li&gt;&lt;&li&gt;&lt;&li&gt;&lt;&li&gt;&lt;&li&gt;&lt;&li&gt;&lt;/&ul&gt;</pre>
</body></html>

常见的浏览程序源代码的效果，都是通过<pre>标签来实现的。

5、<iframe>标签

<iframe src="" width="" height="">

src属性用来链接要嵌套页面的地址，width、height属性可以设定容器的大小。

默认会显示<iframe>标签的边框和滚动条，通过将frameborder属性设置为0，可以取消边框样式；将scrolling属性设置为no值，可以取消滚动条。

6、<embed>标签

最大、最小宽高

1、min-width和min-height

min-width和min-height属性分别是最小宽度和最小高度。在制作网页时，如果块标签宽度固定，当没有设置高度时，其高度会根据内容进行变化而无法确定高度。当高度固定时，其高度不会随着内容的增加而发生变化，因此会发生溢出现象。为了避免上述两种情况可以使用min-height属性来固定最小高度，当内容高度大于最小高度时会以内容高度为准。

设置最小高度后，当内容高度小于最小高度时，以最小高度为准；当内容高度大于最小高度时，以内容的高度为准。

（最小宽度和最小高度的理论一样）

2、max-width和max-height

max-width和max-height属性分别是最大宽度和最大高度。给标签设置最大高度，当内容高度小于最大高度时，以内容高度为准；当内容高度大于最大高度时，以最大高度为准。

添加省略号

当一段文字超过容器宽度时，希望能够通过省略号的方式进行展示，可以使用text-overflow属性来实现。text-overflow属于CSS3中的属性，规定当文本溢出包含元素时产生的操作，其默认值为clip，即修剪文本；可选值ellipsis，即显示省略号来代表被修剪的文本。

CSS list-style属性

定义和用法

list-style简写属性在一个声明中设置所有的列表属性。

说明

该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。

可以按顺序设置如下属性：

list-style-type
list-style-position
list-style-image

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

可能的值

值	描述
list-style-type	设置列表项标记的类型。
list-style-position	设置在何处放置列表项标记。
list-style-image	使用图像来替换列表项的标记。
inherit	规定应该从父元素继承list-style属性的值。

CSS list-style-type属性

可能的值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

CSS list-style-position属性

说明

该属性用于声明列表标志相对于列表项内容的位置。外部（outside）标志会放在离列表项边框边界一定距离处，不过这距离在CSS中未定义。内部（inside）标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

可能的值

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

CSS list-style-image属性

说明

这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用list-style-position属性控制。

注意：请始终规定一个“list-style-type”属性以防图像不可用。

可能的值

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

菜单

在HTML5中，可以使用<menu>标签定义菜单，多用于组织表单中的控件列表。

**<menu>标签的常用属性**
属性	说明
autosubmit	如果为true，那么当表单控件改变时会自动提交
label	规定菜单的可见标签
type	定义显示哪种类型的菜单。可选值为context、toolbar和list，默认值是list

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>test</title><style></style>
</head><body><menu><li><input type="checkbox">ASP</li><li><input type="checkbox">PHP</li><li><input type="checkbox">JSP</li></menu><script></script></body></html>

可以使用<menuitem>标签定义菜单项。

**<menuitem>标签的常用属性**
属性	说明
label	规定菜单的可见标签
icon	菜单项前面显示的图标
onclick	指定单击此菜单项时执行的JavaScript代码

右键菜单

HTML5支持在网页中创建和使用自定义的右键菜单。在网页元素中可以使用contextmenu属性指定此元素使用的右键菜单。

在<script>标签中使用async属性

async属性是HTML5的新属性。在<script>标签中使用async属性可以设定异步执行指定的脚本，也就是在加载网页的同时执行指定的脚本。如果不指定async属性，则需要等到加载完前面的网页内容，才能开始执行脚本，执行完脚本才能加载后面的网页内容。

异步执行可以与加载HTML内容同时进行，因此效率更高。特别是当JavaScript脚本较复杂、执行时间较长时，建议使用async属性。

<link>元素的属性

**<link>元素的属性**
属性	说明
charset	使用的字符集，HTML5中已经不支持
href	指定被链接文档（样式表文件）的位置
hreflang	指定被链接文档中的文本的语言
media	指定被链接文档将被显示在什么设备上，可以是下面的值。 all：默认值，适用于所有设备。 aural：语音合成器。 braille：盲文反馈装置。 handheld：手持设备（小屏幕、有限的带宽）。 projection：投影机。 print：打印预览模式/打印页。 screen：计算机屏幕。 tty：电传打字机以及类似的使用等宽字符网格的媒介。 tv：电视类型设备（低分辨率、有限的滚屏能力）。
rel	指定当前文档与被链接文档之间的关系，可以是下面的值。 alternate：链接到该文档的替代版本（如打印页、翻译或镜像）。 author：链接到该文档的作者。 help：链接到帮助文档。 icon：表示该文档的图标。 license：链接到该文档的版权信息。 next：集合中的下一个文档。 pingback：指向pingback服务器的URL。 prefetch：规定应该对目标文档进行缓存。 prev：集合中的前一个文档。 search：链接到针对文档的搜索工具。 sidebar：链接到应该显示在浏览器侧栏的文档。 stylesheet：指向要导入的样式表的URL。 tag：描述当前文档的标签（关键词）。
rev	保留关系，HTML5中已经不支持
sizes	指定被链接资源的尺寸。只有当被链接资源是图标时（rel="icon"），才能使用该属性
target	链接目标，HTML5中已经不支持
type	指定被链接文档的MIME类型

CSS white-space属性

white-space属性用于处理文本中的空白符。

**white-space属性取值**
值	描述
normal	默认值，空白会被浏览器忽略。
pre	空白会被浏览器保留，类似HTML中的<pre>标签
nowrap	文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。
pre-wrap	保留空白符序列，但是正常换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	指定应该从父元素继承white-space属性的值。

表格

在CSS中可以设置表格的样式。选择器通常使用table（设置整个表格的样式）、th（设置表头单元格的样式）和td（设置单元格的样式）

1、设置表格边框

可以使用border属性设置表格边框的属性，边框属性包括宽度、线型（实线或虚线）和颜色等。

注意，在默认情况下，表格采用双线条边框。

2、折叠边框（单线条边框）

可以使用border-collapse属性设置使用折叠边框（即单线条边框）。

3、CSS的表格属性

**CSS的表格属性**
属性	说明
background-color	背景色
border-spacing	分隔单元格边框的距离
caption-side	表格标题的位置
empty-cells	是否显示表格中的空单元格
height	表格的高度
padding	表格中内容与边框的距离
table-layout	设置显示单元格、行和列的算法
text-align	设置表格中文本的水平对齐方式，包括左对齐（left，默认值）、右对齐（right）和居中（center）
vertical-align	设置表格中文本的垂直对齐方式，包括顶端对齐（top）、底端对齐（bottom）和居中对齐（middle）等
width	表格的宽度

HTML、CSS小知识相关推荐

html a text decoration,你未必知道的CSS小知识：text-decoration属性变成了属性简写
我相信有些小知识会让你大吃一惊. 跟着最新的CSS规范,text-decoration现在的写法是这样的: a { text-decoration: overline aqua wavy; } tex ...
一些常被你忽略的CSS小知识
1.CSS的color属性并不是仅仅能用于文本显示对于CSS的color属性,相信全部Web开发者都使用过.假设你并不是一个特别有经验的程序猿,我相信你未必知道color属性除了能用在文本显示,还 ...
html 的empty属性,你未必知道的CSS小知识：你知道table里的empty-cells属性吗？
css里的empty-cells属性是所有浏览器都支持的,甚至包括IE8,它的用法是下面这个样子: table { empty-cells: hide; } 估计你从语义上已经猜出它的作用了.它是为H ...
css没有border,你未必知道的CSS小知识：为什么没有人使用border-image
之前我曾经写过一篇关于CSS的border-image属性的文章.现在几乎所有的现代浏览器都支持这个属性--除了IE10及以下IE版本. 看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的 ...
html5boder属性,你未必知道的CSS小知识：border属性比你想象的要复杂
我们很多人都用过这样的写法: .example { border: solid 1px black; } 这里的border属性的用法实际上是一种简写的形式,它分别设置了border-style, b ...
html中word-wrap无效,你未必知道的CSS小知识：word-wrap和overflow-wrap是等效的
word-wrap并不是一个很常用的CSS属性,但在特定的环境中确实非常有用的.我们经常使用的一个例子是让页面中显示一个长url时换行,而不是撑破页面,下面是一个例子. HTML代码 supercal ...
jquery/css需要记录的小知识（持续补充）
一.前言 2020年的第一篇了,奥利给! 这部分主要是汇总一些平时遇到的jquery和css小知识,作为笔记使用. 二.正文 1.jquery模拟select下拉框的选择事件,并传参数: self.s ...
CSS的基本概念———每天一遍小知识
前言这是我学习了这个网站整理的笔记,接下来还会持续更新. 这是我的博客首页:https://blog.csdn.net/weixin_46654114?t=1 博客名:RodmaChen 如果写的不 ...
css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中将一段文字置于容器的水平中点 ...