一、
为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化。
二、
符合web标准,使用具有语义的标签,使结构、表现、行为分离,兼容性优良,页面性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。
三、 文件规范:
html、css、js、images文件均归档至约定的目录中。
1.
(1)编码:所有编码均采用xhtml,标签必须闭合,属性值用双引号包括,编码统一为utf-8。
(2)语义化:语义化html,正确使用标签,充分利用无兼容性问题的html自身标签。
(3)文件命名:命名以中文命名,依实际模块命名,如同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面。
(4)文件头部head的内容
Content=’-1’表示立即过期。
(5)连接地址标签:书写链接地址时,避免重定向,如href=”
http://www.example.com/”,需在地址后面加‘/’
(6)尽可能减少div嵌套,如:根据重要性使用h1-6标签,段落使用p,列表使用ul,内联元素中不可嵌套块级元素,为含有描述性表单元素(input,tetarea)添加label
(7)图片
(8)注释:给区块代码及重要功能加上注释,方便后台添加功能
(9)转义字符:特殊符号使用转义字符
(10)页面架构时考虑扩展性
2. Css
(1)页面内部尽量避免使用style属性
(2)css放在head标签中,由link标签引入,使页面的结构与表现分离。
(3)文件命名:以英文命名,后缀.css,共用:base.css,首页:index.css,其他页面样式依具体模块需求命名
(4)编码统一为utf-8
(5)Class与id的使用:
(6)为JavaScript预留钩子的命名, 以 js_ 起始, 比如:js_hide, js_show
(7)书写代码前,考虑样式重复利用率,充分利用html自身属性及样式继承原理减少代码量,代码建议单行书写,利于后期管理
(8)图片
(9)书写顺序:保证同类型属性写在一起,一般遵循布局定位属性–>自身属性–>文本属性–>其他属性的书写格式
(10)书写顺序规则
(11)缩进:统一使用tab进行缩进
(12)样式表中中文字体名,最好转成unicode码,以避免编码错误时乱码。
(13)减少影响性能的属性,如:position,float
(14)为大区块样式添加注释,小区块适量注释。
3. Javascript
(1)文件编码统一为utf-8, 书写时, 每行代码结束必须有分号‘;’,尽量根据需求编写原生代码开发,以避免造成的代码污染(沉冗代码|| 与现有代码冲突 || …)等问题
(2)在页脚引入javascript脚本,采用外链引入形式,使页面的结构与行为分离
(3)命名:
(4)规则
4. 注释规范
(1)html:注释格式,”-”只能在注释的始末位置,不可置入注释文字区域
(2)Css:注释格式
(3)Javascript:单行注释://这儿是注释,多行注释:
5. Css Hack 特殊符号
(1)* :IE6/7都能识别*,标准浏览器不识别
(2)_:只有IE6识别
(3)!Important:IE6不识别,Firefox,IE7/8/9、chorme等主流浏览器均识别
(4)\9:所有浏览器均识别,包括IE6/7/8
(5)+:IE6/7/8识别
(6)书写顺序:先写FF等非IE浏览器所需样式,其次IE8,再次IE7,最后写IE6
四、
1.
2.
各个区块的位置都是浮动的,不是固定不变的。float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
3.
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
4.
|
Web前端代码规范与页面布局
最新推荐文章于 2024-07-13 04:53:52 发布