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

最新推荐文章于 2017-11-06 17:14:32 发布

馋雪山丘

最新推荐文章于 2017-11-06 17:14:32 发布

阅读量491

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u011069189/article/details/78328153

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>

馋雪山丘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5权威指南笔记：10-文档分节

1 添加基本的标题（h1元素） h1 ~ h6元素元素类型流允许具有的父元素 hgroup元素或其他任何可以包含流元素的元素。这些元素不能是address元素的后代元素局部属性无内容流内容标签用法开始标签和结束标签是否为HTML5新增否在HTML5中的变化无习
复制链接

扫一扫