合肥网站建设工作室

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

扫一扫微信二维码

HTML5的结构框架

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

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

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