HTML开发与说明规范文档

时间：2010-09-21 来源：幻(--)指

本文转自:http://enzit.cn/news/html/web/278.html

一,HTML部分命名的规范

ID和CLASS的使用，在开发过程中会遇到JS调用ID和CSS调用ID与CLASS的地方，遇到这种情况，由于JS和CSS可能不是一个人书写或者命名的，所以在最开始的HTML书写时需要统一规范命名。

1，项目开发中统一使用class来进行样式的命名。

解释：HTML元素如果需要有样式的调用，全部统一使用class来进行挂钩。
例子：
HTML部分统一使用如下进行书写。不再使用ID属性。
<div class=’top’></div>
<div class=’left’></div>
<div class=’main’></div>
<div class=’bottom’></div>

2，项目开发中统一使用ID来进行单独元素的命名和与JS产生相应关系的命名。

解释：HTML元素如果有唯一的单独的元素，需要使用id来进行命名。（此中情况比较少，意味着希望以后所有的项目页面中尽量减少ID属性的使用），如果出现了ID就意味着此元素在此页面中属于唯一的，且有JS与之产生关联。
例子：
HTML部分：
<div class=’top’ ></div>
<div class=’ left’ id=’moveobj’></div>
<div class=’main’></div>
<div class=’bottom’></div>
JS部分：
$(“#moveobj”). animate({left:”100px”},200); //ID为moveobj的元素向左移动100PX。

3，项目开发中使用Class来统一选择多个选择器包含的元素。

解释：HTML元素中如果有多个元素需要使用JS进行统一的操作和选择，使用Class属性来进行选择。
例子：
HTML部分：
<div class=’top’ >
<div class=’topmuen’></div>
<div class=’topmuen’></div>
<div class=’topmuen’></div>
<div class=’topmuen’></div>
</div>
<div class=’ left’ id=’moveobj’></div>
<div class=’main’></div>
<div class=’bottom’></div>
JS部分：
$(“.top .topmuen”). animate({left:”100px”},200); //class为top下的所有class名为topmuen的元素向左移动100PX。

二,HTML属性介绍和常用实例

元素：ol ul dir li;
以上的元素产生列表，目录，和导航元素。不再解释，只要出现这些元素名，你在操作的就是列表，目录或导航。

元素：div;
Div元素基本上是产生布局使用，而且是大块的布局，比如上左下右的一些基本布局或者大的层面布局。属于我常用的布局元素。

元素：span;
此元素出现基本是在行内，或者div内部出现，不会单独独立出现在上层，我一般不用做布局元素，是解释修饰元素。

元素：table,tr,td,thead,tbody,tfoot;
表格元素，产生于数据相关联的布局元素。切忌以后再表格元素的命名上也只使用class来进行命名和样式的操作，请不要在table中使用id，一开始就用id优先级太高后期修改和扩展很困难。
例子：
<table class=’tableobj’>
<thead>
<tr>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td class=’tablechild’>内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾部标注</td>
</tr>
</tfoot>
</table>

使用JS操作：$(“.tableobj’”);
CSS操作：
.tableobj{/**/}
.tableobj thead th{/**/}
.tableobj tbody td{/**/}
统一的样式这样来写，如果局部有所不同，单独再加class进去。比如10个表格基本都一样的样式很多，只有细节地方有颜色或者宽度的不同。
.tableobj .tablechild{/*单独的局部样式*/}

其他规则依旧按照最开始的3条进行。

元素：form,input, label, textarea, fieldset, legend;
以上元素均出现在表单部分，在表单部分的布局和JS书写方面其实是比较复杂的。所以在这里依然按照全部使用class来进行布局的原则。
尤其需要注意的是input的样式使用，之前的很多按钮和输入文本input元素，在按钮的操作中都是src标示的图片地址直接产生一个按钮，道理上来说是不好的，因为如果没有了submit，那么image类型的按钮就会替代submit，在js中阻止事件冒泡就会失灵。正确的按钮书写应该如下：

提交按钮：
<input type=’submit’ class=’sub’> //此按钮会提交表单
操作按钮：
<input type=’ button’ class=’btn’> //此按钮什么也不执行，如果需要跳转页面用a标签来做，如果触发js操作加ID然后通过js进行操作。（button的应用应该就是后者）;

尽量不使用除此之外的按钮type类型。

表单：表单在布局时我可以使用的属性部分：
Class,我可能会对表单进行样式的调整为了节约HTML元素。
ID我不会对from元素进行添加，那些留给程序开发来用。其他的属性我也不会使用。
特别注意：禁止对<form></form>元素进行随意的包裹其他元素，这样会产生很多意想不到的BUG，比如页面变形或者编辑器报错，IE6下布局失效，或者表单提交不上去。
正确的方法是：使用到表单的时候只用from包裹需要操作的部分即可。不要涵盖太多，而且form元素也是一个布局元素。有自己的默认的样式，也可能有定义的全局样式。

Input中的text类型和textarea元素：
JS操作的部分使用id或者name来进行操作，样式部分使用class来操作。
个人建议，如果可以少用属性则直接使用name来操作。因为在最后加验证或者JS交互的时候，name在这2个元素中是必须的，而id不是必须的。
例子：
<input type=’text’ class=’textobj’ name=’username’>
JS操作：
$(“input[name=’username’]”);

为什么不用class？因为很可能N多text是重复一个class的，class就是可重用的不固定的，所以在js中不要轻易使用class来进行选择，name和id则肯定是唯一的。
当然也可以根据默认的value值来进行操作比如单选或者多选按钮。
JS操作：
$(“input[value=’nan’]”);
$(“input[value=’nv’]”);

三,HTML部分标准的头部声明

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

解释：统一使用xhtml1-strict.dtd严格的HTML书写标准，此标准最不容易变形和对未来的HTML5和CSS3留有升级余地。
HTML使用中文字符集和UTF-8编码，一期的项目应该就是了。
然后强制IE8按照IE7的浏览器兼容模式来进行解析，原因是IE8还是处于测试阶段。且这样来做可以避免在IE8下再进行兼容测试。

至于一些其他的比如"deｓｃｒｉｐｔion"，"keywords"，"author"，"generator"的使用就根据需要来进行决定了。分别是网页描述，关键字，编写者，版本。

HTML部分基本结束，开发中可能还会有所补充。

四,HTML注释规则

HTML部分的注释代码示例：

<div class='top'>
</div>