html5学习14:文档分节

1、h1~h6,添加基本标题

h1~h6

<h1>test</h1>

2、hgroup元素,隐藏子标题

hgroup元素可以用来将几个标题元素作为一个整体处理,以免搅乱HTML文档的大纲。

hgroup主要用来解决标题的问题。

通过缩小hgroup元素中两个标题元素的间距将二者拉拢在一起,并且为二者设置同样的背景色,可以在外观上明确揭示二者的关系。

3、生成

section元素是HTML5中新增的。顾名思义,它表示的是文档中的一节。使用标题元素的时候实际上也生成了隐含的节。用section元素则可以明确地生成节并且将其与标题分开。至于什么情况下应该使用section元素,并没有一个明确的规定。不过从经验上讲,section元素用来包含的是那种应该列入文档大纲或目录中的内容。section元素通常包含一个或多个段落及一个标题,不过标题并不是必需的。

<section>
	<h1>
        test
    </h1>
    <section>
    </section>
</section>

4、header,footer元素,添加首部和尾部

header元素表示一节的首部。里面可以包含各种适合出现在首部的东西,包括刊头或徽标。在内嵌的元素方面,header元素通常包含一个标题元素或一个hgroup元素,还可以包含该节的导航元素。

footer元素是header元素的配套元素,表示一节的尾部。footer通常包含着该节的总结信息,还可以包含作者介绍、版权信息、到相关内容链接、徽标及免责声明等。

5、nav元素,添加导航区域

nav元素表示文档中的一个区域,它包含着到其他页面或同一页面的其他部分的链接。显然,并非所有的超链接都要放到nav元素中。该元素的目的是规划出文档的主要导航区域。

6、使用article

article元素代表HTML文档中一段独立成篇的内容,从理论上讲,可以独立于页面其余内容发布或使用(例如通过RSS )。这不是说作者必须单独发布它,而是说判断是否使用该元素时要以独立性为依据。一篇新文章和博文条目都是这方面的典型例子。

7、生成附注栏

aside元素用来表示跟周边内容稍沾一点边的内容,类似于书籍或杂志中的侧栏。其内容页面其他内容、article或section有点关系,但并非主体内容的一部分。它可能是一些背景信息、到相关文章链接,诸如此类。

8、提供联系信息

address元素用来表示文档或article元素的联系信息。

address元素身为article元素的后代元素时,它提供的联系信息被视为该article的。否则,当address元素身为body元素的子元素时(在body元素和address元素之间没有隔着article元素),它提供的联系信息被视为整个文档的。

address元素不能用来表示文档或文章的联系信息之外的地址。例如,它不能用在文档内容中表示客户或用户的地址。

9、生成详情区域

details元素在文档中生成一个区域,用户可以展开它以了解关于某主题的更多详情。

details元素通常包含一个summary元素,后者的作用是为该详情区域生成一个说明标签标题

<details>
	<summary>kinds of triathlon</summary>
    following:
    <ol>
        <li>20 km</li>
        <li>40 km</li>
    </ol>
</details>

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码