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 的文档声明：
<!DOCTYPE html>
2.页面语言LANG
推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
<html lang="zh-CN">
3.CHARSET字符编码
因为 ISO-8859 中字符集大小是有限的，且在多语言环境中不兼容，所以 Unicode 联盟开发了 Unicode 标准。
Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。
Unicode 使文本的处理、存储和运输，独立于平台和语言。
HTML-5 中默认的字符编码是 UTF-8
<meta charset="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允许的元素都称为常规元素。
推荐：
<div>
<h1>我是h1标题</h1>
<p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
<br>
不推荐：
<div>
<h1>我是h1标题</h1>
<p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>
<br/>
5.书写风格
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
<div class="demo"></div>
不推荐：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
6.类型的属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：
<link rel="stylesheet" href="" >
<script src=""></script>
不推荐：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
7.元素属性
- 元素属性值使用双引号语法
- 元素属性值可以写上的都写上
推荐：
<input type="text">
<input type="radio" name="name" checked="checked" >
不推荐：
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
8.代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
推荐：
<div class="fs">
<a href="#"></a>
</div>
9.纯数字输入框
使用 type="tel" 而不是 type="number"
推荐：
<input type="tel">
10.代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：
<div>
<h1></h1>
<p></p>
</div>
<p>
<span></span>
<span></span>
</p>
不推荐：
<div>
<h1></h1><p></p>
</div>
<p>
<span></span>
<span></span>
</p>
段落元素与标题元素只能嵌套内联元素
推荐：
<h1>
<span></span>
</h1>
<p>
<span></span>
<span></span>
</p>
不推荐：
<h1>
<div></div>
</h1>
<p>
<div></div>
<div></div>
</p>
11.单行注释
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：
<!-- Comment Text -->
<div>...</div>
不推荐：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
12.模块注释
一般用于描述模块的名称以及模块开始与结束的位置
注释内容前后各一个空格字符， 表示模块开始， 表示模块结束，模块与模块之间相隔一行
推荐：
<!-- S Comment Text A -->
<div class="mod-a">
...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->
<div class="mod-b">
...
</div>
<!-- E Comment Text B -->
不推荐：
<!-- S Comment Text A -->
<div class="mod-a">
...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->
<div class="mod-b">
...
</div>
<!-- E Comment Text B -->
13.嵌套模块注释
当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用
推荐：
<!-- S Comment Text A -->
<div class="mod-a">
<div class="mod-b">
...
</div>
<!-- /mod-b -->
<div class="mod-c">
...
</div>
<!-- /mod-c -->
</div>
<!-- E Comment Text A -->
14.移动端HTML模版
推荐：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<!-- viewport 后面加上 minimal-ui 在safri 体现效果 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏/设置状态栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<meta name="format-detection" content="telephone=no">
<title>移动端HTML模版</title>
<!-- S DNS预解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 -->
<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->
<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->
</head>
<body>
</body>
</html>
15.PC端HTML模版
推荐：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>
<!-- S DNS预解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 -->
<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->
<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->
</head>
<body>
</body>
</html>
16.script引用统一放在body结束标签的前面
因为浏览器生成Dom树的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染；
推荐：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PC端HTML模版</title>
</head>
<body>
<script src="http://www.test.com/test.js"></script>
</body>
</html>
不推荐：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PC端HTML模版</title>
<script src="http://www.test.com/test.js"></script>
</head>
<body>
</body>
</html>
17.defer和async的区别
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
