1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 六種常見的HTML5寫法誤用

        時間:2024-06-17 15:59:16 HTML5 我要投稿
        • 相關推薦

        六種常見的HTML5寫法誤用

        一、不要使用section作為div的替代品

        人們在標簽使用中最常見到的錯誤之一就是隨意將HTML5的<section>等價于<div>——具體地說,就是直接用作替代品(用于樣式)。在XHTML或者HTML4中,我們?吹竭@樣的`代碼:

        <!-- HTML 4-style code -->
        <div id="wrapper">
          <div id="header">
            <h1>My super duper page</h1>
            <!-- Header content -->
          </div>
          <div id="main">
            <!-- Page content -->
          </div>
          <div id="secondary">
            <!-- Secondary content -->
          </div>
          <div id="footer">
            <!-- Footer content -->
          </div>
        </div>

        而現在在HTML5中,會是這樣:

        <!-- 請不要復制這些代碼!這是錯誤的! -->
        <section id="wrapper">
          <header>
            <h1>My super duper page</h1>
            <!-- Header content -->
          </header>
          <section id="main">
            <!-- Page content -->
          </section>
          <section id="secondary">
            <!-- Secondary content -->
          </section>
          <footer>
            <!-- Footer content -->
          </footer>
        </section>

        這樣使用并不正確:<section>并不是樣式容器。section元素表示的是內容中用來幫助構建文檔概要的語義部分。它應該包含一個頭部。如果你想找一個用作頁面容器的元素(就像HTML或者XHTML的風格),那么考慮如Kroc Camen所說,直接把樣式寫到body元素上吧。如果你仍然需要額外的樣式容器,還是繼續使用div吧。

        基于上述思想,下面才是正確的使用HTML5和一些ARIA roles特性的例子(注意,根據你自己的設計,你也可能需要加入div)

        <body>
          <header>
            <h1>My super duper page</h1>
            <!-- Header content -->
          </header>
          <div role="main">
            <!-- Page content -->
          </div>
          <aside role="complementary">
            <!-- Secondary content -->
          </aside>
          <footer>
            <!-- Footer content -->
          </footer>
        </body>

        如果你還是無法確定使用哪種元素,那么我建議你參考HTML5 sectioning content element flowchart

        二、只在需要的時候使用header和hgroup

        寫不需要寫的標簽當然是毫無意義的。不幸的是,我經?吹絟eader和hgroup被無意義的濫用。你可以閱讀一下關于header和hgroup元素的兩篇文章做一個詳細的了解,其中內容我簡單總結如下:

        • header元素表示的是一組介紹性或者導航性質的.輔助文字,經常用作section的頭部

        • 當頭部有多層結構時,比如有子頭部,副標題,各種標識文字等,使用hgroup將h1-h6元素組合起來作為section的頭部

        header的濫用

        由于header可以在一個文檔中使用多次,可能使得這樣代碼風格受到歡迎:

        <!-- 請不要復制這段代碼!此處并不需要header -->
        <article>
          <header>
            <h1>My best blog post</h1>
          </header>
          <!-- Article content -->
        </article>

        如果你的header元素只包含一個頭部元素,那么丟棄header元素吧。既然article元素已經保證了頭部會出現在文檔概要中,而header又不能包含多個元素(如上文所定義的),那么為什么要寫多余的代碼。簡單點寫成這樣就行了:

        <article>
          <h1>My best blog post</h1>
          <!-- Article content -->
        </article>

        <hgroup>的錯誤使用

        在headers這個主題上,我也經?吹絟group的錯誤使用。有時候不應該同時使用hgroup和header:

        • 如果只有一個子頭部

        • 如果hgroup自己就能工作的很好。。。這不廢話么

        第一個問題一般是這樣的:

        <!-- 請不要復制這段代碼!此處不需要hgroup -->
        <header>
          <hgroup>
            <h1>My best blog post</h1>
          </hgroup>
          <p>by Rich Clark</p>
        </header>

        此例中,直接拿掉hgroup,讓heading果奔吧。

        <header>
          <h1>My best blog post</h1>
          <p>by Rich Clark</p>
        </header>

        第二個問題是另一個不必要的例子:

        <!-- 請不要復制這段代碼!此處不需要header -->
        <header>
          <hgroup>
            <h1>My company</h1>
            <h2>Established 1893</h2>
          </hgroup>
        </header>

        如果header唯一的子元素是hgroup,那還要header干神馬?如果header中沒有其他的元素(比如多個hgroup),還是直接拿掉header吧

        <hgroup>
          <h1>My company</h1>
          <h2>Established 1893</h2>
        </hgroup>

        關于<hgroup>更多的例子和解釋,請參閱相關文章

        三、不要把所有列表式的鏈接放在nav里

        隨著HTML5引入了30個新元素(截止到原文發布時),我們在構造語義化和結構化的標簽時的選擇也變得有些不慎重。也就是說,我們不應該濫用超語義化的元素。不幸的是,nav就是這樣一個被濫用的例子。nav元素的規范描述如下:

        nav元素表示頁面中鏈接到其他頁面或者本頁面其他部分的區塊;包含導航連接的區塊。

        注意:不是所有頁面上的鏈接都需要放在nav元素中——這個元素本意是用作主要的導航區塊。舉個具體的例子,在footer中經常會有眾多的鏈接, 比如服 務條款,主頁,版權聲明頁等等。footer元素自身已經足以應付這些情況,雖然nav元素也可以用在這里,但通常我們認為是不必要的。

        WHATWG HTML spec

        關鍵的詞語是“主要的”導航。當然我們可以互相噴上一整天什么叫做“主要的”。而我個人是這樣定義的:

        • 主要的導航

        • 站內搜索

        • 二級導航(略有爭議)

        • 頁面內導航(比如很長的'文章)

        既然并沒有絕對的對錯,所以根據一個非正式投票以及我自己的解釋,以下的情況,不管你放不放,我反正放在<nav>中:

        • 分頁控制

        • 社交鏈接(雖然有些社交鏈接也是主要導航,比如“關于”“收藏”)

        • 博客文章的標簽

        • 博客文章的分類

        • 三級導航

        • 過長的footer

        如果你不確定是否要將一系列的鏈接放在nav中,問你自己:“它是主要的導航嗎?”為了幫助你回答這個問題,考慮以下首要原則:

        • 如果使用section和hx也同樣合適,那么不要用nav — Hixie on IRC

        • 為了方便訪問,你會在某個“快捷跳轉”中給這個nav標簽加一個鏈接嗎?

        如果這些問題的答案是“不”,那就跟<nav>鞠個躬,然后獨自離開吧。

        四、figure元素的常見錯誤

        figure以及figcaption的正確使用,確實是難以駕馭。讓我們來看看一些常見的錯誤,

        不是所有的圖片都是figure

        上文中,我曾告訴各位不要寫不必要的代碼。這個錯誤也是同樣的道理。我看到很多網站把所有的圖片都寫作figure?丛趫D片的份上請不要給它加額外的標簽了。你只是讓你自己蛋疼,而并不能使你的頁面內容更清晰。

        規范中將figure描述為“一些流動的內容,有時候會有包含于自身的標題說明。一般在文檔流中會作為獨立的單元引用。”這正是figure的'美妙之處——它可以從主內容頁移動到sidebar中,而不影響文檔流。

        這些問題也包含在之前提到的HTML5 element flowchart中。

        如果純粹只是為了呈現的圖,也不在文檔其他地方引用,那就絕對不是<figure>。其他視情況而定,但一開始可以問自己:“這個圖片是否必須和上下文有關?”如果不是,那可能也不是<figure>(也許是個<aside>)。繼續:“我可以把它移動到附錄中嗎?”如果兩個問題都符合,則它可能是 <figure>

        Logo并不是figure

        進一步的說,logo也不適用于figure。下面是我常見的一些代碼片段:

        <!-- 請不要復制這段代碼!這是錯的 -->
        <header>
          <h1>
            <figure>
              <img src="/img/mylogo.png" alt="My company" class="hide" />
            </figure>
            My company name
          </h1>
        </header>
        <!-- 請不要復制這段代碼!這也是錯的 -->
        <header>
          <figure>
            <img src="/img/mylogo.png" alt="My company" />
          </figure>
        </header>

        沒什么好說的了。這就是很普通的錯誤。我們可以為logo是否應該是H1標簽而互相噴到牛都放完回家了,但這里不是我們討論的焦點。真正的問題在于 figure元素的濫用。figure只應該被引用在文檔中,或者被section元素圍繞。我想你的logo并不太可能以這樣的方式引用吧。很簡單,請 勿使用figure。你只需要這樣做:

        <header>
          <h1>My company name</h1>
          <!-- More stuff in here -->
        </header>

        Figure也不僅僅只是圖片

        另一個常見的關于figure的誤解是它只被圖片使用。figure可以是視頻,音頻,圖表,一段引用文字,表格,一段代碼,一段散文,以及任何它們或者其他的組合。不要把figure局限于圖片。web標準的職責是精確的用標簽描述內容。

        五、不要使用不必要的type屬性

        這是個常見的問題,但并不是一個錯誤,我認為我們應該通過最佳實踐來避免這種風格。

        在HTML5中,script和style元素不再需要type屬性。然而這些很可能會被你的CMS自動加上,所以要移除也不是那么的輕松。但如果 你是手工編碼或者你完全可以控制你的模板的話,那真的沒有什么理由再去包含type屬性。所有的'瀏覽器都認為腳本是javascript而樣式是css樣 式,你沒必要再多此一舉了。

        <!-- 請不要復制這段代碼!它太冗余了! -->
        <link type="text/css" rel="stylesheet" href="css/styles.css" />
        <script type="text/javascript" src="js/scripts" /></script>

        其實只需要這樣寫:

        <link rel="stylesheet" href="css/styles.css" />
        <script src="js/scripts" /></script>

        甚至指定字符集的代碼都可以省略掉。Mark Pilgrim在Dive into HTML5的語義化一章中作出了解釋。

        六、form屬性的錯誤使用

        HTML5引入了一些form的新屬性,以下是一些使用上的注意事項:

        布爾屬性

        一些多媒體元素和其他元素也具有布爾屬性。這里所說的規則也同樣適用。

        有一些新的form屬性是布爾型的,意味著它們只要出現在標簽中,就保證了相應的行為已經設置。這些屬性包括:

        • autofocus

        • autocomplete

        • required

        坦白的說,我很少看到這樣的。以required為例,常見的是下面這種:

        <!-- 請不要復制這段代碼! 這是錯的! -->
        <input type="email" name="email" required="true" />
        <!-- 另一個錯誤的例子 -->
        <input type="email" name="email" required="1" />

        嚴格來說,這并沒有大礙。瀏覽器的HTML解析器只要看到required屬性出現在標簽中,那么它的'功能就會被應用。但是如果你反過來寫equired=”false”呢?

        <!-- 請不要復制這段代碼! 這是錯的! -->
        <input type="email" name="email" required="false" />

        解析器仍然會將required屬性視為有效并執行相應的行為,盡管你試著告訴它不要去執行了。這顯然不是你想要的。

        【六種常見的HTML5寫法誤用】相關文章:

        幾種常見的商務信封寫法08-17

        HTML5的發展08-15

        辦公室常見事務文書寫法大全01-22

        培訓知識六種常見五子棋陣法05-05

        HTML5未來發展趨勢07-08

        關于HTML5的新特性介紹01-04

        HTML5的15個常用特性01-21

        HTML5的安全風險詳析07-30

        HTML5將給我們帶來什么07-28

        html5編輯器有哪些10-20

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>