欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Web前端代码规范与页面布局_html/css_WEB-ITnose

程序员文章站 2024-01-12 21:06:10
...
一、 规范目的:

为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在 网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化。

二、 规范基本准则:

符合web标准,使用具有语义的标签,使结构、表现、行为分离,兼容性优良,页面性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。

三、 文件规范:

html、css、js、images文件均归档至约定的目录中。

1. html

(1)编码:所有编码均采用xhtml,标签必须闭合,属性值用双引号包括,编码统一为utf-8。

(2)语义化:语义化html,正确使用标签,充分利用无兼容性问题的 html自身标签。

(3)文件命名:命名以中文命名,依实际模块命名,如同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面。

(4)文件头部head的内容

  • title,需要添加标题
  • 编码charset=UTF-8
  • 缓存:
  • Content=’-1’表示立即过期。

  • 添加description、keywords内容
  • Robots content部分有四个指令选项:index、noindex、follow、nofollow,用‘,’分隔,如:

    在head标签内引入css文件,有助于页面渲染

    引入样式文件或 JavaScript文件时, 须略去默认类型声明.

    页脚引入javascript文件

    (5)连接地址标签:书写链接地址时,避免重定向,如href=” http://www.100sucai.com/”,需在地址后面加‘/’

    (6)尽可能减少div嵌套,如:根据重要性使用h1-6标签,段落使用p,列表使用ul,内联元素中不可嵌套块级元素,为含有描述性表单元素(input,tetarea)添加label

    (7)图片

    能以背景形式呈现的图片,尽量写入css样式中

    区分作为内容的图片和作为背景的图片,作为背景的图片采用Css sprite技术,放在一张大图里

    重要图片必须加上alt属性,给重要的元素和截断的元素加上title

    (8)注释:给区块代码及重要功能加上注释,方便后台添加功能

    (9)转义字符:特殊符号使用转义字符

    (10)页面架构时考虑扩展性

    2. Css

    (1)页面内部尽量避免使用style属性

    (2)css放在head标签中,由link标签引入,使页面的结构与表现分离。

    (3)文件命名:以英文命名,后缀.css,共用:base.css,首页:index.css,其他页面样式依具体模块需求命名

    (4)编码统一为utf-8

    (5)Class与id的使用:

    Id:具有唯一性,是父级的,用于标识页面上的特定元素,如header/footer/wrapper/left/right之类

    Class:可以重复使用,是子级的,可用于页面上任意多个元素

    命名:以小写英文字母、数字、下划线组合命名,避免使用中文拼音,尽量使用简易的单词组合,避免使用拼音,采用驼峰命名法和划线命名法,提高可读性,如:dropMenu、sub_nav_menu、drop-menu等。

    (6)为JavaScript预留钩子的命名, 以 js_ 起始, 比如:js_hide, js_show

    (7)书写代码前,考虑样式重复利用率,充分利用html自身属性及样式继承原理减少代码量,代码建议单行书写,利于后期管理

    (8)图片

    命名:小写英文字母、数字、_ 的组合,使用有意义的名称或英文简写,最好不要使用汉语拼音,区分大写字。

    使用sprite技术, 减小http请求,sprite按模块制作

    (9)书写顺序:保证同类型属性写在一起,一般遵循布局定位属性?>自身属性?>文本属性?>其他属性的书写格式

    (10)书写顺序规则

    定位属性(比如:display, position, float, clear, visibility, table-layout等)

    自身属性(比如:width, height, margin, padding, border等)

    文本属性(比如:font, line-height, text-align, text-indent, vertical-align等)

    其他属性(比如:color, background, opacity, cursor,content, list-style, quotes等)

    (11)缩进:统一使用tab进行缩进

    (12)样式表中中文字体名,最好转成unicode码,以避免编码错误时乱码。

    (13)减少影响性能的属性,如:position,float

    (14)为大区块样式添加注释,小区块适量注释。

    3. Javascript

    (1)文件编码统一为utf-8, 书写时, 每行代码结束必须有分号‘;’,尽量根据需求编写原生代码开发,以避免造成的代码污染(沉冗代码 || 与现有代码冲突 || …)等问题

    (2)在页脚引入 javascript脚本,采用外链引入形式,使页面的结构与行为分离

    (3)命名:

    文件命名:以英文命名,后缀为.js,共用:common.js,其他命名可根据模块需求命名

    变量命名:驼峰式命名,原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun。变量集中声明, 避免全局变量

    类命名:首字母大写, 驼峰式命名. 如 ITaoLun;

    函数命名: 首字母小写驼峰式命名. 如iTaoLun();

    命名语义化, 尽可能利用英文单词或其缩写;

    (4)规则

    尽量避免使用存在兼容性及消耗资源的方法或属性

    后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示

    代码结构明了, 加适量注释. 提高函数重用率

    注重与html分离, 减小reflow, 注重性能.

    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

    四、 自适应页面布局(主要平台为ios和安卓,所以此不考虑IE兼容性)

    1. 布局细节

    首先头部head中加入meta新标签

    ,让网页宽度默认等于屏幕宽度,原始缩放比例为1.0,即100%显示。

    Position:不能使用绝对定位

    Width:不能使用px宽度,应使用百分比或auto

    Font:不能使用绝对大小,应使用em

    2. 流式布局float的使用

    各个区块的位置都是浮动的,不是固定不变的。float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    3. CSS3引入的Media Query模块,可自动探测屏幕宽度,加载相应的CSS文件

    ,屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件

    ,如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    @importurl("tinyScreen.css") screen and (max-device-width: 400px);

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

    @media screen and (max-device-width: 400px) {

        .column {

          float: none;

          width:auto;

        }

    转自:http://blog.sina.com.cn/s/blog_6c2f334c01018rmz.html