HTML5的目标是通过一些心标签、新功能为开发更加简单、独立、标准的通用Web应用提供了标准。
新的标准解决了三大问题:
- 解决了浏览器兼容问题
- 解决了文档结构不明确的问题
- 解决了Web应用程序功能受限等问题
一、结构元素
在之前的HTML页面中,基本上都是用了DIV+CSS的布局方式。而搜索引擎去抓取页面内容的时候,只能猜测到某个DIV的内容是文章内容器,或者是导航模块的容器,或者是作者介绍的容器等。也就是说整个HTML文档结构相关的结构定义不清晰,HTML5中为了解决这个问题,专门添加了页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。
<div id="header"> | |
<div id="nav"> | |
<div class="article"> | <div id="aside"> |
<div class="section"> | |
<div id="footer"> |
HTML5的新标签带来的新的布局规则,其页面的构成有四个组件:
- 带导航的页头
- 显示在主题内容区域的文章
- 显示次要信息的辅助栏
- 页脚
<html>
<head>
<title>页面结构</title>
</head>
<body>
<header>导航</header>
<nav>菜单</nav>
<article>内容</article>
<aside>次要内容</aside>
<footer>底部说明</footer>
</body>
</html>
页眉<header> | |
导航<nav> | |
主页面区<article> | 相关次要信息<aside> |
小节<section> | |
页脚<footer> |