HTML 书写规范

HTML 书写规范

 文档类型声明及编码

统一为 html5 声明类型

编码统一为 utf-8

书写规范

书写时根据页面结构实现层次分明的缩进

标签必合

属性值必须用双引号包括

通常小写字母

 语义化 HTML

• 根据页面结构选择合适的标签

  如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p，结构简章重复的部分用 ul、li标签
• 页面中重要的图片内容要添加 alt=“”替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容根据模块内容定义class和id名称
  • 如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright

 合理嵌套HTML标签

合理嵌套HTML标签，

ul和li是固定嵌套，ul直接子元素必须是li;

dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;

p标签不允许嵌套p标签;a标签不允许嵌套

a标签和其他交互性元素比如button

尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

保证结构与表现相分离

CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。

在页面中尽量避免使用行内样式即 style=“”或行间属性，尽量使用 class 或者 id

css 书写规范

 编码

编码统一为 utf-8

书写代码前

确定版心（页面有效区）

考虑样式表规划，提高样式重复使用率

提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局

布局时考虑后续交互效果处理的便利性，必要时预留出交互效果中涉及到的样式类（如鼠标点击后的样式等）

 书写代码时

添加注释：应该为大区块样式添加注释 ，小区块适量注释

class 与 id 的命名

命名要语义化、简明化

CSS命名时要加前缀如：.zg_top{}

常用命名方法一：样式名称由小写英文、数字和 _ 来组合命名，如 top_left、top_nav;

避免使用中文拼音，尽量使用简易的单词组合‘

常用命名方法二：首字母大写，驼峰式命名，如：topNav

代码格式

保持代码缩进与格式

建议单行书写

选择器

尽可能不使用通配符选择器 *

合理使用id选择器（页面中唯 一的元素，如头部，底部）

避免使用标签限定id或者类选择

如：div#test { } p.box {}

避免层集嵌套