HTML5权威指南笔记：10-文档分节

最新推荐文章于 2024-05-21 21:13:33 发布

原创最新推荐文章于 2024-05-21 21:13:33 发布 · 577 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

HTML5 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了HTML5中用于组织内容的各种结构元素，包括标题、子标题、节、首部、尾部、导航区域、文章、附注栏、详情区域等，并通过实例展示了这些元素的应用场景和效果。

1 添加基本的标题（h1元素）

h1 ~ h6元素
元素类型	流
允许具有的父元素	hgroup元素或其他任何可以包含流元素的元素。这些元素不能是address元素的后代元素
局部属性	无
内容	流内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	参见下表

从hl到h6 的各级标题的习惯样式

元素	习惯样式
h1	hl { display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight : bold; }
h2	h2 { display: block; font-size: 1.5em; margin-before: o.83em; margin-after: 0.83em; margin-start: 0; margin-end: 0; font-weight: bold; }
h3	h3 { display: block; font-size: 1.17em; margin-before: 1em; margin-after: lem; margin-start: 0; margin-end: 0; font-weight : bold; }
h4	h4 { display: block; margin -before: 1.33em; margin-after: 1.33em; margin-start: 0; margin-end: 0; font-weight: bold; }
h5	h5 { display: block; font-size:0.83em; margin-before: 1.67em; margin-after: 1.67em; margin-start: 0; margin-end: 0; font-weight: bold; }
h6	h6 { display: block; font- size:0.67em; margin-before: 2.33em; margin-after: 2.33em; margin-start: 0; margin-end: 0; font-weight: bold; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--此例只使用了h1 、h2和h3这三级标题，这是因为除了合同和技术规范这类高度技术性和精确
    的文档外，很少有什么内容有必要用到更深层次的标题。大多数内容最多只需要用到两级或三级标题-->
    <h1>Fruits I like</h1>
    I like apples and oranges.
    <h2>Additional fruits</h2>
    I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
    <h3>More information</h3>
    You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

2 隐藏子标题（hgroup元素）

hgroup元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素
局部属性	无
内容	一个或多个标题元素( h1~h6 )
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	hgroup { display: block; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            h1, h2, h3 { background: grey; color: white; }

            hgroup > h1 { margin-bottom: 0px;}

            hgroup > h2 { background: grey; color: white; font-size: 1em; 
                          margin-top: 0px; }
        </style>
    </head>
    <body>
        <!--hgroup元素可以用来将几个标题元素作为一个整体处理， 以免搅乱HTML文档的大纲
        hgroup元素在从hl到h6的标题体系中的位置取决于其第一个标题子元素。例如，这里代码清
        单中h1元素是hgroup元素的第一个子元素，因此该hgroup元素的级别相当于h1元素。hgroup元素
        的子元素中，只有第一个标题子元素会被列入文档的大纲。-->
            <hgroup>
                <h1>Fruits I Like</h1>
                <h2>How I Learned to Love Citrus</h2>
            </hgroup>
            I like apples and oranges.
            <h2>Additional fruits</h2>
            I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
            <h3>More information</h3>
            You can see other fruits I like <a href="fruitlist.html">here</a>.
    </body>
</html>

3 生成节（section元素）

section元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素，但section元素不能是address元素的后代元素
局部属性	无
内容	style元素和流内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	section { display: block; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            h1, h2, h3 { background: grey; color: white; }
            hgroup > h1 { margin-bottom: 0px; }
            hgroup > h2 { background: grey; color: white; font-size: 1em; 
                         margin-top: 0px;}
        </style>
    </head>
    <body>
        <!--section表示的是文档中的一节,用来包含的是那种应该列入文档大纲或目录中的内容。
        section元素通常包含一个或多个段落及一个标题，不过标题并不是必需的-->
        <section>
            <hgroup>
                <h1>Fruits I Like</h1>
                <h2>How I Learned to Love Citrus</h2>
            </hgroup>
            I like apples and oranges.
            <section>
                <h1>Additional fruits</h1>
                I also like bananas, mangoes, cherries, apricots, plums,
                peaches and grapes.
                <section>            
                    <h1>More information</h1>
                    You can see other fruits I like <a href="fruitlist.html">here</a>.
                </section>
            </section>
        </section>
    </body>
</html>

header元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素。header元素不能是address 、footer元素和其他header元素的后代元素
局部属性	无
内容	流内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	header { display: block; }

footer元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素。footer元素不能是address 、footer元素和其他footer元素的后代元素
局部属性	无
内容	流内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	footer { display: block; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--header元素表示一节的首部。里面可以包含各种适合出现在首部的东西，包括刊头或徽标。
        在内嵌的元素方面， header元素通常包含一个标题元素或一个hgroup元素，还可以包含该节的导
        航元素-->
        <header>
            <hgroup>
                <h1>Things I like</h1>
                <h2>by Adam Freeman</h2>
            </hgroup>
        </header>

        <!--footer元素是header元素的配套元素，表示一节的尾部。footer通常包含着该节的总结信息，
        还可以包含作者介绍、版权信息、到相关内容的链接、徽标及免责声明等-->
        <footer id="mainFooter">
            &#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
        </footer>
    </body>
</html>

5 添加导航区域（nav元素）

nav元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素。但是该元素不能是address元素的后代元素
局部属性	无
内容	流内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	nav { display: block; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
     <!--nav元素表示文档中的一个区域，它包含着到其他页面或同一页面的其他部分的链接.
    该元素的目的是规划出文档的主要导航区域-->
    <nav>
        <h1>Contents</h1>
        <ul>
            <li><a href="#fruitsilike">Fruits I Like</a></li>
            <ul>
                <li><a href="#morefruit">Additional Fruits</a></li>
            </ul>
        </ul>
    </nav>

    <h1 id="fruitsilike">Fruits I Like</h1>
    <h1 id="morefruit">Additional fruits</h1>

    <nav>
        More Information:
        <a href="http://fruit.org">Learn More About Fruit</a>
        <a href="http://triathlon.org">Learn More About Triathlons</a>
    </nav>
</body>
</html>

6 使用article

article元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素，但该元素不能是address元素的后代元素
局部属性	无
内容	style元素和流内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	article { display: block; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--article元素代表HTML文档中一段独立成篇的内容，从理论上讲，可以独立于页面其余内容发布或使用.-->
        <article>
            <!--独立成篇的内容-->
        </article>
    </body>
</html>

7 生成附注栏（aside元素）

aside元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素，但该元素不能是address元素的后代元素
局部属性	无
内容	style元素和流内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	aside { display: block; }

例子：

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

    </aside>
</body>
</html>

8 提供联系信息（address元素）

address元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素
局部属性	无
内容	流内容。但是标题元素h1 ~ h6 、section 、header 、footer 、nav 、article和aside元素不能用做该元素的后带代元素
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	address { display: block; font-style: italic; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--address元素身为article元素的后代元素时，它提供的联系信息被视为该article 的。否则，
    当address元素身为body元素的子元素时，它提供的联系信息被视为整个文档的。-->
    <address>
        Questions and comment? <a href="mailto:ada吨myboringblog.com">Email me</a>
    </address>
</body>
</html>

9 生成详情区域（details元素）

details元素
元素类型	流
允许具有的父元素	任何可以包含流元素的元素
局部属性	open
内容	流内容及一个可有可无的summary元素
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	details { display: block; }

summary元素
元素类型	无
允许具有的父元素	details元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	summary{ display: block; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--details元素在文档中生成一个区域，用户可以展开它以了解关于某主题的更多详情
        要让页面一打开details元素就呈展开状态， 需要使用它的open属性-->
    <details>
        <!--为该详情区域生成一个说明标签或标题-->
        <summary>Kinds of Triathlon</summary>
        There are different kinds of triathlon - sprint, Olympic and so on.
        I am aiming for Olympic, which consists of the following:
        <ol>
            <li>1.5km swim</li>
            <li>40km cycle</li>
            <li>10km run</li>
        </ol>
    </details>
</body>
</html>