前端组工作流程
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, 内联元素中不可嵌套块级元素;目的:减少代码量,也有利于seo
1.7尽可能减少div嵌套, 如<div class=”box”& gt;<div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”& gt;<p>欢迎访问XXX, 您的用户名是<span>用户名</span></p>< /div>;目的:减少代码量,也有利于seo
1.8引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如kie.js;
1.9书写链接地址时, 必须避免重定向,例如:href=”www.haogu/”, 即须在URL地址后面加上“/”;
2.0在页面中尽量避免使用style属性,即style=”…”除非考虑网站http请求,网站响应速度等因素比重情况具体分析;
2.页面头部
2.1DOCTYPE
[强制]使用doctype 来启用标准模式,建议使用大写的 DOCTYPE
2.2语言编码
[建议]有助于提高页面的可访问性,必须设置正确的lang属性,例:<html lang="zh-CN">
[强制]页面必须指定字符编码的meta,且必须是 head 的第一个直接子元素,例:<meta charset="UTF-8">。
2.3CSS和JavaScript引入
[强制]引入css时必须指明rel="stylesheet",在引入css和javascript时必须指明type属性。
[建议]Javascript代码必须放在页面末尾或采用异步加载。
2.4Head内容
jquery框架定义[强制]Title标签必须设置为head的直接子元素,并紧随charset声明之后。
[强制]Favicon保证可访问,例:<link rel="shortcut icon" href="path /favicon.ico">
[强制]Viewport属性必须指定。
3.图片
[强制]禁止 img 的 src 取值为空,延迟加载的图片也要增加默认的 src属性值。
[建议]重要图片添加 alt 属性值。
[建议]添加 width 和 height 属性以避免页面抖动。
4.表单
4.1控件标题
[强制]文本标题的控件必须使用 label 标签将其与其标题相关联,例:
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>或<label for="user">用户:</label><input type="text" name="user" id="user">
4.2按钮
[强制]使用 button 元素时必须指明 type 属性值
4.3可访问性
[建议]当使用 JavaScript 进行表单提交时,应使原生提交功能正常工作。
[建议] 根据内容类型指定输入框的 type 属性,例:<input type="date">
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论