【前端】#001 编码规范
2015-07-04 14:51
316 查看
HTML编码风格：
文档类型：HTML5类型
<!doctypehtml>
编码：使用meta设置编码类型UTF-8
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
</body>
</html>
大小写：除了TextCDATA元素，其他都使用小写
缩进：整个文件要统一（具体看情况使用2、4空格）
[/code]
换行：出现块级元素(div、p)，列表元素(ul,ol),表格元素(table)换行，行内元素大于80换行
[/code]
编程风格
严格使用关闭标记，避免嵌套出错
不要混合写入JS，CSS，HTML（把CSS，JS抽离出来）
img、object标签应该使用alt属性
button,input等表单标记，记得添加title属性
简化引用CSS和JS的语句
<!--不推荐–>
<linkrel="stylesheet"href="//www.google.com/css/maia.css"type="text/css">
<!--推荐–>
<linkrel="stylesheet"href="//www.google.com/css/maia.css">
<!--不推荐–>
<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"type="text/javascript"></script>
<!--推荐–>
<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"></script>
6.优先使用button标签，而不是<inputtype=”button”title=”按钮”/>
7.html标签必须设置title属性
CSS开发规范
编码字符集：UTF-8（无BOM），保存成CSS文件
必须使用小写字母编写
命名使用有意义的简短单词（或者团队规范）
冒号后面加上空格
选择器和每一个属性各占一行（选择器和花括号不用另起一行）
缩进：固定使用2/4个空格，不使用tab键
选择器名和选择器名之间空一行（两个样式选择器之间空一行）
每一个样式结束都需要用分号隔开
/*不推荐*/h3{
font-weight:bold;
}/*推荐*/h3{
font-weight:bold;
}/*不推荐*/a:focus,a:active{position:relative;top:1px;}
/*推荐*/h1,
h2,
h3{
font-weight:normal;
line-height:1.2;
}书写顺序
css应该按以下顺序书写，原则是定位布局优先、细节其次
显示模式display
定位或浮动方式position、float、clear
上下左右定位偏移量left、top、right、bottom
高宽尺寸height、width
内外填充margin、padding
边框border
背景background
颜色color
字体文本font
文本line-height、text-align
其他杂项
Z-index使用规范
原则上模块css使用到绝对定位要遵守如下规范，但不强制执行。在开发过程中少用绝对定位布局，多使用布局管理器来管理布局。
地图：使用的索引范围从0-99，包括瓦片地图、自定义图层、图例、图层管理等
界面业务模块：使用的索引从100-199，水情实时列表等
页脚：使用的索引范围从700-799，包括版权，备案，技术支持等
导航：使用的索引范围从800-899，包括logo、系统名称、导航栏等
弹出框：使用的索引范围从900-999，包括设置面板、提示框等
