HTML

目录

HTML 开发规范
概述
一、在HTML 5标准上的强化规则
二、内容模型
三、Doctype
四、TITLE元素
五、META元素
六、TABLE元素
七、TH元素
八、A元素
九、LINK元素
十、IMG元素
十一、FORM元素
十二、INPUT元素
十三、LABEL元素
十四、EMBED元素
十五、IFRAME元素
十六、(X)HTML注释
十七、HTML书写规范
十八、HTML常见错误举例
十九、Flash相关
二十、请不要使用已过时的标记 如font,s,u等。

HTML 开发规范

概述

制定本规范的目的在于使我们的(X)HTML能够适应更多的客户端,符合标准的好处就在于此,而不在于机械化的执行。
建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup),即DCDVR的流程。首先对 (X)HTML模板 进行规划,然后才开始编码,编码的同时进行Debug,Validate和代码片断的总结,而不是在所有模板都完成后才进行这三个步骤。

一、在HTML 5标准上的强化规则

1.一般规则

  • 所有非空元素必须有闭合tag,如 <p>这是一个段落</p>

  • 元素名称和属性名称全部小写

  • 属性值必须使用双引号包围

  • 在某些脚本必要的地方才使用 name 属性,否则一律使用id属性

  • 禁止 id 属性重复

  • 在属性值和元素内容出现的地方,如果有字符&、< 、 > 、那么应当分别使用

&amp;、&lt;、&gt
&amp;、&lt;、&gt

 

2.样式分离规则

  • 样式统一在 head 元素中使用 link 元素引用,不得在 head 元素以外的地方添加样式,不得在元素中使用 style 属性,不应当在元素中使用其他样式属性,如 background 等,不应当使用具有样式特征的元素,如 br, hr 等,其中br元素代表语气停顿,通常用于诗句,但这并不表示任何需要换行的地方就应当使用br元素。

  • 可以将样式统一写在 <head> 元素中的 <style> 元素中,但必须保证该样式是当前页面的唯一样式,如果该样式被其他页面同时使用,那么应当考虑抽离出来形成外部文件,除非样式只在当前页面调用。

3.脚本分离规则

  • 脚本仅能出现在 head 元素内和 body 元素闭合tag即 </body> 前。不得在任何元素中使用event相关属性,如 onclick 等。

二、内容模型

1.本规范的内容模型应当遵循HTML 5 提供的内容模型,其中的主要规则总结如下:

  • 能够包含块级元素和行级元素的元素有 fieldset, div, li, object

  • 只能包含行级元素的元素有 h1 – h6, pre, p, address, 其他行级元素如 a 等

  • 只能包含块级元素的元素有 noscript, blockquote, form

  • 其余元素只能包含一些特定的元素,包括 table, ul, ol,dl, select

三、Doctype

一律使用使用W3C的HTML 5标准,文档以下内容规定了符合该Doctype需要满足的要求

<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<link rel="stylesheet" href="" charset="utf-8" />
<title></title>
<style></style>
</head>
<body>
<script charset="utf-8"></script>
</body>
</html>

禁止强制浏览器渲染模式,像 <meta http-equiv=”x-ua-compatible” content=”ie=7″ />

四、TITLE元素

  • head 元素中必须包含 title 元素

五、META元素

必须包含<meta charset=”gbk” />或<meta charset=”gb2312″> ,VM是使用GBK编码,所以页面也需要GBK解码。但静态的js和css文件是UTF-8编码的,所以在导入时需加上charset=“utf-8”。 如<script src=“xxx.js” charset=“utf-8” />,推荐写法是:

<meta charset="gb2312" /> 或
<meta charset="gbk" />
  • 必须作为 head 元素的第一个子元素出现

六、TABLE元素

  • 最好指定 summary 属性

  • 必须显示包含 tbody 元素

七、TH元素

  • 最好指定 scope 属性

八、A元素

  • 不应当使用 name 属性,而用 id 替代

  • 当 input 元素的顺序由于样式需要调整时,应当指定 tabindex 属性

  • 关键的链接处应当指定 accesskey 属性

  • 作为链接使用时,必须添加 href 属性,特别是有 a:hover状态时

  • 「虽然这样要以做到,但不是万不得已,千万别用」解决怪异的虚线框,为IE6 添加 hidefocus=“true”,其他浏览器使用CSS outline:none,firefox有个bug, 请用

  • ::moz-focus-inner{border:0;}

九、LINK元素

  • 当 link 元素用于引用CSS文档时,默认 media 是 screen,如为特殊终端提供样式,请指定 media 属性,如 media=”print”


十、IMG元素

  • 必须指定 alt 属性

  • frame、iframe、img、embed标签必须带上src属性

十一、FORM元素

  • form中严禁再嵌套form元素

  • 推荐是form>fieldset

十二、INPUT元素

  • 一个form有且只有一个type=“submit”的input按钮

  • 禁止在form表单中使用<a />绑定onclick等事件来替代input[PAD:type=submit]提交表单

  • 当 input 元素的顺序由于样式需要调整时,应当指定 tabindex 属性。密码控件下载的链接有点变成,因为代码里让链接失焦,所以tabindex会有问题。我的做法是,用 AlieditControl.url.downSrc获取当前系统的下载链接,删除js勾子,并把链接替换掉当前的#号,设置正确的tabindex就 正常了。

  • 关键的控件处应当指定 accesskey 属性 可参考的accesskey标准

  • 禁用<input type=”hidden” /> 嵌套在 <table><tr> 之间

十三、LABEL元素

  • 与控件对应的文本必须使用 label 元素标记,且使用 for 属性指向该控件 id

十四、EMBED元素

  • 不得使用该元素嵌入对象,如果需要在页面中嵌入flash,应当使用javascript

  • 如果使用该元素,要遵循“frame、iframe、img、embed标签必须带上src属性

十五、IFRAME元素

  • 尽量不要使用iframe元素

  • frame、iframe、img、embed标签必须带上src属性,且为https引用。如果是空地址,请使用以下方法:

<iframe src="javascript:'';"></iframe>

十六、(X)HTML注释

需要注释的内容有

  • 注意事项,或是给其他人的提醒。

  • 模块:在跨越很多很多行的包裹元素的闭合标签位置添加 <!- #ID or .class->。

十七、HTML书写规范

  • DOCTYPE声明和html元素之前不用空格,其余元素均根据父元素的位置缩进一个tab的距离,tab距离可以是4个空格。

十八、HTML常见错误举例

  • 重复ID项,没有名为submit等保留字的ID的元素或者name的元素。

十九、Flash相关

动态变量:<param name= “flashvars” value=”变量名=值&变量名2=值2&变量名3=值3″/> 比如Flash中有链接,但这个链接没确定,我们可以把链接写在vm中。如:传变量liks1 liks2 liks3 这3个变量:

1 <pre><param name= "flashvars"value="liks1=$userModule.setTarget('login.vm')&liks2=$productModule.setTarget('productDetail.vm').addQueryData('id','9')&liks3=$productModule.setTarget('disPackage.vm')"/></pre>

背景透明:

1 <pre><param name="wmode" value="transparent" /></pre>

低z-index:

1 <pre><param name="wmode" value="opaque" /></pre>

跨域访问:

1 <pre><param name="allowScriptAccess" value="always" /></pre>

推荐写法:

1 <pre><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"WIDTH="100%" HEIGHT="100%" id="someflash">
2   <param name="movie" value="someflash.swf" />
3   <param name="quality" value="high" />
4   <param name="wmode" value="transparent" />
5   <embed src="someflash.swf" quality="high" wmode="transparent"width="100%" height="100%" name="someflash" align=""type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
6 </object></pre>

二十、请不要使用已过时的标记 如font,s,u等。


你可能感兴趣的:(HTML)