HTML书写规范

一. 文档

1. 使用 HTML5 文档类型

| <!DOCTYPE html>
<html lang="zh-CN">
...

</html>

2. HTML 文件使用无 BOM 的 UTF-8 编码。

3. 启用 IE Edge 模式。

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

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

| <html>

<head>
    <meta charset="UTF-8">
    ......
</head>
<body>
    ......
</body>

</html>

二. 命名

1. 大小写规范

除id、name为驼峰命名法外，标签名及属性名全部字母小写。属性值使用双引号包裹。
id、name属性为驼峰命名；class为短横分隔命名
id、name同一页面必须唯一

| <div id="todayNews" class="container-fluid">
<input name="username">

</div>

2. 同一页面，不同元素，应避免使用相同的 name 与 id

IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对不同元素的 id 与 name 属性的命名需要非常小心。

| <input name="foo">
<div id="foo"></div>

<script> // IE6 将显示 INPUT alert(document.getElementById('foo').tagName); </script>

3. 代码缩进和换行

使用 4 个空格做为一个缩进层级，不建议使用 2 个空格或 tab 字符。
建议每行不得超过 120 个字符。

4. 禁止为了 hook 脚本，创建无样式信息的 class

不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。
使用 id、属性选择作为 hook 是更好的方式。

三. 标签

1. HTML 标签的使用应该遵循标签的语义

下面是常见标签语义

p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表

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

3. 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。

| 
<ul>

<li>first</li>
<li>second</li>

</ul>

<ul>

<li>first
<li>second

</ul>

4. 标签使用必须符合标签嵌套规则。

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
比如 div 不得置于 p 中，tbody 必须置于 table 中。

块级元素
一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：
address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
内嵌元素
一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：
a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p、dt

5. 自定义属性建议以 xxx- 为前缀，推荐使用 data-

<div data-x-time="1000m">

6. 布尔类型的属性，建议不添加属性值。

7. JavaScript 应当放在页面末尾

将 script 放在页面中间将阻断页面的渲染。

8. title 必须作为 head 的直接子元素，并紧随 charset 声明之后。

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

| <head>

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

</head>

四. 图片

1. 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。

2. 为重要图片添加 alt 属性。

3. 添加 width 和 height 属性，以避免页面抖动。

五. 表单

1. 有文本标题的控件必须使用 label 标签将其与其标题相关联。

<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

2. 使用 button 元素时必须指明 type 属性值。

button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。

3. 当表单提交时，回车也可提交。

4. 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。

| 
<li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>

<li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>

HTML书写规范