合肥网站建设工作室

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

扫一扫微信二维码

HTML5的结构框架

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

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

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