HTML5结构

来源：互联网发布：windows live免安装版编辑：程序博客网时间：2024/05/18 12:43

关于内容区块的编排，可以分为“显式编排”和“隐式编排”。

显式编排内容区块：

是指明确使用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;}

0 0