HTML5新增的结构元素

HTML5的结构

一：新增的主体结构元素

在HTML5中，为了使文档的结构更加清晰明确，追加了几个与页眉，页脚内容区块等文档结构相关联的结构元素。

1.1article元素

article元素代表文档，页面或应用程序中独立的完整的，可以独自被外部引用的内容，<article> 标签定义外部的内容。article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联，

另外article元素也可以用来表示一个插件。

<time> 标签定义日期或时间，或者两者。pubdate 指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期

     <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<article>
  <header>
     <h1>博客</h1>
     <p><time pubdate="pubdate">2017/3/1</time></p>
  </header>
  <p><b>我的博客</b>，我的博客内容</p>
  <footer>版权所有</footer>
</article>
</body>
</html>

View Code

2.section元素

section元素用来对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容及其标题组成，但section元素并非一个普通的容器元素，当一个容器需要直接定义样式或通过脚本定义行为的时候，最好使用div而不要使用section。

section元素的作用是对页面内容分块，或者说是对文章进行分段。

<article>
<h1>元素分类</h1>
<section>
   <h2>article元素</h2>
   <p>article元素的作用</p>
</section>
<section>
   <h2>section元素</h2>
   <p>section元素的作用</p>
</section>
</article>

带有section元素的article元素示例

<section>
<h1>元素分类</h1>
<article>
   <h2>article元素</h2>
   <p>article元素的作用</p>
</article>
<article>
   <h2>section元素</h2>
   <p>section元素的作用</p>
</article>
</section>

带有article元素的section元素示例

事实上article元素可以看成一种特殊的类的section元素，，它比section元素更强调独立性，section强调分段，article强调独立性。

3.nav元素

nav元素是一个可以用来作为页面导航的链接组，nav用于导航上.

4:aside元素

aside元素用来表示当前页面或文章的附属信息部分，有别于主体内容的部分。其中的内容可以是与当前文章有关的参考资料、名词解释；在article元素之外使用，作为页面或站点全局的附属信息部分。

5：time元素

<time>元素表示的是日期定义日期。页面在解析时，获取的是属性“datetime”中的值，而标记之间的内容只是用于显示在页面中。<time>元素中的可选属性“pubdate”表示时间是否为发布日期，它是一个布尔值，该属性不仅可以用于<time>元素，还可用于<article>元素。

6：header元素

header元素是一种具有引导和导航作用的结构元素，一个网页内并未限制header元素的个数，可以拥有多个，在HTML 5中，一个header元素通常包括至少一个heading元素（h1-h6)。

<header>
    <h1>header标签的使用</h1>
</header>

<article>
    <header>
        <h1>子标题</h1>
    </header>   
    <p>内容</p>
</article>

多个header元素的使用

7：footer元素

footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

对这些新增的元素使用css样式，要声明这些元素为块元素。

二：大纲的编排规则

关于内容区块的编排，可以分为“显式编排”与“隐式编排”两种方式。

显式编排

显式编排是指明确使用section等元素创建文档结构，在每个内容区块内使用标题（h1～h6、hgroup等）

隐式编排

所谓隐式编排，是指不明确使用section等元素，而是根据页面中所书写的各级标题（h1～h6、hgroup等）把各级内容区块自动创建出来。

如果新出现的标题比上一个标题级别低，将生成下级内容区块。

如果新出现的标题比上一个标题级别高，或者两者的级别相等，将生成新的内容区块。

因为隐式编排容易使自动生成的整个文档结构与所想要的文档结构不一样，而且也容易引起文档结构的混乱，所以尽量使用显式编排。

<section>
    <h2>隐式编码</h2>
    <p>内容</p>
    <!--因为下面的标题级别比上一个标题级别高，所以自动创建新的内容区块 -->
    <h1>内容</h1>
    <p>内容</p>
</section>


<section>
    <h2>显式编码</h2>
    <p>s内容</p>
</section>
<section>
    <h1>分块</h1>
    <p>内容</p>
</section>

View Code

——参考自《HTML5与css3的权威指南》

HTML5新增的结构元素

秒客网

HTML5新增的结构元素

HTML5的结构

二：大纲的编排规则

相关文章