团队HTML规范

HTML规范

版本号	作者	时间	版本	内容摘要
v1.0	eleven	2018-05-16	1.0.0	文档初始化

目录

• 1.DOCTYPE声明
• 2.页面语言LANG
• 3.CHARSET字符编码
• 4.元素及标签闭合
• 5.书写风格
• 6.类型的属性
• 7.元素属性
• 8.代码缩进
• 9.纯数字输入框
• 10.代码嵌套
• 11.单行注释
• 12.模块注释
• 13.嵌套模块注释
• 14.移动端HTML模版
• 15.PC端HTML模版
• 16.script引用统一放在body结束标签的前面
• 17.defer和async的区别

1.DOCTYPE声明

HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

2.页面语言LANG

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

3.CHARSET字符编码

因为 ISO-8859 中字符集大小是有限的，且在多语言环境中不兼容，所以 Unicode 联盟开发了 Unicode 标准。

• Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。

• Unicode 使文本的处理、存储和运输，独立于平台和语言。

• HTML-5 中默认的字符编码是 UTF-8

4.元素及标签闭合

HTML元素共有以下5种：

• 空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
• 原始文本元素：script、style
• RCDATA元素：textarea、title
• 外来元素：来自MathML命名空间和SVG命名空间的元素。
• 常规元素：其他HTML允许的元素都称为常规元素。

推荐：

    
我是h1标题
    
我是一段文字，我有始有终，浏览器能正确解析

不推荐：

    
我是h1标题
    
我是一段文字，我有始无终，浏览器亦能正确解析

5.书写风格

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

推荐：

不推荐：

6.类型的属性

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

推荐：

不推荐：

7.元素属性

• 元素属性值使用双引号语法
• 元素属性值可以写上的都写上

推荐：

不推荐：

8.代码缩进

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

推荐：

9.纯数字输入框

使用 type="tel" 而不是 type="number"

推荐：

10.代码嵌套

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

推荐：

不推荐：

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

推荐：

不推荐：

11.单行注释

一般用于简单的描述，如某些状态描述、属性描述等

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

推荐：

...

不推荐：

...
 
    

    ...

12.模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符， 表示模块开始， 表示模块结束，模块与模块之间相隔一行

推荐：

   

    ...


    
   

    ...

不推荐：

    ...


   

    ...

13.嵌套模块注释

当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用

推荐：

        
    

        ...
    
    
        
    

        ...
    
    
        

14.移动端HTML模版

推荐：

15.PC端HTML模版

推荐：

16.script引用统一放在body结束标签的前面

因为浏览器生成Dom树的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染；

推荐：

不推荐：

17.defer和async的区别

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。