html编码规范

2017-02-15 本文已影响273人我是大师兄啊

语法

用四个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。不允许使用 2 个空格或 tab 字符。
嵌套元素应当缩进一次（即四个空格）。

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
  <body>
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

对于属性的定义，确保全部使用双引号，绝不要使用单引

<!-- good -->
<div class="good"></div>
<!-- bad-->
<div class='bad'></div>

不要在自闭合（self-closing）元素的尾部添加斜线。
常见无需自闭合标签有 input、br、img、hr 等。

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

不要省略可选的结束标签（例如,</ div>或 </ body）。

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>
<!-- bad-->
<ul>
    <li>first
    <li>second
</ul>

标签使用必须符合标签嵌套规则。
比如 div 不得置于 p 中，tbody 必须置于 table 中。li必须置于ul或者ol中，dt dd 必须置于dl 中

<!-- good -->
<p>Esprima  <strong>building block</strong> for some JavaScript language tools.</p>
<!-- bad-->
<p><div class="text"></div></p>

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

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

img 标签上要加 alt 描述属性，a 标签上要加title属性

![](logo.jpg)
<a href="www.jerei.com" title="捷瑞数字官网">

在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
标签名必须使用小写字母

<!-- good -->
<div></div>
<!-- bad -->
<DIV></DIV>

布尔（boolean）型属性在声明时不赋值。

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
    <option value="1" selected>1</option>
</select>

属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
所有属性皆使用双引号而不是单引号
class
id, name
data-*
src, for, type, href, value
title, alt
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（确保ID唯一性），因此排在第二位。

<a class="..." id="..." data-toggle="modal" href="#">Example link</a>
<input class="form-control" type="text">

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。统一为 lang="zh-cn"

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
    </head>
</html>

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

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

响应式网站的viewport

为保证响应式网站在移动端的正常预览

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">

IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

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

添加网页图标，关键词和网站描述，便于SEO搜索

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

<meta content="" name="Keywords">
<meta content="" name="Description">
<link rel="icon" href="/resources/favicon.ico" >

引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
所有 CSS 资源应当在head中引用，JavaScript 应当放在页面末尾，或采用异步加载。

<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。尽量减少代码嵌套

JavaScript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

代码分离

严格地保证HTML、CSS、JS三者分离，并尽量使三者之间没有太多的交互和联系。

尽可能减少CSS和JS引用个数，尽量合并压缩。
不使用行内样式（<style>.no-good {}</style>）
不在元素上使用 style 属性（<div style="border-top: 5px solid black"></div>）
不使用行内脚本（<script>alert('no good')</script>）

div层级较多时推荐添加注释

<!-- main -->
<div class="main">
    <!-- pageHeader -->
    <div class="pageHeader">
        <div class="logo">
        </div>
    </div>
    <!-- /pageHeader -->
</div>
<!-- /main -->

表单

控件标题
有文本标题的控件必须使用 label 标签将其与其标题相关联。
1.将控件置于 label 内。
2.label 的 for 属性指向控件的 id。
推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

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

<button type="submit">提交</button>
<button type="button">取消</button>