Web入门——HTML代码编写规范

我就是我 2022-10-01 02:47 244阅读 0赞

本文总结了十几条html代码编写指南，只要在编写HTML代码的过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。

## 1、一定要闭合HTML标签 ##

在以往的页面源代码里，经常看到这样的语句：

<li>Some text here.
    <li>Some new text here.
    <li>You get the idea.

也许过去我们可以容忍这样的非闭合HTML标签，但在今天的标准来看，这是非常不可取的，是必须百分百避免的，一定要注意闭合你的HTML标签，否则将无法通过验证，并且容易出现一些难以预见的问题。

最好使用这样的形式：

## 2、声明正确的文档类型(DocType) ##

笔者发现在许多CSS论坛里，如果有用户遇到问题，大家通常会建议他首先做两件事：

1）验证CSS文件，解决所有可见的错误；

2）加上文档类型Doctype；

通常有4种文件类型可供选择：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。**<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令**，在 HTML 4.01 中，<!DOCTYPE>声明引用 DTD（文档类型定义，Document Type Definition），因为 HTML 4.01 基于 SGML（标准通用标记语言，Standard Generalized Markup Language），SGML 是一种很强大但很复杂的标记语言，HTML、XML 就是从中衍生出来的。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，不需要引用 DTD，只需要写<!DOCTYPE HTML>即可。

## 3、不要使用嵌入式CSS样式 ##

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点嵌入式css代码，就像下面这样：

这样看起来即方便又没有问题，但是它会在你得代码中产生问题。在你开始写代码时，**最好是在内容结构完成之后再开始加入样式代码**。这样的编码方式就像打游击，是一种很山寨的做法。更好的做法是，把这个p的样式定义在样式表文件里。

## 4、在页面head标签中引入所有的样式表文件 ##

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范**建议在网页的head标记中引入**，这样可以加快页面的渲染速度。在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。

<head> 
    <title>My Favorites Kinds of Corn</title> 
    <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> 
    </head>

## 5、在页面底部引入javascript文件 ##

要记住一个原则，就是**让页面以最快的速度呈现在用户面前**。当加载一个脚本时，页面会暂停加载，直到脚本完全载入。所以会浪费用户更多的时间。如果你的JS文件只是要实现某些功能，比如点击按钮事件，那就放心的在body底部引入它，这绝对是最佳的方法。举例：

<body>
    <p>And now you know my favorite kinds of corn. </p> 
    <script type="text/javascript" src="path/to/file.js"></script> 
    <script type="text/javascript" src="path/to/anotherFile.js"></script> 
    </body> 
    </html>

## 6、不要使用嵌入式JavaScript，这都21世纪了! ##

许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“addEventListener/attachEvent”加入时间侦听器。或者使用jquery等框架，只需要使用其“clock”方法。

$('a#moreCornInfoLink').click(function() {  
    alert('Want to learn more about corn?');  
    });

## 7、开发中随时进行标准验证 ##

很多人并不真正理解标准验证的意义和价值，一句话，标准验证是为你服务的，不是给你找麻烦的。如果你刚开始从事网页制作，那强烈建议你下载这个网页开发工具条（https://addons.mozilla.org/en-US/firefox/addon/60），并在编码过程中随时使用“HTML标准验证”和“CSS标准验证”。如果你认为CSS是一种非常好学的语言，那么它会把你整的死去活来。你的不严谨的代码会让你的页面漏洞百出，问题不断，一个好的方法就是——验证，验证，再验证。

## 8. 下载Firebug ##

Firebug是当之无愧的网页开发最佳插件，它不但可以调试JavaScript，还可以直观的让你了解页面标记的属性和位置。不用多说， 下载它![（https://addons.mozilla.org/cn-ZH/firefox/addon/1843）][https_addons.mozilla.org_cn-ZH_firefox_addon_1843]

## 9. 使用Firebug ##

据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。

Firebug教程：

Overview of Firebug（[http://michaelsync.net/2007/09/08/firebug-tutorial-overview-of-firebug][http_michaelsync.net_2007_09_08_firebug-tutorial-overview-of-firebug]）

Debug Javascript With Firebug – video tutorial（[http://www.digitalmediaminute.com/screencast/firebug-js/][http_www.digitalmediaminute.com_screencast_firebug-js]）

## 10、使用小写的标记 ##

理论上讲，你可以像这样随性的书写标记：

<DIV> 
    <P>Here's an interesting fact about corn. </P> 
    </DIV>

最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：

<div> 
    <p>Here's an interesting fact about corn. </p> 
    </div>

## 11、使用UL列表布局导航菜单 ##

通常网站都会有导航菜单，你可以用这样的方式定义：

<div id="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    </div>

如果你想书写优美的代码，那最好不要用这种方式，为什么要用UL布局导航菜单?——因为UL生来就是为定义列表准备的。最好这样定义：

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

## 12、学会怎样对付IE ##

IE一直以来都是前端开发人员的噩梦!如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：

这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“\[if lt IE 7\]”改为“\[if lte IE 7\]”。

## 13、压缩前端代码 ##

Javascript压缩服务：

Javascript Compressor（[http://javascriptcompressor.com/][http_javascriptcompressor.com]）  
JS Compressor（[http://www.xmlforasp.net/JSCompressor.aspx][http_www.xmlforasp.net_JSCompressor.aspx]）

CSS压缩服务：

CSS Optimiser（[http://www.cssoptimiser.com/][http_www.cssoptimiser.com]）  
CSS Compressor（[http://www.cssdrive.com/index.php/main/csscompressor/][http_www.cssdrive.com_index.php_main_csscompressor]）  
Clean CSS（[http://www.cleancss.com/][http_www.cleancss.com]）

## 14、为所有的图片加上属性 ##

为图片加上alt属性的好处是不言而喻的——这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的图片信息，并且对图像搜索引擎友好。firefox不支持显示图像Alt属性，可以加入title属性：

## 15、分清块级元素、行内元素和空(void)元素 ##

首先，CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有<a> <b> <span> <img> <input> <select> <strong> <label> <em> <button> <textarea>；块级元素有：<div> <ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h2> <h4>…<p> <blockquote>；没有内容的 HTML 内容被称为空元素，空元素是在开始标签中关闭的，常见的空元素：<br> <hr> <img> <input> <link> <meta>。鲜为人知标签是<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>，不同浏览器（版本）、HTML4 或5、CSS2等实际略有差异。

## 16、查看源代码 ##

没有什么比模仿你的偶像能让你更快的学习HTML。起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬!

留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。

## 17、了解浏览器引擎 ##

浏览器引擎主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：**负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式**，然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS引擎：**解析和执行javascript来实现网页的动态效果**。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，现在的浏览器内核就倾向于只指渲染引擎。

[https_addons.mozilla.org_cn-ZH_firefox_addon_1843]: https://addons.mozilla.org/cn-ZH/firefox/addon/1843
[http_michaelsync.net_2007_09_08_firebug-tutorial-overview-of-firebug]: http://michaelsync.net/2007/09/08/firebug-tutorial-overview-of-firebug
[http_www.digitalmediaminute.com_screencast_firebug-js]: http://www.digitalmediaminute.com/screencast/firebug-js/
[http_javascriptcompressor.com]: http://javascriptcompressor.com/
[http_www.xmlforasp.net_JSCompressor.aspx]: http://www.xmlforasp.net/JSCompressor.aspx
[http_www.cssoptimiser.com]: http://www.cssoptimiser.com/
[http_www.cssdrive.com_index.php_main_csscompressor]: http://www.cssdrive.com/index.php/main/csscompressor/
[http_www.cleancss.com]: http://www.cleancss.com/