HTML规范
代码规范
所有html代码小写
所有代码只使用小写:适用于标签名,类名,标签的属性及属性值(text/CDATA例外,作为内容时例外)
<ul class="news-list"><li></li><li></li></ul>
使用html5的doctype
<!doctype html>
页面编码使用gbk
<meta charset="gbk">
页面头部说明注释
必须在 head
区域中加上对页面相关人员注释,方便在产品环境中的查看
<!-- 页面设计:clearYang | 页面制作:clearYang | 团队博客:https://www.cnblogs.com/clearyang/ -->
图片命名
- 图片后缀命名一律小写。
- 使用间隔符
-
进行连接。*一般背景图片以bg-
开头,测试图片以img-
开头,按钮图片以btn-
开头,图标图片以icon-
开头,聚合图以spr-
开头,后跟英文单词,不推荐使用汉语拼音,如果名称过长,适当使用缩写
bg-body.jpg spr-home.png img-promo.jpg btn-submit.png icon-game.png
注释
正确的注释规范:
感叹号后面2个横线,结束时2个横线; 不要在注释内容中使--
,--
只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。 例如下面的代码是错误的:
<!--这里是注释 -这里是注释-->
<!-- -这里是注释 -这里是注释 --->
用等号或者空格替换内部的虚线,这样是正确的
<!--这里是注释============这里是注释-->
去掉类型属性
不要为CSS、JS使用类型属性,特别说明类型(type)属性是多余的,在HTML5中默认已包含
<!--不推荐-->
<
link
href
=
"../css/comm.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
>
<!--mce:0-->
</
script
>
<
script
src
=
"common.js"
type
=
"text/javascript"
>
<!--推荐-->
<
link
href
=
"../css/comm.css"
rel
=
"stylesheet"
/>
<
script
type
=
"text/javascript"
>
<!--mce:1-->
</
script
>
<
script
src
=
"common.js"
>
去掉自闭合元素'/'闭合符
为半闭合元素加上'/'闭合符是没必要的,申明为html5的doctype后,所有浏览器都会正确处理,常见的半闭合元素:img input hr br
对“<”“>”之类的符号进行实体转义
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)
1
2
3
4
|
<!--不推荐--> < a href = "/wiki/" >more>></ a > <!--推荐--> < a href = "/wiki/" >more>></ a > |
元素嵌套规范
段落元素与标题元素只能嵌套内联元素
1
2
3
4
5
|
<!--不推荐--> < a >< p > </ p >< div ></ div >< p > </ p ></ a > < h2 >< div ></ div ></ h2 > <!--推荐--> < p >< span >< span > </ span ></ span ></ p > < h2 >< span > </ span ></ h2 > |