《HTML5编码规范.doc》由会员分享，可在线阅读，更多相关《HTML5编码规范.doc（10页珍藏版）》请在金锄头文库上搜索。
1、HTML5编码规范 规范目的 本文档的目标是使HTML5代码风格保持一致，容易被理解、维护和升级，提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1、 html, css, js, images文件均归档至约定的目录中。 2、html文件命名: 必须单词全字母小写，单词间以-分隔，依实际模块命名，如果同一模块以_& titl
2、e& _ 来组合命名, 以方便添加功能时查找对应页面，团结里的相互理解。 HTML5代码规范 1. 代码风格 1.1 缩进与换行 建议使用4个空格作为一个缩进层级。 建议模板代码的缩进优先保证 HTML 代码的缩进规则。 1.2 命名规则 强制class：必须单词全字母小写，单词间以-分隔，且必须代表相应的模块或部件的内容或功能，不得以html内置样式进行命名，命名应该具有明确的语义。 强制id：必须保持在页面中的唯一性，命名应该具有明确的语义。 1.3 标签 强制Html中的标签名必须使用小写字母。 强制标签的闭合要符合html5的规定。 强制标签的使用必须符合标签的嵌套规则，例：div不得
3、置于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 属性 强制属性必须使用小写字母，其属性值必须用双引号包围。 建议布尔类型的建议不添加属性值。自定义属性建议以 x
4、xx- 为前缀，推荐使用data- 1.5所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (), hr()等; 属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。 1.6语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;目的：减少代码量，1.7尽可能减少div嵌套, 如欢迎访问XXX, 您的用户名是用户名完全可以用以下代码替代: 欢迎访问XXX, 您的用户名是用户名;目的：减少代码量，1.8引入JS库文件, 文
5、件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js; 1.9书写链接地址时, 必须避免重定向，例如：href=”http:/ 即须在URL地址后面加上“/”； 2.0在页面中尽量避免使用style属性,即style=”除非考虑网站http请求，网站响应速度等因素比重情况具体分析; 2. 页面头部 2.1 DOCTYPE 强制使用doctype 来启用标准模式，建议使用大写的 DOCTYPE 2.2 语言编码建议有助于提高页面的可访问性，必须设置正确的lang属性，例： 强制页面
6、必须指定字符编码的meta，且必须是 head 的第一个直接子元素，例：。 Meta 标记用于定义页面的相关信息，为非成对标记，位于标记之间。可以有三部分，name http-equiv contenthttp-equiv属性值可以是：refresh(页面刷新) http-equiv=“refresh” content=“5；url=http:/”reply-to(页面回复信息)keywords(页面关键字) 用于某些搜索引擎content-type(页面内容格式) content-type:text/htmlauthor(页面作者)description(页面内容摘要)注：如果没有name属
7、性，那么名称/值对中的名称会采用http-equiv属性的值。Base 页面中的所有标签在新窗口中打开，target值有_blank,_parent,_self,_top。对应的是连接，href的值可以确定。Title 定义文档的标题Link 用于样式的连接Style 用于直接写样式Script 定义用户客户端脚本文件2.3 CSS和JavaScript引入 强制引入css时必须指明rel=stylesheet，在引入css和javascript时必须指明type属性。 建议Javascript代码必须放在页面末尾或采用异步加载。 2.4 Head内容 强制Title标签必须设置为head的直
8、接子元素，并紧随charset声明之后。 强制Favicon保证可访问，例： 强制Viewport属性必须指定。 3. 图片 强制禁止 img 的 src 取值为空，延迟加载的图片也要增加默认的 src属性值。 建议重要图片添加 alt 属性值。 建议添加 width 和 height 属性以避免页面抖动。 4. 表单 4.1 控件标题 强制文本标题的控件必须使用 label 标签将其与其标题相关联，例： 我已确认上述条款或用户： 4.2 按钮 强制使用 button 元素时必须指明 type 属性值 4.3 可访问性 建议当使用 JavaScript 进行表单提交时，应使原生提交功能正常工作
9、。 建议 根据内容类型指定输入框的 type 属性，例： 5. 多媒体 建议使用 audio 以及 video 标签来播放音频、视频时，应当注意格式： 音频格式：MP3、WAV、Ogg 视频格式：MP4、WebM、Ogg 6. 注释 强制针对页面或模块的CSS、javascript代码必须进行详细的注释 7. Css命名 7.1样式命名推荐使用英文避免使用汉语拼音, 尽量使用简易的单词组合; 命名方式采用驼峰命名法和划线命名法两种，提高可读性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。划线命名法表明从属关系。如：“
10、.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。 7.2 css属性书写顺序, 建议遵循 布局定位属性自身属性文本属性其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 1. H5 新标签请查看 2. Css 文件命名模块：module.css 基本共用：base.css 布局、版面：layout.css 主题：themes.css 专栏：columns.css 文字：font.css 表单：forms.css 补丁：mend.css 打印：print.css 3. 页面框架命名 强制书写必须使用 3.1 页眉H5新语义化标签 3.2 导航 H
11、5新语义化标签 3.3 页脚 H5新语义化标签 无H5新标签的页面框架，一般具有唯一性，推荐用ID命名。 3.4 主体 使用 main 命名。 3.5 内容 使用 container 命名。 3.6 侧栏 使用 sidebar 命名。 3.7 栏目 使用 column 命名。 3.8 外围整体布局宽度 使用 wrapper 命名。 4页面结构命名: 左右中：left right center 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: s
12、ummary+功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 5模块结构命名 友情链接：friendlink 版权：copyright 滚动：scroll 小技巧：tips 指南：guild 服务：service 投票：vote 合作伙伴：partner H5与之前的兼容性问题具有boolean值的属性在html中有一些元素的属性，当只写属性名称而不指
13、定属性值时，表求属性值为true, 如果设置该属性值为false，则不使用该属性即可。另外，要想将属性值设定true时，也可以将属性名设定为属性值， 或将空字符串设定为属性值。例如input元素中的disabled与readonly就是这样的属性。引号使用在html中使用属性时， 属性值可以使用双引号，也可以使用单引号括起来，在HTML5中做了一些改进，当属性值不包括空字符串、“”、“=”、单引号、双引号等字符时， 属性两边的引号是可以省略的。页面布局的W3C盒子模型每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。属性描述margin有1-4个值设置元素的边界，每个值都是长度、百分比或者auto，百分比值参考上级元素的宽度，允许使用负边界值。还可以使用margin-left margin-right margin-bottom m
