首页  |  知识库  |  资源下载  |  在线工具  |  A-Z  •  JAR  •  名词查         

关于前端开发中关于HTML、CSS及JAVASCRIPT代码规范(注释、标签及引用等)

标签:前端开发,开发规范,javascipt,css,html,代码标准     发布时间:2018-02-05   

1.HTML字符编码及兼容模式

字符编码

通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。

例如:编码格式要求

<meta http-equiv="content-type" content="text/html;charset=utf-8">

  IE 兼容模式 IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

  例如:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

2.所有标记必须有一个相应的结束标记

例如:

A、成对标签

1.   <p>…</p>@b@2.   <li>…</li>

B、独立标签

1.   <br />
2.   <img height="80" alt="网页" src="../images/logo.gif" width="200" />

3.引入JS库文件,文件名须包含库名称及版本号及是否为压缩版

例如:文件名格式为库名称 + 插件名称, js文件引用尽量放到body结果之后,降低js加载对页面的影响

1.    <script type="text/javascript" src="2.    <script type="text/javascript" src="http://cmsjs.******.com/js/jQuery.cookie.js.js"></script>

4.元素和属性的名字都必须使用小写

例如:

1.   <TITLE>   必须写成   <title>@b@2.   ======分割线======@b@1.   <BODY>    必须写成   <body>@b@2.   ======分割线======@b@3.   <a onMouseOver="">我是链接</a>@b@4.   必须写成@b@5.   <a onmouseover="">我是链接</a>

5.所有的HTML标记都必须合理嵌套

例如:

1.   <p><b></p></b>
2.   必须修改为:
3.   <p><b></b></p>

6.所有的属性必须用引号""括起来

例如:

1.   <table height=80>…</table>
4.   必须修改为:
5.   <table height="80">…</table>
6.   特殊情况,你需要在属性值里使用双引号可以用&quot; 单引号可以使用&apos;
7.   <img alt="say&apos;hello&apos;" />

7.非标签部分把所有<和&特殊符号用编码表示

例如:

1.   任何小于号(<),不是标签的一部分,都必须被编码为&lt;
8.   任何大于号(>),不是标签的一部分,都必须被编码为&gt;
9.   任何与号(&),不是实体的一部分的,都必须被编码为&amp;
10. 错误 <a href="a.aspx?chapter=1&copy=2">…</a> IE浏览器不支持
11. 正确 <a href="a.aspx?chapter=1&amp;copy=2">…</a>推荐

8.属性赋值 (没有值的重复本身):

例如:

1.   <input type="checkbox" checked>
12. 必须修改为:
13. <input type="checkbox" checked="checked">
14. ==============分割线==============
15. <option selected>S1</option>
16. 必须修改为:
17. <option selected="selected">S1</option>

9.不要在注释内容中使用的符号

“--”只能发生在XHTML注释的开头和结束,在内容中不再有效。

例如:

1.   <!--这里是注释-----------这里是注释-->

10.XHTML 1.0文件类别宣告的正确写法 (大小写规范必须遵循)

过度标准(Transitional)

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

框架标准(Frameset)

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

严格标准(Strict) 包含以上须注意的问题,还有其他更严格的标准

1.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5标准
<!DOCTYPE html>

采用HTML标准申明时必须考虑浏览器兼容(重要页面目前不允许采用HTML5申明)

11.【建议】头部代码

所有的网页头文件都必须包含如下代码:
<head>@b@	<meta http-equiv="content-type" content="text/html; charset=编码" />@b@	<meta http-equiv="content-language" content="zh-cn" />@b@	<meta name="keywords" content="关键字(不超过50个词,尽量限制在35个词以内)" />@b@	<meta name="description" content="描述(110个汉字以内,220个英文字符)"/>@b@	<title>标题</title>@b@</head>

12.同一个id选择器不可重复使用

一个网页中id="xx"不能重复使用,若需要重复请用name="xx"或class="xx"

13.【推荐】JavaScript写法

错误写法:
1.   <script>…</script>
2.   <script language="javascript">…</script>
正确写法(必须添加type标签):
1.   <script type="text/javascript">…</script>
2.   <script language="javascript" type="text/javascript">…</script>
3.   <script type="text/javascript" src="script.js">…</script>

14.图片标签加上文字说明alt="说明"

例如:
1.   <img src=”” /> 错误
2.   <img src=”” height=”” width=”” alt="说明文字" /> 正确

15.建议】正确使用CSS样式表

一定要放在<head></head>之间
1.   <link rel="stylesheet" type="text/css" href="style.css" />
2.   <style type="text/css">
3.   body{font-size:9pt;}
4.   </style>
5.   必须添加type标签
6.   错误写法 <style>…</style>
7.   正确写法 <style type="text/css">…</style>

16.引入外部样式文件及脚本文件采用时间戳后缀

         防止由于缓存问题导致页面不能及时更新

例如:<link rel="stylesheet" type="text/css" href="style.css?20140215" />

17.语义化html,如标题根据重要性用h1~h6

语义化html,如标题根据重要性用h1~h6(同一页面只能有一个h1), 段落标记用p,列表用ul,内联元素中不可嵌套块级元素;

18.非特殊情况下样式和脚本代码必须独立于xhtml代码外部文件中

非特殊情况下样式和脚本代码必须独立于xhtml代码外部文件中, 渲染执行脚本必须外链至页面底部,一般置于</body></html>之间

19.在不需要爬虫爬的a标签上,加上rel="nofllow"属性

例如: <a rel="nofollow" href="http://******/index.htm">Go </a>

20.必须为含有描述性表单元素(input, textarea)添加label

例如:
姓名: <input type="text" id="name" name="name" />@b@姓名: <input type="text" id="name" name="name" />

21.能以背景形式呈现的图片,尽量写入css样式中

例如:
错误:<img src=” pic.png”/>正确:写在css里: background: url("pic.png") no-repeat scroll 0 8px rgba(0, 0, 0, 0);

22.表格用法

表格通常会指定宽与高,这样做是没有办法通过W3C,请使用CSS来控制标。尽量使用div代替不必要的table。

23.链接规范

http://www.******.com 与 http://www.******.com/ 的区别
服务器如果接收到的URL是http://www.******.com,它会自动重新定向到http://www.******.com/,虽然最后都打开了网站的首页,但是前者比后者多走了一步,重定向,显然多多少少浪费了一定的时间。
所以以后我们加URL链接的时候,别忘了把最后的“/”给加上去。

24.书写扩展性

表书写页面过程中, 请考虑向后扩展性