当前位置: 首页 > 互联网, 翻译 > 正文

20个需要遵循的HTML最佳实践(一)

大部的网页是通过HTML(超文本标记语言)形式展现的。在这篇文章中,我将分享指引大家写出干净正确标记语言的20个最佳实践。

1.总是声明文档类型(Doctype)

HTML文档的第一件事情就是文档类型声明。文档类型就是告诉浏览器你将要使用的XHTML标准,从而确保浏览器能正确解释和渲染你的标记语言。

我推荐使用XHTML1.0规范的文档类型。有些开发者认为这个选择非常困难,因为相比宽松或是传统的文档类型声明,这个特殊标准太严格了。但是,我认为这能确保你的代码能很好的适应最新的标准规范。
[code lang=”html”]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/code]

2.使用有意义的标题标签

<title>标签能让网页更有含义,并更容易被搜索引擎抓取识别。比如:<title>标签中的文本会出现在Google搜索引擎的搜索结果页中,这同用户网页浏览器上的浏览标签栏一致。

3.使用描述性元标记(Descriptive Meta Tags)

元标记能让你的网页对诸如搜索引擎爬虫之类的用户代理(user agents)来说更有意义。

描述元属性(Description Meta Attribute)

“description”元属性是用来描述网页基本目的(或是网页包含内容的总概)。你应该在任何一个网页标记一个简洁关联的概要内容放在你的元属性描述标签。

比如:像这样的描述:
[code lang=”html”]<meta name="description" content="这是一个有关学习的个人博客站点,内容包括英语,翻译,软件和对学习,人生的感悟。生活的点滴在于积累,在于不断的进步。" />[/code]
不要在描述中写一些重复的词语或短语之类的垃圾文字。因为搜索引擎有足够的智慧识别出它们。简单,直接的描述网页的目的反而更加有用。

关键字元属性(Keywords Meta Attribute)
[code lang=”html”]<meta name="keywords" content="英语,翻译,我爱记单词,心情,生活,感悟,评论,互联网" />[/code]
“关键字”无属性包含一些与网页相关的词语和短语列表,这些短语和列表以逗号隔开。关键字让你的网页更加有含义。

如”description”元属性一样,也要避免使用重复的词语和短语,只要是一些适当的描述性或是类别性文字就行。

4.使用层(Divs)来布局主要区块

网站设计的第一步就是要考虑如何布局网页的主要区块。就从撰写清晰和缩进准确的代码开始。特别是你在写复杂和超长的标记代码时,能帮助你避免div层次之间的混乱和过度使用。

5.内容和展现分开

HTML是你的内容,Css提供内容的视觉展现,不要将两者混为一谈。

不要在HTML中使用内联样式,总是创建一个CSS文件来保存你的样式。这对你和可能修改你代码的开发者是个帮助,能让他们快速更改设计,而且这对用户代理来说网页的内容也更易理解消化。

6.压缩统一的CSS代码

一个简单的网站往往只有一个CSS文件,还可能会有一些诸如CSS重置,特定浏览器调整的东西。

但是,每个CSS文件都会响应一个HTTP请求,这会延长网站的加载时间。

可以通过压缩代码(删除不必要的空白,换行,缩进符等),多个文件重组成一个文件。这些都能改善网站的加载时间。

这个方法带来的问题就是“解压”,因为无格式代码很难阅读,而且压缩过程又必需重新更新代码。所以,这个操作最好是在生产周期的最后环节来做。

你可以在网上找到一些压缩优化CSS的CSS优化工具。

当然,要将样式列表的引用链接置在<head></head>标签内,因为这能帮助网站在加载的时候能更加积极的响应。

7.压缩,统一,向下调整JavaScript代码。

和CSS一样,不要使用内联形式的JavaScript代码。试着去压缩和统一你的JavaScript库,这样能减少生成一个网页而需要的HTTP请求的次数。

但是和CSS不同的是,外部JavaScript文件有一个很糟糕的问题:浏览器不支持同步加载,也就是说浏览器在加载JavaScript的时候是不能加载其它东西的,从而会让人们感觉此时网页的加载非常之慢。

因此,最好的策略就是最后加载JavaScript(比如,在加载CSS文件之后加载)。这样,你就可以把你的JavaScript放到HTML文件末尾。最佳实践
推荐把这些放在<body>结束标签之前。

8.聪明的使用标题元素(Heading Elements)

学会用<h1>到<h6>等元素来指示你网页内容的层次结构。这能帮助那些屏幕阅读软件和搜索引擎更好了解网页的含义,这对其它用户代理也是同样如此。

对于博客来讲,我真心推荐用<h1>元素来描述博客文章的标题而不是网站名称。因为对搜索引擎来讲文章的标题更加重要。

9.正确的地方使用正确的HTML元素

学习所有用到的HTML元素,并将它们正确用在符合语义并有含义的网页结构上。

用<em>表示重点,<strong>表示重重点,而不用<i>或者<b>(现在已弃用)。

用<p>表示段落。不要在段落之间使用<br />来添加一行,而用CSS的Margin或Padding属性取代它们。

对于一系列相关的元素使用:

  • <ul>(无序列表)表示列表项的顺序不重要
  • <ol>(有序列表)表示列表项的顺序很重要
  • <dl>(定义列表)表求定义列表中的项目

不要为了缩进而使用<blockquote>标签,除非是真正引用文本。

10.不是所有的东西都要用Div层

有些时候,开发者看到一连串嵌套的<div>标签结尾,包括着一大片的<div>,循环不止,简直就如div群一样。

根据最新的W3C HTML规范指出,<div>标签是一个无含义的元素,应当在没有其它元素适合的情况下,迫不得已才使用的元素。

可是,很多人用它来做一些很无用的事情,比如像块元素一样显示内联元素(而不是用CSS的display:block属性替代)。

谨慎而负责任的使用div层,从而避免创建大量的div层。

翻译文章,如有异议,见原文

接二:20个需要遵循的HTML最佳实践(二)

本文固定链接: http://www.byhard.com/?p=915 | 海纳百川

该日志由 byhard 于2013年03月25日发表在 互联网, 翻译 分类下,
原创文章转载请注明: 20个需要遵循的HTML最佳实践(一) | 海纳百川
关键字:

20个需要遵循的HTML最佳实践(一):目前有9 条留言

  1. 文章写得很详细,学习了!~支持!~!~

    2013-03-25 16:17
    • byhard:

      就怕翻译的不准确,误导了大家,谢谢支持啊。

      2013-03-25 17:12
  2. 挺不错的文章啊。

    2013-03-25 23:57
    • byhard:

      谢谢支持。

      2013-03-26 08:22
  3. 原来是翻译的啊,不过俺对div+css也不是很熟悉

    2013-03-27 10:30
    • byhard:

      嗯,偶尔翻译一些我认为不错的文章,和大家一起分享学习。不要把div和CSS想的非常神秘,其实很简单。

      2013-03-27 12:18
  4. 板凳
    可爱驴友:

    都是很基础并且很重要的东西啊,适合刚介入这行的人看,这样才能从一开始就能很好的遵循某些标准!

    2013-03-30 23:49
    • byhard:

      是的,但也要实际经验过,才知道这些真实的含义所在。

      2013-03-31 20:00
  5. 沙发
    Blanca:

    和牛逼!

    2013-04-08 20:29