合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

HTML5的结构框架

2012-04-21 09:47:51建站知识

由于缺少结构,即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别,才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素,专门用来标识这些常见的结构:yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
· section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
· header:页面上显示的页眉;与 head 元素不一样yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
· footer:页脚;可以显示电子邮件中的签名yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
· nav:指向其他页面的一组链接yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
· article:blog、杂志、文章汇编等中的一篇文章yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
我们来考虑一个典型的 blog 主页,它的顶部有页眉,底部有页脚,还有几篇文章、一个导航区和一个边栏,见代码1 典型的 blog 页面yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<html>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< head>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< title>Mokka mit Schlag </title>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /head>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< body>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”page”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”header”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< h1><a href=”http://www.elharo.com/blog”>Mokka mit Schlag</a></h1>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”container”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”center”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”post-1000572″>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< h2><a href=yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
“/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Spring Comes (and Goes) in Sussex County</a></h2>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< p>Yesterday I joined the Brooklyn Bird Club for ouryq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
annual trip to Western New Jersey, specifically Hyperyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Humus, a relatively recently discovered hot spot. Ityq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
started out as a nice winter morning when we arrivedyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
at the site at 7:30 A.M., progressed to Spring aroundyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
10:00 A.M., and reached early summer by 10:15. </p>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”post-1000571″>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< h2><a href=yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
“/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
But does it count for your life list?</a></h2>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< p>Seems you can now go <ayq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
href=”http://www.wired.com/science/discoveries/news/yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
2007/04/cone_sf”>bird watching via the Internet</a>. Iyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
haven’t been able to test it out yet (20 useryq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
limit apparently) but this is certainly cool.yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Personally, I can’t imagine it replacingyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
actually being out in the field by any small amount.yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
On the other hand, I’ve always found it quiteyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
sad to meet senior birders who are no longer able toyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
hold binoculars steady or get to the park. I canyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
imagine this might be of some interest to them. Atyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
least one elderly birder did a big year on TV, afteryq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
he could no longer get out so much. This certainlyyq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
tops that.</p>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< a href=”/blog/page/2/”>« _fcksavedurl=”"/blog/page/2/”>«” Previous Entries</a>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div></div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”right”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< ul id=”sidebar”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><h2>Info</h2>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< ul>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><a href=”/blog/comment-policy/”>Comment Policy</a></li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><a href=”/blog/todo-list/”>Todo List</a></li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /ul></li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><h2>Archives</h2>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< ul>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><a href=’/blog/2007/04/’>April 2007</a></li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><a href=’/blog/2007/03/’>March 2007</a></li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><a href=’/blog/2007/02/’>February 2007</a></li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< li><a href=’/blog/2007/01/’>January 2007</a></li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /ul>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /li>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /ul>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< div id=”footer”>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< p>Copyright 2007 Elliotte Rusty Harold</p>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /div>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /body>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /html>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
即使有正确的缩进,这些嵌套的 div 仍然让人觉得非常混乱。在 HTML 5 中,可以将这些元素替换为语义性的元素,见代码2 用 HTML5编写的典型blog页面yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<html>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< head>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< title>Mokka mit Schlag </title>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /head>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< body>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< header>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< h1><a href=”http://www.elharo.com/blog”>Mokka mit Schlag</a></h1>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< /header>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< section>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< article>yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
< h2><a href=yq8合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
“/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/”>

本文关键词
HTML5,结构,框架,合肥网站建设,合肥网站优化