DOCTYPE声明

在页面开头使用这个简单的doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；

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

  1. <!DOCTYPE html>

lang属性

根据HTML5规范：

应在html标签加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应该怎么去发音和翻译。

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

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

字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。

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

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

由于历史原因，有些业务可能会使用 GBK 编码：

  1. <meta charset="GBK">

元素及标签闭合

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允许的元素都称为常规元素。

元素标签的闭合应遵循以下原则：

  • 原始文本元素、RCDATA元素以及常规元素都有一个开始标签来表示开始，一个结束标签来表示结束。
  • 某些元素的开始和结束标签是可以省略的，如果规定标签不能被省略，那么就绝对不能省略它。
  • 空元素只有一个开始标签，且不能为空元素设置结束标签。
  • 外来元素可以有一个开始标签和配对的结束标签，或者只有一个自闭合的开始标签，且后者情况下该元素不能有结束标签。

团队约定

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

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

推荐：

  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/>

IE兼容模式

用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；
如果你想要了解更多，请点击这里；
不同doctype在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  5.   </head>
  6.   ...
  7. </html>

书写风格

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规范，通常在引入CSS和JS时不需要指明 type ，因为 text/css 和 text/javascript 分别是它们的默认值。

  1. <link rel="stylesheet" href="demo.css">
  3. <style>
  4.   ...
  5. </style>
  7. <script src="demo.js"></script>
  9. <script>
  10.   ...
  11. </script>

元素属性

元素属性值使用 双引号 语法，不要使用单引号。

推荐：

  1. <input type="text">

不推荐：

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

boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
更多内容可以参考 WhatWG section on boolean attributes：

boolean属性的存在表示取值为true，不存在则表示取值为false

  1. <input type="text" disabled>
  3. <input type="checkbox" value="1" checked>
  5. <select>
  6.   <option value="1" selected>1</option>
  7. </select>

特殊字符的引用

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

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

推荐：

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

不推荐：

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

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

代码缩进

统一使用 两个 空格进行代码缩进。

代码嵌套

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

推荐：

  1. <div>
  2.   <p></p>
  3.   <h1></h1>
  4. </div>
  6. <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></p>

不推荐：

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

注释规范

标准写法：

  1. <!--Comment Text-->

错误写法：

  1. <!-->The Wrong Comment Text-->
  3. <!--->The Wrong Comment Text-->
  5. <!--The--Wrong--Comment Text-->
  7. <!--The Wrong Comment Text--->

团队约定

单行注释

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

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

推荐：

  1. <!-- Comment Text -->
  2. <div>...</div>

不推荐：

  1. <div>...</div><!-- Comment Text -->    
  3. <div><!-- Comment Text -->
  4.     ...
  5. </div>

模块注释

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

注释内容前后各一个空格字符，<!-- S Comment Text --> 表示模块开始，<!-- E Comment Text --> 表示模块结束，模块与模块之间相隔一行。

推荐：

  1. <!-- S Comment Text A -->    
  2. <div class="mod_a">
  3.   ...
  4. </div>
  5. <!-- E Comment Text A -->
  7. <!-- S Comment Text B -->    
  8. <div class="mod_b">
  9.   ...
  10. </div>
  11. <!-- E Comment Text B -->

不推荐：

  1. <!-- S Comment Text A -->
  2. <div class="mod_a">
  3.     ...
  4. </div>
  5. <!-- E Comment Text A -->
  6. <!-- S Comment Text B -->    
  7. <div class="mod_b">
  8.     ...
  9. </div>
  10. <!-- E Comment Text B -->

嵌套模块注释

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

  1. <!-- S Comment Text -->
  2. <!-- E Comment Text -->

而改用：

  1. <!-- /Comment Text -->

注释写在模块结尾标签底部，单独一行。

  1. <!-- S Comment Text A -->
  2. <div class="mod_a">
  4.   <div class="mod_b">
  5.     ...
  6.   </div>
  7.   <!-- /mod_b -->
  9.   <div class="mod_c">
  10.     ...
  11.   </div>
  12.   <!-- /mod_c -->
  14. </div>
  15. <!-- E Comment Text A -->

文件模板

HTML模板指的是团队使用的初始化HTML文件，里面会根据不同的平台而采用不一样的配置，一般主要不同的设置就是 <meta> 标签的设置，以下是移动端和PC的HTML模板。

HTML5标准模板

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>HTML5标准模版</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>

移动端

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta http-equiv="Cache-Control" content="no-siteapp">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  8.   <meta name="format-detection" content="telephone=no, email=no">
  9.   <meta name="renderer" content="webkit">
  10.   <meta name="keywords" content="">
  11.   <meta name="description" content="">
  12.   <title>移动端HTML模版</title>
  14.   <!-- S DNS预解析 -->
  15.   <link rel="dns-prefetch" href="">
  16.   <!-- E DNS预解析 -->
  18.   <!-- S 样式 --> 
  19.   <link rel="stylesheet" href="styles/xxxplugin.css" >
  20.   <!-- /第三方插件 -->
  22.   <link rel="stylesheet" href="styles/xxxcustom.css" >
  23.   <!-- /自定义 -->
  24.   <!-- E 样式 -->
  26. </head>
  27. <body>
  29. </body>
  30. </html>

PC端

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="keywords" content="your keywords">
  6.   <meta name="description" content="your description">
  7.   <meta name="author" content="author,email address">
  8.   <meta name="robots" content="index,follow">
  9.   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  10.   <meta name="renderer" content="ie-stand">
  11.   <title>PC端HTML模版</title>
  13.   <!-- S DNS预解析 --> 
  14.   <link rel="dns-prefetch" href="">
  15.   <!-- E DNS预解析 --> 
  17.   <!-- S 样式 --> 
  18.   <link rel="stylesheet" href="styles/xxxplugin.css" >
  19.   <!-- /第三方插件 -->
  21.   <link rel="stylesheet" href="styles/xxxcustom.css" >
  22.   <!-- /自定义 -->
  24.   <!-- E 样式 -->
  25. </head>
  26. <body>
  28. </body>
  29. </html>

属性顺序

属性应该按照特定的顺序出现以保证易读性；

  • class
  • id
  • name
  • data-*
  • src, for, type, href, value , max-length, max, min, pattern
  • placeholder, title, alt
  • aria-*, role
  • required, readonly, disabled

class 是为高可复用组件设计的，所以应该出在第一位；
id 更加具体且应该尽量少使用，所以将它放在第二位；

JS生成标签

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。