前端规范1-HTML规范

HTML规范

1代码风格（参1，）

使用Tab字符（四个空格长度）

层级关系太多时尽量写在一行，但保证每行代码不宜过长

 例，代码不宜过长

例，尽量写在一行

2命名（参1，）

class必须使用小写，单词间使用-，而不是_(下划线)来连接

尽量语义化（优先英文及英文缩写，其次拼音，再次使用使用部件位置等方式（例如con-left））

例

id必须保证本页面唯一

同一页面应避免name和id命名相同（IE混淆），参1

     解释：IE6的兼容问题

3标签（参1，）

在保证语义化与样式的前提下，尽可能的减少标签数量

标签名必须使用小写（例<p></p>）

闭合标签

     另起一篇讨论，链接：

标签使用必须符合标签嵌套规则

     另起一篇讨论，链接：

HTML标签遵循标签语义化

     另起一篇讨论，链接：

标签的使用尽量简洁，减少不必要的标签，减少层级，扁平化

     

4属性名

     必须使用小写字母

     属性值必须使用双引号，而不是单引号，参1，

     自定义属性建议使用xxx-为前缀，推荐使用data-，参1

     顺序（参1，ctrl+F:属性顺序）

          id

          class

          name

          data-*

          src,for,type,href

          title,alt

          aria-*,role

     Boolean属性

          布尔值类型的属性（属性值==属性），建议不添加属性值

          一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。

          例：

               

5head内部标签（参1通用）

     使用<!DOCTYPE html>

     使用IE Edge模式，参1（但是现在用不到该属性，暂时保留）

     建议设置<html lang="zh-CN">

          利于语言工具翻译发音

     字符编码必须是<head>标签中的第一个<meta>

          <mata charset="UTF-8">

     title 必须作为 head 的直接子元素，并紧随 charset 声明之后。

     引入CSS时必须指明rel="stylesheet"，参1

     引入CSS和JS时无需指明type属性(因为指明的值即是默认值)

     JS脚本放在页面的底部或采用异步加载

     引入CSS和JavaScript 时不需要指明 type。

 

     使用favicon，浏览器默认请求Web Server根目录下的favicon.ico，必须使用以下方法的其中一种

          1.在 Web Server 根目录放置 favicon.ico 文件

          2.使用 link 指定 favicon。

          <link rel="shortcut icon" href="path/to/favicon.ico">

     viewport

6注释

     注释两端用空格，结束注释使用反斜杠"关闭"。

          例

          

图片

     禁止img的src为空，延迟加载的图片也要有默认的src

     避免加不必要的title属性，为重要图片加alt属性

          这两个也有异议，另起一篇讨论，链接：

     添加weidth和height属性，避免页面抖动

          这里的意思应该是在图片未加载完时和加载完图片后图片尺寸变化影响页面布局

     需要用户下载的图片使用img标签而不是使用background背景图

     使用sprite雪碧图

表单

     控件标题（<label>标签）

          1.将控件置于 label 内。（推荐）

          2.label 的 for 属性指向控件的 id。

          例子：

     按钮

          使用button元素必须指明type属性值（提交submit和取消button）

          为提高可访问性重要的标签代码应该在前（例如提交在重置前面），使用样式控制

     在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性。

     当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作。

多媒体

     音频：MP3、WAV、Ogg

     视频：MP4、WebM、Ogg

     优先使用audio和video标签定义音视频，且在object标签中指示浏览器不支持的标签说明。

     尽力不要自动播放。

模板