HTML5编码规范.docx

HTML5编码规范 规范目的 本文档的目标是使HTML5代码风格保持一致，容易被理解、维护和升级，提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1、 html, css, js, images文件均归档至约定的目录中。 2、html文件命名: 必须单词全字母小写，单词间以-分隔，依实际模块命名，如果同一模块以_ title _ 来组合命名, 以方便添加功能时查找对应页面，团结里的相互理解。 HTML5代码规范 1. 代码风格 1.1 缩进与换行 [建议]使用4个空格作为一个缩进层级。 [建议]模板代码的缩进优先保证 HTML 代码的缩进规则。 1.2 命名规则 [强制]class：必须单词全字母小写，单词间以-分隔，且必须代表相应的模块或部件的内容或功能，不得以html内置样式进行命名，命名应该具有明确的语义。 [强制]id：必须保持在页面中的唯一性，命名应该具有明确的语义。 1.3 标签 [强制]Html中的标签名必须使用小写字母。 [强制]标签的闭合要符合html5的规定。 [强制]标签的使用必须符合标签的嵌套规则，例：div不得置于p中，tbody必须置于table中。 [建议]标签的使用必须遵循标签的语义，例： p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识 cite - 引述来源作品的标题 q - 引用 blockquote - 一段或长篇引用 ul - 无序列表 ol - 有序列表 dl,dt,dd - 定义列表 [建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。 1.4 属性 [强制]属性必须使用小写字母，其属性值必须用双引号包围。 [建议]布尔类型的建议不添加属性值。自定义属性建议以 xxx- 为前缀，推荐使用data- 1.5所有编码均遵循xhtml标准, 标签 属性 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (br /), hr(hr /)等; 属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。 1.6语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;目的：减少代码量，1.7尽可能减少div嵌套, 如div class=”box”div class=”welcome”欢迎访问XXX, 您的用户名是div class=”name”用户名/div/div/div完全可以用以下代码替代: div class=”box”p欢迎访问XXX, 您的用户名是span用户名/span/p /div;目的：减少代码量，1.8引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js; 1.9书写链接地址时, 必须避免重定向，例如：href=”/”, 即须在URL地址后面加上“/”； 2.0在页面中尽量避免使用style属性,即style=”?”除非考虑网站http请求，网站响应速度等因素比重情况具体分析; 2. 页面头部 2.1 DOCTYPE [强制]使用doctype 来启用标准模式，建议使用大写的 DOCTYPE 2.2 语言编码[建议]有助于提高页面的可访问性，必须设置正确的lang属性，例：html lang=zh-CN [强制]页面必须指定字符编码的meta，且必须是 head 的第一个直接子元素，例：meta charset=UTF-8。 Meta 标记用于定义页面的相关信息，为非成对标记，位于head标记之间。可以有三部分，name http-equiv contenthttp-equiv属性值可以是：refresh(页面刷新) http-equiv=“refresh” content=“5；url=”reply-to(页面回复信息)keywords(页面关键字) 用于某些有哪些信誉好的足球投注网站引擎content-type(页面内容格式) content-type:text/htmlauthor(页面作者)description(页面内容摘要)注：如果没有name属性，那么名称/值对中的名称会采用http-equiv属性的值。Bas