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&gt;&gt;</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>
posted @ 2018-10-30 09:56  clearYang  阅读(212)  评论(0编辑  收藏  举报