杏耀註冊平台官網_HTML 元素標籤語義化及使用場景

靈魂三問:

標籤語義化是什麼?

為什麼要標籤語義化?

標籤語義化使用場景有哪些?

下面讓我們跟着這三個問題來展開一下本文的內容。

一、標籤語義化是什麼?

標籤語義化就是讓元素標籤做適當的事情。例如 p 標籤就是代表文本,button 標籤代表按鈕,nav 標籤代表導航等等。

二、為什麼要標籤語義化?

其實標籤語義化是給瀏覽器和搜索引擎看的。沒有人關心你寫的 html 代碼有沒有正確的使用語義化,只有它們關心這件事情,是不是很暖心?

為什麼瀏覽器關心?

DOM 的大部分內容具有隱式語義含義。 也就是說,DOM 採用的原生 html 元素能夠被瀏覽器識別,並且可以預測其在各類平台上的工作方式。

例如用 div 實現的按鈕和用原生 button 實現的按鈕就有一些區別,在表單內 button 可以不用綁定 onclick 事件就可以提交表單內容,用 div 實現的按鈕則不行。另外在瀏覽器中按 tab 鍵盤可以在 button 之間來回切換,而 div 則不可以。

還有 input 標籤 type 屬性,由於值的不同在手機上的表現也不同。例如 type=”tel” 和 type=”number” 彈出來的数字鍵盤是不一樣的。

為什麼搜索引擎關心?

搜索引擎的爬蟲根據標籤來確定上下文、關鍵字的權重,有利於 seo。

如果你覺得以上兩點理由都不能打動你,從而正確的使用語義化,沒有關係,使用 div 一把梭也是可以的。

三、標籤語義化使用場景有哪些?


上面是一個比較常見的整體布局方式,其他布局類型其實都是萬變不離其宗,逃不出這個使用框架(文末附上 html 源碼)。

除了整體布局外,我們還要更細節一點,關注其他標籤的使用方式。例如:

a 標籤用於跳轉。

h1 – h5 用於標題

b strong 用於強調

ul li 用於列表

這隻是其中的一部分標籤使用方式,更多的還得參考文檔。

方便自己,方便他人,請正確使用語義化。

文中 DEMO 源碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo1</title>
    <style>
        html, body {
            height: 100%;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        main {
            height: calc(100% - 120px);
            border: 1px solid blue;
        }
        header, footer {
            height: 60px;;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid red;
        }
        header {
            justify-content: flex-end;
        }
        ul {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        li {
            list-style: none;
            border: 1px solid orange;
            height: 60px;
            line-height: 60px;
            width: 100px;
            text-align: center;
        }
        main {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        aside {
            width: 20%;
            border: 1px solid #000;
            height: 100%;
        }
        .right {
            width: 80%;
            height: 100%;
        }
        section {
            height: 200px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </nav>
    </header>
    <main>
        <aside>
            <p>這是一個側邊欄 aside</p>
        </aside>
        <div class="right">
            <section>
                <p>p1</p>
                <p>p2</p>
            </section>
            <section>
                <p>p3</p>
                <p>p4</p>
            </section>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

更多文章,敬請關注

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8485