接下来看一下该网页中用来显示博主介绍、博客中所有文章分类,以及网友评论的侧边栏部分。该部分在浏览器中的显示结果如图1所示。
图1 博客侧边栏效果图
该部分的结构如下所示:
<aside> <section id="conn1"> <header id="connHead1"> <h1>子栏目标题</h1> </header> <div id="connBody1"> …… </div> <div id="connFoot1"></div> </section> …… </aside>
前面介绍过,在HTML 5中,aside元素专门用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导肮条,以及有别于主要内容的部分。
在博客首页中,可以将博主介绍、博主的联系信息、博客文章的分类、最近访问的网友信息、网友对博客文章的评论、相关文章的链接、其他网站的友情链接等很多与网站相关的,但不能包含在当前网页的主体内容中的其他附属内容,放置在aside元素中。
在本例中,将博主介绍、博客文章分类,及其链接,当单击这个链接后,将主画面跳转到该分类的文章目录显示画面;网友评论,及其链接,当单击这个链接后,将跳转到被评论的文章显示画面,放在了侧边栏中。 侧边栏详细代码请参考本节示例源代码中index.html。
HTML 5会根据一个aside元素在大纲中生成与之对应的一个节。在本例中,由于没有对侧边栏添加标题,因为在HTML 5中不强求对侧边栏添加标题,而且侧边栏位于整体网页结构中的第二部分,因此在大纲中生成标题为“2. Untitled Section”的节。
在aside元素中,因为使用了三个section元素,分别显示博主介绍、博客文章分类、网友评论这三个栏目的内容,并且三个section元素内部都有一个header元素,在header元素内部都使用了hl标题元素,标题文字分别为“博主介绍”、“分类”、“评论”,所以在大纲中的侧边栏一节内部分别生成3个标题的节,如图2所示。
图2 侧边栏的3个标题节
在博客文章分类栏目与网友评论栏目中使用了两个nav元素来分别显示博客文章的分类及其链接与网友的评论及其链接,所以在大纲中,根据两个nav元素分别生成两个标题为“1. Untitled Section”的节。
在博主介绍栏目中,使用figure元素来显示博主头像。在HTML 5中,figure元素用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生任何影响。figure元素所表示的内容可以是图片、统计图或代码示例。
figcaption元素表示figure元素的标题,它从属于figure元素,必须书写在figure元素内部,可以书写在figure元素内的其他从属元素的前面或后面。一个figure元素内最多允许放置一个figcaption元素,但允许放置多个其他元素。
本例中figure元素中的代码如下所示。
<figure> <img src="images\html5.jpg" alt="HTML5+CSS3+JavaScript从入门到精通"> <figcaption>HTML5+CSS3+JavaScript从入门到精通</figcaption> </figure>
可以在样式代码中分别指定figure元素与figcaption元素的样式。
在网友评论栏目中,使用time元素与pubdate属性来显示每篇评论的发布时间。在HTML 5中,time元素代表24小时中的某个时刻或某个日期,time元素的putdate属性代表了评论的发布日期和时间,代码类似下面所示。
<time datetime="2018-04-01T16:59" pubdate>04-01 16:59</time>
整个侧边栏放置于<div id="blogbody">容器中,使用它将该网页中第二行(包括左边的侧边栏区域与右边的文章摘要列表区域)与网页顶部的标题区域,以及网页底部的脚注区域(显示版权信息的footer元素)区分开来。
在<div id="blogbody">容器内部,又使用<div id="column_1">子容器,将左边的侧边栏部分与右边的网页主体部分进行区分。结构位置关系如下下面代码:
<div id="blog"> <header id="bloghead">[标题栏]</header> <div id="blogbody"> <div id="column_1"> <aside>[侧边栏]</aside> </div> <div id="column_2">[主体内容区域]</div> </div> <footer id="blogfooter">[版权栏]</footer> </div>