1. 程式人生 > >HTML5學習筆記簡明版(9):變化的元素和屬性

HTML5學習筆記簡明版(9):變化的元素和屬性

改變的元素(Element)

以下元素在HTML5裡的用法稍作修改以便能在web裡更好的使用或者起到更大作用:

  1. 沒有href屬性的a元素將顯示成一個佔位符,而且a元素內部現在支援flow content型別的元素了(例如:article, input, span等)。
  2. address可以被article, aside, nav, section限定範圍了,以前只能作用於全域性範圍。
  3. b元素現在描述為在普通文章中僅從文體上突出的不包含任何額外的重要性的一段文字。例如:文件概要中的關鍵字,評論中的產品名。或者代表強調的排版方式。另外,根據HTML5的規範,標題文字應使用<h1>到<h6>,強調文字使用<em>,重要文字使用<strong>,標記高亮文字使用<mark>,其它方面的才使用<b>。
  4. cite是用來標明引言的,所謂引言,就是對一本書、一篇報告或其它出版的來源資料的引用。可使用該標籤對參考文獻的引用進行定義,比如書籍或雜誌的標題,HTML4裡該意思(一個人的名字)將不再適用。
  5. dl元素表示為包含多個name-value的group,不再僅僅表示為HTML4原來的意思。
  6. head元素不再允許包含object子元素。
  7. hr元素定義內容中的主題變化,並顯示為一條水平線,不再僅僅是水平線的意思。
  8. i元素現在描述為在普通文章中突出不同意見或語氣或其他的一段文字,例如:一個分類名稱,一個技術術語,一個外語中的諺語,一個想法等。或者代表斜體的排版方式
  9. label元素,瀏覽器不再將焦點從label移動到控制元件上,除非底層的平臺使用者介面進行了標準化。
  10. menu元素進行了重新定義,在toolbars和context menus下更有用。
  11. s元素標記的內容不再是精確和重要的,不建議使用,建議使用<del>。
  12. strong元素表示為重要的文字,而不再是語氣更重的強調文字。
  13. u元素表示下劃線,內容是一段模糊不清的文字,或者是錯誤但是依然需要顯示的文字,或者是專有名詞(比如漢語詞彙)。

改變的屬性(Attribute)

  • li元素的value屬性重新啟用,在4.0裡被限制了,但HTML5裡開始重新使用這個屬性,同樣ol的 start屬性也被重新啟用了。注:value值只是索引值,而不是排序值。

例如:

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

上面的程式碼也可以使用ol元素的reversed屬性來實現:

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>
  • a和area元素的target屬性重新啟用,因為在web程式裡非常有用,比如和iframe一起使用。
  • script和style元素的type屬性不在是必須項,如果指令碼是符合ECMAScript的,或者style語言是CSS。
  • table元素的border屬性值,只允許設定為"1"或者空字串。
  • 下面的一些屬性依然允許使用,但是建議使用更好的替代方案:
  • script元素的language屬性使用的時候必須設定為“JavaScript”(不區分大小寫),並且不能和type屬性衝突,使用者可以忽略這個屬性。
  • a元素的name屬性,使用者可以使用id代替。
  • img元素和其他所有元素的width和height屬性不在允許設定值為百分比數字。