必须遵循的20个HTML最佳编写规范

呈现在大家面前的网站大多数都是通过互联网标记语言HTML来实现的。今天这篇文章将与大家分享下正确、简洁的20个HTML最佳范例。

1. 文档类型（Doctype）声明必不可少

文档类型声明是编写HTML文件首先要做的一件事。文档类型声明告知浏览器你即将使用的XHTML标准，有助于你正确地阅读和渲染你的标记语言。

我建议使用严格的 XHTML 1.0 文档类型。有些人可能会觉得它与松散或过渡的文档类型声明相比，宽容性没那么大。但是正是因此它才能确保你的代码严格遵守最新的标准。

class="STYLE1"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<title>标签可以让一个网页的意思更加明确，对搜索引擎更加友好。例如，<title>标签内的文本会显示在谷歌搜索引擎结果页面、用户浏览器栏和标签上。

例如:

class="STYLE1"><title>Six Revisions - Web Development and Design Information</title>

如果使用上面的代码，在谷歌搜索结果页面显示Six Revision网站时效果如下：

http://www.wordpress.la/sites/default/files/20-html-best-practices 1.png" alt="" />

3. 使用描述性元标记

元标记可以让你的页面对搜索引擎蜘蛛更加有意义。

描述元属性

描述元属性用来描述网页的基本目的(网页包含什么内容的一个简单摘要)。对于任何页面，你都应该在元描述标签里放上一段简短的摘要。

例如，下面的摘要描述:

class="STYLE1"><meta name="description" content="
Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />

在谷歌搜索引擎结果页面就会显示如下：

http://www.wordpress.la/sites/default/files/20-html-best-practices 2.png" alt="" />

不要在描述里过多重复关键词，否则搜索引擎会将它视为垃圾描述。尽量用简单的语言直接将网页的目的解释清楚就可以了。

关键词元属性

class="STYLE1"><meta name="keywords" content="web design, web development" />

关键词原属性包含了与网页相关的用半角逗号隔开的关键词列表，这些关键词让你的网页意义更加明确。同样地，与描述元属性一样，不要重复关键词。

4. 使用Divs将页面布局分成几个大块

在建网站的第一个阶段将网页分成几个大块。

http://www.wordpress.la/sites/default/files/20-html-best-practices 3.png" alt="" />

从最初就开始划分有利于代码的整洁和条理性。这样也不会造成过度使用divs而造成混乱，特别如果文档特别复杂、特别长的情况下。

5. 将内容与视觉表现区分开

HTML是你的内容，CSS代码为你提供内容的视觉表现。切勿将二者混淆。

不要在HTML里使用内嵌样式。始终都要为样式单独创建一个CSS文件，方便以后代码的修改。

坏例子: 内嵌样式

下面的段落元素是通过样式属性来规定式样的，虽然这样的方法也可以，但是并不太好。

class="STYLE1"><p style="color:#abc; font-size:14px; font-family:arial,sans-serif;">I hate to separate my content from presentation</p>

6. CSS代码的精简和整理

一个简单的网站通常有一个主要的CSS文件以及一些其他东西，如 CSS重置以及针对浏览器的修补程序。但是每一个CSS文件都会发送一个 HTTP请求，这样降低了网站加载的速度。

解决此问题的方法就是尽量最小化代码(删除不必要的字符，如空格、换行符和制表符)，将能够整合成一个文件的文件统一合并到一个文件中。这样会改善网站的加载时间。

不过这种方法也有一个弊端，就是每次你需要更新代码的时候，你还得重新还原被缩小的代码（因为未格式化的代码较难阅读）。所以，最好把代码的精简放在最后一个步骤。

网上也有优化CSS代码的工具，这是一个CSS优化工具列表。另外，你始终你应该将样式的链接放在 <head></head> 标签内，这将有助于提高网站加载时的灵敏度。

7. 精简JavaScript

与CSS文件一样，切记不要在JavaScript里使用内联样式，并尽量精简JavaScript库赖减少HTTP请求的次数。但是JavaScript有一点与CSS文件不同，浏览器不允许同时加载，这意味着说在加载JavaScript时，浏览器就无法加载其他任何东西，这样页面加载的速度就大大降低了。

因此，最好的对策就是最后加载JavaScript(例如，在加载完CSS之后)。为了实现这一点，记得尽可能将JavaScript放置在HTML文档的底部，当然最好就是放在最后结束的 <body>标签前面。

例子

http://www.wordpress.la/sites/default/files/20-html-best-practices 4.png" alt="" />

8. 合理使用标题元素

学会使用 <h1>到<h6> 这样的标题元素，让你的HTML内容层级更加明晰。这将会让你的内容对屏幕阅读软件、搜索引擎等其他程序更加友好。

例如

class="STYLE1"><h1>这是最上面的标题</h1> <h2>这是最上方标题下的一个子标题.</h2> <h3>这是h2标题下面的一个子标题</h3>

对于博客而言，我建议 <h1>元素用来代表博客文章标题，而不是网站的名字，因为对搜索引擎来说h1是非常重要的。

WordPress代码示例

class="STYLE1"><h1 class="entry-title"><?php the_title(); ?></h1>

9.正确合理使用HTML元素

学会合理地使用所有的HTML元素，保持结构语义性是非常重要的。

强调和重点强调可以分别用<em>、<strong>元素来表示，而不用建议使用 <i>或<b>。

例子

class="STYLE1"><em>强调的文本</em>  <strong>重点强调的文本</strong>

使用 <p> 来代表段落。段落之间不要使用<br /> 添加新的一行，而应该使用使用CSS margin 和/或 padding属性即可。

对于一列相关的元素，可以使用：

<ul> (无序列表) 当列表项目的顺序不是很重要时。
<ol> (有序列表) 当列表项目的顺序非常重要时。
<dl> (定义列表) 适用于项目/定义对。

不要使用<blockquote>来缩进，只有当需要引用文本的时候才使用它。

10. 不要什么时候都用Divs

有的开发人员经常用<div>标签包装一层又一层的<div>标签，这是非常不可取的。根据最新的 W3C HTML规范草案，<div>是一个毫无意义的元素，应该是"在没有其他任何合适的元素可选择的情况下作为最后一个考虑的元素。"

但是很多程序员就喜欢非常琐碎的东西就用它来表示，如将内联元素显示为块元素。对于Divs的使用一定要谨慎。

11. 使用无序列表 (<ul>)来导航

导航是网站设计一个非常重要方面，<ul>元素与CSS的结合会让你的导航菜单更具有意义(因为，毕竟，导航菜单是一个链接列表) ，更加美观。

无序列表的范例

class="STYLE1"><ul id="main_nav"> <li><a href="#" class="active">主页</a></li> <li><a href="#">About</a></li> <li><a href="#">成果一览</a></li> <li><a href="#">服务</a></li> <li><a href="#">Blog</a></li> <li><a href="#">联系我们</a></li> </ul>

使用CSS将无序列表式样变成横向导航栏

class="STYLE1"> #main_nav { position:absolute; right:30px; top:40px;}    				
 #main_nav li { float:left; margin-left:2px; }    				
 #main_nav li a{ font-size:16px; color:#fff; text-decoration:none; 
padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}    				
 #main_nav li a.active,    			
#main_nav li a:hover{  background-color:#0b86cb;  }

效果

http://www.wordpress.la/sites/default/files/20-html-best-practices 5.jpg" alt="" />

12. 结束你的标签

W3C规范中有一条标准就是所有的标签都需要有一个结束标记。有些浏览器可能仍然会正确地渲染没有结束标记的语言，但是不带结束标签的代码在这个标准下是无效的。

例子

class="STYLE1"><div id="test">  <img src="images/sample.jpg" alt="sample" />  <a href="#" title="test">test</a>  <p>some sample text </p>  </div>

13.标记使用小写

保持用小写来编写标记语言是编程行业的标准做法。如果你用大写编写标记语言，它也可以运作，可能不会影响网页的渲染效果，但是它会影响代码的可读性。

坏例子：

class="STYLE1"><DIV> <IMG SRC="images/sample.jpg" alt="sample"/> <A HREF="#" TITLE="TEST">test</A> <P>some sample text</P> </DIV>

好例子：

class="STYLE1"><div id="test">  <img src="images/sample.jpg" alt="sample" />  <a href="#" title="test">test</a>  <p>some sample text </p>  </div>

14. 图片要使用Alt属性

使用 <img> 元素时记得使用一个富有意义的alt属性。

坏例子：

class="STYLE1"><img id="logo" src="images/bgr_logo.png"/>  class="STYLE1">
<!-- has an alt attribute, which will validate, but alt value is meaningless --> 
 <img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />

好例子：

class="STYLE1"><img id="logo" src="images/bgr_logo.png" alt="Six Revisions Logo" />

15.链接时使用Title属性 (需要时)

合理地在锚元素里使用title属性将会改善可访问性。记住 title属性的使用可以提高锚标签的意义。

坏例子：

class="STYLE1"><!-- Redundant title attribute -->  <a href="http://blog.com/all-articles" title="Click Here">Click here.</a>

当屏幕阅读器阅读锚标签时，听者需要听两次同样的文本，而且更糟糕的是它没有解释下这个页面会被链接到什么东西。

如果你只是单纯想重复锚文本或者没有打算描述将被链接到什么样的页面，那么就可以不用title标签。

好例子

class="STYLE1"><a href="http://blog.com/all-articles" title="A list of all articles.">Click here.</a>

16. 在表单里使用字段集（ Fieldset）和标签（Labels）

使用<label>元素来标记输入的字段。使用 <fieldset>将输入字段分成有逻辑性的集合。使用<legend>给一个字段集<fieldset>命名。所有这些都可以让你的表单更易懂，改进代码的质量。

例子：

class="STYLE1"><fieldset>      
<legend>Personal Details</legend>     
 <label for="name">name</label><input type="text" id="name" name="name" />      
<label for="email">email</label><input type="text" id="email" name="email" />      
<label for="subject">subject</label><input type="text" id="subject" name="subject" />      
<label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>  </fieldset>

17.使用模块化IE修复

如果你的网页在IE浏览器下出现问题，你可以使用条件注释将IE作为代码的对象。

IE 7的例子

<!--[if IE 7]>  <link rel="stylesheet" href="css/ie-7.css" media="all">  <![endif]-->

IE 6的例子

class="STYLE1"><!--[if IE 6]>  <link rel="stylesheet" href="css/ie-6.css" media="all">  
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>  <script type="text/javascript">    						DD_belatedPNG.fix('#logo');    				</script>  <![endif]-->

18.验证代码

虽然，代码验证不应该成为最终评估你的代码好坏的标准，因为代码通过验证并不是就意味着你的代码就是很好，反之亦然。但是自动验证服务，如W3C 标记验证服务是一个非常实用的调试程序可以帮助你找出渲染错误。在编写HTML代码时，要养成经常验证的习惯，免得造成项目完成之后再来修改带来的麻烦。

19. 代码的一致性

干净整洁的代码可以显示出你的专业性，同时也体现出你能为其他人考虑。总而言之，就是能提高代码的可阅读性。

20. 避免过多的注释

在编写代码的时候，为了让它更易懂，注释代码逻辑是挺好的一种习惯，特别是在编写 PHP, Java 和 C#语言时。但是HTML标记语言是非常易懂的，没有必要每行代码都注释下。如果你在自己的HTML文件里看到有非常多注释，那么你就应该反省下了。

原文

#1 星期二, 08/17/2010 - 15:58 — 瓜同学 (未验证)

第五点深有体会：内容与表现最好分开，修改方便。

#2 星期二, 08/17/2010 - 16:25 — 购物博客 (未验证)

目前我只用最常见的几个功能

#3 星期二, 08/17/2010 - 17:14 — 私爱 (未验证)

学习了谢谢分享

#4 星期二, 08/17/2010 - 17:22 — 陈剑 (未验证)

有英文基础，所以能看懂基本的HTML

#5 星期二, 08/17/2010 - 17:48 — 末路花未央 (未验证)

学习了，虽然是非专业人士，但是也能懂个大概

#6 星期二, 08/17/2010 - 21:00 — 永恒之塔基地 (未验证)

哎。这个东西以前没有学懂过。。。。

#7 星期三, 08/18/2010 - 00:06 — CH5iRe (未验证)

确实不错

#8 星期三, 08/18/2010 - 10:38 — 孙伊卓 (未验证)

恩学习到了

#9 星期三, 08/18/2010 - 12:52 — 学夫子 (未验证)

我就搞了一个导航，结果发现这源码好多都不符合规范，我就不想用了，我想直接用一些系统应该不存在这些问题吧！

#10 星期三, 08/18/2010 - 13:28 — Ray Chow (未验证)

js 放在底部是蛮不错的做法

#11 星期三, 08/18/2010 - 15:42 — yesureadmin (未验证)

这个博客不是规则的更新？

#12 星期三, 08/18/2010 - 16:05 — 晓潘 (未验证)

为什么每个代码的前面都有class="STYLE1">呢？

#13 星期三, 08/18/2010 - 18:56 — 恋爱中的宝贝qvod (未验证)

支持哦！

#14 星期四, 08/19/2010 - 23:50 — 灰烬 (未验证)

看不懂代码啊！！没学过相关知识

#15 星期日, 08/22/2010 - 09:27 — freeman (未验证)

很不错的文章，谢谢分享。

#16 星期一, 09/06/2010 - 01:32 — 安溪铁观音 (未验证)

能看懂基本的HTML

#17 星期六, 12/25/2010 - 11:18 — 泡棉 (未验证)

我只会简单的代码！

必须遵循的20个HTML最佳编写规范

1. 文档类型（Doctype）声明必不可少

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

3. 使用描述性元标记

描述元属性

关键词元属性

4. 使用Divs将页面布局分成几个大块

5. 将内容与视觉表现区分开

坏例子: 内嵌样式

6. CSS代码的精简和整理

7. 精简JavaScript

例子

8. 合理使用标题元素

例如

WordPress代码示例

9.正确合理使用HTML元素

例子

10. 不要什么时候都用Divs

11. 使用无序列表 (<ul>)来导航

无序列表的范例

使用CSS将无序列表式样变成横向导航栏

效果

12. 结束你的标签

例子

13.标记使用小写

坏例子：

好例子：

14. 图片要使用Alt属性

坏例子：

好例子：

15.链接时使用Title属性 (需要时)

坏例子：

好例子

16. 在表单里使用字段集（ Fieldset）和标签（Labels）

例子：

17.使用模块化IE修复

IE 7的例子

IE 6的例子

18.验证代码

19. 代码的一致性

20. 避免过多的注释

发表新评论

随机推荐文章

最新模板

最新评论

最新评论