前端开发规范：HTML规范

一个项目应该永远遵循同一套编码规范
不管有多少人共同参与同一项目，确保每一行代码都像是同一个人编写的

前端开发规范：HTML规范

相关链接：

前端开发规范：HTML规范
前端开发规范：CSS规范
前端开发规范：JavaScript规范

整体结构

HTML基础设施

• 文件应以“”首行顶格开始，推荐使用“”。
  如果想跟其他标签一样使用小写，可以使用：
  DOCTYPE标签是一种标准通用标记语言的文档类型声明，目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
  如果页面添加了就等同于开启了标准模式，浏览器会按照W3C标准解析渲染页面。
  没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。
• 必须申明文档的编码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，将脚本文件放在内。

在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件，建议：

1. 不使用超过一到两张样式表
2. 不使用超过一到两个脚本（学会用合并脚本）
3. 不使用行内样式（）
4. 不在元素上使用 style 属性（

   ---

   ）
5. 不使用行内脚本（）
6. 不使用表象元素（i.e. , , , , ）
7. 不使用表象 class 名（i.e. red, left, center）

保持良好的简洁的树形结构

• 每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。
• 使用4个空格代替1个Tab。
• 你也可以在大的模块之间用空行隔开并添加适当注释，使模块更清晰。
• 推荐使用小写字母，小写风格看起来更加清爽，容易识别和编写
• 不推荐省略 、 、 标签

代码格式

说明文案的注释方法

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

• 开始注释：（文案两头空格）。
• 结束注释：（文案前加“/”符号，类似标签的闭合）。
• 允许只有开始注释

    

        

            
            

                
热门标签
 
                ...
            
            
            

                

                    
最热TOP5
 
                    更多»
                
                ...
            
        
    

严格的嵌套

• 尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。
• 正确闭合标签且必须闭合。
• 结构上如果可以并列书写，就不要嵌套。
  如果可以写成
  那么就不要写成
• 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。
  比如
  已经能满足要求，那么就不要再写成

严格的属性

• 属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。
• 没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。
• 可以省略style标签和script标签的type属性。
• 一个标签上引用的className不要过多，越少越好。
  比如不要出现这种情况：
• 对于一个语义化的内部标签，应尽量避免使用className。
  比如在这样一个列表中，li标签中的itm应去除：

内容类型决定使用的语义标签

在网页中某种类型的内容必定需要某种特定的HTML标签来承载，也就是我们常常提到的根据你的内容语义化HTML结构。
如：

加强“资源型”内容的可访问性和可用性

• 在资源型的内容上加入描述文案，比如在audio内加入文案和链接，给img添加alt属性等。
  因为标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
      1.网速太慢
      2.src 属性中的错误
      3.浏览器禁用图像
      4.用户使用的是屏幕阅读器
  从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容。
• 减少JavaScript 生成标签：通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

加强“不可见”内容的可访问性

背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。

淘宝、Tmall、京东mate标签参考

参考引用：
nec http://nec.netease.com/standard/html-structure.html