中山市原創(chuàng)動力網(wǎng)絡(luò)科技有限公司
創(chuàng)您所想與您同在
免費(fèi)互聯(lián)網(wǎng)品牌營銷咨詢服務(wù)
立刻咨詢
13450931319來源：轉(zhuǎn)載 發(fā)布時間：2018-07-02 15:16:07 閱讀量：4716
最近組內(nèi)進(jìn)行HTML5標(biāo)簽的學(xué)習(xí)，方法呢就是大家每人挑選幾個標(biāo)簽，自己先去學(xué)習(xí)，然后給大家作講解。這個過程大家還是挺有收獲的。但是現(xiàn)在HTML5還處在草案階段，有些新的標(biāo)簽元素的解釋也是經(jīng)常有變化，甚至標(biāo)簽加入移出也很頻繁（比如hgroup），同時現(xiàn)有的大門戶網(wǎng)站在使用HTML5方面也沒有很好的范例可以參考，讓大家的學(xué)習(xí)過程更摸索。下面是我在html5doctor上面看到的一篇文章，在目前大家懵懂的階段，可能看看大師的講解會更容易理解。由于才疏學(xué)淺，很多不明白的地方可能只是做了字面上的翻譯，不對的地方還請大家多多指教。
下面附上原文地址：避免常見的HTML5錯誤作者：Richard Clark，有疑問的地方大家可以核對英文。
在這篇文章中，我將給大家分享HTML5構(gòu)建頁面的小錯誤和不好的實踐方法，讓我們在以后的工作中避免這些錯誤。
不要把<Section>當(dāng)成簡單的容器來定義樣式
我們經(jīng)?？吹降囊粋€錯誤，就是武斷的將<DIV>標(biāo)簽用<節(jié)>標(biāo)簽來替代，特別是將作為包圍容器的<DIV>用<節(jié)>來替換。在XHTML或者HTML 4中，我們將會看到類似下面的代碼：
<！ - HTML 4樣式代碼 - >
<div id =“wrapper”>
<div id =“header”>
<h1>我的超級騙子頁面</ h1>
<！ - 標(biāo)題內(nèi)容 - >
</ DIV>
<div id =“main”>
<!-- Page content -->
</div>
<div id="secondary">
<!-- Secondary content -->
</div>
<div id="footer">
<!-- Footer content -->
</div>
</div>
現(xiàn)在我看到了下面的代碼樣子：
<!-- Don’t copy this code! It’s wrong! -->
<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>元素是有語意的區(qū)段，幫助構(gòu)建文檔大綱。它應(yīng)該包含標(biāo)題。如果你要尋找一個可以包含頁面的元素（不論是 HTML 或者 XHTML ），通常的做法是直接對<body>標(biāo)簽定義樣式就像Kroc Camen描述的那樣子，如果你還需要額外的元素來定義樣式，使用<div>,就像Dr Mike闡述的那樣, div并沒有滅亡，如果這里沒有其它更合適的，div可能是你最合適的選擇。
記住這點(diǎn)，這里我們重新修正了上面的例子，通過使用兩個新角色。（你是否需要額外的<div>取決于你的設(shè)計。）
<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來讓你繼續(xù)前行。
只在需要的時候使用 <hgroup>和<header>標(biāo)簽
使 用標(biāo)記的時候?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)識文字時,對<h1>到<h6>標(biāo)題進(jìn)行群組,將其作為section的標(biāo)題.
過度使用的<header>
你肯定知道,在一個文檔中,可以使用多次<header>標(biāo)簽,下面就是一種很受大家歡迎的模式:
<!-- Don’t copy this code! No need for header here -->
<article>
<header>
<h1>My best blog post</h1>
</header>
<!-- Article content -->
</article>
如 果你的<header>標(biāo)簽只包含一個標(biāo)題元素時,就不要使用<header>標(biāo)簽了.<article>標(biāo)簽肯定 會讓你的標(biāo)題在文檔大綱中顯現(xiàn)出來,而且因為<header>并不包含多重內(nèi)容(就像定義中描述的那樣子),我們?yōu)楹我黾佣獾拇a呢?應(yīng) 該像下面這樣簡單才可以:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
<hgroup>不合理使用
在標(biāo)題的這個主題上,經(jīng)常看到使用<hgroup>的錯誤案例.在下面這種情況下你不能將<header>標(biāo)簽和<hgroup>標(biāo)簽一起使用:
這里只有一個標(biāo)題,
或者<hgroup>本身就夠了(比如:不需要<hgroup>)
第一種情形看上去是下面的樣子:
<!-- Don’t copy this code! No need for hgroup here -->
<header>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p>
</header>
這種情況下,將<hgroup>移除,只保留標(biāo)題就好。
<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>
第二種情況也是包含了他們并不需要的標(biāo)簽。
<!-- Don’t copy this code! No need for header here -->
<header>
<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup>
</header>
當(dāng)<header> 標(biāo)簽的子元素只有<hgroup>的時候,為什么我們還需要一個額外的<header>?如果沒有額外的元素放 到<header>中(比如<hgroup>的兄弟元素),我們直接將<header>元素去掉就好。
<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup>
不要將所有的鏈接列表都放到<nav>標(biāo)簽
在HTML5新增的30個元素中(在我們寫這篇文章的時候),我們在構(gòu)建更具語義結(jié)構(gòu)化的標(biāo)簽的時候,我們的選擇變得太豐富.也就是說我們對現(xiàn)在給我們提供的這些超級有語義的標(biāo)簽,我們可能會濫用.<nav>就是一個很悲劇的例子.在規(guī)范中的描述是這樣的:
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.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.
WHATWG HTML spec
這里面的關(guān)鍵詞是”重要”導(dǎo)航.我們可能會對”重要”有不同的定義,但是我的理解是:
主要導(dǎo)航
網(wǎng)站搜索
二級導(dǎo)航(這個能是有爭議的)
頁面內(nèi)鏈接(比如一篇很長的文章)
雖然并沒有對錯之分,但根據(jù)我的理解和一個民意投票讓我覺得在下面這些情形下,我不會使用<nav>標(biāo)簽:
如果你不能確定是否使用<nav>，那就先對你問一下下面的幾個問題：“者是否是一個主要鏈接？”，你可以根據(jù)下面的幾個因素來回答你剛才的問題：
如果用<section>和標(biāo)題標(biāo)簽?zāi)軌蚪鉀Q你的問題，那就不要去使用<nav>–Hixie on IRC
你是不是為了增加可訪問性而增加的一個快捷跳轉(zhuǎn)鏈接呢？
如果上面的回答都是“不”，那可能就不適合使用<nav>。
<figure>元素的錯誤
<figure>和經(jīng)常與它合伙作案的<figcaption>，是很難掌握的標(biāo)簽，下面是經(jīng)?？吹降囊恍┬″e誤。
并不是所有的圖片都是figure（注：比較難理解阿，image=圖片，figure=圖形）
之前，我曾經(jīng)說過不要寫那些不需要的標(biāo)簽。這個錯誤也是相同的。我經(jīng)?？吹揭粋€網(wǎng)站上的每張圖片都有<figure>標(biāo)簽。這些額外增加的標(biāo)簽并不會給你帶來任何的益處，并且還增加了你自己的工作強(qiáng)度和讓自己的內(nèi)容變得更難理解。
在規(guī)范中關(guān)于<figure>的解釋如下：“某些流內(nèi)容，可以有標(biāo)題，自我包含并且通常作為一個單元獨(dú)立于內(nèi)文檔流之外?！痹谀抢镉型昝赖谋硎觯褪撬梢员粡闹鲀?nèi)容中移除–比如放到邊攔，而對文檔流沒有影響。
如果僅僅是一張表現(xiàn)類的圖片而且和文檔中其他的內(nèi)容沒有關(guān)系的話，那就不需要使用<figure>.”這張圖片需要對上下文的內(nèi)容作出解釋 嗎？”，如果答案是”否”，那就可能不是<figure>(可能是<aside>),”我能把它移到附錄里面嗎？”，如果這兩個 問題的答案都是”是”，那就可能是<figure>。
你的標(biāo)志不是一個<figure>
將上面的延伸開來，對你的logo也是這樣。下面是兩組我找到的有規(guī)律的代碼片斷：
<!-- Don’t copy this code! It’s wrong! -->
<header>
<h1>
<figure>
<img src="/img/mylogo.png" alt="My company" class="hide" />
</figure>
My company name
</h1>
</header>
<!-- Don’t copy this code! It’s wrong! -->
<header>
<figure>
<img src="/img/mylogo.png" alt="My company" />
</figure>
</header>
這 里就不需要說啥了，這是很明顯的錯誤，可能你認(rèn)為我們說的是不是將logo放在H1標(biāo)簽里面，但是我們在這里并不討論這個問題。讓我們迷惑的 是<figure>元素。<figure>標(biāo)簽只用在當(dāng)有上下文需要說明或者被<section>包圍的時候。我這 里要說的是你的logo可能很少會被這種情況下使用。很簡單，那就不要去這樣做，你需要的僅僅是下面的樣子。
<header>
<h1>My company name</h1>
<!-- More stuff in here -->
</header>
figure只能用在標(biāo)簽上的誤解
另 一個對<figure>的誤解就是我們通常認(rèn)為它只能用在圖片上面。事實上并不是這樣子的，它可以被用在 <video><audio>, 一個圖標(biāo) (比如<SVG>, ), 一個引用, 一個表格, 一段代碼, 一段散文, 或者任何和這些相關(guān)的組合. 不要把你的<figure>標(biāo)簽僅僅局限在圖片上。我們網(wǎng)頁制作師的任務(wù)就是用標(biāo)簽更準(zhǔn)確的描述內(nèi)容。
這里有一篇更深入講解 <figure>的文章I wrote about <figure>，很值得閱讀的。
不要去使用那些不必要的type屬性
這可能是我們最常見的一些問題，它們并不是真正的錯誤，但我覺得我們的最好實踐還是盡量避免這種模式。
在HTML5中，我們并不需要給<script>和<script>增加 type 屬性，如果這些從CMS默認(rèn)添加的內(nèi)容中移出是很痛苦的事情，那當(dāng)你手工編碼的時候還寫入它們或者你能完全的控制你的模板時候你完全可以刪掉它們。因為所 有的瀏覽器都會將<script>解析成Javascript和<css>標(biāo)簽是CSS，你不再需要那個type屬性了：
<!-- Don’t copy this code! It’s attribute overload! -->
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>
現(xiàn)在我們可以寫成下面的樣子：
<link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts.js"></script>
你也能夠?qū)幋a的設(shè)置作出省略。Mark Pilgrim在Dive into HTML5的語義化一章中作出了解釋。
不要包含錯誤的表單屬性
你可能發(fā)現(xiàn)<HTML5>引入了很多新的表單屬性。現(xiàn)在我就給大家講講一些不合適的使用。
布爾值屬性
。新引入的標(biāo)簽屬性有幾個是布爾類型的，它們的標(biāo)簽行為基本接近這些屬性包括：
自動對焦
自動完成
需要
坦白的說，下面的這種情況對我來說并不常見，但我們從required作為例子，如下：
<！ - 不要復(fù)制這段代碼！這是不對的！ - >
<input type =“email”name =“email”required =“true”/>
<！ - 另一個不好的例子 - >
<input type =“email”name =“email”required =“1”/>
基本上看，這段代碼并不會帶來危害?？蛻舳藢TML的解析遇到required標(biāo)簽屬性時，他的功能就會生效。但是當(dāng)我們將代碼修改，錄入required =“false”的情況呢？
<！ - 不要復(fù)制這段代碼！這是不對的！ - >
<input type =“email”name =“email”required =“false”/>
解析的時候依然會遇到required attribute，雖然你希望加入的行為是假，它依然會被解析成真。
這里有三種合理的方法讓布爾值生效。（第二種和第三種方案只有你在寫XHTML解析的時候需要）
我們上面的例子可以寫成下面的樣子：
<input type =“email”name =“email”required />
在線
客服
客服
熱線
7*24小時客服服務(wù)熱線
關(guān)注
微信
關(guān)注官方微信
微信登錄
QQ登錄
微博登錄
售前咨詢