上承：[[001.Web前端开发规范（1）——通用规范]]

三、代码规范

以下章节列举了一些 HTML, JavaScript 和 CSS 的代码书写规范规则。

3.1 HTML

3.1.1 文档类型

为每个HTML页面的第一行添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现。
推荐使用 HTML5 的文档类型申明：<!DOCTYPE html>

3.1.2 head区代码

head区是指HTML代码的<head>和</head>之间的内容。

必须加入的标签：

公司版权注释：
编码统一为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