HTML基礎複習——語義化

時間 2019-12-05

標籤 html 基礎複習語義欄目 HTML 简体版

原文原文鏈接

HTML語義化

概念

官方解釋：
語義化是指用合理的HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器能夠理解。html

個人理解：
在個人理解中語義化就是讓咱們寫的每一行代碼都有其意義，不只僅是程序實現和功能上而言，還必須能被人和機器很好的理解。簡單的說就是你寫的代碼應該是一箭雙鵰的，既要讓人讀懂也要讓機器讀懂。在HTML中就是告訴你們，每個標籤都是有它獨特的意義的和應用場景的，而不是隨便想用就用，想用什麼替換就用什麼替換。程序員

我認爲最好的理解就是將office中的Word與其對比。Word中從頭部頁眉、標題、正文再到頁腳都有單獨的樣式和設置，因此HTML也大同小異，就是爲了將網頁內容經過這些設置來呈現出來。包括我如今寫的文章是用Markdown來完成的，也是語義化的體現。瀏覽器

我將HTML的語義化分爲兩部分，一個是結構語義化，一個是標籤語義化，雖然這樣分會有點問題，但更有利於理解。ide

結構語義化

先從網頁的整個結構來講，最先的網頁就是來展示最基礎的新聞、文章之類的，只是如今的網頁設計更厲害了，在樣式上看着更加炫酷和多樣化，但本質上都是從最基本的結構作起的。能夠先看看世界上最先的網頁是什麼樣子：佈局

通常來講咱們網頁的結構大體上能夠從下面這個圖來理解（固然佈局是能夠改變的）：
網站

代碼展示：搜索引擎

<body>
    <!-- 頭部 -->
    <header></header>
    <!-- 頭部 -->

    <!-- 導航 -->
    <nav></nav>
    <!-- 導航 -->

    <!-- 主體內容 -->
    <main>
    
        <!-- 正文內容 -->
        <article>
            <!-- 章節 -->
            <section>
                <p></p>
            </section>
            <!-- 章節 -->
        </article>
        <!-- 正文內容 -->

        <!-- 正文以外內容 -->
        <aside></aside>
        <!-- 正文以外內容 -->
        
    </main>
    <!-- 主體內容 -->

    <!-- 底部 -->
    <footer></footer>
    <!-- 底部 -->
</body>

標籤語義化

結構語義化不也就是將標籤語義化嗎？是的，可是單獨拉出來講是由於除了整個網頁結構，其餘更多的細節咱們須要注意語義化。舉個例子,下面是騰訊某新聞版塊的網頁：spa

如今咱們去掉其全部樣式後是這樣的：
設計

再看看它的源代碼：
code

不難發現，在咱們將其網頁的全部樣式都去掉以後，仍是能清晰地讀完整篇文章，而且是井井有條的。這就是爲何要將標籤語義化。能夠看到文章的標題用到了<h1>標籤，全文就這一個大標題。而後整篇文章用<p>標籤將文段分開，沒有用<div>，由於<p>就表明一個段落，而<div>什麼都不表明。強調的部分用了<strong>標籤。你們知道CSS中的font-wight也能夠加粗文字，HTML的<b>標籤也能夠加粗文字，可是騰訊都沒有使用。由於CSS在沒有樣式的時候就無論用了，<b>標籤沒有強調的意思，而<strong>的語義更明顯。

這樣的例子還有不少不少，好比W3C的官方網站，在去掉全部CSS樣式以後，仍是能清楚地找到網頁的各個部分，瀏覽所需的內容，這就是一個優秀的網站應該作到的。

經常使用的語義化標籤（大部分擁有文本格式化的做用）：