Life Journal

随笔,及其他

我是 Xiao Xiao,在日本的产品经理,偶尔也写代码,iOS/Mac/Web,偶尔也做设计,爱用 Sketch,偶尔写文字,存在这里。


小组通信:规范使用(x)html标签

本文是小组通信系列的第一篇,主要是面向php小组内成员的指导性教程。主题计划从xhtml到css再到php。内容主要来源于本人(的各种藏书o(∩_∩)o…)。

上周布置给成员的作业令偶非常的意外以及不满意,当然也有我解释不到位的责任。因此本篇文章旨在将各位成员引进web design的大门。我是比较坚持放养大于圈养的人,所以文章内容点到即止,若有不明白,请再留言或者mail我,当然自行google更好。

(以下主要取自《CSS Mastery:Advanced Web Standards Solutions》一书,考虑到版权 仅供小组成员参看)

1、web design的发展历程

随着万维网的流行,HTML开始用来表现页面。人们使用字体和粗体标签的组合来创建所需的视觉效果,而不只是用标题元素突出显示页面的标题。表格成了一种布局工具而不是显示数据的方式,人们使用块引用来添加空白而不是表示引用。Web很快失去了意义,成了字体和表格标签的大杂烩。

HTML原本是一种简单且容易理解的标记语言。但是,随着网页变得越来越复杂,代码变得几乎不可能理解了。因此,需要使用复杂的WYSIWYG(所见即所得)工具来处理大量的无意义标签。不幸的是,这些工具并没有使事情简化,反而添加了它们自己的复杂标记。新千年开始以来,及时普通的网页也变得非常复杂,以至于几乎不可能进行手工编辑而不破坏代码。看起来不能这样下去了。

就在这种情况下,CSS出现了。有了CSS,就可以控制页面的外观并且将文档的表现部分与内容分隔开。表现标签(比如字体标签)可以去掉,而且可以使用CSS而不是表格来控制布局。标记重新变得简单了,人们又开始对底层感兴趣了。

意义重新回到了文档中。浏览器的默认样式可以被覆盖,所以可以将某些内容标为标题,而不需要为它只定大的、加粗的、难看的字体。可以创建列表,而这些列表不一定显示为一系列带模电的列表项,可以使用没有相关联样式的块引用。开发人员可以按照(X)HTML元素的原义使用它们,无须去管它们的外观。

有意义的标记为开发人员提供了几个重要的好处。与表现性的页面相比,有意义的页面更容易处理。例如,架设需要修改页面中的一个引用。如果这个引用加上了正确的标记,那么很容易搜索代码,找到第一个块引用元素。但是,如果这个引用只是另一个段落元素标签,那么就很难寻找了。

除了人容易理解之外,程序和其他设备也可以理解有意义的标记(也称为语义标记)。例如,搜索引擎可以识别出标题行(因为它被包围在h1标签中)并给它分配更高的重要度。屏幕阅读器的用户可以依靠标题作为辅助的页面导航措施。

2、XHTML中的一些有意义元素。

  1. h1、h2
  2. ul、ol、dl
  3. strong、em
  4. blockquote、cite
  5. abbr、acronym、code
  6. fieldset、legend、label
  7. caption、thead、tbody、tfoot

3、关于div

有助于在文档中添加结构的一个元素是div元素。许多人误以为div元素没有语义意义。但是,div实际上代表部分(division),它提供了将文档分割为有意义的区域的方法。所以,通过将主要内容区域包围在div中并分配ID mainContent,就可以在文档中添加结构和意义。

为了将不必要的标记减到最少,应该只在没有现有元素能够实现区域分割的情况下使用div元素。

过度使用div常常称为“多div症”,这是代码结构不合理而且过分复杂的一个信号。一些CSS新手会尝试用div重建自己原来的表格结构。但是,这只是用一套不必要的标签替换了另一套不必要的标签。实际上,应该使用div根据条目的意义或功能(而不是根据它们的表现方式或布局)对相关条目进行分组。

(以下主要取自《The Zen of CSS Design:Visual Enlightenment for the Web》一书,考虑到版权 仅供小组成员参看)

4、创建良好的标记

选择DOCTYPE

在HTML的最开始部分声明DOCTYPE(Document Type (文档类型)的简写)可以让浏览器货其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言,DOCTYPE都是一个见状的文档所必需的,也是你在编写HTML时要做得一件事情。

指定语言和字符集

与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页,而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言,你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他的搜索引擎会根据搜索请求的语言来过滤搜索结果,所以如果你不想放弃搜索引擎带来的流量的哈uname正确地设置页面的编码将显得极为重要。

避免过度使用div和span

设计HTML时一个常见的错误就是过度使用div和span。少量、必要的合理使用可以明显增强文档的结构性。但若是文档中使用了太多的div和span,那么你就该考虑一下是不是还有更加合适的HTML元素供选择了。例如,若是H3更能表示内容的含义,那么就不应该使用div,span也不应该代替label的作用。

但这并不意味着div和span应避免使用。文档中合适位置的少量div元素可以是文档更易于应用样式,且在逻辑段落上也显得更加清晰。我们可以将div看做一个可以被重用的容器:将内容深深隐藏于太多的容器中并不是一个好主意,但是几个合理位置中的div却可以让文档显得井井有条。

尽可能少的使用标签

前面两个提示所隐藏的含义就是,HTML标签使用得越少越好——事实上也确实如此。若想创建出良好的文档结构,那么尽可能少地使用标签则应该是一个自始至终都要考虑的问题。仅仅使用必要的标签,将其他不必要的都删掉。这样做的好处不仅在于能够让文档保持小巧(也就意味着用户下载速度的提高),也可以让浏览器能够很快完成文档的解析,即得到更快地呈现速度。

5、深度文章

推荐各位组员在阅读并理解上述文字之后阅读以下的推荐文章,它将会给你更为完整清晰的知识图。
Developing With Web Standards – Recommendations and best practices(译文版本:用Web标准进行开发 – 建议与好的实例)