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. 特殊情况,你需要在属性值里使用双引号可以用" 单引号可以使用'
7. <img alt="say'hello'" />
7.非标签部分把所有<和&特殊符号用编码表示
例如:
1. 任何小于号(<),不是标签的一部分,都必须被编码为<
8. 任何大于号(>),不是标签的一部分,都必须被编码为>
9. 任何与号(&),不是实体的一部分的,都必须被编码为&
10. 错误 <a href="a.aspx?chapter=1©=2">…</a> IE浏览器不支持
11. 正确 <a href="a.aspx?chapter=1&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.书写扩展性
表书写页面过程中, 请考虑向后扩展性