《HTML 5与CSS 3 权威指南(第3版·上册)》——3.1 新增的主体结构元素

简介: F#入门 第四节 词法闭包 lambda表达式可以创建词法闭包...(文章正文)

本节书摘来自华章出版社《HTML 5与CSS 3 权威指南(第3版·上册)》一 书中的第3章,第3.1节,作者:陆凌牛,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.1 新增的主体结构元素

在HTML 5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。需要说明的是,本章所讲的内容区块是指将HTML页面按逻辑进行分割后的单位。例如,对书籍来说,章、节都可以称为内容区块;对博客网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
接下来将详细讲解HTML 5在页面的主体结构方面新增加的结构元素。

3.1.1 article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件,或者其他任何独立的内容。
除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注。
现在,以博客为例来看一段关于article元素的代码示例,如代码清单3-1所示。
代码清单3-1 article元素示例

<article>  
    <header>    
        <h1>苹果</h1>    
        <p>发表日期: <time pubdate="pubdate">2010/10/09</time></p>  
    </header>  
    <p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p> 
    <footer>    
        <p><small>著作权归***公司所有。</small></p>  
    </footer>
</article>

这个示例展示的是一篇讲述苹果的博客文章,在header元素中嵌入文章的标题部分,在这部分中,文章的标题“苹果”被镶嵌在h1元素中,文章的发表日期镶嵌在p元素中。在标题下部的p元素中,嵌入一大段该博客文章的正文,在结尾处的footer元素中,嵌入文章的著作权作为脚注。整个示例的内容相对比较独立、完整,因此,对这部分内容使用article元素。
article元素是可以嵌套使用的,内层的内容在原则上需要与外层内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。
接下来看一个关于article元素嵌套的代码示例,如代码清单3-2所示。
代码清单3-2 article元素嵌套示例

<article>  
    <header>    
        <h1>苹果</h1>    
        <p>发表日期: 
                <time pubdate datetime="2010/10/09">2010/10/09</time>
        </p>  
    </header>  
    <p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p> 
    <section>    
        <h2>评论</h2>    
        <article>      
            <header>      
                <h3>发表者:陆凌牛</h3>      
                <p>
                    <time pubdate datetime="2010-10-10T19:10-08:00">
                        1小时前
                    </time>
                </p>    
            </header>    
            <p>我喜欢苹果,我最喜爱的品种是红富士。</p>    
        </article>        
        <article>      
            <header>        
                <h3>发表者:张玉</h3>        
                <p>
                    <time pubdate datetime="2010-10-10T19:15-08:00">
                        1小时前
                    </time>
                </p>      
            </header>      
            <p>苹果?我不喜欢,我喜欢吃橘子。</p>    
        </article>  
    </section>
</article>

这个示例中的内容比代码清单3-1中的内容更加完整,它添加了文章读者的评论内容,整体内容还是比较独立、完整的,因此对其使用article元素。具体来说,该部分内容又分为几部分,把文章标题放在header元素中,把文章正文放在header元素后面的p元素中,然后用section元素把正文与评论部分进行区分。后面马上会介绍section元素,它是一个分块元素,用来对页面中的内容进行分块,在section元素中嵌入评论的内容,评论中有几个人的评论,每个人的评论部分相对来说又是比较独立、完整的,因此对它们都使用一个article元素,在评论的article元素中,又可以分为标题与评论内容部分,分别放在header元素与p元素中。
关于示例中提到的time元素与pubdate属性,可查看本节结尾处关于time元素与pubdate属性的说明。
另外,article元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。以下为它的一个示例,如代码清单3-3所示。
代码清单3-3 用article元素表示插件

<article>  
    <h1>My Fruit Spinner</h1>  
    <object>    
        <param name="allowFullScreen" value="true">    
        <embed src="#" width="600" height="395"></embed>  
    </object>
</article>

3.1.2 section元素

section元素用来对网站或应用程序中页面上的内容进行分块,一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。
我们可以这样理解:section元素中的内容可以单独存储到数据库中或输出到word文档中。以下为它的一个示例(注意,标题部分位于它的内部,而不是它的前面),如代码清单3-4所示。
代码清单3-4 section元素示例

<section>
    <h1>苹果</h1>
    <p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p> 
</section>

通常不推荐为那些没有标题的内容使用section,可以使用HTML 5轮廓工具来检查页面中是否有不包含标题部分的section,HTML 5轮廓工具的网址为gsnedders.html5.org/outliner/”,如果使用该工具进行检查后,会看见对于某个section的说明中有“untitiled section”(没有标题的section)文字,这个section就有可能使用不当(但是nav元素或aside元素没有标题是合理的)。
section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,不要将它与表示“有着自己的完整的、独立的内容”的article元素混淆。
下面来看两个article元素与section元素结合使用的示例,希望能够帮助你更好地理解article元素与section元素的区别。
首先来看一个带有section元素的article元素的示例,如代码清单3-5所示。
代码清单3-5 带有section元素的article元素示例

<article>  
    <h1>苹果</h1>  
    <p><b>苹果</b> ,植物类水果,多次花果...</p>
    <section>    
        <h2>红富士</h2>    
        <p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...</p>  
    </section>  
    <section>    
        <h2>国光</h2>    
        <p>国光苹果品,又名小国光、万寿。原产美国,1600年发现的偶然实生苗...</p>  
    </section>    
</article>

代码清单3-5中的内容首先是一段独立的、完整的内容,因此使用article元素。该内容是一篇关于苹果的文章,该文章分为3段,每一段都有一个独立的标题,因此使用了两个section元素。记住,对文章分段的工作也是使用section元素完成的。这里有人会问,为什么没有对第一段使用section元素,其实是可以使用section元素的,但是由于这里的结构比较清晰,分析器是可以识别第一段内容在一个section元素里的,所以也可以将第一个section元素略去不写,但是如果第一个section元素里还要包含子section元素或子article元素,那么必须写明第一个section元素。
接下来看一个包含article元素的section元素的示例,如代码清单3-6所示。
代码清单3-6 包含article元素的section元素示例

<section>
    <h1>水果</h1>  
    <article>    
        <h2>苹果</h2>    
        <p>苹果,植物类水果,多次花果...</p> 
    </article>  
    <article>    
        <h2>橘子</h2>    
        <p>橘子,是芸香科柑橘属的一种水果...</p>  
    </article>  
    <article>    
        <h2>香蕉</h2>    
        <p>香蕉,属于芭蕉科芭蕉属植物,又指其果实,热带地区广泛栽培食用...</p>  
    </article>    
</section>

这个示例比前面的示例复杂了一些,首先,它是一篇文章中的一段,因此没有使用article元素。但是,在这一段中,可以分为几块独立的内容,因此嵌入了几个独立的article元素。
看到这里,你可能又糊涂了,这两个元素可以互换使用吗?它们的区别到底是什么呢?事实上,在HTML 5中,article元素可以看成是一种特殊种类的section元素,它比section元素更强调独立性。section元素强调分段或分块,而article强调独立性,具体来说,如果一块内容相对来说比较独立、完整的时候,应该使用article元素,但是如果想将一块内容分成几段的时候,应该使用section元素进行分段。另外,在HTML 5中,div元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。
另外再补充一点,在HTML 5中,可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含在一个统一的页面中,以便统一使用CSS样式进行装饰。
最后,关于section元素的使用禁忌总结如下:
不要将section元素用作设置样式的页面容器,因为那是div元素的工作。
如果article元素、aside元素或nav元素更符合状况,不要使用section元素。
不要为没有标题的内容区块使用section元素。

3.1.3 nav元素

nav元素是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav元素,只需要将主要的、基本的链接组放进nav元素即可。例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等,这时使用footer元素是最恰当的。一个页面中可以拥有多个nav元素,作为页面整体或不同部分的导航。
接着让我们来看一个nav元素的使用示例,在这个示例中,一个页面由几个部分组成,每个部分都带有链接,但只将最主要的链接放入nav元素中,如代码清单3-7所示。
代码清单3-7 nav元素示例

<body>
<h1>技术资料</h1>
<nav>
    <ul>
        <li><a href="/">主页</a></li>
        <li><a href="/events">开发文档</a></li>
        ...more...
    </ul>
</nav>
<article>
   <header>
        <h1>HTML 5与CSS 3的历史</h1>
        <nav>
            <ul>
                <li><a href="#HTML5">HTML 5的历史</a></li>
                <li><a href="#CSS3">CSS 3的历史</a></li>
                ...more...
            </ul>
        </nav>
    </header>
    <section id="HTML 5">
        <h1>HTML 5的历史</h1>
        <p>讲述HTML 5的历史的正文</p>
    </section>
    <section id="CSS 3">
        <h1>CSS 3的历史</h1>
        <p>讲述CSS 3的历史的正文</p>
    </section>
    ...more...
    <footer>
        <p>
            <a href="?edit">编辑</a> | 
            <a href="?delete">删除</a> | 
            <a href="?rename">重命名</a>
        </p>
    </footer>
</article>
<footer>
    <p><small>版权所有:陆凌牛</small></p>
</footer>
</body>

在这个例子中,第一个nav元素用于页面导航,将页面跳转到其他页面上(跳转到网站主页或开发文档目录页面);第二个nav元素被放置在article元素中,用来实现在这篇文章中的两个组成部分的页内导航。
具体来说,nav元素可以用在以下场合:
传统导航条
现在主流网站上都有不同层级的导航条,用来将当前画面跳转到网站的其他主要页面。可以用nav元素实现导航条。
侧边栏导航
现在主流博客网站及商品网站上都有侧边栏导航,用来将页面从当前文章或当前商品跳转到其他文章或其他商品页面。可以用nav元素实现侧边栏导航。
页内导航
可以用nav元素实现页内导航,用来在本页面几个主要组成部分之间跳转。
翻页操作
nav元素可以用在多个页面的前后页或博客网站的前后篇文章的滚动中。
除此之外,nav元素也可以用在其他所有你觉得重要的、基本的导航链接组中。
注意,在HTML 5中不要用menu元素代替nav元素。过去很多Web应用程序的开发人员喜欢用menu元素进行导航,有必要再次强调的是,menu元素是被用在一系列发出命令的菜单上的,是一种交互性的元素,或者更确切地说是使用在Web应用程序中的。

3.1.4 aside元素

aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法。
1)包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料、名词解释等。
这部分代码如代码清单3-8所示。
代码清单3-8 文章内部的aside元素示例

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>aside元素示例</title>
</head>
<body>
<header>    
    <h1>F#入门</h1>  
</header>  
<article>  
    <h1>第四节 词法闭包</h1>  
    <p>lambda表达式可以创建词法闭包...(文章正文)</p>    
    <aside>      
        <!-- 因为这个aside元素被放置在一个article元素内部,
        所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->      
        <h1>名词解释</h1>      
        <dl>        
            <dt>F#</dt>        
            <dd>F#为.Net2010中引入的新型函数型编程语言</dd>      
        </dl>    
        <dl>        
            <dt>词法闭包</dt>        
            <dd>词法闭包是指,将创建lambda表达式时的环境保存起来...(详细解释)</dd>      
       </dl>       
    </aside>  
</article>
</body>

程序运行结果如图3-1所示。

8e3165a3696cc3d7cef9915dad84f717d6bfdb8a

这是笔者博客网页中的一篇文章,网页的标题放在header元素中,在header元素的后面将所有关于文章的部分放在一个article元素中,将文章的正文部分放在一个p元素中,但是该文章还有一个名词解释的附属部分,用来解释该文章中的一些名词,因此,在p元素的下部又放置了一个aside元素,用来存放名词解释部分的内容。
2)在article之外元素使用,作为页面或站点全局的附属信息部分。最典型的形式是侧边栏,其中的内容可以是友情链接、博客中其他文章列表或广告单元等。
下面这个示例为标准博客网页中一个侧边栏的示例,示例中的“IT新技术”为博客的名称,如代码清单3-9所示。
代码清单3-9 侧边栏示例

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li>
            <a href="http:// blog.sina.com.cn/1683">erway</a>    10-24 14:25
            </li>
            <li>
            <a href="http:// blog.sina.com.cn/u/1345">太阳雨</a>   10-22 23:48<br/>
            <a href="http:// blog.sina.com.cn/s/blog_6a9kv8f.html#comment">
                顶,拜读一下老牛的文章
            </a>
            </li>
            <li>
            <a href="http:// blog.sina.com.cn/u/1259295385">新浪官博</a>
            08-12 08:50<br/>
            <a href="#">恭喜!您已经成功开通了博客</a>
            </li>
       </ul>
    </nav>
</aside>

如果对这部分也加上CSS样式,在浏览器中的显示效果如
图3-2所示。

2b15fdb69abd6c8f459823cf4902693a08a39b30

该示例为一个典型的博客网站中的侧边栏部分,因此被放在aside元素中,但是该侧边栏又具有导航的作用,因此被放置在nav元素中,该侧边栏的标题是“评论”,被放在h2元素中,在标题之后使用一个ul列表,用来存放具体的导航链接。

3.1.5 time元素与微格式

首先来说一下微格式,它是一种利用HTML的class属性来对网页添加诸如新闻事件发生的日期和时间、个人电话号码、企业邮箱之类的附加信息的方法。
微格式并不是在HTML 5之后才有的,在HTML 5之前它就和HTML结合使用了,但是使用过程中在日期和时间的机器编码上出现了一些问题,编码过程中会产生一些歧义。HTML 5增加了一种新的元素来无歧义地、明确地对机器编码日期和时间,并且以让人易读的方式来展现。这个元素就是time元素。
time元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差。它可以定义很多格式的日期和时间,如下所示。

<time datetime="2010-11-13">2010年11月13日</time>
<time datetime="2010-11-13">11月13日</time>
<time datetime="2010-11-13">我的生日</time>
<time datetime="2010-11-13T20:00">我生日的晚上8点</time>
<time datetime="2010-11-13T20:00Z">我生日的晚上8点</time>
<time datetime="2010-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>

在编码时机器读到的部分在datetime属性里,而元素的开始标记与结束标记中间的部分显示在网页上。datetime属性中日期与时间之间要用“T”文字分隔,“T”表示时间。注意倒数第二行,时间加上Z字母表示对机器编码时使用UTC标准时间,倒数第一行则加上了时差,表示向机器编码另一地区时间,如果是编码本地时间,则不需要添加时差。

3.1.6 pubdate属性

putdate属性是一个可选的boolean值的属性,它可以被应用到article元素中的time元素上,意思是time元素代表了文章(artilce元素的内容)或整个网页的发布日期,putdate属性的具体使用方法如代码清单3-10所示。
代码清单3-10 putdate与time结合使用(一)

<article>
    <header>
        <h1>苹果</h1>
        <p>发布日期 
            <time datetime="2010-10-29" pubdate>2010年10月29日</time>
        </p>
    </header>  
   <p>苹果,植物类水果,多次花果...("苹果"文章正文)</p>
  ...
</article>

你也许会疑惑为什么需要用到pubdate属性,为什么不能认为time元素就直接表示了文章或网页的发布日期呢?来看代码清单3-11。
代码清单3-11 putdate与time结合使用(二)

<article>
    <header>
        <h1>关于<time datetime=2010-10-29>10月29日</time>的舞会通知</h1>
        <p>发布日期:
            <time datetime=2010-10-11 pubdate>2010年10月11日</time>
        </p>
    </header>
    <p>大家好:我是法律系3年级学生代表,......(关于舞会的通知)</p>
</article>

这个示例中有两个time元素,分别定义了两个日期——一个是舞会日期,另一个是通知发布日期。由于都使用了time元素,所以需要使用pubdate属性表明哪个time元素代表通知的发布日期。

相关文章
|
1天前
|
前端开发 数据安全/隐私保护
从建站到拿站 -- HTML和CSS基础
从建站到拿站 -- HTML和CSS基础
6 0
|
2天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
17 1
|
4天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
34 0
[HTML、CSS]知识点
|
4天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节、经验
[HTML、CSS]细节、经验
28 0
[HTML、CSS]细节、经验
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
30天前
|
前端开发 Ruby
编程笔记 html5&css&js 054 CSS默认值
编程笔记 html5&css&js 054 CSS默认值
22 4
|
30天前
|
Web App开发 移动开发 JavaScript
分享88个HTML&CSS源码,总有一款适合您
分享88个HTML&CSS源码,总有一款适合您
21 1
|
30天前
|
移动开发 监控 JavaScript
分享77个HTML&CSS源码,总有一款适合您
分享77个HTML&CSS源码,总有一款适合您
24 1