笔记二:常用的h5语义化标签

0.前言：

1. 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意。
2. 总结这部分内容，主要是为了能从繁琐的div嵌套div中，改成带有h5标签码。这样更有利于读写代码。
3. 人很容易直接或间接的呆在舒适区，当我写惯了h4的代码之后，不愿意用h5标签，为了杜绝后患，遂决定总结以下内容。

1.header：

　　被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。如:小米商城的导航栏整体，width:100%

        header {
            width: 100%;
            height: 70px;
            background-color: #515151;
            position: fixed;
            top: 0px;
            z-index: 222;        }        .main {
            width: 80%;
            height: 70px;
            margin: auto;
        }        .logo {
            width: 240px;
            height: 70px;
            background-color: rgb(153, 204, 51);
            text-align: center;
            line-height: 70px;
            float: left;
        }

2.nav：页面的导航

可以通过导航链接到网站的其他页面，或者当前页面的其它部分。说白了就是包含在header里的导航功能。当然如果在头部左面是logo，还是要做一些页面分离的。

<header>
        <div class="main">
            <div class="logo">公司logo</div>
            <nav>
                <ul>
                    <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首页</a></li>
                    <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >旅游咨询</a></li>
                    <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >机票订购</a></li>
                    <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >风景欣赏</a></li>
                    <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >公司简介</a></li>
                </ul>
            </nav>        </div>
    </header>

3.图片标签、图片标题

 <div class="tour">
        <figure>
            <img src="./image/tour5.jpg" alt="">
            <figcaption>
                <span class="box1"><span class="box2">
                        <曼谷-芭提雅6日游>
                    </span>包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成员自费卷</span>
                <span class="box3">国内长线</span>            </figcaption>
        </figure>
</div>

　　figure图片标签，figcaption图片标题。

4.时间标签

<time>4-29</time>

5footer标签

　　页脚标签。

6。待补充完善的语义化标签

<section> 元素表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题。(没用过，感觉有用先记录下来。)

7.自定义列表

dt: 定义列表   相当于table

dl:dldefines terms 定义项目，相当于ul

dd：defines description，作用是定义列表中项目的注释 相当于li

与无序列表的区别?

        <dl>
            <dt>测试
                <dd>列表1</dd>
                <dd>列表1</dd>
                <dd>列表1</dd>
            </dt>
        </dl>
        <table>
                <ul>测试2 <!--我会居中-->
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
        </table>

ul会居中，dt不会居中。在需要去掉list-style时，且不需要列表居中选择自定义列表，更有助于读写。

8.mark标签

用来突出显示文本，它的效果就像是用荧光笔给重点的语句做标记一样。

9.label标签

lable标签中设置for，来让说明文本和相对应的input关联起来，input设置id属性。

10.注意：

• 尽量少使用无语义的span和div
• 在语义不明显时，可以用p和div时，尽量用p自带换行，对兼容特殊终端有利。

11 to be contined……