HTML5標籤的語義認知和理解(1)

隨着服務器的處理能力越來越大,互聯網級開發終於開始全面火熱(前幾年我和很多人說,不要光關注所謂企業級開發,未來馬上將進入互聯網級開發),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的語義標籤開始:

  1. 標籤的分類方式很多,HTML4中我簡單的將標籤分爲默認block和默認inline這種分法,和有語義以及無語義(樣式標籤不談了)的分法。
  2.  除了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" />
        <h1>
            *****公司</h1>
        <nav>
            <ol>
                <li>導航1</li>
                <li>導航2</li>
                <li>導航3</li>
                <li>導航4</li>
                <li>導航5</li>
            </ol>
        </nav>
    </header>
</body>
當然也可以這麼下
<body>
    <header>
        <h1>
            <img alt="logo" />
        </h1>
        <nav>
            <ol>
                <li>導航1</li>
                <li>導航2</li>
                <li>導航3</li>
                <li>導航4</li>
                <li>導航5</li>
            </ol>
        </nav>
    </header>
</body>

隨便說一下,HTML5中繼續保留了olul,我個人的建議是吧那些解釋差異很複雜的同類元素去掉,比如保留abbr放棄acronym,可惜olul都保留下來了,不過我建議用ol
對於文檔型頁面來說,比如blog的主頁,有主標題和副主標題,那可以在header中用hgroup元素來處理
    <header>
        <h1>
            像螞蟻一樣工作,像蝴蝶一樣生活
        </h1>
        <h2>
            記錄成長的點滴
        </h2>
        <p>
            類似後面文章的前言部分啦</p>
    </header>
文檔本身可以用article元素來標記,article可以描述整篇文章和其包含的所有信息。往往article中也包含了header(我說的是往往)或者hgroup(這個倒真的不一定需要用)。
對於article是不是需要header,有這麼幾個方式可以判斷,是不是有H和一些描述共同組合頁眉信息?如果只有H,沒有其他描述,那就不必用header
    <article>
        <h1>
            標題
        </h1>
    </article>
如果,有主副標題,但沒有說明性描述,那直接hgroup也可以
    <article>
        <hgroup>
            <h1>
                主標題
            </h1>
            <h2>
                副標題
            </h2>
        </hgroup>
    </article>
現在應該對header更有感覺了,是爲了向瀏覽器描述出,哪些是文檔的頁眉區。
今天就道這裏,累死了,明天繼續扯HTML元素的理解和認知,對呀HTML5的理解我遵守的原則是:自圓其說,不勉強。一個元素我們要弄明白在哪裏用是最合適的,要用的有道理了,哎睡覺了。


















發佈了199 篇原創文章 · 獲贊 8 · 訪問量 59萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章