web前端规范-HTML部分

本规范参考和整合了腾讯、网易NEC以及Google团队的开发规范，仅供公司内部团队共勉。

页头(Head)

1. 文档类型统一使用html5的doctype
2. 编码默认使用UTF-8
3. 定义标题(Title)属性，页面名称-二级菜单名-网站全名，28个汉字以内
4. 定义页面关键字(Keywords)，产品名、专题名、专题相关名词，之间用英文半角逗号隔开
5. 定义页面描述(Description)，不超过150个字符，描述内容要和页面内容相关

其他Meta

PC端Meta：

移动端Meta：

link及script标签

1. 使用link将css文件引入，并置于head中
2. 使用script将js文件引入，并置于body底部
3. 在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。

4. 引入库文件，文件名须包含库名称及版本号及是否为压缩版，比如jquery-1.4.1.min.js
5. 引入插件，文件名格式为库名称+插件名称，比如jQuery.cookie.js
6. 结构、表现、行为三者分离，确保相互耦合最小化。禁止写内联样式！，即style=”…”（某些js效果需添加样式的除外，但也可添加具体的某个class）
   
   

HTML结构

1. 结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写HTML结构
2. 用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制
3. table不建议用于布局，但表现具有明显表格形式的数据，table还是首选
4. 保持良好的简洁的树形结构，每一个块级元素都另起一行，每一行都使用Tab（2个空格）缩进对齐（head和body的子元素不需要缩进）

5. 删除结尾多余空格，减少比较代码时的麻烦

What?_

Yes please.

6. 对于内容较为简单的表格，建议将tr写成单行
   另外，请注意做到以下几点
   1. 结构上如果可以并列书写，就不要嵌套。
      如果可以写成
   就不要写成
   2. 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。
      比如如下写已经能满足要求
   就不要再写成
   3. 一个标签上引用的className不要过多，越少越好。
      比如不要出现这种情况：

HTML标签

1. 标签必须合法且闭合、嵌套正确，HTML 元素名称，属性，属性值（除非 text/CDATA），CSS 选择器，属性，属性值都需小写。

Home

/* Not recommended */
color: #E5E5E5;

/* Recommended */
color: #e5e5e5;

2. 标签语法无错误，语义化html， 如 标题根据重要性用h*(同一页面只能有一个h1，段落标记用p，列表用ul，内联元素中不可嵌套块级元素。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。

All recommendations

All recommendations

3. 对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。

4. 背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容
5. 标签的自定义属性以data-开头，如：
6. 除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式
7. 属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号

Sign in

Sign in

8. 没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）
9. 书写链接地址时, 必须避免重定向，例如：href="http://itaolun.com/", 即须在URL地址后面加上"/"
10. 省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。

11. 必须为含有描述性表单元素(input, textarea)添加label

姓名: 

姓名: 

12. 如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —， ”，☺，除了一些在 HTML 中有特殊含义的字符（如 < 和 &）以及不可见的字符（如空格）。

The currency symbol for the Euro is “&eur;”.

The currency symbol for the Euro is “€”.

HTML注释

采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格

1. 开始注释：

（文案两头空格）。

2. 结束注释：

（文案前加“/”符号，类似标签的闭合）。

3. 允许只有开始注释！
4. 单行代码的注释也保持同行，两端空格；多行代码的注释起始和结尾都另起一行并左缩进对齐

   
   
   
   
   

       
NAV1
       
NAV2
       
   
   
   

任务项

用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。

  
Apples
  
Oranges

页面跳转

PC端

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "移动端地址";
}

移动端（反转）

if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "PC端地址";
}