HTML5的设计原理之求真务实。
发表日期:2015/7/31 14:39:49 文章编辑: 浏览次数:2567
在所有设计原理中,这一条恐怕是最响亮的了——求真务实。不知道大家有没有在公司里开会时听到过这种口号:“开拓进取,求真务实。”实际上,除了作 为企业的口号,它还是一条非常重要的设计原理,因为求真务实对于HTML的含义是:在解决那些令人头痛的问题之前,先看看人们为应对这些问题都想出了哪些 办法。集中精力去理解这些“民间的”解决方案才是当务之急。
HTML5网站设计中新的语义元素就是遵循求真务实原理的反映。新增的元素不算多,谈不上无限的扩展性,但却不失为一件好事。尽管数量屈指可数,但意义却非 同一般。这些新元素涉及头部(header)、脚部(footer)、分区(section)、文章(article)……,相信大家都不会觉得陌生。我 的意思是说,即便你不使用HTML5,也应该熟悉这些称呼,这些都是你曾经使用过的类名,比如class=”header”/“head”/“heading”,或class=”footer”/“foot”。当然,也可能是ID,id=”header”,id=”footer”。这些不都是我们已经司空见惯了的嘛。
好,举个例子吧,假设你今天写了下面这个文档。
1 |
|
2 | <div id= "header" >... |
3 | <div id= "navigation" >... |
4 | <div id= "main" >... |
5 | <div id= "sidebar" >... |
6 | <div id= "footer" >... |
7 |
|
这里有一个div使用了id=”header”,另一个div使用了id=”navigation”,……。怎么样,都轻车熟路了吧?在HTML5中,这些元素都可以换掉。说起新增的语义元素,它们价值的一方面可以这样来体现:“嘿,看啊,这样多好,用HTML5新增的元素可以把这些div都替换掉。”
1 |
|
2 |
|
3 |
|
4 | <div id= "main" >... |
5 |
|
6 |
|
7 |
|
当然了,你可以这样做。在文档级别上使用这些元素没有问题。但是,假如新增这些元素的目的仅仅是为了取代原来的div,那就真有点多此一举了。
虽然在这个文档中,我们用这些新元素来替换的是ID,但在我个人看来,将它们作为类的替代品更有价值。为什么这么说呢?因为这些元素在一个页面中不 止可以使用一次,而是可以使用多次。没错,你可以为文档添加一个头部(header),再添加一个脚部(footer);但文档中的每个分区 (section)照样也都可以有一个头部和一个脚部。而每个分区里还可以嵌套另一个分区,被嵌套的分区仍然可以有自己的头部和脚部,是这样吧?
这四个新元素:section、article、aside和nav,之所以说它们强大,原因在于它们代表了一种新的内容模型,一种HTML中前所 未有的内容模型——给内容分区。迄今为止,我们一直都在用div来组织页面中的内容,但与其他类似的元素一样,div本身并没有语义。但section、 article、aside和nav实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容,都可以拥有自己的概要、标 题,自己的脚部。
其中最为通用的section,可以说是与内容最相关的一个。而article则是一种特殊的section。Aside呢,是一种特殊的section。最后,Nav也是一种特殊的section。
好,即便是现在,你照样可以使用div和类来描述页面中不同的部分,就像下面这样:
1 | <div class= "item" > |
2 |
|
3 | <div class= "meta" >... |
4 | <div class= "content" > |
5 | ... |
6 |
|
7 | <div class= "links" >... |
8 |
|
其中包含可能是有关内容作者的元数据,而下面会给出一些链接,差不多就这样。在HTML5中,我完全可以说这块内容就是一个文档,通过对内容分区, 使用section或article或aside,我可以说“这一块完全是可以独立存在的。”因此,我当然可以使用header和footer。
1 | <section class= "item" > |
2 |
|
3 | <footer class= "meta" >... |
4 | <div class= "content" > |
5 | ... |
6 |
|
7 | <nav class= "links" >... |
8 |
|
请注意,即便是footer,也不一定非要出现在下面,不是吗?这几个元素,header、footer、aside、nav,最重要的是它们的语 义;跟位置没有关系。一想到footer这个词,我们总会不由自主地想,“噢,应该放在下面。”同样,我们把aside想象成一个侧边栏。可是,如果你看 一看规范,就会发现这些元素只跟内容有关。因此,放在footer中的内容也可以是署名,文章作者之类的,它只是你使用的一个元素。这个元素并没有说“必 须把我放在文档或者分区的下面。”
这里,请注意,最重要的还不是我用几个新元素替换了原来的div加类,而是我把原来的H2换成了H1——震撼吧,我看到有人发抖了。我碰到过不少职 业的Web开发人员,多年来他们一直认为规范里说一个文档中只能有一个H1。还有一些自诩为万能的SEO秘诀同样说要这样。很多SEO的技巧其实是很教条 的。所谓教条,意思就是不相信数据。过去,这种教条表现为“不行,页面中包含两个以上的H1,你就会死掉的。”在HTML5中,只要你建立一个新的内容 块,不管用section、article、aside、nav,还是别的元素,都可以在其中使用H1,而不必担心这个块里的标题在整个页面中应该排在什 么级别;H2、H3,都没有问题。
这个变化太厉害了。想一想吧,这个变化对内容管理是革命性的。因为现在,你可以把每个内容分区想象一个独立的、能够从页面中拿出来的部分。此时,根 据上下文不同,这个独立部分中的H1,在整个页面中没准会扮演H2或H3的角色——取决于它在文档中出现的位置。面对这个突如其来的变化,也许有人的脑子 会暂时转不过弯来。不要紧,但我可以告诉你,我认为这才是HTML5中这些新语义标记的真正价值所在。换句话说,我们现在有了独立的元素了,这些元素中的 标题级别可以重新定义。
我的文档中可能会包含一个分区,这个分区中可能会嵌套另一个分区,或者一篇文章,然后文章再嵌套分区,分区再嵌套文章、嵌套分区,文章再嵌套文章。 而且每个分区和文章都可以拥有自己的H1到H6。从这个意义上讲,H元素真可谓“子子孙孙,无穷匮也”了。但是,在你在编写内容或者内容管理系统的时候, 它们又都是独立的,完全独立的内容块。这才是真正的价值所在。
实际上,这个点子并不HTML5工作组拍脑门想出来的,也不是W3C最近才提出来的。下面这几句话摘自蒂姆·伯纳斯-李1991年的一封邮件,邮件 是发给丹·康纳利(Dan Connolly)的。他在邮件中解释了对HTML的理解,他说:“你知道……知道我的想法,我认为H1、H2这样单调地排下去不好,我希望它成为一种可 以嵌套的元素,或者说一个通用的H元素,我们可以在其中嵌套不同的层次。”但后来,我们没有看到通用的H元素,而是一直在使用H1和H2——那是因为我们 一直在支持已有的内容。20年后的今天,这个理想终于实现了。
-------北京网站建设公司 北京传诚信------
-
男女程序员的对比,那个更适合这个行业.
日期:2016-02-24 浏览次数:2977
-
网站布局之价格表单设计灵感来源。
日期:2015-12-14 浏览次数:3018
-
JS判断移动设备并实现跳转至手机版网页
日期:2015-12-14 浏览次数:3137
-
HTML5的设计特性!
日期:2015-07-31 浏览次数:2559
-
HTML5是怎么来的!
日期:2015-07-31 浏览次数:2594
-
免费SSL证书申请网站topssl.cn上线
日期:2024-09-23 浏览次数:1210
-
如何在北京顺义寻找一个踏实的网站建设公司
日期:2023-08-10 浏览次数:4292
-
顺义网站建设:北京顺义网站建设的优点
日期:2023-05-25 浏览次数:4692
-
选择网站公司需要考虑哪些因素
日期:2023-05-25 浏览次数:3559
-
北京模板建站
日期:2023-03-28 浏览次数:3738
-
如何设计持续客户流量的网站
日期:2019-01-04 浏览次数:2261
-
如何主动让用户体验设计
日期:2019-01-04 浏览次数:2410
-
几个绝不能打破的网站弹窗设计规则
日期:2018-11-27 浏览次数:2901
-
为什么您的网站应定期更新的主要原因
日期:2019-06-20 浏览次数:2497
-
提交您网站导航的7个错误
日期:2019-02-13 浏览次数:2471