本规范参考和整合了腾讯、网易NEC以及Google团队的开发规范，仅供公司内部团队共勉。
页头(Head)
- 文档类型统一使用html5的doctype
- 编码默认使用
UTF-8 - 定义标题(Title)属性，页面名称-二级菜单名-网站全名，28个汉字以内
- 定义页面关键字(Keywords)，产品名、专题名、专题相关名词，之间用英文半角逗号隔开
- 定义页面描述(Description)，不超过150个字符，描述内容要和页面内容相关
<!DOCTYPE html>
<meta charset="utf-8">
<title>第一课 早起的鸟儿有虫吃 - 我的资源 - 智慧教学云平台</title>
<meta name="keywords" content="智慧教学云平台,我的资源,早起的虫儿被鸟吃" />
<meta name="description" content="智慧教学云平台" />
其他Meta
PC端Meta：
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<meta name="Copyright" content="Copyright © 2018 xxx公司" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />
移动端Meta：
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： -->
<meta name="format-detection" content="telephone=no">
<!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加： -->
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="robots" content="all">
<meta name="Copyright" content="Copyright © 2018 xxx公司" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />
link及script标签
- 使用link将css文件引入，并置于head中
- 使用script将js文件引入，并置于body底部
- 在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。
<!-- Not recommended -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
type="text/css">
<!-- Recommended -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- Not recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
- 引入库文件，文件名须包含库名称及版本号及是否为压缩版，比如jquery-1.4.1.min.js
- 引入插件，文件名格式为库名称+插件名称，比如jQuery.cookie.js
- 结构、表现、行为三者分离，确保相互耦合最小化。禁止写内联样式！，即
style=”…”（某些js效果需添加样式的除外，但也可添加具体的某个class）
HTML结构
- 结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写HTML结构
- 用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制
- table不建议用于布局，但表现具有明显表格形式的数据，table还是首选
- 保持良好的简洁的树形结构，每一个块级元素都另起一行，每一行都使用Tab（2个空格）缩进对齐（head和body的子元素不需要缩进）
<!-- Recommended -->
<div>
<div>
<h2></h2>
</div>
</div>
<!-- Not recommended -->
<div><div><h2></h2></div></div>
- 删除结尾多余空格，减少比较代码时的麻烦
<!-- Not recommended -->
<p>What?_
<!-- Recommended -->
<p>Yes please.
- 对于内容较为简单的表格，建议将tr写成单行
另外，请注意做到以下几点- 结构上如果可以并列书写，就不要嵌套。
如果可以写成
就不要写成<!-- Recommended --> <div></div> <div></div><!-- Not recommended --> <div> <div></div> </div>- 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。
比如如下写已经能满足要求
就不要再写成<!-- Recommended --> <div> <h2></h2> </div><!-- Not recommended --> <div> <div> <h2></h2> </div> </div>- 一个标签上引用的className不要过多，越少越好。
比如不要出现这种情况：
<!-- Not recommended --> <div class="class1 class2 class3 class4"></div> - 结构上如果可以并列书写，就不要嵌套。
HTML标签
- 标签必须合法且闭合、嵌套正确，HTML 元素名称，属性，属性值（除非 text/CDATA），CSS 选择器，属性，属性值都需小写。
<!-- Not recommended -->
<A HREF="/">Home</A>
<!-- Recommended -->
<img src="google.png" alt="Google">
/* Not recommended */
color: #E5E5E5;
/* Recommended */
color: #e5e5e5;
- 标签语法无错误，语义化html， 如 标题根据重要性用
h*(同一页面只能有一个h1，段落标记用p，列表用ul，内联元素中不可嵌套块级元素。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。
<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>
- 对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。
<!-- Not recommended -->
<img src="cat.jpg">
<!-- Recommended -->
<img src="cat.jpg" alt="一只小猫" />
- 背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容
- 标签的自定义属性以
data-开头，如：<a href="#" data-num='18'></a> - 除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式
- 属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号
<!-- Not recommended -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>
- 没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）
- 书写链接地址时, 必须避免重定向，例如：
href="http://itaolun.com/", 即须在URL地址后面加上"/" - 省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。
<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
- 必须为含有描述性表单元素(input, textarea)添加label
<!-- Not recommended -->
<p>姓名: <input type="text" id="name" name="name" /></p>
<!-- Recommended -->
<p><label for="name">姓名: </label><input type="text" id="name" /></p>
- 如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —， ”，☺，除了一些在 HTML 中有特殊含义的字符（如 < 和 &）以及不可见的字符（如空格）。
<!-- Not recommended -->
The currency symbol for the Euro is “&eur;”.
<!-- Recommended -->
The currency symbol for the Euro is “€”.
HTML注释
采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格
- 开始注释：
<!-- 注释文案 -->
（文案两头空格）。
- 结束注释：
<!-- /注释文案 -->
（文案前加“/”符号，类似标签的闭合）。
- 允许只有开始注释！
- 单行代码的注释也保持同行，两端空格；多行代码的注释起始和结尾都另起一行并左缩进对齐
<!-- 头部 -->
<div class="g-hd">
<!-- LOGO -->
<!-- <h1 class="m-logo"><a href="#">LOGO</a></h1> -->
<!-- /LOGO -->
<!-- 导航 -->
<ul class="m-nav">
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<!-- 更多导航项 -->
</ul>
<!--
<div>
内容1
<div>内容2</div>
</div>
-->
<!-- /导航 -->
</div>
<!-- /头部 -->
任务项
用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。
<!-- TODO: remove optional tags -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
页面跳转
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端地址";
}
网友评论