Html5代码编码规范

HTML代码编写规范

 

1  页面代码头部增加“doctype”标签来告知浏览器使用哪种HTML XHTML 规范,doctype完整语句为:

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

<html xmlns="http://www.w3.org/1999/xhtml">

 

html5中直接用<!DOCTYPE html>,可以省略全部标记的元素有:html,head,body,colgroup,tbody,就是说可以设为缺省值

 

2  使用jquery,替代其他js框架,因为jquery对多浏览器的支持相对较好

 

3  关闭所有标签

1html编码中原先就有关闭标记的,如:

<html><body><div><table><tr><td></td></tr></table></div></body></html>,则必须按规定关闭。

html5中可以省略结束标签,有:li,dt,dd,p,rt,rp,optgroup,option,colgroup,thread,tbody,tfoot,tr,td,th不提倡结束

 

2)原先属于独立的不带关闭标记的标签,则需要在结束前的“>”前加“/”,如<meta><img><br><link>等,要写成<meta xxxxxxxxxxxxx /><img xxxxxxxxxxx /><br /><link xxxxxxxxxxx />

html5中不允许写结束标记的元素有:area,base,br,col,comman,embed,hr,img,input,keygen,link,meta,param,source,track,wbr.

 

4所有标签必须小写,如:

1  bgColor 改为bgcolor

2  http-equiv="Content-Type"  改为http-equiv="content-type"

但是<!DOCTYPE 要按规定大写

在class和name和id中命名都应该采用小写,除了js中的基本命令和属性等,在html5代码中也应沿用小写规范。

 

5  各属性的值必须加英文双引号,如:

1<table width=800 border=1> 必须写为<table width=” 800” border=” 1”>

2) <link href=css.css type=text/cssrel=stylesheet />写为

<link href=” css.css” type=” text/css”rel=” stylesheet” />

在html5中,当属性值不包括空字符串、"<",">","=",单引号,双引号等字符时,属性值两边的引号可以为:双引号和单引号以及省略引号都可以

 

6  language=” javascript” 改为<script type="text/javascript"></script>,并且放到<body></body>之间

应该讲js代码放在html结束之后,这样在加载网页时可以更快。

 

7  align="middle"  改为align="center"w3c规范中没有middle属性

 

8  <table  borderColor="#D5CBC1"height="700" > ,去掉borderColorheight属性,因为tableborderColorheight属性。需要的话可在css里定义。

html5中将有关样式的属性都基本扔到了css里面 ,原则上html标签属性中不要出现样式属性,能使用css替代的元素,basefont,big,center,font,s,

strike,tt,u元素。html5中已经将这些元素废除了。s和strike可以由del元素替代,tt可以由font-family

 

 

9  location.href(“地址”) 改为location.href =“地址

 

10             <a href=”#” onclick=”javascript:XXX()”>  改为<a href=” javascript:void(0)” onclick=”javascript:XXX()”>,js方法不直接暴露在网页链接上,并且执行后不进行页面跳转,不会到因为“#”而到页面的顶部。

 

特殊情况:IE6如果在当前窗口打开的操作,<a href=” javascript:void(0)” onclick=”javascript:XXX()”>,页面上没有反应,可以写成<a href=”###” onclick=”javascript:XXX()”>

 

11             统一使用document.getElementByIdx_x("idName")获取对象值,避免出现直接用对象的id值获取对象的方式,如idname.style

直接使用对象在ie和ff中会有不兼容的情况。

 

12             <form>里面一定要有idname属性,获取form对象值使用:

document.getElementByIdx_x("FormName")

 

 

13             统一使用var关键字来定义常量

 

14             统一使用document.formName.elements["elementName"]获取form对象值

 

15             对于集合类对象,统一使用[]来获取值,如

 

1  document.forms("formName") 改为document.forms["formName"]

2  document.getElementsByName("inputName")(1) 改为

document.getElementsByName("inputName")[1]

 

 

16             <style> 标签要写到head内,不能写到body中。

        <script></script>标签要写在head body 内,如果不是必须马上加载的,建议写在</body>之前。

17             javascript 中的逻辑运算符两边要加空格。如for(vari=0;i < str.length;i++) 小于号两边要加空格。

18             javascript中拼字符串的带html标签的,例如:var str="<span>您上次学习的内容为"+ lastcinf.chapterName+"”</span>" ,最后的"”</span>"要写为"”<\/span>"

19             要将&显示到页面中时,需要写成&amp;

例如:

<ahref="/lear/lea_todd.jspr?jmethod=studyInfo&pages=1">首页</a>

要写成:

<a href="/lear/lea_todd.jspr?jmethod=studyInfo&amp;pages=1">首页</a>

 

20             避免使用模态窗口,因为operasafari不支持模态窗口。

21             <tr><td>等标签中使用到width属性,标准写法是width=”30” style=”width:30px;”,不能写成width=”30px”

22             <img>标签alt属性是必需的,如果没有特殊要求,要写成<img src=”…” alt=””>

23             于表示多行大段文字的,减少<br/>的使用,每行用<p></p>处理。

24             所有标签内的属性都要有值。例如:<frame noresize>要写成<frame noresize="noresize">

在html5中不再使用frame框架,frameset,frame,noframes元素不支持,只支持iframe框架

posted @ 2013-02-27 14:37  画零落香  阅读(412)  评论(0编辑  收藏  举报