html:web前端开发规范
- 基本原则
* 遵循内容(HTML)、显示(CSS)、行为(JavaScript)分离的代码组织模式
* 代码格式化,保持干净整洁
- HTML部分
2.1. 添加必须的utf-8的字符集,并且使用HTML5的简洁方式:
<meta charset="utf-8" />
2.2. 遵循xhtml 1.0规则:
1) 所有标签必须结束
2) 所有标签必须小写
3) 标签属性必须使用成对引号(单引号或双引号)
4) 标签属性必须有值:
<select>
<option selected="selected"></option>
</select>
<input type="checkbox" checked="checked" />
5) 所有特殊符号必须转义(&、<、>、©、»…)
2.3. 标签属性命名规范
id: 连接符命名法“hello-world”
class: 连接符命名法“hello-world”
name: 骆驼式命名法“helloWorld”
1) 表单元素的id必须加以下前缀
label: lbl
text: txt
password: txt
textarea: txt
file: txt
radio: rad
checkbox: chk
submit: btn
reset: btn
button: btn
hidden: hid
2) 用于结构布局的元素id命名
主容器: main
页头: header
页脚: footer
内容区域: content
LOGO: logo
主导航: main-nav
二级导航: sub-nav
3) name命名
一般用于表单元素,根据当前元素id属性值命名,去掉id属性值的前缀和所有连接符,使用骆骆式命名法命名,例如id=”txt-id-card”,那么name=”idCard”。
2.4. 合理使用标签,语义化结构
1) 标签合理嵌套
a、span、strong、em、p、h1~h6等元素不能包含:div、ul、ol、dl、p
2) 严禁多div症、多span症、多table症,正确使用标签表现DOM结构,在文档去除css的情况下,任然具有结构和可读性,以下是html标记的使用规范:
p:文本段落;
dl:定义列表,可包括标题和内容简介的列表;
ul:无序列表;
ol:有序列表;
h1~h6:文章标题、内容区块标题,根据重要性由大到小区分,h1一个页面只出现一次;
strong/em:强调文本;
img:图像,必须加上alt属性,当图像无法显示时,可表示图像信息,背景和按钮使用css处理,不使用img元素;
table:数据网格,规则的分栏布局,尽可能显性的定宽和定高。
3) 合理化表单结构
a) 使用fieldset元素包裹相同类别的字段;
b) 使用legend元素表示字段类别名称;
c) 使用label表示字段文本,添加必要的for属性,以在点击字段文本时,文本框能获得焦点;
d) 文本框不使用size属性定义宽度,而使用css的width属性;
e) 添加maxlength属性限制输入字符的长度。
4) 严禁使用已在xhtml 1.0中已移除的的标签:
s、i、b、font
2.5. 控制页面默认显示状态
使用js来控制和切换显示的区块、导航、tab,必须先用css处理DOM默认显示状态。
应用示例:
#tabs div { display:none }
#tabs div.selected { display:block }
<div id="tabs">
<ul>
<li><a href="#tab-1">item1</a></li>
<li><a href="#tab-2">item2</a></li>
<li><a href="#tab-3">item3</a></li>
</ul>
<div id="tab-1" class="selected"></div>
<div id="tab-2"></div>
<div id="tab-3"></div>
</div>
- CSS部分
3.1. Css 命名规则
1) 样式类名全部用小写,首字符必须是字母,禁止数字或其他特殊字符。由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)组成。
2) 可以是单个单词,也可以是组合单词,要求能够描述清楚模块和元素的含义,使其具有语义化。避免使用 123456…red,blue,left,right之类的(如颜色、字号大小等)矢量命名,如class=”left_news”、class=”2” ,以避免当状态改变时名称失去意义。
3) 尽量用单个单词简单描述class名称。
4) 双单词或多单词组合方式:形容词_名词、命名空间_名次、命名空间_形容词_名词。例如:news_list、mod_feeds、mod_my_feeds、cell_title
3.2. Class和ID的使用方法
把id留给后台开发和JS使用,除此之外页面的page id(如首页的外层需要一个ID id=”page_index”),页面结构(header main footer)允许用id命名。其他禁止id使用在样式表CSS命名中,一律使用class命名
3.3. 命名空间
在编码思想上,我们可以将页面拆分成不同的层级(布局、模块、元件)。
什么是CSS命名空间?
通过统一的命名规范定义命名的范围,成为CSS class & id命名空间。
布局: 以语义化的单词layout作为命名空间,例如主栏布局命名 layout_main,
只改变layout_命名空间后面的命名,layout始终保留。布局的命名空间为layout_xxx。
模块:页面是由一个或多个模块组成,模块的英文单词是module,规范简写成mod,如新闻模块mod_news,照片展示模块mod_photo_show。模块的命名空间为mod_xxx 。
元件:元件是属于模块内部的,也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell_user_photo。元件的命名空间为cell_xxx 。
3.4. 添加文档样式
1) 引用外部文件方式添加样式
2) 严禁编写标记内代码,比如<div style="display:none;">就应该写成<div class="hide">,然后在样式表中去完成样式代码编写。
3) 严禁在文档中使用<style type="text/css"></style>代码块。
4) 分割样式表,降低代码复杂性,方便管理和维护。但不分割的太细碎,应考虑以后的维护和管理。
5) 如果是发布版本,请压缩合并代码,将多个样式文件合并为单个文件,在线css代码压缩工具:http://www.csscompressor.com/
3.5. 属性简写
为了节省字节数及文件大小,以下属性请使用简写方式:
padding: top right bottom left;
margin: top right bottom left;
border: style width color;
border-top: style width color;
border-right: style width color;
border-bottom: style width color;
border-left: style width color;
border-color: top right bottom left;
border-style: top right bottom left;
border-width: top right bottom left;
background: color url(image) repeat position;
list-style: type position url(image);
font-weight: 400 / 700;
3.6. 缩写16进制色值
color和background-color的属性值如果使用的是16进制色值,当6个数字两两相等时,请使用缩写方式编写,比如:#996600请缩写为#960
3.7. 字体:
1) 全局定义字体:body{font: 12px arial, helvetica, sans-serif; line-height: 1.5;}
2) font-family:
a) 等宽字体组合:Arial, Helvetica, sans-serif;
b) 不等宽(宽扁)字体组合: Verdana, Trebuchet MS, sans-serif;
c) 中文字体:除非内容文本需要,不推荐强制定义
3.8. 页面采用固定流式布局,使用像素(px)固定元素尺寸。
3.9. 编写兼容的CSS代码
1) 页面必须在ie6~8、firefox、opera、safari、chrome下显示兼容;
2) 不使用IE有条件注释方式,对某一版本浏览器编写额外的样式表;
针对某一版本浏览器编写额外的样式表,会对维护和管理照成困难。如出现有显示不兼容现象应首先考虑代码是否有问题(如属性是否对当前浏览器支持),必须编写与常用浏览器都兼容的代码;
不推荐的引用方式:
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="ie6.css" />
<![endif]-->
<!--[if lte ie 7]>
<link type="text/css" rel="stylesheet" href="ie7.css" />
<![endif]-->
3) 不要使用!important或下划线等招数编写代码。
3.10. 添加必须的注释
可根据全局、布局、区块、功能等进行分类和添加注释,方便维护和代码搜索。
3.11. CSS 通用命名
(1)页面框架命名,一般具有唯一性,推荐用ID命名
ID名称 |
命名 |
ID名称 |
命名 |
头部 |
header |
主体 |
main |
脚部 |
footer |
容器 |
wrapper |
侧栏 |
side_bar |
栏目 |
column |
布局 |
layout |
(2)模块结构命名
CLASS名称 |
命名 |
CLASS名称 |
命名 |
模块(如:新闻模块) |
mod (mod_news) |
标题栏 |
title |
内容 |
content |
次级内容 |
sub_content |
(2)导航结构命名
CLASS名称 |
命名 |
CLASS名称 |
命名 |
导航 |
nav |
主导航 |
main_nav |
子导航 |
sub_nav |
顶部导航 |
top_nav |
菜单 |
menu |
子菜单 |
sub_menu |
(3)一般元素命名
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 |
轮播(走马灯) |
carousel |
插件(项目外和js.css等平级的文件夹) |
plugIn |
工具 | tool |
- 图片命名
1) 背景图片:bg001,bg002,bg003……
2) 一般图片:img001,img002,img003……
3) 特定图片:如banner,logo按照具体情况命名
4) 按钮图片:btn_submit,btn_cancel…….
- JavaScript部分
5.1. 在文档中引用js
1) 使用外部文件方式引用js;
2) 将引用js的代码集中放置在一起,可放置在</head>之前或</body>之前,严禁在body间分散放置;
3) 使DOM结构和js代码分离,禁止写在标记内部;
4) 如果是发布版本,请将多个稳定版本的js文件压缩、归类放置到单个文件内,压缩和最小化js文件,在线packer压缩工具:http://dean.edwards.name/packer/。
5.2. 不直接操作DOM样式,使用已在样式表中定义的class来操作DOM样式
5.3. DOM加载
把需要在DOM加载后立即执行的代码封装在同一个函数内执行,不要编写多个window.onload事件或jQuery的ready()事件。
5.4. 严禁使用多个library库
5.5. 优化jQuery代码,提高性能:
1) 选择器从最近的ID开始继承或直接使用ID选择器:$(”#id tag”);
2) 选择器在使用class前加上标签名:$(”span.span1”);
3) 尽量使用ID选择器代替class;
4) 要获取子元素请使用子选择器,而不要使用后代选择器:$(”#id > span”);
5) 缓存jQuery对象,不要在代码中重复出现相同的选择器:var btn=$(”#id”);
6) 使用data()存储临时变量;
7) 限制直接操作DOM,在更新DOM前应该准备好需要的东西;
8) 避免使用live()方法绑定事件;
9) 在父级元素监听事件,对目标元素进行操作:
$(”#id”).click(function(e){var input=$(e.target);});
10) 推迟加载拖放、动画、视觉特效等代码,把可能会影响页面加载速度的代码绑定到$(window).load()事件中。
转载于:https://www.cnblogs.com/llqwm/p/10024595.html
html:web前端开发规范相关推荐
- 前端传中文文件名_前端工程师需要掌握哪些知识,web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
- (16)WEB前端开发规范之HTML规范
一.WEB前端开发规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本 ...
- Web 前端开发规范手册
Web 前端开发规范手册 一.规范目的 1.1 概述 二.文件规范 2.1 文件命名规则 2.2 文件存放位置规范 2.3 CSS 书写规范 基本原则: 注意细则: 命名规则: id的命名: 基本样式 ...
- Web前端开发规范文档(更新于2013-01-13)
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不 ...
- web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
- Web前端开发规范文档(转)
本文处之:http://www.w3cfuns.com/blog-1-534.html 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本 ...
- Web前端开发规范手册-阿里云
2019独角兽企业重金招聘Python工程师标准>>> 摘要:一.规范目的1.1二.文件规范2.1文件命名规则2.2文件存放位置2.3css书写规2.4html书写规范2.5Java ...
- 问题11:web前端开发规范手册(转)
一.规范目的 1.1 概述 ..................................................................................... ...
- 1+X证书Web前端开发规范手册
一.规范目的 1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本 ...
- Web前端开发规范参考手册
一.规范目的 1.1 概述 为提高团队协作效率,便于后台人员添加功能,及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有 ...
最新文章
- 来来来!DD带大家一起赢台MacBook Pro回家过年!
- git 挽救忘记提交到哪个分支的代码
- phpstudy更改但是php版本没变
- 2012年欧洲杯德国战车止步四强赛
- Array的javascript数据结构描述
- 用 Python 将 QQ 好友头像生成祝福语
- iPhone 诈骗又出新招,别看见弹窗就输密码
- 走在WCF学习的路上---印在脑子里的点点滴滴(两种元数据交换方式的优缺点)...
- linux分辨率 保存,linux分辨率设置方法与问题-linux分辨率的设置方法分享-linux修改分辨率的经验分享_169IT.COM...
- 药店药品管理方案,药店药品的盘点方案,假设进行药店药品的高效盘点?药品盘点步骤是?...
- 基于贝叶斯分类的中文人名用字特征的性别识别
- 定期360评估系统优于年度绩效考核
- JavaEE程序猿的Java世界观⑤
- python itchat实现调用微信接口的第三方模块方法
- traceroute的一些用法
- 十本Android开发学习书籍下载链接
- RN:React Native原理以及新架构JSI、Fabric等概念
- python 输出图像尺寸_Opencv-Python:图像尺寸、图像的读取、显示、保存与复制
- 数值分析之 拉格朗日插值、牛顿插值、分段线性插值实现
- java微信支付v3系列——5.微信支付成功回调