前端常見的6種HTML5錯誤用法

2022-09-08 13:57:13 字數 3467 閱讀 5691

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

人們在標籤使用中最常見到的錯誤之一就是隨意將html5的等價於——具體地說,就是直接用作替代品(用於樣式)。在xhtml或者html4中,我們常看到這樣的**:

header content

page content

secondary content

footer content

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

請不要複製這些**!這是錯誤的!

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

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

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

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

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

由於header可以在乙個文件中使用多次,可能使得這樣**風格受到歡迎:

請不要複製這段**!此處並不需要header -->

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

的錯誤使用

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

by rich clark

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

by rich clark

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

請不要複製這段**!此處不需要header -->

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

(web前端學習***:328058344 禁止閒聊,非喜勿進!)

三、不要把所有列表式的鏈結放在n**裡

四、figure元素的常見錯誤

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

不是所有的都是figure

上文中,我曾告訴各位不要寫不必要的**。這個錯誤也是同樣的道理。我看到很多**把所有的都寫作figure。看在的份上請不要給它加額外的標籤了。你只是讓你自己蛋疼,而並不能使你的頁面內容更清晰。

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

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

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

logo並不是figure

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

![my company](/img/mylogo.png) 

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

figure也不僅僅只是

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

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

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

其實只需要這樣寫:

甚至指定字符集的**都可以省略掉。mark pilgrim在dive into html5的語義化一章中作出了解釋。

六、form屬性的錯誤使用

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

布林屬性

一些多**元素和其他元素也具有布林屬性。這裡所說的規則也同樣適用。

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

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

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

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

有三種有效的方式去使用布林屬性。(後兩種只在xthml中有效)

上述例子的正確寫法應該是:

避免常見的HTML5錯誤用法

不要使用section作為div的替代品 人們在標籤使用中最常見到的錯誤之一就是隨意將html5的等價於 具體地說,就是直接用作替代品 用於樣式 在xhtml或者html4中,我們常看到這樣的 header content page content secondary content footer ...

HTML5前端教程分享 CSS瀏覽器常見相容問題

在了解相容問題之前,先了解下瀏覽器的核心。瀏覽器最重要或者說核心的部分是 rendering engine 可翻譯為 渲染引擎 不過我們一般習慣將之稱為 瀏覽器核心 作用是負責對網頁語法的解析並渲染 顯示 網頁。不同的瀏覽器核心對網頁編寫語法的解析不一樣,因此同一網頁在不同的核心的瀏覽器裡的渲染 顯...

有關html5標籤說法錯誤的有?

a.標籤定義聲音,比如 或其他音訊流 b.比如來自乙個外部的新聞提供者的一篇新的文章,或者來自blog的文字,或是來自論壇的文字。亦或是來自其他外部源內容 c.標籤定義選單列表。當希望列表單控制項時使用改標籤 d.標籤定義命令按鈕,比如單選按鈕 核取方塊或按鈕 答案 b 解析 這裡考察html標籤的...