代码规范

页面语言LANG

推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

  1.     <html lang="zh-CN">

CHARSET

一般情况下统一使用 “UTF-8” 编码

  1.     <meta charset="UTF-8">

元素及标签闭合

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：

  • 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
  • 空元素标签都加 “/” 字符

推荐：

  1. <div>
  2.     <h1>我是h1标题</h1>
  3.     <p>我是一段文字，我有始有终，浏览器能正确解析</p>
  4. </div>
  6. <br/>

不推荐：

  1. <div>
  2.     <h1>我是h1标题</h1>
  3.     <p>我是一段文字，我有始无终，浏览器亦能正确解析
  4. </div>
  6. <br>

更多关于元素及标签关闭：#Elements

书写风格

HTML代码大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

推荐：

  1. <div class="demo"></div>

不推荐：

  1. <div class="DEMO"></div>
  3. <DIV CLASS="DEMO"></DIV>

HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

  1. <!-- 优先使用 IE 最新版本和 Chrome Frame -->
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  4. <!-- HTML文本内容 -->
  5. <h1>I AM WHAT I AM </h1>
  7. <!-- JavaScript 内容 -->
  8. <script type="text/javascript">
  9.     var demoName = 'demoName';
  10.     ...
  11. </script>
  13. <!-- CDATA 内容 -->
  14. <script type="text/javascript"><![CDATA[
  15. ...
  16. ]]></script>

类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

推荐：

  1. <link rel="stylesheet" href="" >
  2. <script src=""></script>

不推荐：

  1. <link rel="stylesheet" type="text/css" href="" >
  2. <script type="text/javascript" src="" ></script>

元素属性

  • 元素属性值使用双引号语法

推荐：

  1. <input type="text">

不推荐：

  1. <input type=text>    
  2. <input type='text'>

更多关于元素属性：#Attributes

特殊字符引用

In certain cases described in other sections, text may be mixed with character references. These can be used to escape characters that couldn’t otherwise legally be included in text.

文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。

在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

推荐：

  1. <a href="#">more&gt;&gt;</a>

不推荐：

  1. <a href="#">more>></a>

更多关于符号引用：#Character references

代码缩进

统一使用两个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

  1. <div class="jdc">
  2.   <a href="#"></a>
  3. </div>

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：

  1. <div>
  2.     <h1></h1>
  3.     <p></p>
  4. </div>    
  5. <p><span></span><span></span></p>

不推荐：

  1. <div>
  2.     <h1></h1><p></p>
  3. </div>    
  4. <p> 
  5.     <span></span>
  6.     <span></span>
  7. </p>

段落元素与标题元素只能嵌套内联元素

推荐：

  1. <h1><span></span></h1>
  2. <p><span></span><span></span></p>

不推荐：

  1. <h1><div></div></h1>
  2. <p><div></div><div></div></p>