首頁技術(shù)文章正文

Web前端開發(fā)培訓(xùn)之HTML5標(biāo)簽使用的常見誤區(qū)

更新時(shí)間:2017-06-09 來源:黑馬程序員web前端開發(fā)培訓(xùn)學(xué)院 瀏覽量:

在這篇文章中，我將給大家分享HTML5構(gòu)建頁面的小錯(cuò)誤和不好的實(shí)踐方法，讓我們在以后的工作中避免這些錯(cuò)誤。

不要把<Section>當(dāng)成簡單的容器來定義樣式

我們經(jīng)?？吹降囊粋€(gè)錯(cuò)誤，就是武斷的將<div>標(biāo)簽用<section>標(biāo)簽來替代，特別是將作為包圍容器的<div>用<section>來替換。在XHTML或者HTML4中，我們將會看到類似下面的代碼：

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000"><font color="rgb(35, 35, 35)"><font style="background-color:rgb(250, 255, 255)"><font face="微軟雅黑"><!-- HTML 4-style code -->
  2. <div id="wrapper">
  3. <div id="header">
  4. <h1>My super duper page</h1>
  5. <!-- Header content -->
  6. </div>
  7. <div id="main">
  8. <!-- Page content -->
  9. </div>
  10. <div id="secondary">
  11. <!-- Secondary content -->
  12. </div>
  13. <div id="footer">
  14. <!-- Footer content -->
  15. </div>
  16. </div></font></font></font></font></span></font></font>
復(fù)制代碼
現(xiàn)在我看到了下面的代碼樣子：

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000"><font color="rgb(35, 35, 35)"><font style="background-color:rgb(250, 255, 255)"><font face="微軟雅黑"><!-- Don’t copy this code! It’s wrong! -->
  2. <section id="wrapper">
  3. <header>
  4. <h1>My super duper page</h1>
  5. <!-- Header content -->
  6. </header>
  7. <section id="main">
  8. <!-- Page content -->
  9. </section>
  10. <section id="secondary">
  11. <!-- Secondary content -->
  12. </section>
  13. <footer>
  14. <!-- Footer content -->
  15. </footer>
  16. </section></font></font></font></font></span></font></font>
復(fù)制代碼
直觀的看，上面的例子是錯(cuò)誤的：<section> 并不是一個(gè)容器。<section>元素是有語意的區(qū)段，幫助構(gòu)建文檔大綱。它應(yīng)該包含標(biāo)題。如果你要尋找一個(gè)可以包含頁面的元素（不論是 HTML 或者 XHTML ），通常的做法是直接對<body>標(biāo)簽定義樣式就像Kroc Camen描述的那樣子，如果你還需要額外的元素來定義樣式，使用<div>, 就像Dr Mike闡述的那樣, div并沒有滅亡，如果這里沒有其它更合適的，div可能是你最合適的選擇。
　　
記住這點(diǎn)，這里我們重新修正了上面的例子，通過使用兩個(gè)新角色。（你是否需要額外的<div>取決于你的設(shè)計(jì)。）

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000"><font color="rgb(35, 35, 35)"><font style="background-color:rgb(250, 255, 255)"><font face="微軟雅黑"><body>
  2. <header>
  3. <h1>My super duper page</h1>
  4. <!-- Header content -->
  5. </header>
  6. <div role="main">
  7. <!-- Page content -->
  8. </div>
  9. <aside role="complementary">
  10. <!-- Secondary content -->
  11. </aside>
  12. <footer>
  13. <!-- Footer content -->
  14. </footer>
  15. </body></font></font></font></font></span></font></font>
復(fù)制代碼

如果你還是無法確定哪一個(gè)元素更適合使用，我建議你去查看HTML5 sectioning content element flowchart來讓你繼續(xù)前行。

只在需要的時(shí)候使用<hgroup>和<header>標(biāo)簽

使用標(biāo)記的時(shí)候?qū)懭肓艘恍┎⒉恍枰默F(xiàn)象這是不合理的。不幸的是，經(jīng)常發(fā)現(xiàn)大家在并不需要的地方使用<header>和<hgroup>標(biāo)簽。你可以跟進(jìn)我們關(guān)于<header>和<hgroup>的最新進(jìn)展，下面是我的簡單歸納：

  • <header>元素通常是通常作為一組解釋或者導(dǎo)航輔助工具，通常包含section的標(biāo)題.
  • <hgroup>元素會將當(dāng)有副標(biāo)題\子標(biāo)題，各類標(biāo)識文字時(shí)，對<h1>到<h6>標(biāo)題進(jìn)行群組，將其作為section的標(biāo)題.
過度使用的<header>
你肯定知道，在一個(gè)文檔中，可以使用多次<header>標(biāo)簽，下面就是一種很受大家歡迎的模式:

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000"><font color="rgb(35, 35, 35)"><font style="background-color:rgb(250, 255, 255)"><font face="微軟雅黑"><!-- Don’t copy this code! No need for header here -->
  2. <article>
  3. <header>
  4. <h1>My best blog post</h1>
  5. </header>
  6. <!-- Article content -->
  7. </article></font></font></font></font></span></font></font>
復(fù)制代碼
      
如果你的<header>標(biāo)簽只包含一個(gè)標(biāo)題元素時(shí)，就不要使用<header>標(biāo)簽了。<article>標(biāo)簽肯定會讓你的標(biāo)題在文檔大綱中顯現(xiàn)出來，而且因?yàn)?lt;header>并不包含多重內(nèi)容(就像定義中描述的那樣子)，我們?yōu)楹我黾佣獾拇a呢?應(yīng)該像下面這樣簡單才可以:

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000"><font color="rgb(35, 35, 35)"><font style="background-color:rgb(250, 255, 255)"><font face="微軟雅黑"><article>
  2. <h1>My best blog post</h1>
  3. <!-- Article content -->
  4. </article></font></font></font></font></span></font></font>
復(fù)制代碼
      
<hgroup>不合理使用　

在標(biāo)題的這個(gè)主題上，經(jīng)?？吹绞褂?lt;hgroup>的錯(cuò)誤案例。在下面這種情況下你不能將<header>標(biāo)簽和<hgroup>標(biāo)簽一起使用:

  • 這里只有一個(gè)標(biāo)題,
  • 或者<hgroup>本身就夠了(比如：不需要<hgroup>)　

第一種情形看上去是下面的樣子:

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000"><font color="rgb(35, 35, 35)"><font style="background-color:rgb(250, 255, 255)"><font face="微軟雅黑"><!-- Don’t copy this code! No need for hgroup here -->
  2. <header>
  3. <hgroup>
  4. <h1>My best blog post</h1>
  5. </hgroup>
  6. <p>by Rich Clark</p>
  7. </header></font></font></font></font></span></font></font>
復(fù)制代碼
     
這種情況下，將<hgroup>移除，只保留標(biāo)題就好.

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000"><font color="rgb(35, 35, 35)"><font style="background-color:rgb(250, 255, 255)"><font face="微軟雅黑"><header>
  2. <h1>My best blog post</h1>
  3. <p>by Rich Clark</p>
  4. </header>
  5. </font></font></font></font></span></font></font>
復(fù)制代碼
     
第二種情況也是包含了他們并不需要的標(biāo)簽.
  1. <!-- Don’t copy this code! No need for header here -->
  2. <header>
  3. <hgroup>
  4. <h1>My company</h1>
  5. <h2>Established 1893</h2>
  6. </hgroup>
  7. </header>
復(fù)制代碼

　　

當(dāng)<header>標(biāo)簽的子元素只有<hgroup>的時(shí)候，為什么我們還需要一個(gè)額外的<header>?如果沒有額外的元素放到<header>中(比如<hgroup>的兄弟元素)，我們直接將<header>元素去掉就好。

  1. <hgroup>
  2. <h1>My company</h1>
  3. <h2>Established 1893</h2>
  4. </hgroup>
復(fù)制代碼

不要將所有的鏈接列表都放到<nav>標(biāo)簽

在HTML5新增的30個(gè)元素中(在我們寫這篇文章的時(shí)候)，我們在構(gòu)建更具語義\結(jié)構(gòu)化的標(biāo)簽的時(shí)候，我們的選擇變得太豐富。也就是說我們對現(xiàn)在給我們提供的這些超級有語義的標(biāo)簽，我們可能會濫用。<nav>就是一個(gè)很悲劇的例子。在規(guī)范中的描述是這樣的:

  1. <font size="3"><font size="3"><span style="background-color: white;"><font color="#000000">The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
  2. Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
  3. WHATWG HTML spec</font></span></font></font>
復(fù)制代碼

　　

這里面的關(guān)鍵詞是”重要”導(dǎo)航。我們可能會對”重要”有不同的定義，但是我的理解是:

  • 主要導(dǎo)航
  • 網(wǎng)站搜索
  • 二級導(dǎo)航(這個(gè)能是有爭議的)
  • 頁面內(nèi)鏈接(比如一篇很長的文章)

雖然并沒有對錯(cuò)之分，但根據(jù)我的理解和一個(gè)民意投票讓我覺得在下面這些情形下，我不會使用<nav>標(biāo)簽:

  • 翻頁
  • 社交類的鏈接（雖然有些社交類的鏈接也是主要的鏈接，比如關(guān)于我About me和品味Flavours ）
  • 博客文章的標(biāo)簽
  • 博客文章的分類列表
  • 第三級導(dǎo)航
  • 大頁腳
    　

如果你不能確定是否使用<nav>，那就先對你問一下下面的幾個(gè)問題：“這是否是一個(gè)主要鏈接？”，你可以根據(jù)下面的幾個(gè)因素來回答你剛才的問題：

  • 如果用<section>和標(biāo)題標(biāo)簽?zāi)軌蚪鉀Q你的問題，那就不要去使用<nav>–Hixie on IRC
  • 你是不是為了增加可訪問性而增加的一個(gè)快捷跳轉(zhuǎn)鏈接呢？
    　

如果上面的回答都是“不”，那可能就不適合使用<nav>。　


<figure>元素的錯(cuò)誤　

<figure>和經(jīng)常與它合伙作案的<figcaption>，是很難掌握的標(biāo)簽，下面是經(jīng)常看到的一些小錯(cuò)誤。


并不是所有的圖片都是figure（注：比較難理解阿，image=圖片，figure=圖形）　

之前，我曾經(jīng)說過不要寫那些不需要的標(biāo)簽。這個(gè)錯(cuò)誤也是相同的。我經(jīng)常看到一個(gè)網(wǎng)站上的每張圖片都有<figure>標(biāo)簽。這些額外增加的標(biāo)簽并不會給你帶來任何的益處，并且還增加了你自己的工作強(qiáng)度和讓自己的內(nèi)容變得更難理解。　

在規(guī)范中關(guān)于<figure>的解釋如下：“某些流內(nèi)容，可以有標(biāo)題，自我包含并且通常作為一個(gè)單元獨(dú)立于內(nèi)文檔流之外?！痹谀抢镉型昝赖谋硎觯褪撬梢员粡闹鲀?nèi)容中移除——比如放到邊攔，而對文檔流沒有影響。　

如果僅僅是一張表現(xiàn)類的圖片而且和文檔中其他的內(nèi)容沒有關(guān)系的話，那就不需要使用<figure>.”這張圖片需要對上下文的內(nèi)容作出解釋嗎？”，如果答案是”否”，那就可能不是<figure>(可能是<aside>)，“我能把它移到附錄里面嗎？”，如果這兩個(gè)問題的答案都是”是”，那就可能是<figure>.

　　
你的標(biāo)志不是一個(gè)<figure>　

將上面的延伸開來，對你的logo也是這樣。下面是兩組我找到的有規(guī)律的代碼片斷：

  1. <!-- Don’t copy this code! It’s wrong! -->
  2. <header>
  3. <h1>
  4. <figure>
  5. <img src="/img/mylogo.png" alt="My company" class="hide"/>
  6. </figure>
  7. My company name
  8. </h1>
  9. </header>
  10. <!-- Don’t copy this code! It’s wrong! -->
  11. <header>
  12. <figure>
  13. <img src="/img/mylogo.png" alt="My company"/>
  14. </figure>
  15. </header>
復(fù)制代碼

　　

這里就不需要說啥了，這是很明顯的錯(cuò)誤，可能你認(rèn)為我們說的是不是將logo放在H1標(biāo)簽里面，但是我們在這里并不討論這個(gè)問題。讓我們迷惑的是<figure>元素。<figure>標(biāo)簽只用在當(dāng)有上下文需要說明或者被<section>包圍的時(shí)候。我這里要說的是你的logo可能很少會被這種情況下使用。很簡單，那就不要去這樣做，你需要的僅僅是下面的樣子。

  1. <header>
  2. <h1>My company name</h1>
  3. <!-- More stuff in here -->
  4. </header>
復(fù)制代碼

figure只能用在標(biāo)簽上的誤解　　

另一個(gè)對<figure>的誤解就是我們通常認(rèn)為它只能用在圖片上面。事實(shí)上并不是這樣子的，它可以被用在 <video><audio>, 一個(gè)圖標(biāo) (比如<SVG>), 一個(gè)引用, 一個(gè)表格, 一段代碼, 一段散文, 或者任何和這些相關(guān)的組合。不要把你的<figure>標(biāo)簽僅僅局限在圖片上。我們網(wǎng)頁制作師的任務(wù)就是用標(biāo)簽更準(zhǔn)確的描述內(nèi)容。

　　

不要去使用那些不必要的type屬性　

這可能是我們最常見的一些問題，它們并不是真正的錯(cuò)誤，但我覺得我們的最好實(shí)踐還是盡量避免這種模式。

在HTML5中，我們并不需要給<script>和<script>增加 type 屬性，如果這些從CMS默認(rèn)添加的內(nèi)容中移出是很痛苦的事情，那當(dāng)你手工編碼的時(shí)候還寫入它們或者你能完全的控制你的模板時(shí)候你完全可以刪掉它們。因?yàn)樗械臑g覽器都會將<script>解析成Javascript和<css>標(biāo)簽是CSS，你不再需要那個(gè)type屬性了：

  1. <!-- Don’t copy this code! It’s attribute overload! -->
  2. <link type="text/css" rel="stylesheet" href="css/styles.css"/>
  3. <script type="text/javascript" src="js/scripts.js"></script>
復(fù)制代碼

　　

現(xiàn)在我們可以寫成下面的樣子：

  1. <link rel="stylesheet" href="css/styles.css"/>
  2. <script src="js/scripts.js"></script>
復(fù)制代碼

你也能夠?qū)幋a的設(shè)置作出省略。Mark Pilgrim在Dive into HTML5的語義化一章中作出了解釋。

　　
不要包含錯(cuò)誤的表單屬性

你可能發(fā)現(xiàn)<html5>引入了很多新的表單屬性?，F(xiàn)在我就給大家講講一些不合適的使用。

　　
布爾值屬性

新引入的標(biāo)簽屬性有幾個(gè)是布爾類型的，它們的標(biāo)簽行為基本接近。這些屬性包括：

  • autofocus
  • autocomplete
  • required

坦白的說，下面的這種情況對我來說并不常見，但我們從 required 作為例子，如下：

  1. <!-- Don’t copy this code! It’s wrong! -->
  2. <input type="email" name="email" required="true"/>
  3. <!-- Another bad example -->
  4. <input type="email" name="email" required="1"/>
復(fù)制代碼

基本上看，這段代碼并不會帶來危害。客戶端對 HTML的解析遇到 required 標(biāo)簽屬性時(shí)，他的功能就會生效。但是當(dāng)我們將代碼修改，錄入 required=”false” 的情況呢？

  1. <!-- Don’t copy this code! It’s wrong! -->
  2. <input type="email" name="email" required="false"/>
復(fù)制代碼

解析的時(shí)候依然會遇到 required 屬性，雖然你希望加入的行為是“假”，它依然會被解析成“真”。

這里有三種合理的方法讓布爾值生效。（第二種和第三種方案只有你在寫 XHTML 解析的時(shí)候需要）　

我們上面的例子可以寫成下面的樣子：

  1. <input type="email" name="email" required />
復(fù)制代碼

總結(jié)

對我來說，我無法將所有蹩腳的代碼模式都展示在這里，但是上面說的這些都是我們經(jīng)常遇到的。


本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：黑馬程序員web前端培訓(xùn)學(xué)院；
首發(fā)：http://web.itheima.com/ 

分享到：
在線咨詢 我要報(bào)名
和我們在線交談！