HTML5的结构和语义(2):结构


Posted in HTML / CSS onOctober 17, 2008

由于缺少结构,即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别,才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素,专门用来标识这些常见的结构:
 · section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西
 · header:页面上显示的页眉;与 head 元素不一样
 · footer:页脚;可以显示电子邮件中的签名
 · nav:指向其他页面的一组链接
 · article:blog、杂志、文章汇编等中的一篇文章

我们来考虑一个典型的 blog 主页,它的顶部有页眉,底部有页脚,还有几篇文章、一个导航区和一个边栏,见代码1 典型的 blog 页面
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-1000572">
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<div class="entry">
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
</div>
</div>
<div class="post" id="post-1000571">
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<div class="entry">
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">« _fcksavedurl=""/blog/page/2/">«" Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>
<div id="right" class="column">
<ul id="sidebar">
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2007 Elliotte Rusty Harold</p>
</div>
</div>
</body>
</html>

即使有正确的缩进,这些嵌套的 div 仍然让人觉得非常混乱。在 HTML 5 中,可以将这些元素替换为语义性的元素,见代码2 用 HTML5编写的典型blog页面
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15. </p>
</article>
<article>
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</article>
<nav>
<a href="/blog/page/2/">« _fcksavedurl=""/blog/page/2/">«" Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</footer>
</body>
</html>

现在不再需要 div 了。不再需要自己设置 class 属性,从标准的元素名就可以推断出各个部分的意义。这对于音频浏览器、手机浏览器和其他非标准浏览器尤其重要。

(待续)

HTML / CSS 相关文章推荐
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 #HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 #HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 #HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 #HTML / CSS
HTML5 语义化结构化规范化
Oct 17 #HTML / CSS
HTML5 与 XHTML2
Oct 17 #HTML / CSS
X/HTML5 和 XHTML2
Oct 17 #HTML / CSS
You might like
php抓即时股票信息
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php如何连接sql server
2015/10/16 PHP
php面向对象值单例模式
2016/05/03 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
详解Python中的from..import绝对导入语句
2016/06/21 Python
python机器人行走步数问题的解决
2018/01/29 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
Python self用法详解
2020/11/28 Python
pandas实现导出数据的四种方式
2020/12/13 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
2014年反腐倡廉工作总结
2014/12/05 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android