HTML5设计原则(4)
作者:赵振宇 发布时间:2012-04-26 16:46:45
d. pave the cowpaths
求真务实
Cowpath: 把一群牛放在地里,然后看牛喜欢怎么走,然后根据牛群踩过的痕迹来铺一条给牛走的路。
很有趣的比喻吧, 说的就是把一些既然存在的东西变得更加标准一些. 接上地气的标准才是能够被执行的标准.
举个栗子:
WHATWG对抽样对大量网站进行了分析, 得出了这样的一个结论:
id=”header”, id=”footer”, id=”content”, id=”navigation”, id=”sidebar” 这样的命名方式非常常见, 那好吧, 那我就给你们一些这样的标签!
<section>,<article>,<aside>,<nav>,<header>,<footer>,<details>,<figure>
看代码:
< body > < div id = "header" ></ div > < div id = "navigation" ></ div > < div id = "main" ></ div > < div id = "sidebar" ></ div > < div id = "footer" ></ div > </ body > |
变!
< body > < header ></ header > < nav ></ nav > < div id = "main" ></ div > < aside ></ aside > < footer ></ footer > </ body > |
怎么样? 像模像样了吧?
再看:
< div class = "item" > < h2 ></ h2 > < div class = "meta" ></ div > < div class = "content" ></ div > < div class = "link" ></ div > </ div > |
再变!
< section class = "item" > < header >< h2 ></ h2 ></ header > < footer class = "meta" ></ footer > < div class = "content" ></ div > < nav class = "link" ></ nav > </ section > |
虽然在这个文档中,我们用这些新元素来替换的是id,但在我个人看来,将它们作为类的替代品更有价值。为什么这么说呢?因为这些元素在一个页面中不止可以使用一次,而是可以使用多次。没错,你可以为文档添加一个头部(header),再添加一个脚部(footer);但文档中的每个分区(section)照样也都可以有一个头部和一个脚部。而每个分区里还可以嵌套另一个分区,被嵌套的分区仍然可以有自己的头部和脚部,是这样吧?
这四个新元素:section、article、aside和nav,之所以说它们强大,原因在于它们代表了一种新的内容模型,一种HTML中前所未有的内容模型——给内容分区。迄今为止,我们一直都在用div来组织页面中的内容,但与其他类似的元素一样,div本身并没有语义。但section、article、aside和nav实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容,都可以拥有自己的概要、标题,自己的脚部。
其中最为通用的section,可以说是与内容最相关的一个。而article则是一种特殊的section。aside呢,是一种特殊的section。最后,nav也是一种特殊的section。
最重要的是它们的语义;跟位置没有关系。
这里,请注意,最重要的还不是我用几个新元素替换了原来的div加类,而是我把原来的H2换成了H1——震撼吧,我看到有人发抖了。我碰到过不少职业的Web开发人员,多年来他们一直认为规范里说一个文档中只能有一个H1。还有一些自诩为万能的SEO秘诀同样说要这样。很多SEO的技巧其实是很教条的。所谓教条,意思就是不相信数据。过去,这种教条表现为“不行,页面中包含两个以上的H1,你就会死掉的。”在HTML5中,只要你建立一个新的内容块,不管用section、article、aside、nav,还是别的元素,都可以在其中使用H1,而不必担心这个块里的标题在整个页面中应该排在什么级别;H2、H3,都没有问题。
这个变化太厉害了。想一想吧,这个变化对内容管理是革命性的。因为现在,你可以把每个内容分区想象一个独立的、能够从页面中拿出来的部分。此时,根据上下文不同,这个独立部分中的H1,在整个页面中没准会扮演H2或H3的角色——取决于它在文档中出现的位置。面对这个突如其来的变化,也许有人的脑子会暂时转不过弯来。不要紧,但我可以告诉你,我认为这才是HTML5中这些新语义标记的真正价值所在。换句话说,我们现在有了独立的元素了,这些元素中的标题级别可以重新定义。
猜你喜欢
- 在上一期中作者向诸位简要介绍了 ASP 脚本语言之一 VBScript 的一些基本常识,本期将继续给大家讲解 VBScript 的脚本编写方
- 在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好遇到了关于select元素的两个小问题,这里进行一下总结
- 原则:1. 我们测试的是产品可用性,不是使用者的个人能力2. 尽量不要打断用户的操作3. &
- 本文由伯乐在线 - 敏捷翻译的史莉萍翻译自《Creating an Effective Color-Scheme for Web Desig
- 现在的垃圾留言越来越智能,并且从留言内容几乎看不出来是垃圾留言,而大量的垃圾留言会导致文章可读性下降,并可能会被搜索引擎惩罚,经过一段时间的
- (一)关于体验约瑟夫.派恩和詹姆士.吉尔摩在《体验经济》一书中提出其观点:所谓“体验”就是企业以商品为道具,以服务为舞台,以顾客为中心,创造
- IE6下浮出层常会需要增加一个iframe来解决浮出层被Obj穿透的问题,这个是目前最有效的方案,不过这个方案本身有个缺陷,就是iframe
- 为了处理根据Web标准创作的网页和根据盛行于20世纪90年代末的旧时实践创作的网页,当代的Web浏览器实现了各种不同的引擎模式。本文说明了那
- 一.gb2312,gbk,utf8等支持多字节编码的字符集都可以储存汉字,gb2312中的汉字数量远少于gbk,而gb2312,gbk等都可
- 有效地加载数据有时我们需大量地把数据加载到数据表,采用批量加载的方式比一个一个记录加载效率高,因为MySQL不用每加载一条记录就刷新一次索引
- 今天发现了一个显示ORACLE语法的好网站。内容太多,就不一一摘录了,记在这里,也方便自己查找。http://ss64.com/ora/ 目
- 关于建立索引的几个准则:1、合理的建立索引能够加速数据读取效率,不合理的建立索引反而会拖慢数据库的响应速度。2、索引越多,更新数据的速度越慢
- 人们对于那些抄袭模仿的网站有诸多抱怨,但在这篇文章中,却没有冷嘲热讽的意思。但正如他们所说,“模仿是最为忠诚的奉承形式”。“如果你确实需要借
- 当然可以,我们使用强大的fso对象来获取文件夹的大小请敲入如下代码即可:<%Set MyFileSize =&nb
- 见下表:序号列类型需要的存储量1TINYINT1 字节2SMALLINT2 个字节3MEDIUMINT3 个字节4INT4 个字节5INTE
- 先问一个问题, 在firefox 2里,正则表达式字符"\d"全等于"[0-9]"吗?有可能你会答&
- 一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字
- 如何正确理解和使用Command、Connection和 Recordset三个对象?我知道它们都是连接数据库的“好手”,但在编程的具体应用
- 做设计类网址导航的初衷是为了资源整合,也是在尝试解决问题。假定访问用户都是行业人士,或者目地性很强的有一定了解的用户,应该如何考虑这个组织系
- 看了一个月的文档和资料以后,终于让我参与到项目中来了,哈哈,痛快!虽然只是让我解决一个小问题,不过有活干就是好。在写代码的过程中遇到了一个小