语义元素与水平方向导航

语义元素定义了页面中有特殊含义的元素，在浏览器或其它网页处理工具中可以更加方便地处理页面结构和内容。本文主要介绍一些文本元素和文章结构元素，以及水平方向导航的实现。

文本元素

文本中使用一些语义元素，可以突出文本内容的特殊含义，此外，有些元素还会有一些特殊的默认样式。下面列出了一些常用的文本元素及其含义：

abbr元素，内联元素。定义缩写（abbreviation）内容。
address元素，块元素，可以包含联系信息。
blockquote元素，块元素，默认格式有缩进。
cite元素，内联元素。定义引述内容。
code元素，内联元素。表示代码内容。多行代码可定义在pre元素中。
del元素，内联元素。需要删除的文本，在文本中间显示水平删除线。
em元素，内联元素。定义强调内容，显示为斜体。
ins元素，内联元素。定义插入内容，会显示下画线。
mark元素，内联元素。表示做了是标记的内容。
q元素，内联元素，表示引用文本（quote text），文本内容会包含在一对双引号之间。
s元素，内联元素。不再需要的文本（struck text），同样在文本中间显示水平删除线。
small元素，内联元素。除字体小一些外，还表示注释和附属细则。
strong元素，内联元素。强调内容，内容会加粗。
time元素，内联元素。定义日期和时间信息。可以使用datetime属性定义日期和时间值。

文档结构元素

文档结构元素只用于定义页面中的有特殊含义的结构，其中的实际内容还是需要具体的元素来实现，下面是一些常用的文档结构语义元素。

article，定义文章。
header，定义页面或文章的页眉部分。
footer，定义页面或文章的页脚部分。
figure，定义插图，元素内可以使用img元素插入图片，使用figcaption元素定义图片的标题。
aside，定义页面主题外的内容。
section元素，定义一个页面或文章中不同主题的分区，如果需要使用横线分隔，可以使用hr元素，如<hr>或<hr />标记。
nav，定义导航。

下面的代码演示了部分结构元素的应用。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <article>
        <header>
            <h1>人类共同的家园</h1>
        </header>
        <figure>
            <img alt="地月" src="earth-moon.jpg" style="width:320px;margin:0.5em;" />
            <figcaption>太空中看地球</figcaption>
        </figure>
        <p>
            地球（Earth）是太阳系的第三颗行星，从内到外分别是地核（又分为外
            地核和内地核，其中外地核产生地磁场）、地幔、地壳，表面陆地面积约占29.2%
            为，海洋等面积占70.8%。地球大约诞生于45.4亿年前，42亿年前形成海洋，40亿
            年前形成稳定固态地壳。约35亿年前生命在深海出现，逐步扩散到浅海和陆地，当
            前已记录的物种约120万种。地球绕太阳公转一周需365.25天，自转轴倾斜产生季
            节变化。半径约6371千米。地球唯一的天然卫星是月球，两者的引力相互作用引起
            潮汐并稳定地球自转。
        </p>
        <footer>
            <p>示例页面</p>
        </footer>
    </article>
</body>
</html>

本例并没有过多设置样式，可以通下图观察默认的显示效果。

使用语义元素

水平方向导航

nav元素用于定义页面导航，前一篇文章中演示了结合列表和a元素创建垂直方向的导航。实际工作中，还经常会使用水平方向的导航，如页眉中的全局导航。很多开发者会在垂直导航的基础上使用浮动（float）效果实现水平导航，但果，如果无法正确应用样式，则希望的水平导航就会显示为列表默认的垂直效果。页面中在有样式或没有样式时应该呈现什么样的效果，还是需要根据实际情况来实现，后续文章还会介绍浮动的实现。下面的代码会定义水平方向的导航，首先会使用默认样式展现。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <h1>导航测试页</h1>
        <nav class='header_navi'>
            <a id='navi_1' href='/'>栏目一</a>
            <a id='navi_2' href='/'>栏目二</a>
            <a id='navi_3' href='/'>栏目三</a>
            <a id='navi_4' href='/'>栏目四</a>
            <a id='navi_5' href='/'>栏目五</a>
        </nav>
    </header>
</body>
</html>

页面显示效果如下图所示。

水平导航

下面的代码，通过style元素添加水平导航的样式。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .header_navi {
            display: block;
            vertical-align: bottom;
        }
        .header_navi a {
            display:inline-block;
            font-family: '微软雅黑';
            text-decoration: none;
            color: #444;
            padding-left: 2em;
            padding-right: 2em;
            height:2em;
            line-height:2em;
            vertical-align:middle;
            border-radius:1em 1.5em 0em 0em;
            background-image:linear-gradient(#fafafa,steelblue);
        }
    </style>
</head>
<body>
    <header>
        <h1>导航测试页</h1>
        <nav class='header_navi'>
            <a id='navi_1' href='/'>栏目一</a>
            <a id='navi_2' href='/'>栏目二</a>
            <a id='navi_3' href='/'>栏目三</a>
            <a id='navi_4' href='/'>栏目四</a>
            <a id='navi_5' href='/'>栏目五</a>
        </nav>
    </header>
</body>
</html>

页面显示效果如下图所示。

水平导航