Head First HTML与CSS

第十二章 HTML5标记

CSS——掌控页面的表现

关于HTML5

<div>不够特定，新的HTML5标记提供了更特定、更适合某些结构的标记。利用HTML5标记，我们可以把原来的<div>换成一些更加特定的元素，更明确地指示其中包含什么类型的内容。

HTML5部分元素介绍

<article>表示页面中一个独立的组成部分，如一个博客帖子、用户论坛帖子或新闻报道。

<nav>所包含的内容将作为页面的导航链接。

<header>放在页面顶部的内容，或者放在页面某个区块的顶部。

<footer>放在页面底部的内容，或者放在页面某个区块的底部。

<time>可能包含一个日期或时间，也可能同时包含日期和时间。

<aside>包含的内容是对页面内容的补充，如插图或边栏。

<section>一个主题性内容分组，通常包含一个首部（header），可能还有一个底部（footer）。

<video>用来为页面增加视频媒体。

因此关于之前的starbuzz页面，我们可以：

使用<header>元素代替我们的header<div>。

使用<section>元素代替我们之前的drinks<div>和main<div>。

使用<aside>元素代替我们之前的sidebar<div>。

使用<footer>元素代替我们之前的footer<div>。

创建博客

很多新的HTML5元素正好非常适合创建博客。其中导航栏使用<nav>元素。

区别<section>与<article>：

使用<section>可以把相关的内容分组在一起，使用<article>包含独立的内容。

添加日期

time元素有一个重要的属性：datetime。

如果使用datetime属性来指定一个日期和/或一个时间，可以写你希望的任何元素内容。通常，这可能是某个与日期或时间相关的文本，如“February 18,2012”或者甚至可以是“yesterday”或“now”。如果元素内容没有采用官方Internet日期/时间格式来写，就必须有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时间）