html5组织文档结构
1 / 10
html5 组织文档结构
文档部分，即 body 部分，包含了访问者可以看到的内容。传统的 HTML 文档通常通过 div 元素来组织文档结构，再配
上适当的样式表。但 div 元素的问题是缺少语义信息，在查看别人的源代码时，必须费点劲才能理解哪个 div 表示什么，整
个页面时怎么搭建起来的，通常需要在 HTML 页面、样式表和浏览器之间跳来跳去。特别是如果 HTML 页面的组织结构不
好，很容易就会导致困惑。对此，HTML5 中新增了许多语义元素，用来替换 div 元素，并且将语义和呈现分离。
所有的语义元素都有一个显著的特点：不真正做任何事，它们在外观上对内容的影响微乎其微，甚至根本没有影响。语义元
素的存在主要有以下几条理由：
1)容易修改和维护。通过 HTML5 的语义元素，可以传达出额外的结构化信息，让人很容易理解文档的整体布局和不
同区块的作用。
2)无障碍性。现代 web 设计的一个重要主题，就是让任何人都能无障碍地访问网页，就是让使用屏幕阅读器和其他辅
助工具的人都能在页面中自由导航。
3)搜索引擎优化。使用 HTML5 能够让搜索引擎能够更好的理解你的网站，可以让它们收集到它们索引的页面的更多
信息。
4)未来的功能。新浏览器和 Web 编辑工具未来一定会利用语义元素。比如：将文档的主要部分重点呈现。
最关键的是，如果你正确地使用了语义元素，就能够创建更加清晰的页面结构，就能够适应未来的浏览器和 Web 设计工具
的发展趋势。下面将介绍用于组织文档结构的语义元素，首先以一个例子来了解 HTML5 通常的文档结构。
HTML5 文档结构
老的 HTML 页面都是用 div 元素，再配上适当的样式表，但 div 元素的问题在于，它本身不反映与页面相关的任何信息。
而 HTML5 的页面就是将这些 div 元素替换为具有描述性的语义元素。下面的例子包含了 HTML5 中用于描述文档结构的主
要的语义元素，语义元素的使用和它们标注的内容的含义密切相关，理解了它们的含义，你就能灵活的使用它们。
1.
2.
3.
4.
Things I like
5.
by Adam Freeman
6.
7.
8. Questions and comments?Email me
9.
10.
11.
Contents
12.
13.
Fruits I Like14.
15.
Additional Fruits2 / 10
16.
17.
Activities I Like18.
19.
Kinds of Triathlon20.
The kind of triathlon I am aiming for21.
22.
23.
24.
25.
26.
27.
28. ......
29.
扫一扫
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
