Head First HTML與CSS
第十二章 HTML5標(biāo)記
CSS——掌控頁(yè)面的表現(xiàn)
關(guān)于HTML5
<div>不夠特定,新的HTML5標(biāo)記提供了更特定、更適合某些結(jié)構(gòu)的標(biāo)記。利用HTML5標(biāo)記,我們可以把原來的<div>換成一些更加特定的元素,更明確地指示其中包含什么類型的內(nèi)容。
HTML5部分元素介紹
<article>表示頁(yè)面中一個(gè)獨(dú)立的組成部分,如一個(gè)博客帖子、用戶論壇帖子或新聞報(bào)道。
<nav>所包含的內(nèi)容將作為頁(yè)面的導(dǎo)航鏈接。
<header>放在頁(yè)面頂部的內(nèi)容,或者放在頁(yè)面某個(gè)區(qū)塊的頂部。
<footer>放在頁(yè)面底部的內(nèi)容,或者放在頁(yè)面某個(gè)區(qū)塊的底部。
<time>可能包含一個(gè)日期或時(shí)間,也可能同時(shí)包含日期和時(shí)間。
<aside>包含的內(nèi)容是對(duì)頁(yè)面內(nèi)容的補(bǔ)充,如插圖或邊欄。
<section>一個(gè)主題性內(nèi)容分組,通常包含一個(gè)首部(header),可能還有一個(gè)底部(footer)。
<video>用來為頁(yè)面增加視頻媒體。
因此關(guān)于之前的starbuzz頁(yè)面,我們可以:
使用<header>元素代替我們的header<div>。
使用<section>元素代替我們之前的drinks<div>和main<div>。
使用<aside>元素代替我們之前的sidebar<div>。
使用<footer>元素代替我們之前的footer<div>。
創(chuàng)建博客
很多新的HTML5元素正好非常適合創(chuàng)建博客。其中導(dǎo)航欄使用<nav>元素。
區(qū)別<section>與<article>:
使用<section>可以把相關(guān)的內(nèi)容分組在一起,使用<article>包含獨(dú)立的內(nèi)容。
添加日期
time元素有一個(gè)重要的屬性:datetime。
如果使用datetime屬性來指定一個(gè)日期和/或一個(gè)時(shí)間,可以寫你希望的任何元素內(nèi)容。通常,這可能是某個(gè)與日期或時(shí)間相關(guān)的文本,如“February 18,2012”或者甚至可以是“yesterday”或“now”。如果元素內(nèi)容沒有采用官方Internet日期/時(shí)間格式來寫,就必須有datetime屬性。
<time datetime="2012-02-18">2/18/2012</time>
其中,"2012-02-18"是指定日期的官方Internet格式,包含日、月和年。
官方格式如下:
2012-02
2012
2012-02-18 09:00
2012-02-18 18:00
05:00
2012-02-18 05:00Z(有Z表示UTC時(shí)間)
