HTML编码规范

本篇文章是基于王叨叨大佬师父维护的文档梳理的，有兴趣可以去看一下原文HTML编码规范。

1. 缩进与换行

【建议】使用 2 个空格作为一个缩进层级，不允许使用tab字符

解释：

具体项目，可以使用2个空格，也可以使用4个空格，依据组内的规范定，但项目内部要统一。

为啥可以用4个空格而不能用tab字符呢？因为虽然tab字符和4个空格表面上看起来实现的效果是一样的。但是在不同的编辑器里tab的长度可能不一样。这会导致有tab字符的代码，用不同的编辑器打开时，格式可能会乱。但是，敲一下tab肯定比敲四下空格的效率要高。目前，很多编辑器都能够将tab字符设置成4个空格（敲一下tab相当于敲了4个空格）。

【强制】对于style和script中的代码，一级缩进要与style和script标签缩进同级

<!--  样式内容的一级缩进与所属的 style 标签对齐  -->
<style>
.main {color: red;
}
</style><!-- 脚本代码的一级缩进与所属的 script 标签对齐 -->
<script>
document.write("Hello World!");
</script>

【建议】每行不得超过 120 个字符。

解释：

过长的代码不容易阅读与维护。

2. 命名

【强制】 id、class 必须全字母单词小写，单词间以 - 分隔。

【强制】 class 必须代表相应模块或部件的内容及功能，不得以样式信息进行命名。

示例：

<!-- good -->
<div class="sidebar"></div><!-- bad -->
<div class="left"></div>

【强制】 id必须保证页面的唯一。

【强制】同一页面，应避免使用相同的name和id。

解释：

IE浏览器比较低的版本会混淆元素的 id 和name属性。如此document.getElementById 获取的就不是期望中的结果。

示例：

<input name="foo">
<div id="foo"></div>
<script>
alert(document.getElementById('foo').tagName);
</script>

正常应该显示DIV，但在IE7浏览器下显示的却是INPUT。

【建议】 id、class命名，在避免冲突并描述清楚的前提下尽可能短。

【强制】禁止为了hook脚本，创建无样式信息的class。

解释：

hook机制：简单来说就是提前列出所有可能的情况，减少if-else的使用。

不允许 class 只用于JS选择某些元素，class应该具有明确的语义和样式。否则容易导致CSS样式泛滥。

使用id、属性选择作为hook是更好的方式。

3. 标签

【强制】标签名必须使用小写字母

【强制】对于无需自闭合的标签，不允许自闭合

解释：

我记得之前看菜鸟的html文档时，里面要求：所有的标签都必须要闭合。所以之前都憨憨的闭合所有标签。查了一下发现：XHTML要求所有标签都闭合，但是HTML5不做强制要求了。所以为了代码简洁、提高效率，无需自闭合的标签不许闭合。

常见无需自闭合标签有：input、br、img、hr等。

示例：

<!-- bad -->
<input type="text" name="title" /><!-- good -->
<input type="text" name="title">

【强制】对 html5 中规定允许省略的闭合标签，不允许省略闭合标签。

【强制】标签使用必须符合标签嵌套规则。

规则：

块级元素能包含块级元素和内联元素，内联元素只能包含内联元素。
标题和段落中不能包含块级元素。
块级元素与块级元素并列，内联元素与内联元素并列。

例如：div不得置于p和h1~h6中，tbody必须置于table中。

【建议】 HTML标签的使用应该遵循标签的语义。

常见标签语义：

p 段落
h1~h6 层级标题
strong、em 粗体、斜体强调
ins 插入，带有下划线。（经常与 del标签一同使用，来描述文档中的更新和修正）
del 删除，带有删除线
abbr 缩写，表示一个缩写形式。（在某些浏览器上，当把鼠标移至缩写词上，title可被用来展示完整版本）
code 表示代码。（code标签内内容暗示这段文本是源程序代码）
cite 表示书籍或杂志等的标题，表示对某个参考文献的引用。
q 短的引用，带有引号。
blockquote 块引用，长的引用，标签之间的文本都会从常规文本中分离出来，并且在左右两边缩进（外边距），而且有时会使用斜体。即：块引用拥有它们自己的空间。
ul 无序列表
ol 有序列表
dl 定义列表。（dl、dt、dd经常一起使用）
dt 定义列表中的项目
dd 描述列表中的项目

【强制】不允许使用过时的旧标签，使用新标签或者CSS代替。

如下：

b ==> strong
center
tt

【建议】在CSS可以实现相同需求的情况下不得使用表格进行布局。

解释：

复杂的表格设计不易，修改更复杂，最后生成的网页代码有许多冗余，还有很多没有任何意义的元素，文件量庞大，下载慢，解析速度也慢，维护和更新困难。

【建议】标签的使用应尽量简洁，减少不必要的标签。

示例：

<!-- good -->
<img class="avatar" src="image.png"><!-- bad -->
<span class="avatar"><img src="image.png">
</span>

4. 属性

【强制】属性名必须全部使用小写字母，不允许驼峰命名格式。

【强制】属性值必须用双引号包围，不允许使用单引号及其它。

【建议】布尔类型的属性，建议不添加属性值。

【建议】自定义属性建议以 xxx- 为前缀，推荐使用 data-。

解释：

使用前缀有利于区分自定义属性和原有属性。

5. html文件标识和编码

【强制】使用HTML5的 doctype 来启用标准模式，建议使用大写的 DOCTYPE

示例：

<!DOCTYPE html>

【建议】启用IE Edge模式。

解释：

IE=Edge表示：永远以最新的IE版本模式来显示网页；IE=8表示：以IE8引擎来渲染页面。

示例：

<meta http-equiv="X-UA-Compatible" content="IE=Edge"

【建议】在html标签上设置正确的 lang 属性

解释：

搜索引擎无法判断页面的内容是什么语言，“en”代表英语，”zh-CN”代表中文。

示例：

<html lang="zh-CN">

6. head标签内包含内容

【强制】页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 元素必须是 head 的第一个直接子元素。

【建议】 html文件使用无BOM的UTF-8编码。

解释：

UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。

【强制】页面必须包含title标签声明标题。

【强制】 title必须作为head的直接子元素，并紧随charset声明之后。

解释：

title中如果包含ASCII之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。

示例：

<head><meta charset="UTF-8"><titlle>页面标题</titlle>
</head>

【强制】保证favicon可访问。

解释：

在未指定favicon时，大多数浏览器会请求Web Server根目录下的facicon.ico。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

① 在文本 Server 根目录放置 favicon.ico文件。

② 使用link指定favicon

示例：

<link rel="shortcut icon" href="path/to/favicon.ico">

【建议】若界面欲对移动设备友好，需指定页面的 viewport。

解释：

viewport是用户网页的可视区域（视区）。手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中，导致页面展示不正常。用户可以通过平移或缩放来看网页的不同部分。

示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：可视窗口宽度，可以指定一个值，如：600；或取特殊值，如设备宽度：device-width。
height：可视窗口高度，可指定一个值或是特殊值：设备高度：device-height。
initial-scale：初始缩放比例，即：当页面第一次加载时缩放比例。
maximum-scale、minimum-scale：允许用户缩放的最大、最小比例。
user-scalable：用户是否可以手动缩放。

7. CSS和JavaScript引入

【强制】引入CSS时必须指明 rel=”stylesheet”。

示例：

<link rel="stylesheet" href="page.css">

【建议】引入CSS和JavaScript时无须指明type属性。

解释：

text/css和text/javascript是type的默认值。

【建议】样式定义放在外部的CSS中，行为定义放在外部的JavaScript中。

解释：

结构——样式——行为的代码分离，有利于提高代码的可阅读性和可维护性。

【建议】 CSS外部文件都应在head全部引入。

解释：

在页面渲染过程中，避免新的CSS导致样式的重新绘制，页面闪烁。

【建议】 JavaScript应放在页尾，或采用异步加载。

解释：

页面在渲染的同时会同步读取javaScript文件，避免页面渲染速度过慢。

【建议】移动环境或只针对现代浏览器设计的Web应用，如果引用外部资源的URL协议部分与页面相同，建议省略协议前缀。

解释：

使用相对路径引入CSS，在IE7/8下，会发两次请求，是否使用相对协议应当充分考虑页面针对的环境。

8. 图片

【强制】禁止img的src取值为空。延迟加载的图片也要增加默认的src。

解释：

当img的src取值为空时，浏览器会认为这是一个缺省值，值的内容为当前网页的路径。浏览器会再次加载图片。

【建议】避免为img添加不必要的title属性。

解释：

多余的title影响看图体验，并且增加了页面尺寸。

【建议】为重要图片添加alt属性。

【建议】添加width和height属性，避免页面抖动。

【建议】有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现。

解释：

产品logo、用户头像、用户产生的图片等有潜在下载需求的图片，以img标签实现。
icon、背景、代码使用的图片等无下载需求的图片，以CSS背景图实现。

9. 表单

【强制】有文本标题的控件必须使用label标签将其与其标题相关联。

解释：

当用户点击label标签中的文字，焦点会移动至对应元素上。

有两种实现方式：

（1）将控件置于label内。

（2）将label的for属性指向控件的id。

推荐使用第一种，减少不必要的id。如果DOM结构不允许直接嵌套，则应该使用第二种。

示例：

<!-- 推荐  -->
<label>用户名：<input type="text">
</label><label for="userName">用户名：</label>
<input type="text" id="userName">

【强制】使用button元素时必须指明type属性。

解释：

因为button元素的默认type为submit（除IE浏览器，IE的默认type为button），如果被置于form元素中，点击后将导致表单提交。为清楚区分每个button的功能，必须给出type属性。

button的type类型主要分为3种： submit(提交按钮)、button(普通按钮)、reset(重置按钮—表单数据重置)

【建议】负责主要功能的按钮在视觉上的顺序应靠前，且突出。

解释：

负责主要功能的按钮应相对靠前，以提高可访问性。减少非主要按钮的视觉效果。

10. 多媒体

【建议】当使用audio和video标签来播放音频或视频时，应尽量覆盖到常用的格式。

解释：

音频应覆盖格式：MP3、WAV、Ogg

视频应覆盖格式：MP4、WebM、Ogg

【建议】在支持HTML5的浏览器中优先使用audio和video标签来定义音视频元素。

【建议】使用退化到插件的方式来对多浏览器进行支持。

解释：

object标签定义一个嵌入的对象。可以使用该标签向页面添加多媒体。

<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"><object width="100" height="50" data="audio.mp3"><embed width="100" height="50" src="audio.swf"></object>
</audio><video width="100" height="50" controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg"><object width="100" height="50" data="video.mp4"><embed width="100" height="50" src="video.swf"></object>
</video>

【建议】只在必要的时候开启音视频的自动播放。

【建议】在object标签内部提供指示不支持该标签的说明。

<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>

我不是创造者，我只是学习者，希望大家一起进步！！！