HTML代码规范

• 1、代码风格
  • 1.1 缩进与换行
    使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
    注：每行不得超过 120 个字符。（过长的代码不容易阅读与维护。）
  • 1.2.命名
    （1）class 必须单词全字母小写，单词间以 - 分隔。
    （2）class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
    （3）元素 id 必须保证页面唯一。（同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。）
    （4）id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。
    （5）id、class 命名，在避免冲突并描述清楚的前提下尽可能短。
    （6）同一页面，应避免使用相同的 name 与 id。（IE 浏览器会混淆元素的 id 和 name 属性）
  • 1.3 标签
    （1）标签名必须使用小写字母。
    （2）对于无需自闭合的标签，不允许自闭合。
    （3）对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。
    （4）标签使用必须符合标签嵌套规则。
    （5）HTML 标签的使用应该遵循标签的语义。
    （6）在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
    （7）标签的使用应尽量简洁，减少不必要的标签。
  • 1.4常见标签语义：
    p - 段落
    h1,h2,h3,h4,h5,h6 - 层级标题
    strong,em - 强调
    ins - 插入
    del - 删除
    abbr - 缩写
    code - 代码标识
    cite - 引述来源作品的标题
    q - 引用
    blockquote - 一段或长篇引用
    ul - 无序列表
    ol - 有序列表
    dl,dt,dd - 定义列表
  • 1.5属性
    （1）属性名必须使用小写字母。
    （2）属性值必须用双引号包围，不允许使用单引号，引号。
    （3）布尔类型的属性，建议不添加属性值。
    （4）自定义属性建议以 xxx- 为前缀，推荐使用 data-。
• 2、Head
  • 2.1 title
    （1）页面必须包含 title 标签声明标题。
    （2）title 必须作为 head 的直接子元素，并紧随 声明之后。
• 3、图片
  （1）禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
  （2）避免为 img 添加不必要的 title 属性。
  （3）为重要图片添加 alt 属性。
  （4）添加 width 和 height 属性，以避免页面抖动。
• 4、表单
  • 4.1文本
    （1）有文本标题的控件必须使用 label 标签将其与其标题相关联。
• 4.2按钮
  （1）使用 button 元素时必须指明 type 属性值。
  （2）尽量不要使用按钮类元素的 name 属性。
  • 4.3可访问性
    （1）当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作。
    （2）在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性。
    （3）负责主要功能的按钮在 DOM 中的顺序应靠前。
• 五，注释
  在任何代码中都应该有做注释的好习惯,在一个复杂的html代码中，友好的注释非常有用的，特别是在有很多嵌套的表格中。html中使用来做注释。