一个项目应该永远遵循同一套编码规范
不管有多少人共同参与同一项目，确保每一行代码都像是同一个人编写的
前端开发规范：HTML规范
相关链接：
前端开发规范：HTML规范
前端开发规范：CSS规范
前端开发规范：JavaScript规范
整体结构
HTML基础设施
- 文件应以“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”。
如果想跟其他标签一样使用小写，可以使用：<!doctype html>
DOCTYPE标签是一种标准通用标记语言的文档类型声明，目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
如果页面添加了<!DOCTYP>就等同于开启了标准模式，浏览器会按照W3C标准解析渲染页面。
没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。 - 必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码<meta charset="utf-8"/>。
- 根据页面内容和需求填写适当的keywords和description。
（不过淘宝、Tmall、京东只有京东写了keywords和description） - 页面title不可缺少。
- HTML只关注内容：其只做内容信息展示，不要引入一些特定的 HTML 结构来解决一些视觉设计问题，不要将img元素当做专门用来做视觉设计的元素，样式效果尽可能应用css解决。
- 适当使用mate标签。附上淘宝、Tmall、京东mate标签参考（文末）
结构顺序和视觉顺序基本保持一致
- 按照从上至下、从左到右的视觉顺序书写HTML结构。
- 有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。
- 用div代替table布局，但表现具有明显表格形式的数据，首选table。
结构、表现、行为三者分离，避免内联
- 使用link将css文件引入，并置于head中。
- 使用script将js文件引入，并置于body底部。
如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在<head>内。
<!-- 通用 -->
<html>
<head>
<link rel="stylesheet" href="xxx.css">
</head>
<body>
<!-- 内容 -->
<script src="xxx.js" async></script>
</body>
</html>
<!-- 只兼容现代浏览器推荐 -->
<html>
<head>
<link rel="stylesheet" href="xxx.css">
<script src="xxx.js" async></script>
</head>
<body>
<!-- 内容 -->
</body>
</html>
在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件，建议：
- 不使用超过一到两张样式表
- 不使用超过一到两个脚本（学会用合并脚本）
- 不使用行内样式（<style>.no-good {}</style>）
- 不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）
- 不使用行内脚本（<script>alert('no good')</script>）
- 不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
- 不使用表象 class 名（i.e. red, left, center）
保持良好的简洁的树形结构
- 每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。
- 使用4个空格代替1个Tab。
- 你也可以在大的模块之间用空行隔开并添加适当注释，使模块更清晰。
- 推荐使用小写字母，小写风格看起来更加清爽，容易识别和编写
- 不推荐省略 <html> 、 <body>、<head> 标签
代码格式
说明文案的注释方法
采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式。
- 开始注释：（文案两头空格）。
- 结束注释：（文案前加“/”符号，类似标签的闭合）。
- 允许只有开始注释
<body>
<!-- 侧栏内容区 -->
<div class="m-side">
<div class="side">
<div class="sidein">
<!-- 热门标签 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
...
</div>
<!-- 最热TOP5 -->
<div class="sideblk">
<div class="m-hd3">
<h3 class="tit">最热TOP5</h3>
<a href="#" class="s-fc02 f-fr">更多»</a>
</div>
...
</div>
</div>
</div>
</div>
<!-- /侧栏内容区 -->
</body>
严格的嵌套
- 尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。
- 正确闭合标签且必须闭合。
- 结构上如果可以并列书写，就不要嵌套。
如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div> - 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。
比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>
严格的属性
- 属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。
- 没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。
- 可以省略style标签和script标签的type属性。
- 一个标签上引用的className不要过多，越少越好。
比如不要出现这种情况：<div class="class1 class2 class3 class4"></div> - 对于一个语义化的内部标签，应尽量避免使用className。
比如在这样一个列表中，li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
内容类型决定使用的语义标签
在网页中某种类型的内容必定需要某种特定的HTML标签来承载，也就是我们常常提到的根据你的内容语义化HTML结构。
如：<time></time> <address></address>
加强“资源型”内容的可访问性和可用性
- 在资源型的内容上加入描述文案，比如在audio内加入文案和链接，给img添加alt属性等。
因为<img>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
1.网速太慢
2.src 属性中的错误
3.浏览器禁用图像
4.用户使用的是屏幕阅读器
从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容。 - 减少JavaScript 生成标签：通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
加强“不可见”内容的可访问性
背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。
淘宝、Tmall、京东mate标签参考
<!--淘宝网触屏版-->
<meta charset="utf-8">
<meta name="data-spm" content="a215s">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<!--天猫TMALL-->
<meta charset="utf-8">
<meta name="aplus-terminal" content="1">
<meta name="apple-mobile-web-app-title" content="TMALL">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="spm-id" content="a223j.8443192">
<meta name="format-detection" content="telephone=no, address=no">
<meta name="aplus-waiting" content="MAN">
<!--JD-->
<meta name="author" content="m.jd.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="author" content="m.jd.com">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name="description" content="京东JD.COM-专业的综合.....商城购物体验! ">
<meta name="Keywords" content="网上购物,手机,笔记本,电脑.....京东商城">
参考引用：
nec http://nec.netease.com/standard/html-structure.html
网友评论