HTML5+CSS3网页制作基础培训教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1 新增的主体结构元素

为了使文档的结构更加清晰明确，容易阅读，HTML5中增加了很多新的结构元素，下面具体介绍。

2.1 .1 article元素

article元素可以包含独立的内容项，如一个论坛帖子、一篇杂志文章、一篇博客文章、用户评论等。这个元素可以将信息各部分进行任意分组，与信息原来的性质无关。作为文档的独立部分，每一个article元素的内容都具有独立的结构。

下面以一段简短文字讲述article元素的使用具体代码如下。

<article>
    <header>      
        <h1>不能改变世界，就要改变自己去适应环境</h1>      
    </header> 
  <br>
    <p>一个人要想改变命运，最重要的是要改变自己。在相同的境遇下，不同的人会有不同的命运。要明白，命运
不是由上天决定的，而是由你自己决定的。</p> 
    <footer>      
     <p>
     <small>版权所有@×××科技。</small>
     </p>    
    </footer> 
</article>

header元素中嵌入了文章的标题部分，h1元素中是文章的标题“不能改变世界，就要改变自己去适应环境”，标题下部的p元素中是文章的正文，结尾处的footer元素中是文章的版权声明。在浏览器中预览，效果如图2.1所示。

图2.1 article元素的使用

article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。

<article>
<h1>article表示插件</h1> 
<object> 
<param name=＂allowfullscreen＂ value=＂true＂> 
<embed src=＂#＂ width=＂600＂ height=＂395＂></embed> 
</object>
</article>

一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。一个网页中的样式代码可能如下所示。

header{
display:block;
color:green;
text-align:center;}  
aritcle header{
color:red;
text-align:left;}

2.1 .2 section元素

section元素用于对网站页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素也并非一个普通的容器元素，当一个容器需要被重新定义样式或者定义脚本行为的时候，还是推荐使用div元素控制。不要将section元素与article元素混淆。

下面是一个带有section元素的示例，具体代码如下。

<article>
  <h1>李白</h1> 
    <p>字太白，号青莲居士，唐代伟大的浪漫主义诗人，被后人誉为诗仙，李白存世诗文千余篇，有《李太白集》
传世。</p>
  <section> 
     <h3>望庐山瀑布</h3> 
     <p>日照香炉生紫烟，遥看瀑布挂前川。<br>
     飞流直下三千尺，疑是银河落九天。</p> 
</section>
<section> 
        <h3>早发白帝城</h3>      
        <p>朝辞白帝彩云间，千里江陵一日还。<br>
        两岸猿声啼不住，轻舟已过万重山。</p>
  </section>
</article>

从上面的代码可以看出，网页整体呈现的是一段完整独立的内容，所有我们要用article元素包起来，这其中又可分为三段，每一段都有一个独立的标题，使用了两个section元素为其分段，使文档的结构更清晰。在浏览器中预览，效果如图2.2所示。

图2.2 section元素的示例

article元素和section元素有什么区别呢？在HTML5中，article元素可以看成一种特殊种类的section元素，section元素强调分段或分块，而article元素强调独立性。如果一块内容相对来说比较独立、完整，应该使用article元素，但是如果想将一块内容分成几段，应该使用section元素。

2.1 .3 nav元素

nav元素在HTML5中用于包裹一个导航链接组，用于说明这是一个导航组，同一个页面中可以同时存在多个nav元素。nav元素常用的场景有传统的导航条、侧边栏导航、页内导航、翻页操作等。

并不是所有的链接组都要放进nav元素，只需将主要的、基本的链接组放进nav元素即可。导航可以是页与页之间的导航，也可以是页内的段与段之间的导航。HTML5可以直接将导航链接列表放到<nav>标签中。

举例：

<!doctype html>
<html>
<head>
<meta charset=＂utf-8＂>
<title>nav元素</title>
</head>
<body>
<header>  
  <h1>网站页面之间导航</h1>  
     <nav>  
       <ul> 
         <li><a href=＂index.html＂>首页</a></li>  
         <li><a href=＂about.html＂>关于我们</a></li>  
         <li><a href=＂bbs.html＂>在线论坛</a></li>
     </ul> 
     </nav>  
  <h1></h1>
  </header>  
</body>
</html

这个示例是页面之间的导航，nav元素中包含了三个用于导航的超链接，即“首页”“关于我们”“在线论坛”。该导航可用于全局导航，也可放在某个段落中，作为区域导航。运行代码，显示效果如图2.3所示。

图2.3 页面之间导航

2.1 .4 aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他有别于主要内容的部分。

aside元素主要有以下两种使用方法。

（1）作为主要内容的附属信息部分，包含在article元素中，其内容可以是与当前文章有关的参考资料、名词解释等。

<article>
 <h1>…</h1>
<p>…</p>
<aside>…</aside>
</article>

（2）作为页面或站点全局的附属信息部分，在article元素之外使用。最典型的是侧边栏，其内容可以是友情链接、文章列表、广告单元等。代码如下所示，运行代码效果如图2.4所示。

图2.4 aside元素示例

<aside>
<h2>新闻资讯</h2>
<ul>
<li>企业新闻</li>
<li>行业信息</li>
</ul>
<h2>经营产品</h2>
<ul>
<li>上衣外套</li>
<li>时尚裙子</li>
</ul>
</aside>
上一章目录下一章