HTML5的大纲讲解

HTML5的大纲讲解

(1)HTML5大纲分析工具网址:https://gsnedders.html5.org/outliner/(会呈现最终页面效果)

(2)HTML5大纲的编排规则:分为‘显示编排’和‘隐式编排’两种方式。

‘显示编排’是指明确使用section元素进行分块,每个内容区块内使用标题元素h1-h6;‘隐式编排’是指不使用section元素进行分块,而是根据标题元素h1-h6的级别进行自动创建区块,标题分级的规则是:如果新出现的标题比上一个标题级别低,那么将生成下级内容区块;如果级别高或者级别相同,那么将生成新的内容区块!

(3)“显示编排”demo如下,将代码复制到上面链接页面中,即可看到下面的效果图:

<!DOCTYPEhtml>

<html>

<head>

         <meta charset='utf-8'>

         <title>题目</title>

</head>

<body>

<h1>HTML5大纲显示编排</h1>

<section>

         <h1>HTML5部分</h1>

         <section>

                   <h2>HTML5的大纲(上)</h2>

                   <section>

                            <h3>标题1</h3>

                            <p>内容1</p>

                   </section>

                   <section>

                            <h3>标题2</h3>

                            <p>内容2</p>

                   </section>

                   <section>

                            <h3>标题3</h3>

                            <p>内容3</p>

                   </section>

         </section>

         <section>

                   <h2>HTML5的大纲(下)</h2>

                   <section>

                            <h3>标题1</h3>

                            <p>内容1</p>

                   </section>

         </section>

</section>

</body>

</html>

效果图为:            

注意:单独的header元素、footer元素不可以做大纲,因为大纲是根据标题元素h1-h6生成的,但可以在header元素中包含标题子元素,这样标题子元素中包含的内容或图片就可以生成大纲了

(4)“隐式编排”demo如下,将代码复制到上面链接页面中,即可看到下面的效果图:

<!DOCTYPE html>

<html>

<head>

       <meta charset='utf-8'>

       <title>题目</title>

</head>

<body>

<h1>HTML5大纲隐式编排</h1>

<p>隐式编排的内容</p>

<h2>子标题1</h2>

<p>子标题1的内容</p>

<h3>子子标题1</h3>

<p>子子标题1的内容</p>

<h2>子标题2</h2>

<p>子标题2的内容</p>

<h1>HTML5大纲隐式编排的例子</h1>

<p>隐式编排的内容</p>

</body>

</html>

效果图为:   

发布了25 篇原创文章 · 获赞 11 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览