您的位置：首页 > Web前端 > HTML5

HTML5结构

2016-07-11 20:36 387 查看
关于内容区块的编排，可以分为“显式编排”和“隐式编排”。

显式编排内容区块：

是指明确使用section等元素创建文档结构，在每个内容区块内使用标题h1-h6,hgroup等，这个更清晰

<body>
<h1>网页级内容区块标题</h1>
<p>网业级内容区块的正文</p>
<section>
<h2>section级内容区块的标题</h2>
<p>section级内容区块的标题</p>
</section>
</body>


隐式编排内容区块：

是指不明确使用section等元素，而是根据页面中所书写的各级标题h1-h6,hgroup等把内容区块自动创建出来，因为HTML5分析器只要看到书写了某个级别的标题

就会判断存在相对应的内容区块
<body>
<h1>网页级内容区块标题</h1>
<p>网业级内容区块的正文</p>
<h2>section级内容区块的标题</h2>
<p>section级内容区块的正文</p>
</body>


标题分级：

隐式编排的时候按照如下的规则自动生成内容区块

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

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

不同的内容区块可以使用相同级别的标题

网页编排示例：

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>网页编排示例</title>
</head>
<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="help.html">帮助</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<section class="comments">
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</section>
</article>
<footer>
<small>版权所有：呼呼</small>
</footer>
</body>


点击打开链接

对新的结构元素使用样式：

追加block声明

article，aside,dialog,figure,footer,header,legend,nav,section{display:block}

正常使用样式

nav{float;left;width;20%}

article{float：right；width：79%；}

article元素的样式：

一个网页的样式可能如下

header{display：block；color：red;text-align:right;}

article header{color:blue;text-align:center;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航