三、代码规范
以下章节列举了一些 HTML, JavaScript 和 CSS 的代码书写规范规则。
3.1 HTML
3.1.1 文档类型
为每个HTML页面的第一行添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现。
推荐使用 HTML5 的文档类型申明：<!DOCTYPE html>
3.1.2 head区代码
head区是指HTML代码的
<head>和</head>之间的内容。
必须加入的标签：
- 公司版权注释：
<!-- The site is designed by KIN 05/2018 --> - 编码统一为UTF-8：
<meta charset="UTF-8"> - 网页标题：
<title>Web前端开发规范（2）——代码规范</title> - 网页制作者信息：
<meta name="author" content="xurenda@qq.com"> - 网站简介：
<meta name="description" content="一个记录前端学习的个人博客"> - 搜索关键字：
<meta name="keywords" CONTENT="前端，CSS，HTML，规范"> - 网页图标：
<link rel = "Shortcut Icon" href="favicon.ico">
可以选择加入的标签：
- 设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08：21：57 GMT"> - 禁止浏览器从本地机的缓存中调阅页面内容：
<meta http-equiv="Pragma" content="no-cache"> - 用来防止别人在框架里调用你的页面：
<meta http-equiv="Window-target" content="_top"> - 自动跳转：
<meta http-equiv="Refresh" content="5;URL=https://yuque.com/xiuran/">其中5指的是五秒后跳转 - 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<meta name="robots" content="none">content的参数有all,none,index,noindex,follow,nofollow。默认是all。 - 网页不会被缓存：
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> - 通知IE浏览器采用其所支持的最新的模式浏览页面：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
3.1. 书写要求
- 属性命名由英文、数字和下划线组成，属性值必须用双引号
""包裹，避免使用中文拼音且尽量简易并要求语义化。
- class遵循驼峰命名法，例如：
class = "topBar" - id命名遵循下划线分割法，例如：
id = "top_bar" - name命名遵循首字母大写加下划线分割，例如：
name = "Top_Bar"
这样命名的原因是JS获取单个元素时，通常使用document.getElementById来获取DOM元素，document.getElementById兼容所有浏览器，但IE浏览器会混淆元素的id和name属性，所以要区分id和name的命名。
- HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性。
class⇒id、name⇒data-*⇒src、for、type、href⇒title、alt⇒aria-*、role - HTML中最好不要将无内容元素的标签闭合，例如：使用
<br>而非<br />
3.1. 脚本加载
出于性能考虑，脚本异步加载很关键。一段脚本放置在<head>内，比如<script src="main.js"></script>，其加载会一直阻塞 DOM 解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本，对用户体验来说那真是一个巨大的影响。
异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+，可将 HTML5 的async属性加至脚本中，它可防止阻塞 DOM 的解析，甚至你可以将脚本引用写在<head>里也没有影响。
如需兼容老旧的浏览器，实践表明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或 labjs。注入脚本的一个问题是：一直要等到 CSS 对象文档已就绪，它们才开始加载（短暂地在 CSS 加载完毕之后），这就对需要及时触发的 JS 造成了一定的延迟，这多多少少也影响了用户体验吧。
综上所述，兼容老旧浏览器(IE9-)时，应该遵循以下最佳实践。
脚本引用写在 body 结束标签之前，并带上async属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。而在现代浏览器中，脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。
所有浏览器中，推荐：
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- body goes here -->
<script src="main.js" async></script>
</body>
</html>只在现代浏览器中，推荐：
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<!-- body goes here -->
</body>
</html>3.1. 其他细节
- 引入JS库文件，文件名须包含库名称及版本号及是否为压缩版。例如：
jQuery-1.8.3.min.js
整体示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- The site is designed by KIN 05/2018 -->
<meta charset="UTF-8">
<title>Web前端开发规范（2）——代码规范</title>
<meta name="author" content="xurenda@qq.com">
<meta name="description" content="一个记录前端学习的个人博客">
<meta name="keywords" CONTENT="前端，CSS，HTML，规范">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel = "Shortcut Icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/style.min.css">
</head>
<body>
<!-- 主体内容 -->
<script src="../js/main.min.js" async></script>
</body>
</html>TODO