一、列表元素
1、ul元素
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
2、ol元素
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
3、dl元素
定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
4、列表的嵌套应用
在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类。同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。
二、结构元素
1、header元素
HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。其基本语法格式如下：
<header>
<h1>网页主题</h1>
..
</header>
2、nav元素
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。例如下面这段示例代码：
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>
3、article元素
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。
4、aside元素
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要分为两种：
•被包含在article元素内作为主要内容的附属信息。•在article元素之外使用，作为页面或站点全局的附属信息部分。
5、section元素
section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意以下3点：
•不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
•如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
•没有标题的内容区块不要使用section元素定义。
6、footer元素
footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5出现之前，一般使用<div id=“footer”></div>标记来定义页面底部，而通过HTML5的footer元素可以轻松实现。
三、分组元素
1、figure和figcaption元素
figure元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。
2、hgroup元素
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。
在使用hgroup元素时要注意以下几点：
•如果只有一个标题元素不建议使用hgroup元素。•当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题元素。•当一个标题包含副标题、section或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。
四、页面交互元素
1、details和summary元素
details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。
2、progress元素
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
progress元素的常用属性值有两个，具体如下。
•value：已经完成的工作量。
•max：总共有多少工作量。
3、meter元素
meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者对某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。
meter元素有多个常用的属性，如下表所示
| 属性 | 说明 |
| high | 定义度量的值位于哪个点被界定为高的值。 |
| low | 定义度量的值位于哪个点被界定为低的值。 |
| max | 定义最大值，默认值是 1。 |
| min | 定义最小值，默认值是 0。 |
| optimum | 定义什么样的度量值是最佳的值。如果该值高于 high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。 |
| value | 定义度量的值。 |
五、文本层次语义元素
1、time元素
time元素用于定义时间或日期，可以代表24小时中的某一时间。
time元素有两个属性：
•datetime：用于定义相应的时间或日期。取值为具体时间（例如：14:00）或具体日期（例如2015—09—01），不定义该属性时，由元素的内容给定日期 / 时间。
•pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。
2、mark元素
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。
3、cite元素
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
六、全局属性
1、draggable属性
draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。
2、hidden属性
在HTML5中，大多数元素都支持hidden属性，该属性有两个属性值：true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容是通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。
3、spellcheck属性
spellcheck属性主要针对于input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认值）和false，值为true时检测输入框中的值，反之不检测。
4、contenteditable属性
contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。该属性有两个值，如果为true表示可编辑，为false表示不可编辑。
七、盒子模型
1、认识盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
2、<div>标记
div是英文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
<div>标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。
3、盒子的宽与高
网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。
注意：
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />除外）。
4、边框属性
| 设置内容 | 样式属性 | 常用属性值 |
| 边框样式 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 边框宽度 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 边框颜色 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 综合设置边框 | border:四边宽度 四边样式 四边颜色; | |
| 圆角边框 | border-radius:水平半径参数/垂直半径参数; | 像素值或百分比 |
| 图片边框 | border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式; |
（1）边框样式（border-style）
在CSS属性中，border-style属性用于设置边框样式。其基本语法格式如下：
border-style: 上边 [右边 下边 左边];
border-style属性的常用属性值有四个，分别用于定义不同的显示样式，具体如下。
• solid：边框为单实线
• dashed：边框为虚线
• dotted：边框为点线
• double：边框为双实线
（2）边框宽度（border-width）
border-width属性用于设置边框的宽度，其基本语法格式如下：
border-width:上边 [右边 下边 左边];
• 在上面的语法格式中，border-width属性常用取值单位为像素px。并且同样遵循值复制的原则，其属性值可以设置1~4个，即一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左。
（3）边框颜色（border-color）
border-color属性用于设置边框的颜色，其基本语法格式如下：
border-color:上边 [右边 下边 左边];
CSS3在原边框颜色属性（border-color）的基础上派生了4个边框颜色属性。
• border-top-colors
• border-right-colors
• border-bottom-colors
• border-left-colors
（4）综合设置边框
使用border-style、border-width、border-color虽然可以实现丰富的边框效果，但是这种方式书写的代码繁琐，且不便于阅读，为此CSS提供了更简单的边框设置方式，其基本格式如下：
border:宽度 样式 颜色;
（5）圆角边框
在网页设计中，经常需要设置圆角边框，运用CSS3中的border-radius属性可以将矩形边框圆角化，其基本语法格式如下：
border-radius:参数1/参数2
其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数之间用“/”隔开。
（6）图片边框
border-image属性是一个简写属性，用于设置border-image-source、border-image-slice、 border-image-width、border-image-outset以及border-image-repeat等属性，其基本语法格式如下：
border-image:border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat;
对各属性的说明如下表所示：
| 属性 | 说明 |
| border-image-source | 指定图片的路径 |
| border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量。 |
| border-image-width | 指定边框宽度 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离。 |
| border-image-repeat | 指定背景图片的平铺方式 |
5、边距属性
（1）内边距
在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置方法如下：
• padding-top:上内边距;
• padding-right:右内边距;
• padding-bottom:下内边距;
• padding-left:左内边距;
• padding:上内边距 [右内边距下内边距 左内边距];
（2）外边距
在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下。
• margin-top:上外边距;
• margin-right:右外边距;
• margin-bottom:下外边距;
• margin-left:左外边距;
• margin:上外边距 [右外边距下外边距 左外边距];
6、box-shadow属性
在网页制作中，经常需要对盒子添加阴影效果。CSS3中的box-shadow属性可以轻松实现阴影的添加，其基本语法格式如下：
box-shadow:像素值1像素值2像素值3像素值4 颜色值 阴影类型;
在上面的语法格式中，box-shadow属性共包含6个参数值，对它们的具体解释如下表所示。
| 参数值 | 说明 |
| 像素值1 | 表示元素水平阴影位置，可以为负值（必选属性）。 |
| 像素值2 | 表示元素垂直阴影位置，可以为负值（必选属性）。 |
| 像素值3 | 阴影模糊半径（可选属性）。 |
| 像素值4 | 阴影扩展半径，不能为负值（可选属性）。 |
| 颜色值 | 阴影颜色（可选属性）。 |
| 阴影类型 | 内阴影（inset）/外阴影（默认）（可选属性）。 |
7、box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。
box-sizing:content-box/border-box;
在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。
• content-box：浏览器对盒模型的解释遵从W3C 标准，当定义width和height时，它的参数值不包括border和padding。
• border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。
8、设置背景颜色
在CSS中，使用background-color属性来设置网页元素的背景颜色，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。
9、设置背景图像
背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。
10、背景与图片不透明度的设置
（1）RGBA模式
RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。其语法格式如下：
rgba(r,g,b,alpha);
（2）opacity属性
在CSS3中，使用opacity属性能够使任何元素呈现出透明效果。其语法格式如下：
opacity：opacityValue;
11、设置背景图像平铺
默认情况下，背景图像会自动沿着水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值如下：
•repeat：沿水平和竖直两个方向平铺（默认值）
•no-repeat：不平铺（图像位于元素的左上角，只显示一个）
•repeat-x：只沿水平方向平铺
•repeat-y：只沿竖直方向平铺
12、设置背景图像的位置
如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上角为基准点显示。
13、设置背景图像固定
如果希望背景图像固定在屏幕的某一位置，不随着滚动条移动，可以使用background-attachment属性来设置。background-attachment属性有两个属性值，分别代表不同的含义，具体解释如下：
•scroll：图像随页面元素一起滚动（默认值）
•fixed：图像固定在屏幕上，不随页面元素滚动。
18、设置背景图像的大小
在CSS3中，background-size属性用于控制背景图像的大小，其基本语法格式如下：
background-size:属性值1 属性值2;
| 属性值 | 说 明 |
| 像素值 | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| 百分比 | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| cover | 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中； |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域； |
19、设置背景的显示区域
在默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像，运用CSS3中的background-origin 属性可以改变这种定位方式，自行定义背景图像的相对位置，其基本语法格式如下：
background-origin:属性值;
在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义，具体解释如下。
•padding-box：背景图像相对于内边距区域来定位。
•border-box：背景图像相对于边框来定位。
•content-box：背景图像相对于内容框来定位。
20、设置背景图像的剪裁区域
在CSS样式中，background-clip属性用于定义背景图像的裁剪区域，其基本语法格式如下：
background-clip:属性值;
在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。
•border-box：默认值，从边框区域向外裁剪背景。
•padding-box：从内边距区域向外裁剪背景。
•content-box：从内容区域向外裁剪背景。
21、设置多重背景图像
CSS3中增强了背景图像的功能，允许一个容器里显示多个背景图像，使背景图像效果更容易控制。但是CSS3中并没有为实现多背景图片提供对应的属性，而是通过background-image、background-repeat、background-position和background-size等属性提供多个属性值来实现多重背景图像效果，各属性值之间用逗号隔开。
22、背景复合属性
同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下：
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-origin];
多学一招：使用背景图像属性定义列表样式
list-style是一个复合属性，用于控制列表项目符号的样式。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。
23、CSS3渐变属性
（1）线性渐变
在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果，其基本语法格式如下：
background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
下面通过一个案例对线性渐变的用法和效果进行演示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>线性渐变</title>
<styletype="text/css">
div{
width:200px;
height:200px;
background-image:linear-gradient(30deg,#0f0,#00F);
}
</style>
</head>
<body>
<div></div>
</body>
</html>在例5-22中，为div定义了一个渐变角度为30deg、绿色（#0f0）到蓝色（#00f）的线性渐变。
运行例5-22，效果如图5-45所示。
在图5-45中，实现了绿色到蓝色的线性渐变。值得一提的是，在每一个颜色值后面还可以书写一个百分比数值，用于标示颜色渐变的位置例如下面的示例代码：
background-image:linear-gradient(30deg,#0f0 50%,#00F 80%);
在上面的示例代码中，可以看做绿色（#0f0）由50%的位置开始出现渐变至蓝色（#00f）位于80%的位置结束渐变。可以用Photoshop中的渐变色块进行类比，如图5-46所示。
（2）径向渐变
在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果，其基本语法格式如下：
background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变</title>
<styletype="text/css">
div{
width:200px;
height:200px;
border-radius:50%; /*设置圆角边框*/
background-image:radial-gradient(ellipse at center,#0f0,#030); /*设置径向渐变*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>在例5-23中，为div定义了一个渐变形状为椭圆形，径向渐变位置在容器中心点，绿色（##0f0）到深绿色（##030）的径向渐变；同时使用“border-radius”属性将容器的边框设置为圆角。
运行例5-23，效果如图5-48所示。
（3）重复渐变
a.重复线性渐变
在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果，其基本语法格式如下：
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
b.重复径向渐变
在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果，其基本语法格式如下：
background-image:repeating-radial-gradient(渐变形状圆心位置,颜色值1,颜色值2...,颜色值n);
24、超链接样式设计
超链接标记<a>的伪类有4种，具体如下表所示。
| 超链接标记<a>的伪类 | 含义 |
| a:link{ CSS样式规则; } | 未访问时超链接的状态 |
| a:visited{ CSS样式规则; } | 访问后超链接的状态 |
| a:hover{ CSS样式规则; } | 鼠标经过、悬停时超链接的状态 |
| a: active{ CSS样式规则; } | 鼠标点击不动时超链接的状态 |
2949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
