2.1.2 语义元素

语义元素是指清楚地向浏览器和开发者描述其意义的元素，如标题元素、段落元素、列表元素等。有些语义元素在网页中可以呈现显示效果，有些没有显示效果。

元素的语义化能够呈现出很好的内容结构，语义化使得代码更具有可读性，让其他开发人员更容易理解HTML结构，从而减少差异化；方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。爬虫还可以依赖标签来确定关键字的权重，以便抓取更多的有效信息。

有100多个HTML语义元素可供选择。语义元素分为块级元素、行内（内联）元素、行内块元素等。

1.块级元素（block）

块级元素是指本身属性为display：block的元素。因为它自身的特点，通常使用块级元素进行大布局（大结构）的搭建。块级元素的特性如下。

1）每个块级元素总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。

2）块级元素可以直接控制宽度（width）、高度（height）及盒子模型的相关CSS属性，内边距（padding）和外边距（margin）等都可控制。

3）在不设置宽度的情况下，块级元素的宽度是其父级元素内容的宽度。

4）在不设置高度的情况下，块级元素的高度是其本身内容的高度。

常用的块级元素主要有p、div、ul、ol、li、dl、dt、dd、h1～h6、hr、form、address、pre、table、blockquote、center、dir、fieldset、isindex、menu、noframes、noscript等。

2.行内元素（inline）

行内元素也称内联元素，是指本身属性为display：inline的元素，行内元素可以和相邻的行内元素在同一行，对宽、高属性值不生效，完全靠内容撑开宽、高。因为行内元素自身的特点，通常使用块级元素来进行文字、小图标（小结构）的搭建。行内元素的特性如下。

1）行内元素会与其他行内元素从左到右在一行显示。

2）行内元素不能直接控制宽度（width）、高度（height）及盒子模型的相关CSS属性，例如，内边距的top、bottom（padding-top、padding-bottom）和外边距的top、bottom（margin-top、margin-bottom）都不可改变，但可以设置内/外边距的水平方向的值。也就是说，对于行内元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是竖直方向的margin和padding无效。

3）行内元素的宽、高是由本身内容（文字、图片等）的大小决定的。

4）行内元素只能容纳文本或其他行内元素（不能在行内元素中嵌套块级元素）。

常用的行内元素主要有a、span、em、strong、b、i、u、label、br、abbr、acronym、bdo、big、br、cite、code、dfn、em、font、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、var等。

利用CSS可以摆脱上面HTML标签归类的限制，自由地在不同标签或元素上应用需要的属性。常用的CSS样式有以下3个。

display：block：显示为块级元素。

display：inline：显示为行内元素。

display：inline-block：显示为行内块元素。表现为同行显示并可修改宽、高、内/外边距等属性。例如，将ul元素加上display：inline-block样式，原本垂直的列表就可以水平显示了。

3.行内块元素

行内块元素结合行内元素和块级元素，不仅可以对宽和高属性值生效，还可以多个元素存在一行显示。行内块元素能和其他元素放在一行，可以设置宽、高。常用的行内块元素有img、input、textarea等。

块级元素可以嵌套行内元素，行内元素不可以嵌套块级元素。

4.可变元素

可变元素根据上下文关系确定该元素是块级元素还是行内元素，主要有applet、button、del、iframe、ins、map、object、script等。

5.HTML5中新增的结构语义元素

在HTML5之前，页面只能用div元素作为结构元素来分隔不同的区域，由于div元素无任何语义，给设计者和阅读代码者带来困扰，所以在HTML5中增加了结构语义元素。HTML5增加的结构语义元素明确了一个Web页面的不同部分，如图2-2所示。

图2-2 结构语义元素

HTML5常用的语义结构元素如下。

1）header元素用于定义文件的头部区域，为文件或节规定页眉，常被用作介绍性内容的容器，可以包含标题元素、Logo、搜索框等。一个文件中可以有多个header元素。

2）nav元素用于定义页面的导航链接部分区域，导航有顶部导航、底部导航、侧边导航等。

3）article元素用于定义文件内独立的文章，可以是新闻、条件、用户评论等。

4）section元素用于定义文件中的一个区域或节。节是有主题的内容组，通常有标题。可以将网站首页划分为简介、内容、联系信息等节。

5）aside元素用于定义页面主区域内容之外的内容（如侧边栏）。<aside>标签的内容是独立的，与主区域的内容无关。

6）footer元素用于定义文件的底部区域，一个页脚通常包含文件的作者、著作权信息、链接的使用条款链接、联系信息等，文件中可以使用多个footer元素。

7）figure元素用于定义一段独立的引用内容，经常与figcaption元素配合使用，通常用在主文本的图片、代码、表格等中。就算这部分内容被转移或删掉，也不会影响到主体。

8）figcaption元素用于表示与其相关联引用的说明或标题，描述其父节点figure元素中的其他内容。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。

9）main元素用于规定文件的主内容。

10）mark元素用于定义重要的或强调的文本。

11）details元素用于定义用户能够查看或隐藏的额外细节。

12）summary元素用于定义details元素的可见标题。

13）time元素用于定义日期或时间。

以上元素中除了figcaption元素，其他都是块级元素。