web前端开发规范手册
软件开发Web前端开发规范
![软件开发Web前端开发规范](https://img.taocdn.com/s3/m/e5dc9535f342336c1eb91a37f111f18582d00c6a.png)
软件开发Web前端开发规范软件开发Web前端开发规范是指在进行Web前端开发过程中,为了统一团队的代码风格,提高代码的可读性、可维护性和可扩展性而制定的规范。
本文将从代码结构、命名规范、注释规范、HTML规范、CSS规范、JavaScript规范以及版本控制等几个方面,详细阐述Web前端开发规范的内容。
一、代码结构规范:1. 项目根目录下应包含必要的文件,如index.html、package.json 等;2. 将不同类型的文件(如HTML、CSS、JavaScript)分别放在不同的文件夹中,方便管理;3.对于大型项目,可以按照模块对文件进行进一步的组织。
二、命名规范:1. 变量、函数名使用驼峰命名法,如helloWorld;2. 类名使用帕斯卡命名法,如HelloWorld;3.常量名使用全大写字母,如PI;4. 文件名使用小写字母,多个单词使用下划线连接,如index.html。
三、注释规范:1.对于重要的函数、类、模块等,应添加详细的注释说明;2.使用单行注释(//)或多行注释(/**/)来注释代码,注释应描述清楚代码的功能和作用;3.注释应写在代码的上方或右侧,避免在代码行尾添加注释。
四、HTML规范:2.缩进使用两个空格,不使用制表符;4. 使用双引号包裹属性值,如class="container";5.避免使用行内样式,将样式写入CSS文件中。
五、CSS规范:1.代码缩进使用两个空格,不使用制表符;2. 使用中划线连接多个单词,如table-layout;3.选择器命名简洁明了,避免使用过长、复杂的名称;4.属性书写顺序应统一,比如先写布局相关的属性,再写样式相关的属性;5.使用CSS预处理器,如LESS、SASS等,提高开发效率。
六、JavaScript规范:1.使用ES6语法,提高代码的可读性和可维护性;2. 变量声明使用let或const,避免使用var;3.函数命名简洁明了,避免使用过长、复杂的名称;4.将多次使用的代码封装成函数,提高代码的复用性;5.避免使用全局变量和全局函数,减少命名冲突的可能性。
Web前端开发规范手册
![Web前端开发规范手册](https://img.taocdn.com/s3/m/0e28fc7658fafab069dc024b.png)
Web前端开发规范手册修订历史记录日期版本说明作者2012年12月31日 1.0初稿施昀2012年01月05日 1.1施昀、戴静2012年01月07日 1.2施昀目录修订历史记录 (1)一、规范目的 (2)1.1概述 (2)二、基本准则 (2)三、文件规范 (3)2.1文件命名规则 (3)2.1.1HTML的命名原则 (3)2.1.2图片的命名原则 (3)2.1.3.javascript的命名原则 (4)2.1.4动态语言文件命名原则 (4)2.2文件存放位置规范 (4)2.3CSS书写规范 (4)2.3.1基本原则 (4)2.3.2注意细则 (5)2.3.3命名规则 (6)2.4html书写规范 (9)2.4.1head区代码规范 (9)2.4.2body区代码规范 (10)2.5JavaScript书写规范 (10)2.6图片规范 (10)2.7注释规范 (11)2.7.1html注释 (11)2.7.2css注释 (11)2.7.3JavaScript注释 (11)四、执行模式 (12)一、规范目的1.1概述提高团队协作效率便于前端开发以及后期优化维护方便新进的成员快速上手输出高质量的代码本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。
本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更新此文档。
二、基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良。
代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
开发时需要遵循如上基本准则,特殊情况可以有所宽限,如一些老项目的页面改造。
三、文件规范2.1文件命名规则[使用场景:在新建网页、图片、脚本、CSS文件时,根据此规则给文件命名并放入指定位置]文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字空格和特殊字符。
命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。
前端工程师手册
![前端工程师手册](https://img.taocdn.com/s3/m/a5731f45a7c30c22590102020740be1e650ecce4.png)
前端工程师手册一、前言本手册旨在为前端工程师提供一套完整的技术指南和操作规范,以确保前端开发工作的顺利进行。
本手册涵盖了前端开发的基础知识、工具、最佳实践、代码规范、安全措施等方面,旨在提高前端工程师的工作效率和质量。
二、基础知识1. HTML、CSS、JavaScript基础语法和常用标签库。
2. 了解前端框架(如React、Vue、Angular等)的基本概念和使用方法。
3. 熟悉常用的前端开发工具(如VS Code、WebStorm等)。
4. 了解浏览器兼容性问题及处理方法。
三、工具与环境1. 熟悉常用的前端开发工具和插件,如Visual Studio Code插件(如Prettier、ESLint等)。
2. 熟悉常用的代码编辑器,如Sublime Text、Atom等。
3. 熟悉常用的版本控制工具,如Git。
4. 熟悉服务器配置和使用,如Nginx、Apache等。
四、最佳实践1. 遵循编码规范,包括代码格式、注释、命名规范等。
2. 优化性能,避免过度加载,提高页面响应速度。
3. 关注用户体验,提供良好的交互性和视觉效果。
4. 遵循跨浏览器兼容性原则,确保代码在不同浏览器中的正常展示。
5. 及时更新和学习新的前端技术和框架,保持技术更新。
五、代码规范1. 代码风格:使用统一的缩进、空格和注释风格。
2. 文件命名:使用有意义的文件名,遵循规范。
3. 目录结构:合理规划目录结构,便于管理和维护。
4. 版本控制:遵循版本控制规则,及时提交和更新代码。
5. 单元测试:编写单元测试用例,确保代码质量和稳定性。
六、安全措施1. 防止XSS攻击:使用HTML转义机制,避免注入恶意代码。
2. 防止CSRF攻击:设置适当的CSRF令牌,防止跨站请求伪造。
3. 防止SQL注入:使用参数化查询或预处理语句,避免直接拼接SQL语句。
4. 密码加密存储:使用安全的密码加密存储方式,确保用户数据安全。
5. 防止文件上传漏洞:对上传的文件进行安全检查和限制,避免恶意文件上传。
WEB前端开发代码使用要求规范
![WEB前端开发代码使用要求规范](https://img.taocdn.com/s3/m/80d4277511661ed9ad51f01dc281e53a5902516c.png)
WEB前端开发代码使用要求规范1.编码规范- 使用标准的HTML、CSS和JavaScript语法。
-使用缩进和空格来提高代码的可读性。
-使用注释来解释代码的目的和功能。
2.文件和目录结构规范-使用有意义的文件和目录命名,方便其他开发人员寻找代码。
-在项目中使用统一的目录结构,例如将HTML文件存放在一个文件夹中,将样式文件存放在另一个文件夹中,以此类推。
3.HTML规范- 避免在HTML中直接写入样式和脚本代码,应将样式和脚本代码分离到对应的CSS和JavaScript文件中。
4.CSS规范-使用适当的选择器,避免过多的嵌套。
-避免使用内联样式,应将样式写在CSS文件中,以提高可维护性。
- 使用合适的样式命名规则,例如使用BEM(Block-Element-Modifier)命名规则,或其他约定俗成的命名规则。
5. JavaScript规范-使用合适的变量和函数命名,提高代码的可读性。
-避免使用全局变量,应将变量和函数封装在模块中。
- 使用严格模式(`use strict`),避免不规范的语法和行为。
- 避免使用`eval`和`with`等不安全的代码。
-在循环中使用合适的终止条件,避免死循环。
6.代码结构规范-代码应具有良好的组织结构,例如使用模块化的方式来组织代码。
-尽量遵循单一职责原则,每个函数和类应该只负责一件事情。
-提取重复的代码块,封装成函数或类,以提高代码的复用性。
-不要写过长的函数或类,应该根据需要进行拆分和重构。
7.注释规范-使用注释来解释代码的目的和功能,特别是代码的复杂部分。
-注释应该清晰、简洁,方便其他开发人员理解代码。
-避免使用无用的注释,注释应该随着代码的变化而更新。
总之,遵守WEB前端开发代码使用要求规范能够提高代码的质量和开发效率,减少错误和维护成本。
同时,还能提高团队合作的效率,方便其他开发人员理解和修改代码。
因此,在进行WEB前端开发时应该积极遵守和推崇相关规范。
WEB前端开发规范文档
![WEB前端开发规范文档](https://img.taocdn.com/s3/m/506d104225c52cc58bd6be39.png)
WEB前端开发规范文档目录WEB前端开发规范文档 (1)规范目的 (2)基本准则 (2)文件规范 (2)html书写规范 (2)html其他规范 (3)css书写规范 (4)JavaScript书写规范 (5)jQuery部分 (5)开发及测试工具约定 (6)其他规范 (6)规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改:基本准则1:符合web标准, 语义化html,遵循内容(HTML)、显示(CSS)、行为(JavaScript)分离的代码组织模式。
2:代码格式化,保持干净整洁。
3:换行必须缩进一个tab。
4:编写所有前台页面时,请使用已有模板进行复制,在模板的基础上进行开发。
5:每一个页面都必须有一个独立的css,js文件。
6:如果不是用HTML5编写的网站,请用IE7,IE8,IE9,火狐,谷歌,webkit,safari内核进行测试兼容性。
7:如果是HTML5编写的网站,请用IE9,火狐,谷歌,webkit,safari内核进行测试兼容性。
文件规范1: html, css, js, images文件均归档至<系统开发规范>约定的目录中;2: html文件命名: 英文命名, 后缀:htm: 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3: css文件命名: 英文命名, 后缀:css: 共用base:css, 首页index:css, 其他页面依实际模块需求命名:;4: Js文件命名: 英文命名, 后缀:js: 共用common:js, 其他依实际模块需求命名:html书写规范1:所有元素都必须小写,属性也是,如: <input type=”text”id=”idName”/>正确<INPUT TYPE=”text”ID=”idName”/>错误2:元素必须成对出现,如<span>必须写成<span></span>特殊元素除外,如:<br /><hr /><img /><input />3:标签中不允许出现样式,必须用class来声明样式,如:<input type=”text”id=”idName”style=”text-align:right;”/>错误<input type=”text”id=”idName”class=”class-name”/>正确4:元素id命名必须是驼峰式命名如:<input type=”text”id=”idName”/>正确<input type=”text”id=”idname”/>错误<input type=”text”id=”id-name”/>错误5:元素class命名规范是:元素简写+”-”+功能名,如:<button calss=”btn-save”></button>正确<button calss=”btnSave”></button>错误<button calss=”save”></button>错误6:元素name命名必须遵循驼峰式命名法。
Web前端开发规范手册
![Web前端开发规范手册](https://img.taocdn.com/s3/m/6b9aa4f52cc58bd63086bd21.png)
Web前端开发规范手册一、规范目的1.1 概述 1二、文件规范2.1 文件命名规则 (1)2.2 文件存放位置22.3 css 书写规范32.4 html书写规范72.5 JavaScript书写规范112.6 图片规范122.7 注释规范132.8 css 浏览器兼容13一、规范目的1.1 概述为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档.二、文件规范2.1 文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。
a. HTML的命名原则引文件统一使用index.htm index.html index.asp文件名(小写)各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。
例如:关于我们\ aboutus信息反馈\ feedback产品\ product如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示;每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm index.html index.asp;b. 图片的命名原则图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质例如:广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名:banner标志性的图片取名为:logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu装饰用的照片我们取名:pic不带链接表示标题的图片我们取名:title范例:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg鼠标感应效果图片命名规范为"图片名+_+on/off"。
前端开发规范文档
![前端开发规范文档](https://img.taocdn.com/s3/m/c641c7c9ed3a87c24028915f804d2b160b4e86c8.png)
前端开发规范文档一、概述。
本文档旨在规范前端开发工作,统一团队成员的开发风格,提高代码质量和可维护性。
在前端开发中,规范是非常重要的,它可以让团队成员之间的合作更加顺畅,代码更加易读易懂。
本规范文档将涵盖HTML、CSS、JavaScript等前端开发的相关规范,希望每位开发人员都能认真遵守。
二、HTML规范。
1. 文件命名规范。
文件名应使用小写字母,单词之间可以使用连字符“-”连接,例如,index.html、about-us.html。
文件名应简洁明了,不使用无意义的数字或字符。
2. 代码缩进规范。
使用两个空格进行代码缩进,不使用Tab键。
3. 标签规范。
标签名应使用小写字母。
标签属性值应使用双引号。
4. 注释规范。
在需要注释的地方使用<!--->进行注释。
5. 其他规范。
应尽量避免使用行内样式和行内脚本。
尽量减少标签的嵌套层级,保持HTML结构的简洁性。
三、CSS规范。
1. 文件组织规范。
将CSS文件统一放置在一个文件夹中,不要将CSS文件散落在各个目录中。
可以根据模块或页面的不同,将CSS文件拆分为多个文件,使用@import进行引入。
2. 类名规范。
类名应使用小写字母,单词之间可以使用连字符“-”连接,例如,header-nav、footer-content。
类名应简洁明了,不使用无意义的数字或字符。
3. 属性顺序规范。
CSS属性应按照一定的顺序书写,例如,布局定位属性、盒模型属性、文字排版属性、视觉效果属性等。
4. 其他规范。
尽量避免使用!important,除非必要情况下。
尽量使用缩写属性,减少代码量。
四、JavaScript规范。
1. 变量命名规范。
变量名应使用驼峰命名法,例如,myName、isShow。
变量名应简洁明了,不使用无意义的单个字母。
2. 代码缩进规范。
使用两个空格进行代码缩进,不使用Tab键。
3. 注释规范。
在需要注释的地方使用//进行单行注释,使用/ /进行多行注释。
前端开发知识:前端开发的工作流程和规范
![前端开发知识:前端开发的工作流程和规范](https://img.taocdn.com/s3/m/da638bd46394dd88d0d233d4b14e852458fb39be.png)
前端开发知识:前端开发的工作流程和规范前端开发工作流程和规范是指前端开发人员在进行Web应用程序的开发时应遵循的一系列步骤和标准。
这些步骤和标准旨在确保开发出的Web应用程序能够在各种不同的浏览器和平台上保持一致的外观和功能性能,并且能够在不同的开发环境中进行有效的协作和管理。
前端开发工作流程前端开发的工作流程可以大致分为如下几个步骤:1.计划和设计阶段在这个阶段,开发人员需要与客户进行沟通,了解他们的需求和期望,以及设计师给出的设计方案。
这个过程中需要考虑到Web应用程序的目的、目标用户、多平台兼容性和可扩展性,以及如何实现所期望的外观和功能。
2.开发阶段在这个阶段,前端开发人员需要完成设计师提供的设计方案,并开发出Web应用程序所需的HTML、CSS和JavaScript代码。
这个过程中需要考虑到代码的可读性、可重用性和可维护性,以及如何优化代码以提高性能和可访问性。
3.测试和调试阶段在这个阶段,前端开发人员需要测试Web应用程序在各种不同的浏览器和操作系统上的表现,以确保它能提供一致的用户体验和功能性能。
同时需要进行调试和故障排除,以处理可能出现的各种问题。
4.上线和维护阶段在这个阶段,前端开发人员需要将Web应用程序部署到生产环境中,并对其进行监视和维护,以确保它能够稳定运行并且时刻满足用户的需求和期望。
同时需要定期更新和优化代码,以保持它的可维护性和可扩展性。
前端开发规范为了保证Web应用程序的质量和可维护性,前端开发人员需要遵循一系列开发规范。
以下是一些常见的前端开发规范:1. HTML规范HTML标记应该使用小写,并且要求所有的闭合标签都必须关闭。
同时,应该避免使用标签的属性,如果必须使用,应该使用双引号而不是单引号。
此外,HTML标记应该符合标准,避免使用过时的标记。
2. CSS规范CSS规范包括命名规范、选择器规范、布局规范、字体规范等方面。
命名规范应该使用语义化的类名、ID名和属性名。
前端开发设计规范文档
![前端开发设计规范文档](https://img.taocdn.com/s3/m/5e0c838288eb172ded630b1c59eef8c75fbf953d.png)
前端开发设计规范文档一、引言二、代码编写规范1.缩进和空格-使用2个空格作为一个缩进层级。
- 在每个关键词或运算符后添加一个空格,如if (condition) {}。
-每行代码的末尾都应该去掉多余的空格。
2.行长限制每行代码应控制在80个字符以内,避免过长的代码行导致代码难以阅读和理解。
3.注释-使用注释来解释代码的意图和逻辑。
-使用单行注释(//)来注释一行代码,使用多行注释(/*...*/)来注释一段代码。
-注释要保持与代码同步,当代码发生修改时,注释也应随之更新。
4.变量和函数命名- 使用驼峰命名法(camelCase)命名变量和函数。
变量和函数名应该清晰明确,能够准确表达其含义。
-避免使用缩写和简写,除非是常见的缩写或简写形式。
5.常量命名-使用全大写字母和下划线的命名方式命名常量。
-常量名要具有描述性,能够清晰表达其含义。
6.字符串引号-使用双引号("")包裹字符串,避免使用单引号('')。
7.条件判断和循环语句-在条件判断和循环语句中使用花括号({})包裹代码块,即使只有一行代码。
8.数据类型转换-使用严格相等运算符(===)进行数据类型和值的比较,避免使用弱相等运算符(==)。
三、组织结构规范1.文件和文件夹命名-文件和文件夹命名应该清晰明确,能够准确表达其内容。
-文件和文件夹的命名应使用小写字母、短划线和数字的组合,避免使用空格和特殊字符。
2.目录结构前端项目应该按照一定的目录结构进行组织,常见的目录结构如下:- src:项目源代码目录。
- assets:用于存放静态资源文件,如图片、字体等。
- styles:存放样式文件。
- scripts:存放脚本文件。
- pages:存放页面组件。
四、性能优化规范1.文件合并和压缩-将多个CSS和JS文件合并为一个文件,并进行压缩。
-使用工具和插件进行自动化合并和压缩操作。
2.图片优化- 使用适当的图像格式,如JPEG、PNG、WebP等,以提高图像加载速度。
前端开发规范文档
![前端开发规范文档](https://img.taocdn.com/s3/m/5b2968575727a5e9856a61c8.png)
前端开发规范文档规范目的为提高团队协作效率,便于后端开发人员添加功能及前端后期优化维护,输出高质量的代码,特制定该文档。
本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。
本文档如有不对或者不合适的地方请及时提出。
经讨论决定后方可更改。
基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良。
页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
一、html 文件命名及编写规范1、命名规则采用小写英文字母|| _的组合命名,菜单名_功能名称,后缀.html。
如:manage_list.html(管理列表)、manage_add.html(新增)、manage_edit.html(修改)、manage_detail.html(详情)。
同时将页面放在其对应的模块划分目录中。
2、编写规范:(1)文档类型声明及编码统一为html5声明类型“<!DOCTYPE html>”;(2)编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;(3)区域块、功能组件以及需要标注的地方,插入注释。
(4)在布局文件结构时,应遵循语义化标签(该用p不要用div、该用ul、li不要用p,h标签应根据标题层级合理利用)、代码结构简单、清晰明了,少用标签、少套结构(一段结构布局中 1个标签能解决的不要用2个,套2层结构能解决的不要套3层)的基本原则。
代码标签、结构嵌套示例:目标效果图代码结构嵌套<ul><li><h4>罗田县九资河徐冲药材</h4><img src=”***.jpg”><div><h3>茯苓</h3><p>小丁</p><p class=”color_red”>32元/公斤</p></div></li></ul>代码分析:根据目标效果图,实现的代码部分别使用了ul/li /h4/ img /div /h3/ p 这些标签。
前端开发规范文档
![前端开发规范文档](https://img.taocdn.com/s3/m/f5e401a7534de518964bcf84b9d528ea81c72fd2.png)
前端开发规范文档前端开发是指在网站、网页或移动端应用的开发过程中,负责用户界面的设计和开发的工作。
一个良好的前端开发规范可以提高团队的工作效率、降低错误率,并且方便后期的维护和扩展。
本文将介绍一些常见的前端开发规范。
一、HTML规范2.使用正确的缩进和格式:使用合适的缩进和换行,使HTML代码易于阅读和维护。
4. 使用语义化的类名和id名:类名和id名应该能够准确描述元素的作用和功能,避免使用无意义的名称。
二、CSS规范2. 避免使用!important:尽量避免使用!important来覆盖样式,应优先考虑调整选择器的优先级。
3.使用合适的样式复用方式:避免重复的代码,可以使用类名或父子选择器来复用样式。
4. 使用合适的尺寸单位:根据具体情况选择合适的尺寸单位,如px、em、rem等。
5. 使用CSS预处理器:可以使用Sass、Less或Stylus等CSS预处理器来提高开发效率和代码的可维护性。
三、JavaScript规范1. 使用严格模式:在JavaScript代码的开头使用"use strict"启用严格模式,以减少错误和提高代码质量。
2.使用合适的命名规范:变量、函数和类名应该具有描述性的名称,遵循驼峰命名法或下划线分隔符。
3.避免全局变量污染:尽量避免使用全局变量,可以通过使用模块化的方式来封装代码,或者使用命名空间。
4. 避免使用eval和with:避免使用eval函数和with语句,它们可能会引起安全问题和性能问题。
5.使用合适的循环和控制结构:使用合适的循环和控制结构来提高代码的可读性和性能,避免过多嵌套的层级。
四、代码管理规范1. 使用版本控制工具:使用Git等版本控制工具来管理代码的版本,方便团队协作和代码的追踪和回滚。
2.编写有意义的提交信息:每次提交代码时,应编写有意义的提交信息,描述本次提交的内容和目的。
3.周期性地进行代码审查:定期进行代码审查,发现和修复潜在的问题,提高代码质量和稳定性。
WEB前端开发规范
![WEB前端开发规范](https://img.taocdn.com/s3/m/e1c545fb6bd97f192379e9a9.png)
WEB前端开发规范WEB前端开发规范WEB前端开发规范目录1、规范目的2、基本准则3、文件规范4、文件规范5、html书写规范6、css书写规范7、JavaScript书写规范8、图片规范9、注释规范10、开发及测试工具约定11、其他规范12、CSSHack1规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构,网站的发展及未来打好一个基础。
本文档如有不对或者不合适的地方请提出来,基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范3.1、html,css,js,images文件均归档至约定的目录中;23 3.2、html文件命名:命名以中文命名,依实际模块命名,如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面,团结里的相互理解。
例如:我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css,其他样式依实际模块页面需求命名,共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如:微博改版版块名称_时间日期.cssnew_blog_1212.css4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4html书写规范4.1、文档类型声明及编码:统一用;编码统一为。
目的:统一性和网站提高开发合作效率。
4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。
4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。
前端开发规范及注意事项
![前端开发规范及注意事项](https://img.taocdn.com/s3/m/a4c039f4846a561252d380eb6294dd88d1d23d54.png)
前端开发规范及注意事项一、CSS编码规范1、单行形式书写风格的排版约束1.1)每一条规则的大括号 { 前后加空格1.2)多个selector共用一个样式集,则多个selector必须写成多行形式1.3)每一条规则结束的大括号 } 前加空格1.4)属性名冒号之前不加空格,冒号之后加空格1.5)每一个属性值后必须添加分号; 并且分号后空格例如:div.test { width: 100px; height: 200px; }a:focus,a:hover { position: relative; right: 1px; }2、多行形式书写风格的排版约束2.1)每一条规则的大括号 { 前添加空格2.2)多个selector共用一个样式集,则多个selector必须写成多行形式2.3)每一条规则结束的大括号} 必须与规则选择器的第一个字符对齐2.4)属性名冒号之前不加空格,冒号之后加空格2.5)属性值之后添加分号;3、其他规范3.1)使用单引号,不允许使用双引号3.2)如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加,标准属性写在最后,并且属性名称要对齐,例如:div.animation-demo {-webkit-animation: mymove 5s infinite;-moz-animation: mymove 5s infinite;-o-animation: mymove 5s infinite;animation: mymove 5s infinite;}4、命名规则书写规范4.1)规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 _4.2)命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合4.3)命名注意缩写,但是不能盲目缩写,具体请参见常用的CSS 命名规则4.4)不允许通过1、2、3等序号进行命名4.5)避免class与id重名4.6)id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id4.7)class用于标识某一个类型的对象,命名必须言简意赅。
(完整word版)WEB前端开发代码使用要求规范.docx
![(完整word版)WEB前端开发代码使用要求规范.docx](https://img.taocdn.com/s3/m/e4f942ce27284b73f3425086.png)
实用文档WEB前端代码规范规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档。
本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。
本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。
基本准则符合 web标准;语义化 html ;结构、表现、行为分离;兼容性优良。
页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
文件规范1.Html, css ,js ,images 文件均归档至相应约定的目录中。
cssimagesbackStagejs后台模⋯⋯cssWebRootimagesfrontStagejsWEB-INF前台模⋯⋯全局公共模⋯⋯2. html 文件命名:英文驼峰式命名,文件名.html 。
按实际模块需求命名。
3.jsp 文件命名:英文峰式命名,文件名 .jsp 。
按模需求命名。
4.css 文件命名:英文峰式命名,文件名 .css 。
共用 base.css ,首 index.css ,其他面按模需求命名。
5.js 文件命名:英文峰式命名,文件名 .js 。
共用 common.js,其他依模需求命名。
html 书写规范1. 文档型声明及:一html5的声明型<!DOCTYPE html>;一<meta charset="utf-8"/>,写利用IDE 次分明的。
2.非特殊情况下 css 文件必在 <head>...</head> 之引入, link 方式引入而非@import 形式。
3.非特殊情况下 js 文件必在面底部引入。
4.引入式文件或 JavaScript 文件,略去默型声明,写法如下:<link rel="stylesheet"href="..."/><style>...</style><script src="..."></script>5.引入 JS 文件,文件名包含名称及版本号及是否版,比如: jquery-1.4.1.min.js ;6.引入插件,文件名格式名称 +插件名称,比如: jQuery.cookie.js 。
web前端开发规范——手机前端开发规范
![web前端开发规范——手机前端开发规范](https://img.taocdn.com/s3/m/61e901320722192e4436f611.png)
前端开发规范一、项目1.项目名全部采用小写方式,以中划线分隔。
如:my-project-name2.目录名参照上一条规则,有复数结构时,要采用复数命名法,如:scripts, styles, images,data-models3.所有JS文件名,多个单词组成时,采用中划线连接方式,比如说:账号模型文件account-model.js4.CSS多个单词组成时,采用中划线连接方式,比如说:retina-sprites.css5.HTML文件多个单词组成时,采用中划线连接方式,比如说: error-report.html二、HTML1.缩进使用4个空格的soft tabs,可以保证代码在各种环境下显示一致。
2.嵌套的节点应该缩进。
3.在属性上,使用双引号,不要使用单引号。
4.虽然doctype不区分大小写,但是按照惯例,doctype大写。
例:<!DOCTYPE html>5.在引入CSS 和JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。
6.根据H5规范,在引入CSS和JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。
所以,别写多余的代码。
例:<script src="leo.js"></script>三、CSS1.缩进:老规矩,使用4个空格的soft tabs2.每条声明 : 后应该插入一个空格。
如:padding : 10px;3.每条声明只占用一行。
4.所有声明应该以分号结尾。
(包括最后一行,因为你不保证哪天你在此后面增加声明后忘记添加上分号)5.逗号分隔取值之后增加一个空格。
例:box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;6.所有的十六进制值都应该使用小写字母,例: #fff。
Web前端开发规范
![Web前端开发规范](https://img.taocdn.com/s3/m/a13928c1bb4cf7ec4afed015.png)
以Notepad++为例
/
类似的还有…
IDE自带/浏览器插件(调试篇)
IDE自带/浏览器插件(调试篇)
Firebug:为前端攻城师量身制作制定的利器
IDE自带/浏览器插件(调试)
Chrome开发人员工具
Safari用的跟Chrome一样的Web Inspector,默认是隐藏的(偏好设置>高级 >勾选最后一项)
未来计划
Hale Waihona Puke 知识管理平台:以blog或者wiki的形式总结、 分享和讨论,知识储备。
互动交流
亲,你是不是有什么话要说?
为何规范:
规范并不是一种限制,而是约定,强调团队的一致性 加强团队之间的合作,提高协作效率 形成一种团队文化 最终是为项目服务的.我们所做的一切都是为了优化项 目和流程,提高我们的工作效率
现状
静态资源文件目录结构混乱 与上下游流程不顺畅,没有约定的规范 代码没有标准可言,命名、代码组织等不统一 代码签入签出无规律导致冲突死锁 网站存在性能问题,没有统一的性能优化方案 网站没有针对性的做SEO,比较随意 开发工具不够强大导致效率低下 前端团队缺少交流,知识零散,没有积累
Web前端开发规范
主要内容
关于规范 现状 文件管理规范 版本控制规范 页面设计规范 代码编写规范 性能优化规范 网站SEO规范 开发调试工具 未来计划 互动交流
关于规范
何为规范:
对于某一工程作业或者行为进行定性的信息规定。 主要是因为无法精准]
性能优化规范 - 延迟加载
web开发规范
![web开发规范](https://img.taocdn.com/s3/m/e53e0b5b9a6648d7c1c708a1284ac850ac02047c.png)
web开发规范Web开发是一项繁琐且复杂的任务,开发人员需要遵守一些规范来保证代码的质量和可维护性。
下面是一些常见的web开发规范,帮助开发人员编写更好的代码。
1. 使用正确的HTML结构:确保HTML文档正确地使用各种标签和元素,并遵循语义化的HTML结构。
避免使用过时的标签和元素,并确保文档结构清晰有序。
2. 使用外部CSS和JavaScript:将CSS和JavaScript代码从HTML文档中分离出来,使用外部文件进行引用。
这样可以使代码更具可维护性,并提高页面加载速度。
3. 遵循CSS命名约定:使用有意义的命名来定义CSS类和ID,避免使用不清晰的缩写和简单的命名。
命名应该清晰明确,并且易于理解和扩展。
4. 使用CSS预编译器:使用CSS预编译器如Less或Sass来帮助组织和管理CSS代码。
预编译器可以提供更好的代码结构和可重用性。
5. 管理JavaScript代码:使用模块化的JavaScript代码来避免全局命名冲突。
可以使用工具如Webpack或Browserify来打包和管理JavaScript模块。
6. 代码缩进和格式化:使用一致的缩进和格式化风格来使代码易读和一致。
可以使用工具如ESLint或Prettier来自动格式化代码。
7. 处理错误和异常:使用try-catch语句来处理可能发生的错误和异常。
捕获错误并适当地处理它们,以避免应用程序崩溃或产生意外的结果。
8. 代码注释:在代码中加入适当的注释来解释代码的目的和功能。
注释可以帮助其他开发人员理解代码,以及在以后修改代码时的参考。
9. 版本控制:使用版本控制系统如Git来管理和追踪代码的变化。
这可以帮助团队协作,管理不同的代码版本,并恢复或合并代码变更。
10. 测试和调试:编写自动化测试来验证代码的正确性,并使用调试工具来跟踪代码的执行过程。
这可以帮助发现和修复代码中的潜在问题。
11. 优化性能:优化Web应用程序的性能是一个重要的任务。
前端开发设计规范文档
![前端开发设计规范文档](https://img.taocdn.com/s3/m/535e0f87daef5ef7ba0d3cc4.png)
前端开发设计规范目录前端开发设计规范 (1)一、HTML使用规范 (1)1.1、页面文件命名规范 (1)1.2、页面head部分书写规范 (1)1.3、HTML元素开发规范 (2)1.3.1、HTML元素书写规范 (2)1.3.2、HTML元素命名规范 (3)二、WEB页面开发规范 (4)2.1、错误跳转页面的处理 (4)2.2、提示信息的处理 (4)2.3、页面的返回 (4)2.4、提交前数据的判断验证 (4)2.5、删除操作 (5)2.6、页面中java代码的使用 (5)2.7、网站页面布局规范 (5)2.7.1、前台页面尺寸 (5)2.7.2、标准网页广告图标规格(参考) (6)2.7.3、页面字体 (6)2.7.4、字体颜色 (7)三、javaScript开发规范 (7)3.1、javaScript文件命名规范: (7)3.2、javaScript开发规范 (7)3.2.1、javaScript书写规范 (7)3.2.2、javaScript命名规范 (8)四、css样式规范 (9)4.1、css样式文件命名规范 (9)4.1.1、通用样式文件命名规范: (9)4.1.2、业务类样式文件命名规范 (10)4.1.3、css样式文件命名须知 (10)4.2、css样式文件存放目录规范 (10)4.3、css样式定义规范 (11)4.3.1、css样式内容顶部注释规范 (11)4.3.2、css样式内容注释规范 (11)4.3.3、css样式定义规范 (12)4.3.4、css样式常用id的命名 (13)4.3.5、css样式常用class的命名 (14)4.4、css样式书写规范 (15)4.4.1、css样式排版规范 (15)4.4.2、css样式书写风格规范 (15)4.4.3、css样式属性定义顺序规范 (16)4.4.4、css样式其他规范 (16)4.4.5、css样式Hack的使用 (17)4.4.6、字体定义规范 (18)4.4.7、css样式检测 (18)4.4.8、注意事项 (18)4.5、css样式引用规范 (19)4.6、媒体内容命名规范 (19)五、项目文件存放规范 (19)六、前端开发规则 (20)一、HTML使用规范1.1、页面文件命名规范命名格式为:项目名缩写_所属功能_所属功能子项_... .jsp/html…,文件命名下划线不能超过三个,命名尽量使用简短的能明确表明文件用途的英文或者英文简写。
前端开发设计规范文档
![前端开发设计规范文档](https://img.taocdn.com/s3/m/f27b8fc5d5d8d15abe23482fb4daa58da0111cef.png)
前端开发设计规范文档前端开发设计规范文档是一个团队或者组织内部制定的一系列规范和指南,用于规范前端开发的设计、编码和实施流程。
以下是一个包含了1200字以上内容的前端开发设计规范文档:一、命名规范1.使用有意义的和描述性的命名,避免使用简单的缩写和字符组合。
2. 使用驼峰命名法(CamelCase)来命名变量、函数和对象,首字母小写。
3.使用大写字母作为常量和枚举的命名。
4.使用独一无二的名称,避免命名冲突和重复。
5.使用清晰的命名来表示元素的用途和功能,避免歧义和困惑。
6.避免使用中文拼音或其他非英文字符作为命名。
二、代码结构1.使用统一的缩进风格,推荐使用4个空格进行缩进。
2.使用合适的注释来解释代码的功能、用途和实现思路,方便他人理解和维护。
3.使用适当的代码分块和模块化来提高可读性和维护性。
4.使用合适的文件和目录结构来组织代码文件和资源文件。
5.使用版本控制系统来管理代码的变更和追踪。
三、HTML规范4.保持HTML代码的简洁和整洁,避免冗余和重复。
5.使用合适的DOCTYPE声明和字符编码。
四、CSS规范1.使用外部样式表文件来管理CSS代码。
2.避免使用行内样式和内嵌样式。
3.使用语义化的类名来描述样式和选取元素,并避免使用ID选择器。
4.使用合适的选择器进行样式选取,避免不必要的层级和嵌套。
5.使用缩写属性和属性值来减少代码量,提高维护性。
6.使用合适的CSS预处理器来提高开发效率和代码质量。
五、JavaScript规范1.使用语义化的变量和函数名,避免使用全局变量污染全局命名空间。
2. 使用严格模式(strict mode)来提高代码的安全性和性能。
3.使用合适的条件语句和循环语句来控制程序流程。
4. 避免使用eval(和with语句来提高代码的安全性。
5.使用合适的错误处理机制来处理异常和错误。
六、性能优化1.使用合适的压缩工具来减小文件体积和加载时间。
2.使用合适的图片格式和压缩工具来减小图片大小。
web前端设计与开发技术参考书
![web前端设计与开发技术参考书](https://img.taocdn.com/s3/m/0565da6f2e60ddccda38376baf1ffc4ffe47e2d0.png)
web前端设计与开发技术参考书【一、web前端设计与开发技术概述】Web前端设计与开发技术是互联网行业中的基础技能,它涉及到网站、APP等产品的界面设计与实现。
Web前端技术主要包括HTML、CSS、JavaScript等,这些技术共同构建了互联网产品的用户界面,实现了丰富的交互功能。
【二、关键技术解析】1.HTML与CSSHTML(超文本标记语言)是构建网页结构的基础,通过各种标签(如标题、段落、列表等)来组成网页的框架。
CSS(层叠样式表)则负责美化网页,包括字体、颜色、布局等样式设置。
熟练掌握HTML与CSS,可以轻松搭建出美观且易于阅读的网页。
2.JavaScript与jQueryJavaScript是一种编程语言,可以让网页具有交互功能。
通过编写JavaScript代码,可以实现动态效果、表单验证等功能。
而jQuery是一个流行的JavaScript库,它简化了JavaScript的开发过程,让开发者更轻松地编写复杂的交互功能。
3.前端框架与库随着前端技术的不断发展,越来越多的框架和库应运而生。
如Bootstrap、Foundation等前端框架,可以帮助开发者快速搭建响应式布局;Vue、React等前端框架,让开发复杂业务逻辑更加简单。
此外,还有许多实用的库,如jQuery UI、Morris.js等,为开发者提供了丰富的组件和插件。
4.前端工程化前端工程化是提高开发效率的关键。
模块化、组件化开发理念逐渐成为主流,如CommonJS、AMD等模块化规范,以及Webpack、Gulp等构建工具,都可以帮助开发者更好地管理项目。
此外,版本控制工具如Git,也让团队协作更加高效。
【三、实践案例分享】本文将分享一些实际项目中的案例,以展示前端技术在实际开发中的应用。
如响应式布局设计、网页动画效果实现、表单验证等。
通过学习这些案例,读者可以更好地掌握前端技术的实际运用。
【四、行业趋势与展望】随着互联网的快速发展,Web前端技术也在不断演进。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Web前端开发规范手册一、规范目的1.1 概述1二、文件规范2.1文件命名规则 (1)2.2文件存放位置22.3css书写规范32.4html书写规范72.5JavaScript书写规范112.6图片规范122.7注释规范132.8css浏览器兼容13一、规范目的1.1 概述为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档.二、文件规范2.1文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。
a.HTML的命名原则引文件统一使用index.htmindex.htmlindex.asp文件名(小写)各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。
例如:关于我们\aboutus信息反馈\feedback产品\product如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示;每一个目录中应该包含一个缺省的html文件,文件名统一用index.htmindex.htmlindex.asp;b.图片的命名原则图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质例如:广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名:banner标志性的图片取名为:logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu装饰用的照片我们取名:pic不带链接表示标题的图片我们取名:title范例:banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_nationa l.gifpic_people.jpg鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如:menu1_on.gifmenu1_off.gifc.javascript的命名原则例如:广告条的javascript文件名为ad.js弹出窗口的javascript文件名为pop.jsd.动态语言文件命名原则以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该页面得概要。
范例:register_form.aspregister_post.asptopic_lock.asp2.2文件存放位置规范2.3CSS书写规范基本原则:CSS样式可细分为3类:自定义样式、重新定义HTML样式、链接状态样式。
1. 样式为设计师自定义的新CSS样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。
样式名“.”+“相应样式效果描述的单词或缩写”例:“.shadow”2. 文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:“.no12”、“.no12-24”2.义HTML样式为设计师重新定义已有的HTML标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。
样式名“HTML标签”例:hr{border:1pxdotted#333333}3.态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。
该样式写法有2种:a.nav:link nav.a:link第一种只能修饰<a>标签中;第二种可以修饰所有包含有<a>标签的其他标签。
页面内的样式加载必须用链接方式<linkrel="stylesheet"type="text/css"href="style/style.css">注意细则:1. 协作开发及分工:i会根据各个模块,同时根据页面相似程序,事先写好大体框架文件,分配给前端人员实现内部结构&表现&行为;共用css文件base.css由i书写,协作开发过程中,每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改;2. class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class 可用在重复使用率高及子级中;id原则上都是由我分发框架文件时命名的,为JavaScript预留钩子的除外;3. 为JavaScript预留钩子的命名,请以js_起始,比如:js_hide,js_show;4. class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&_来组合命名,如i_comment,fontred,width200;避免使用中文拼音,尽量使用简易的单词组合;总之,命名要语义化,简明化.5. 规避class与id命名(此条重要,若有不明白请及时与i沟通):a,通过从属写法规避,示例见d;b,取父级元素id/class命名部分命名,示例见d;c,重复使用率高的命名,请以自己代号加下划线起始,比如i_clear;d,a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码<divid="mainnav"></div>中加入新的div元素,按a命名法则:<divid="mainnav"><divclass="firstnav">...</div></div>,样式写法:#mainnav.firstnav{.......}按b命名法则:<divid="mainnav"><divclass="main_firstnav">...</div></div>,样式写法:.main_firstnav{.......}6. css属性书写顺序,建议遵循布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.属性列举:布局定位属性主要包括:margin、padding、float(包括clear)、position(相应的top,right,bottom,left)、display、visibility、overflow等;自身属性主要包括:width&height&background&border;文本属性主要包括:font、color、text-align、text-decoration、text-indent等;其他属性包括:list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序)、zoom等.我所列出的这些属性只是最常用到的,并不代表全部;7. 书写代码前,考虑并提高样式重复使用率;8. 充分利用html自身属性及样式继承原理减少代码量,比如:<ulclass="list"><li>这儿是标题列表<span>2010-09-15</span></ul>定义ul.listli{position:relative}ul.listlispan{position:absolute;right:0}即可实现日期居右显示9. 样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码;10. 背景图片请尽可能使用sprite技术,减小http请求,考虑到多人协作开发,sprite按模块制作;11. 使用table标签时(尽量避免使用table标签),请不要用width/height/cellspacing/cellpadding等table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css文件中我会初始化表格样式)12. 杜绝使用<metahttp-equiv="X-UA-Compatible"content="IE=7"/>兼容ie8;13. 用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:src=’img/bg.png’);14. 避免兼容性属性的使用,比如text-shadow||css3的相关属性;15. 减少使用影响性能的属性,比如position:absolute||float;16. 必须为大区块样式添加注释,小区块适量注释;17. 代码缩进与格式:建议单行书写,可根据自身习惯,后期优化i会统一处理;命名规则:头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guild服务:service注册:regsiter状态:status投票:vote合作伙伴:partner(二)注释的写法:/*Footer*/内容区/*EndFooter*/(三)id的命名:(1)页面结构容器:container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper(2)导航导航:nav主导航:mainbav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar 右导航:rightsidebar 菜单:menu子菜单:submenu 标题:title摘要:summary (3)功能标志:logo广告:banner登陆:login登录条:loginbar注册:regsiter搜索:search功能区:shop标题:title加入:joinus状态:status按钮:btn滚动:scroll标签页:tab文章列表:list提示信息:msg当前的:current小技巧:tips图标:icon注释:note指南:guild服务:service热点:hot新闻:news下载:download投票:vote合作伙伴:partner 友情链接:link版权:copyright\基本样式:/*CSSDocument*/body{margin:0;padding:0;font:12px"\5B8B\4F53",san-serif;background:#fff;}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0;} table,td,tr,th{font-size:12px;}li{list-style-type:none;}img{vertical-align:top;border:0;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}address,cite,code,em,th{font-weight:normal;font-style:normal;}.fB{font-weight:bold;}.f12px{font-size:12px;}.f14px{font-size:14px;}.left{float:left;}.right{float:right;}a{color:#2b2b2b;text-decoration:none;}a:visited{text-decoration:none;}a:hover{color:#ba2636;text-decoration:underline;}a:active{color:#ba2636;}重定义的最先,伪类其次,自定义最后,便于自己和他人阅读!不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt?和11pt,px一般使用中文宋体12px?和14.7px?这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt?和14.7px?的字号比较合适。