筆記二:常用的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="">首頁</a></li>
                    <li><a href="">旅游咨詢</a></li>
                    <li><a href="">機票訂購</a></li>
                    <li><a href="">風景欣賞</a></li>
                    <li><a href="">公司簡介</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......