HTML5標簽的語義認知和理解（1）

發布時間：2020-06-18 12:55:19 來源：網絡閱讀：356 作者：shyleoking 欄目：移動開發

隨著服務器的處理能力越來越大，互聯網級開發終于開始全面火熱（前幾年我和很多人說，不要光關注所謂企業級開發，未來馬上將進入互聯網級開發），HTML5的預熱為前端技術帶來了更多機會和熱點。

我用的是VS2008開發工具，作為懶人（對于開發工具有強烈的依賴性，懶得記API單詞，懶得多打字，懶得查手冊）的代表，Intellisense 對我一直是非常重要的事情，我喜歡微軟的開發平臺，也就是應為VS開發工具有良好的高速的Intellisense 我才喜歡再微軟的平臺上開發，對于習慣用記事本的牛人，我一直內心仰慕但堅決不從。VS2008對HTML5沒有良好的支持的時候，我一直是光看不練，直到我看到了“HTML 5 intellisense and validation schema for Visual Studio 2008 and Visual Web Developer”之后，我的VS2008開始部分的支持HTML5了，至少element和CSS開發有了為懶人服務的Intellisense 了，親，太高興了，可惜，對DOM 的javasScript API還沒有支持（哦，關于這個話應該怎么表達，和很多朋友有爭論，你明白我的意思就可以，這個插件還不支持HTML5比如類似canvas.getContext這樣的函數）。

下載了這個插件之后，我們可以在工具--選項中看到新的HTML5的驗證架構，在頁面開發環境中也可以算作目標驗證架構師HTML5。同時開始支持對html標簽和css的部分Intellisense 支持。

最早，也是最令人印象深刻，特別是對我這樣的懶人而言，記得最深的就是初始化的html元素被簡單到非常極致的情況了

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
</head>  
<body>  
</body>  
</html>

我第一次聽說不要寫DOCTYPE中的內容后，是非常的激動啊，終于不要那些亂七八糟的東西了，不過轉念一想，我好像也從來沒有寫過，都IDE幫我搞定的嘛，慚愧啊慚愧。

然后我們說HTML5的新元素，在了解新元素前，我想先說明下個人觀點，對于標簽的運用無論如何都是見仁見智的東西，標準是一個指導和參考意見，不同的人有不同的理解的哈利波特（莎士比亞我不是說你），我的理解從最初的HTML4的語義標簽開始：

標簽的分類方式很多，HTML4中我簡單的將標簽分為默認block和默認inline這種分法，和有語義以及無語義（樣式標簽不談了）的分法。
除了div之外i，其他標簽都是有語義的（聲明下，類似font等樣式標簽我早就不算HTML4的使用中了），div的含義只是在邏輯上將一些標簽視同為一組，可以共同處理

如果你同意我這樣說，那么你也會同意我說，html5中很多新的基于結構的元素就是來替代div的，或者說可以替代一部分div的作用。這些元素用來說明元素區域和分組的用途。

原因是，未來的網頁不僅僅是給PC上的瀏覽器看的，而且更多的要提供給移動設備，專有設備，小型設備上的瀏覽器來方便，而這些瀏覽器需要在不同的環境中重新處理頁面內容，給予用戶更好的閱讀體驗，所有頁面的內容必須對瀏覽器提供有參考價值的指導，便于瀏覽器提供剪裁、突出和特定操作的處理。

所有的文檔都應該有一個header元素，特別是頁面本身就是一個document對象，所以如果不是有特別的理由，你的頁面的最上面的部分應該有一個header元素，其他的文章部分也可能會有header，要小心的是，避免header被濫用，header表示的是一組介紹性或者導航性質的輔助文字，記住導航和介紹性這兩個關鍵詞。

所以，頁面的最上面一個header應該包含一個導航的標簽：nav。雖然好像沒有必須的規定，但是我認為再nav中只應該包含ol或li元素，畢竟nav的作用是導航，而導航應該是一組路徑的集合。header中還可以包含其他用于介紹的信息，比如首頁的公司圖標，公司名稱，或產品主題頁的產品名稱神馬的。

<body> 
    <header> 
        <img alt="logo" /> 
        <h2> 
            *****公司</h2> 
        <nav> 
            <ol> 
                <li>導航1</li> 
                <li>導航2</li> 
                <li>導航3</li> 
                <li>導航4</li> 
                <li>導航5</li> 
            </ol> 
        </nav> 
    </header> 
</body>

當然也可以這么下

<body> 
    <header> 
        <h2> 
            <img alt="logo" /> 
        </h2> 
        <nav> 
            <ol> 
                <li>導航1</li> 
                <li>導航2</li> 
                <li>導航3</li> 
                <li>導航4</li> 
                <li>導航5</li> 
            </ol> 
        </nav> 
    </header> 
</body>

隨便說一下，HTML5中繼續保留了ol和ul，我個人的建議是吧那些解釋差異很復雜的同類元素去掉，比如保留abbr放棄acronym，可惜ol和ul都保留下來了，不過我建議用ol。

對于文檔型頁面來說，比如blog的主頁，有主標題和副主標題，那可以在header中用hgroup元素來處理

<header> 
    <h2> 
        像螞蟻一樣工作，像蝴蝶一樣生活  
    </h2> 
    <h3> 
        記錄成長的點滴  
    </h3> 
    <p> 
        類似后面文章的前言部分啦</p> 
</header>

文檔本身可以用article元素來標記，article可以描述整篇文章和其包含的所有信息。往往article中也包含了header（我說的是往往）或者hgroup（這個倒真的不一定需要用）。

對于article是不是需要header，有這么幾個方式可以判斷，是不是有H和一些描述共同組合頁眉信息？如果只有H，沒有其他描述，那就不必用header了

<article> 
    <h2> 
        標題  
    </h2> 
</article>

如果，有主副標題，但沒有說明性描述，那直接hgroup也可以

<article> 
    <hgroup> 
        <h2> 
            主標題  
        </h2> 
        <h3> 
            副標題  
        </h3> 
    </hgroup> 
</article>

現在應該對header更有感覺了，是為了向瀏覽器描述出，哪些是文檔的頁眉區。

今天就道這里，累死了，明天繼續扯HTML元素的理解和認知，對呀HTML5的理解我遵守的原則是：自圓其說，不勉強。一個元素我們要弄明白在哪里用是最合適的，要用的有道理了，哎睡覺了。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

HTML5標簽的語義認知和理解（1）

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

HTML5標簽的語義認知和理解（1）

猜你喜歡

最新資訊

相關推薦

相關標簽