HTML5的结构和语义(2):结构
由于缺少结构，即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别，才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素，专门用来标识这些常见的结构： https://www.jb51.net/html5/
· section：这可以是书中的一章或一节，实际上可以是在 HTML 4 中有自己的标题的任何东西 https://www.jb51.net/html5/
· header：页面上显示的页眉；与 head 元素不一样 https://www.jb51.net/html5/
· footer：页脚；可以显示电子邮件中的签名 https://www.jb51.net/html5/
· nav：指向其他页面的一组链接 https://www.jb51.net/html5/
· article：blog、杂志、文章汇编等中的一篇文章 https://www.jb51.net/html5/
我们来考虑一个典型的 blog 主页，它的顶部有页眉，底部有页脚，还有几篇文章、一个导航区和一个边栏，见代码1 典型的 blog 页面 https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">https://www.jb51.net/html5/
Spring Comes (and Goes) in Sussex County
https://www.jb51.net/html5/Yesterday I joined the Brooklyn Bird Club for ourhttps://www.jb51.net/html5/
annual trip to Western New Jersey, specifically Hyperhttps://www.jb51.net/html5/
Humus, a relatively recently discovered hot spot. Ithttps://www.jb51.net/html5/
started out as a nice winter morning when we arrivedhttps://www.jb51.net/html5/
at the site at 7:30 A.M., progressed to Spring aroundhttps://www.jb51.net/html5/
10:00 A.M., and reached early summer by 10:15.
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">https://www.jb51.net/html5/
But does it count for your life list?
https://www.jb51.net/html5/Seems you can now go
2007/04/cone_sf">bird watching via the Internet. Ihttps://www.jb51.net/html5/
haven't been able to test it out yet (20 userhttps://www.jb51.net/html5/
limit apparently) but this is certainly cool.https://www.jb51.net/html5/
Personally, I can't imagine it replacinghttps://www.jb51.net/html5/
actually being out in the field by any small amount.https://www.jb51.net/html5/
On the other hand, I've always found it quitehttps://www.jb51.net/html5/
sad to meet senior birders who are no longer able tohttps://www.jb51.net/html5/
hold binoculars steady or get to the park. I canhttps://www.jb51.net/html5/
imagine this might be of some interest to them. Athttps://www.jb51.net/html5/
least one elderly birder did a big year on TV, afterhttps://www.jb51.net/html5/
he could no longer get out so much. This certainlyhttps://www.jb51.net/html5/
tops that.
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
即使有正确的缩进，这些嵌套的 div 仍然让人觉得非常混乱。在 HTML 5 中，可以将这些元素替换为语义性的元素，见代码2 用 HTML5编写的典型blog页面 https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
Mokka mit Schlag
https://www.jb51.net/html5/ "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">https://www.jb51.net/html5/
Spring Comes (and Goes) in Sussex County
https://www.jb51.net/html5/Yesterday I joined the Brooklyn Bird Club for ourhttps://www.jb51.net/html5/
annual trip to Western New Jersey, specifically Hyperhttps://www.jb51.net/html5/
Humus, a relatively recently discovered hot spot. Ithttps://www.jb51.net/html5/
started out as a nice winter morning when we arrived athttps://www.jb51.net/html5/
the site at 7:30 A.M., progressed to Spring around 10:00https://www.jb51.net/html5/
A.M., and reached early summer by 10:15.
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">https://www.jb51.net/html5/
But does it count for your life list?
https://www.jb51.net/html5/Seems you can now go
2007/04/cone_sf">bird watching via the Internet. Ihttps://www.jb51.net/html5/
haven't been able to test it out yet (20 userhttps://www.jb51.net/html5/
limit apparently) but this is certainly cool.https://www.jb51.net/html5/
Personally, I can't imagine it replacinghttps://www.jb51.net/html5/
actually being out in the field by any small amount.https://www.jb51.net/html5/
On the other hand, I've always found it quitehttps://www.jb51.net/html5/
sad to meet senior birders who are no longer able tohttps://www.jb51.net/html5/
hold binoculars steady or get to the park. I canhttps://www.jb51.net/html5/
imagine this might be of some interest to them. Athttps://www.jb51.net/html5/
least one elderly birder did a big year on TV, afterhttps://www.jb51.net/html5/
he could no longer get out so much. This certainlyhttps://www.jb51.net/html5/
tops that.
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
https://www.jb51.net/html5/
现在不再需要 div 了。不再需要自己设置 class 属性，从标准的元素名就可以推断出各个部分的意义。这对于音频浏览器、手机浏览器和其他非标准浏览器尤其重要。 https://www.jb51.net/html5/
https://www.jb51.net/html5/
（待续）
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/html5/76608.html
