简明 HTML CSS 开发规范

合集下载

软件开发Web前端开发规范

软件开发Web前端开发规范

软件开发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.避免使用全局变量和全局函数,减少命名冲突的可能性。

前端代码规范文档

前端代码规范文档

前端代码规范文档前端代码规范文档一、命名规范1. HTML/CSS命名规范- 使用小写字母和连字符(-)作为单词分隔符;- 尽量避免使用缩写,除非是广泛接受的缩写;- 使用有意义的命名,不使用无意义的命名;- 使用统一的命名方式来表示特殊类型的元素(例如:头部、侧边栏等);2. JavaScript命名规范- 使用驼峰命名法(camelCase);- 使用有意义的命名来描述变量、函数或类的作用;- 避免使用单个字符的命名,除非是临时变量;- 使用全大写的命名方式来表示常量;二、缩进和空格规范1. 使用4个空格来进行缩进;2. 在括号前后留一个空格;3. 在运算符前后留一个空格;4. 在函数名和参数列表之间留一个空格;三、注释规范1. 使用注释来解释代码的功能和用途;2. 对于复杂的代码块或关键算法,应提供详细的注释;3. 注释应该是清晰明了的,避免使用不恰当的术语或缩写;4. 重要的注释可以使用大写字母或星号来标记;四、代码风格规范1. 使用一致的缩进和空格;2. 合理使用换行符,避免一行代码过长;3. 尽量避免使用行尾的空格或制表符;4. 使用一致的括号风格,例如在函数或语句块的开头和结尾都使用大括号;5. 使用分号来结束语句;6. 使用合理的命名方式来描述变量、函数和类的作用;7. 避免使用全局变量,使用局部变量或封装变量的方式来控制变量的作用范围;8. 避免使用多层嵌套的条件语句,可以使用条件判断的方法来简化代码;9. 使用恰当的函数和类来封装可重用的代码;五、代码结构规范1. 尽量避免大而复杂的函数,使用小而简单的函数来实现功能;2. 模块化代码,将相关联的函数和类放在同一个文件中;3. 合理使用空行来分隔不同的代码块;4. 将页面的结构和样式分离开来,使得HTML文件更加简洁和易于维护;5. 对于重要的功能块,使用代码块注释来标记开头和结尾;六、代码审查规范1. 对新提交的代码进行审查,确保其符合代码规范;2. 对代码中的错误和潜在问题进行识别和修复;3. 鼓励团队成员进行代码审查和互相学习,提高代码质量;4. 定期审核项目中的代码,找出不符合规范的代码并进行修正。

WEB前端开发规范方案文档

WEB前端开发规范方案文档

WEB前端开发规范方案文档一、概述本文档旨在规范前端开发团队的开发流程和编码规范,以提高代码的可读性、可维护性和可扩展性。

本规范适用于Web前端开发工作,包括HTML,CSS和JavaScript等相关技术。

二、项目目录规范1.项目根目录下应包含以下文件或文件夹:- index.html:项目的入口文件;- css文件夹:存放项目的css文件;- js文件夹:存放项目的JavaScript文件;- images文件夹:存放项目的图片文件;- fonts文件夹:存放项目的字体文件;- libs文件夹:存放项目的第三方库文件;- README.md:项目的说明文档。

2.CSS文件命名规范- 使用小写字母和中划线来命名文件,如:main.css;- 使用语义化的名称来命名文件,如:reset.css;- 对于一些通用的样式文件,可以使用常见的名称,如:normalize.css。

3. JavaScript文件命名规范- 使用驼峰命名法来命名文件,如:app.js;- 使用语义化的名称来命名文件,如:utils.js;- 对于一些通用的JavaScript文件,可以使用常见的名称,如:jquery.js。

三、HTML规范2.缩进和换行- 使用两个空格的缩进来表示嵌套关系,不使用tab键;3.属性顺序- 属性应按照以下顺序书写:class、id、data-*、style、src、href、alt、title等。

四、CSS规范1.样式命名规范- 使用小写字母和中划线来命名样式,如:header-title;- 使用语义化的名称来命名样式,如:main-container;-避免使用缩写,提高代码的可读性和可维护性。

2.CSS选择器规范- 使用类选择器来选中元素,不使用id选择器,以免造成样式的耦合性和难以维护性;-避免使用通配符选择器;-避免使用嵌套选择器,以免造成样式的复杂性和性能问题。

3.代码注释规范-使用注释来说明代码的用途和作用;-使用块注释来注释一整段代码,使用行注释来注释一行代码。

阿里前端开发规范

阿里前端开发规范

阿里前端开发规范阿里前端开发规范包括代码、命名、HTML、CSS、JavaScript、图片方面的规范。

1. 代码规范:- 使用四个空格缩进,不使用制表符。

- 代码行长度不超过80个字符。

- 使用驼峰命名法,变量和函数名用小写开头,构造函数用大写开头。

- 使用严格相等运算符(===和!==)替代宽松相等运算符(==和!=)。

- 在条件表达式中,使用括号来提高可读性。

- 避免在循环中使用等号赋值(例如,for (var i = 0; i < array.length; i++))。

- 避免使用eval()函数。

2. 命名规范:- 文件名应该全部小写,可以包含破折号(-)或下划线(_)。

- 文件夹名应该全部小写,可以包含破折号(-)或下划线(_)。

- CSS文件名应该以.css结尾。

- JavaScript文件名应该以.js结尾。

3. HTML规范:- 使用两个空格缩进,不使用制表符。

- 使用双引号而不是单引号作为属性值的引号。

- 在自定义属性中使用小写字母和破折号(-)。

- 为所有非自闭合标签使用闭合标签。

- 避免在HTML标签中使用行内样式。

4. CSS规范:- 使用两个空格缩进,不使用制表符。

- 使用小写字母和破折号(-)作为选择器和属性名的命名方式。

- 为每个选择器之间使用空行分隔。

- 使用简写属性来减少代码量。

- 使用预处理器(如Less或Sass)来编写CSS。

5. JavaScript规范:- 使用两个空格缩进,不使用制表符。

- 使用分号作为语句的结束符号。

- 避免使用全局变量。

- 避免使用with语句。

- 使用模块化的开发方式,避免全局作用域污染。

6. 图片规范:- 使用有意义的命名来描述图片内容。

- 使用适当的格式和压缩技术来减小图片文件大小。

- 将页面上的图片引用写成相对路径。

以上是阿里前端开发规范的一些主要内容。

在实际开发中,遵循这些规范可以提高代码的可读性和可维护性,使团队成员之间更容易协同工作。

WEB前端开发代码使用要求规范

WEB前端开发代码使用要求规范

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前端开发时应该积极遵守和推崇相关规范。

前端开发规范文档

前端开发规范文档

前端开发规范文档一、概述。

本文档旨在规范前端开发工作,统一团队成员的开发风格,提高代码质量和可维护性。

在前端开发中,规范是非常重要的,它可以让团队成员之间的合作更加顺畅,代码更加易读易懂。

本规范文档将涵盖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. 注释规范。

在需要注释的地方使用//进行单行注释,使用/ /进行多行注释。

前端开发规范文档

前端开发规范文档规范目的为提高团队协作效率,便于后端开发人员添加功能及前端后期优化维护,输出高质量的代码,特制定该文档。

本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。

本文档如有不对或者不合适的地方请及时提出。

经讨论决定后方可更改。

基本准则符合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 这些标签。

前端开发规范文档

前端开发规范文档前端开发是指在网站、网页或移动端应用的开发过程中,负责用户界面的设计和开发的工作。

一个良好的前端开发规范可以提高团队的工作效率、降低错误率,并且方便后期的维护和扩展。

本文将介绍一些常见的前端开发规范。

一、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.周期性地进行代码审查:定期进行代码审查,发现和修复潜在的问题,提高代码质量和稳定性。

(完整word版)WEB前端开发代码使用要求规范.docx

实用文档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 。

前端开发设计规范文档

前端开发设计规范文档1.设计概述(200字)前端开发设计规范文档旨在为前端开发人员提供一套统一的设计规范,确保开发出的网页和应用具有高可读性、易维护性和跨浏览器兼容性。

本文档将涵盖HTML、CSS和JavaScript编码规范、文件结构规范、命名规范、注释规范等方面的内容。

2.文件结构规范(200字)为了确保项目的可维护性和可扩展性,文件结构规范起到了至关重要的作用。

在项目中,应该按照功能、模块或页面将文件进行划分,并使用合理的命名方式对文件进行命名。

目录结构应该清晰明了,新人可以迅速找到所需文件,并且易于扩展和维护。

3.HTML编码规范(300字)4.CSS编码规范(300字)CSS编码规范旨在统一样式代码的书写风格,方便团队成员的合作和代码维护。

应该遵循缩进、空格、换行等方面的规则,并为选择器、属性和值选择合适的命名方式。

另外,应该避免使用全局选择器、!important和浮动布局等容易引起样式冲突的属性和技术。

5. JavaScript编码规范(300字)JavaScript编码规范对于代码的可读性、可维护性和可扩展性有着重要的影响。

代码应该遵循统一的缩进和空格约定,并采用语义化的命名方式。

应该避免使用全局变量和隐式全局变量,同时对函数进行适当的封装和模块化处理。

另外,应该注重错误处理和代码注释,以便他人能够理解和维护代码。

6.命名规范(200字)良好的命名规范有助于团队成员理解代码的意图和结构。

在命名时应使用有意义的名词和动词,避免使用缩写和拼音,并使用统一的命名方式。

对于变量、函数、类和文件命名,应该遵循一定的命名约定,以提高代码的可读性和可维护性。

7.注释规范(200字)总结(100字)前端开发设计规范文档为前端开发人员提供了一套统一的设计规范,包括文件结构、HTML、CSS、JavaScript编码规范、命名规范和注释规范等方面的内容。

遵循这些规范将有助于提高代码的可读性、可维护性和跨浏览器兼容性,提高团队成员之间的合作效率。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

简明HTML CSS 开发规范出处:蓝色理想责任编辑:hsx//总论本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。

但是,请大家千万不要随意更改规范。

如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档。

/基本要求1. 在网站根目录中开设images common temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等;common 子目录中放css、js,、php、include 等公共文件;temp 子目录放客户提供的各种文字图片等等原始资料;media 子目录中放flash, avi, quick time 等多媒体文件。

2. 在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。

3. temp 目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。

4. 除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文为指导,不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂,/脚本编写我们应该有一个脚本整体风格一致的概念,意思是一个月后和一个月前的你写的脚本风格保持一致,以及同一个工作组中不同的开发人员编写的脚本风格保持一致,因为我们不可能永远孤立的开发,你随时都有可能和三个月前的自己合作(你的客户要求改版),也经常要和工作室中不同的同事共同开发一个项目,还有可能被要求修改已经离职人员开发的脚本,当然你自己也有可能会扔下一个项目给后来的同事。

1. Html 文件的通用模板:其他meta 标记样式表定义客户端Javascript 函数定义及初始化操作补充:为了保证网站能够与下一代的web 语言xml 标准兼容,所有的HTML 标签的属性都要用单引号或者双引号括起,即我们应该写<a href=”url”> 而不是 <a href=url>.2. 允许全文检索的页面,为了使Internet上的搜索引擎能够有效检索,在频道的首页的html的<head></head>之间应该加入Keywords 和Description 元标记,例如:3. CSS 文件的格式样例代码:这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码,否则或多或少会出问题。

另外我们规定重定义的最先,伪类其次,自定义最后,便于自己和他人阅读!为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。

在写 <table> 互相嵌套时,严格按照的规范,对于单独的一个<table>来说,<table><tr>对齐,<td> 缩进两个半角空格,<td> 中如果还有嵌套的表格,<table>也缩进两个半角空格,如果<td>中没有任何嵌套的表格,</td> 结束标记应该与 <td> 处于同一行,不要换行,如我们注意在源代码中不应有这样的代码:而应该是这样的:这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写:属于同一个级别的 <table> 一定是左首对齐的,另外不允许没有任何内容的空的单元格存在,高度大于等于12px 的单元格应该在 <td> 和 </td> 之间写一个&nbsp;,如果高度小于12px, 则应该在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片,这是因为某些浏览器认为空单元格非法而不会予以解释。

如果代码顺序较乱,在DW3中可以通过command->apply souce formatting进行重新整理!5. Width 和height 的写法也有统一的规范,一般情况下只有一列的表格,width 写在<table> 的标签内,只有一行的表格,height 写在 <table> 的标签内,多行多列的表格,width 和height 写在第一行或者第一列的 <td> 标签内。

总之遵循一条原则:不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的,也就是你改动代码中任何一个width 和height 的数值,都应该在浏览器中看到变化。

做到这一条不容易,需要较长时间的练习和思考。

/一般原则1. 在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 <colspan> <rowspan> 两个标记,经验表明,这两个标记会带来许多麻烦。

2. 一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。

如果必须这样做,请使用 <tbody>标记,以便能够使这个大表格分块显示。

3. 排版中我们经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记,注意,一般情况下,请不要省略 </p> 结束标记。

4. 原则上,我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸,而且建议<img> 标签中不要带上width 和height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能;但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动(如果图片是插在一个固定大小的表格里的,不会有这个现象),尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img>附上 width 和 height 属性。

5. 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br>来人工干预分段。

6. 不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。

7. 所有的字号都应该用样式表来实现,禁止在页面中出现 <font size=?> 标记。

8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

9. 中英文混排时,我们尽可能的将英文和数字定义为verdana 和arial 两种字体。

10. 行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%.11. 网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样:<a href=”aboutus/index.htm”> 而应该这样:<ahref=”aboutus/”>12. 嵌入图形文本的使用较大的字体,建议不要在图形中包括文本。

13.“网页大小”定义为网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象。

用户喜欢快的而不是新奇的站点。

对于解调器用户,网页大小保持在34K以下为合适。

/文件命名原则1. 每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm2.件名称统一用小写的英文字母、数字和下划线的组合。

3. 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。

4. 下面以“新闻”(包含“国内新闻”和“国际新闻”)这个栏目来说明html 文件的命名原则:☆ 在根目录下开设news目录☆ 第一条缺省新闻取名index.htm☆ 所有属于“国内新闻”的新闻依次取名为:china_1.htm, china_2.htm, …☆ 所有属于“国际新闻”的新闻依次取名为:internation_1.htm, internation_2.htm, …☆ 如果文件的数量是两位数,请将前九个文件命名为:china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。

5. 图片的命名原则遵循以下几条规范:☆ 名称分为头尾两两部分,用下划线隔开。

☆ 头部分表示此图片的大类性质,例如广告、标志、菜单、按钮等等。

☆ 一般来说:放置在页面顶部的广告、装饰图案等长方形的图片我们取名: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 pic_hill.jpg.。

相关文档
最新文档