H5书写规范概念熟记篇

前端组工作流程1.由渠道或代理提交订单2.经理签字之后前端组汉化3.将汉化改错之后的版本提交到服务器4.给用户列出所需资料清单5.进行修改6.提交客户不满意重复第5部7.提交清单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,内联元素中不可嵌套块级元素;目的：减少代码量，也有利于seo1.7尽可能减少div嵌套,如divclass=”box”>divclass=”welcome”欢迎访问XXX,您的用户名是divclass=”name”用户名/div/div/div完全可以用以下代码替代:divclass=”box”>p欢迎访问XXX,您的用户名是span用户名/span/p/div;目的：减少代码量，也有利于seo1.8引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.4.1.min.js;引入插件,文件名格式为库名称+插件名称,比如jQuery.cookie.js;1.9书写链接地址时,必须避免重定向，例如：href=””,即须在URL地址后面加上“/”；2.0在页面中尽量避免使用style属性,即style=”…”除非考虑网站http请求，网站响应速度等因素比重情况具体分析;2.页面头部2.1DOCTYPE[强制]使用doctype来启用标准模式，建议使用大写的DOCTYPE2.2语言编码[建议]有助于提高页面的可访问性，必须设置正确的lang属性，例：htmllang=zh-CN[强制]页面必须指定字符编码的meta，且必须是head的第一个直接子元素，例：metacharset=UTF-8。2.3CSS和JavaScript引入[强制]引入css时必须指明rel=stylesheet，在引入css和javascript时必须指明type属性。[建议]Javascript代码必须放在页面末尾或采用异步加载。2.4Head内容[强制]Title标签必须设置为head的直接子元素，并紧随charset声明之后。[强制]Favicon保证可访问，例：linkrel=shortcuticonhref=path/favicon.ico[强制]Viewport属性必须指定。3.图片[强制]禁止img的src取值为空，延迟加载的图片也要增加默认的src属性值。[建议]重要图片添加alt属性值。[建议]添加width和height属性以避免页面抖动。4.表单4.1控件标题[强制]文本标题的控件必须使用label标签将其与其标题相关联，例：labelinputtype=checkboxname=confirmvalue=on我已确认上述条款/label或labelfor=user用户：/labelinputtype=textname=userid=user4.2按钮[强制]使用button元素时必须指明type属性值4.3可访问性[建议]当使用JavaScript进行表单提交时，应使原生提交功能正常工作。[建议]根据内容类型指定输入框的type属性，例：inputtype=date5.多媒体[建议]使用audio以及video标签来播放音频、视频时，应当注意格式：音频格式：MP3、WAV、Ogg视频格式：MP4、WebM、Ogg6.注释[强制]针对页面或模块的CSS、javascript代码必须进行详细的注释7.Css命名7.1样式命名推荐使用英文避免使用汉语拼音,尽量使用简易的单词组合;命名方式采用驼峰命名法和划线命名法两种，提高可读性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。划线命名法表明从属关系。如：“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。7.2css属性书写顺序,建议遵循布局定位属性–自身属性–文本属性–其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.8.JavaScript书写规范8.1文件编码统一为utf-8,书写过程过,每行代码结束必须有分号;要检查网上down下来的代码造成的代码污染(沉冗冲突，代码注入…)等，有的可以firefox的一些扩展插件分析;8.2库引入:原则上仅引入jQuery库,若需引入第三方库,须与团队其他人员讨论决定;8.3命名语义化,尽可能利用英文单词或其缩写;8.4代码结构明了,加适量注释.提高函数重用率;8.5注重与html分离,减小reflow,注重性能.9CSSHack即便是完美的CSS也未必能在目前众多的终端浏览器中呈现一致的效果，所以，CSSHack在很多情况下都是必要的，建议先以对CSS标准支持得比较好的浏览器（比如“Firefox”或者“Chrome”）为主编辑CSS，最后再处理IE的兼容性——单独为IE建立一个CSS文件（比如for-ie.css,fuck-ie.css,ie-hack.css等），最后在HTML文件中，通过IE的条件注释按需引用。命名规范1.H5新标签请查看2.Css文件命名:模块：module.css基本共用：base.css布局、版面：layout.css主题：themes.css专栏：columns.css文字：font.css表单：forms.css补丁：mend.css打印：print.css3.页面框架命名强制书写必须使用3.1页眉H5新语义化标签header3.2导航H5新语义化标签nav3.3页脚H5新语义化标签footer无H5新标签的页面框架，一般具有唯一性，推荐用ID命名。3.4主体使用main命名。3.5内容使用container命名。3.6侧栏使用sidebar命名。3.7栏目使用column命名。3.8外围整体布局宽度使用wrapper命名。4页面结构命名:左右中：leftrightcenter子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题:title摘要:summary+功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg5模块结构命名友情链接：friendlink版权：copyright滚动：scroll小技巧：tips指南：guild服务：service投票：vote合作伙伴：partner6一般元素命名（参考）CLASS名称命名CLASS名称命名二级sub面包屑breadcrumb标志logo广告Bner(禁用banner或ad)登陆login注册regsiter/reg搜索search加入join状态status按钮btn滚动scroll标签页tab文章列表list短消息msg/message当前的current提示小技巧tips图标icon注释note指南guide服务service热点hot新闻news下载download投票vote合作伙伴partner友情链接link版权copyright演示demo下拉框select摘要summary翻页pages主题风格themes设置set成功suc按钮btn文本txt颜色color/c背景bg边框border/bor居中center上top/t下bottom/b左left/l右right/r添加add删除del间隔sp段落p弹出层pop公共global/gb操作op密码pwd透明tran信息info重点hit预览pvw单行输入框input首页index日志blog相册photo留言板guestbook用户user确认confirm取消cancel报错error