HTML代码规范
文档
使用 HTML5 文档类型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
HTML 文件使用无 BOM 的 UTF-8 编码。
启用 IE Edge 模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
<html>
<head>
<meta charset="UTF-8">
......
</head>
<body>
......
</body>
</html>
命名
大小写规范
除id、name为驼峰命名法外，标签名及属性名全部字母小写。属性值使用双引号包裹。
id、name属性为驼峰命名；class为短横分隔命名
id、name同一页面必须唯一
<div id="todayNews" class="container-fluid">
<input name="username">
</div>
同一页面，不同元素，应避免使用相同的 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>
代码缩进和换行
使用 2 个空格做为一个缩进层级，不允许使用 4 个空格 或 tab 字符。
建议每行不得超过 120 个字符。
禁止为了 hook 脚本，创建无样式信息的 class
不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。
使用 id、属性选择作为 hook 是更好的方式。
标签
HTML 标签的使用应该遵循标签的语义
下面是常见标签语义
- p - 段落
- h1,h2,h3,h4,h5,h6 - 层级标题
- strong,em - 强调
- ins - 插入
- del - 删除
- abbr - 缩写
- code - 代码标识
- cite - 引述来源作品的标题
- q - 引用
- blockquote - 一段或长篇引用
- ul - 无序列表
- ol - 有序列表
- dl,dt,dd - 定义列表
在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。
<!-- good -->
<ul>
<li>first</li>
<li>second</li>
</ul>
<!-- bad -->
<ul>
<li>first
<li>second
</ul>
标签使用必须符合标签嵌套规则。
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
比如 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
自定义属性建议以 xxx- 为前缀，推荐使用 data-
<div data-x-time="1000m">
布尔类型的属性，建议不添加属性值。
JavaScript 应当放在页面末尾
将 script 放在页面中间将阻断页面的渲染。
title 必须作为 head 的直接子元素，并紧随 charset 声明之后。
title 中如果包含 ascii 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
图片
禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
为重要图片添加 alt 属性。
添加 width 和 height 属性，以避免页面抖动。
表单
有文本标题的控件必须使用 label 标签将其与其标题相关联。
<label for="username">用户名：</label> <input type="textbox" name="username" id="username">
使用 button 元素时必须指明 type 属性值。
button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。
当表单提交时，回车也可提交。
模板代码应以保证 HTML 单个标签语法的正确性为基本原则。
<!-- good -->
<li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>
<!-- bad -->
<li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>
网友评论