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í)間）