web前端开发总结

简化代码，使页面简洁！

web前端开发——将界面更好呈现给用户！

 

要了解在不同浏览器上的兼容情况、渲染原理和存在的bug！

网站性能优化、SEO；

 

代码的可维护性、性能；

 

网站重构的本质：建立一个前端灵活的MVC框架，代码具有复用性；

web标准：结构、样式和行为的分离；理想状态下，网页源代码由html文件、css文件和js文件组成！

 

高质量的代码：精简、重用、有序，符合web标准；

 

js要有常用效果和功能的积累；js类库封装了跨浏览器兼容的特性并扩展了功能；

最基本要求是CSS能兼容IE6、IE7、IE8、FF；

ActionScript与前台和服务器交互；

一专多能是必须的！

 

增加代码可读性——注释！

提高重用性：公共组件（设计时让接口保持弹性，且高度模块化）和私有组件（不考虑他人重用）；

 

按需加载！

 

模块化：样式层面；行为层面； 

 

1、TIPS

（1）XHTML包含丰富的有意义元素（它在文档中添加了结构并创建一个底层框架可直接设置元素的样式。）：

 h1、h2等

ul、ol和dl

strong和em

blockquote和cite

abbr、acronym和code

fieldset、legend和label

caption、thead、tbody和tfoot

 

应该在没有现有元素能实现区域分割的情况下使用div元素。

 

浏览器会根据标签的语义给定一个默认的样式。

HTML标签的设计是有语义考虑的。

先确定HTML，确定语义的标签，再来选用合适的CSS！

 

判断网页标签语义是否良好：去掉样式，看网页结构是否组织良好有序，是否依然有很好的可读性！

对标签是否语义良好调试——FF插件web Developer，禁用网页中的CSS，即ctrl+shift+s，“网页信息”——“查看文件大纲”；

 

标签语义要清晰。当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现！

 

为保证网页去样式后的可读性：

a、尽可能少用div和span；

b、可用p时，就不要用div；

c、语义上需要强调的文本可包在strong和em标签里。

 

搜索引擎看到的只是代码，只能通过标签来判断内容的语义！

 

标签语义：

legend：图标；

caption：标题；

pre：预定义格式；

ol：排序列表；

ul：不排序列表；

li：列表项目；

 

（2）id名和class名，名称要有意义且与表现方式无关。

 

（3）css作用于特定的元素，需要能找到此元素——选择器。包括元素选择器、后代选择器（两个选择器之间的空格表示）、id选择器、class选择器、属性选择器、子选择器等。

可将任何规则指定为!important来提高它的重要性。 

若两个规则的特殊性相同，则后定义的规则优先！

css注释：/**/

 

框模型：指定元素如何显示；页面上每个元素都被看成一个矩形框。

 

只有块框的垂直margin才会发生margin叠加。行内框、浮动框和绝对定位框之间的margin不会叠加。

当两个垂直margin相遇，会形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。

当一个元素包含在另一个元素中时，它们的顶或底空白边会发生叠加。 

 

p、h1、div等元素称为块级元素，显示为一块内容；

strong、span等元素称为行内元素，内容显示在行中；

块框从上到下一个个排列；行内框在一行中水平布置；

 

相对定位：通过设置位置，让这个元素相对于它的起点进行移动。

使用相对定位，无论是否进行移动，元素仍占据原来的空间。移动元素会导致它覆盖其它框。

 

绝对定位：不占据空间。

绝对定位的元素的位置相对于最近的已定位的祖先元素。若元素没有已定位的祖先元素，则它的位置相对于最初的包含块！ 

 

浮动元素不占据空间，因此容器中其它元素会包围此浮动元素，可添加一个清理的空元素来使容器元素不包围此浮动元素！对框使用clear，值为left、right、both、none，表示框的哪些边不应该挨着浮动框。

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。

 

应用CSS的能力：

a、CSS的API：如何用CSS控制页面内元素的样式；

b、CSS框架：如何对CSS进行组织；

一种组织CSS的方法：base.css+common.css+page.css；任何一个网页的最终表现都由这三者共同完成，这三者是层叠结构。

base层：位于最底层。这一层会被所有页面引用，提供CSS reset功能和粒度最小的通用类——原子类。与具体UI无关，这一层内容很少，力求精简和通用。适用于任何网站！

common层：提供组件级的CSS类，即样式的模块化。大量重复的模块视为一个组件。将页面内的元素分为样式相对独立的小模块。从页面里尽可能多地将组件提取出来，放在common层里。组件在网站内部可高度重用！common层是网站级的，不同网站有不同的common层。

page层：网站中高度重用的组件（模块）放在common层，非高度重用的模块放在page层。提供页面级的样式，位于最高层。每个页面都可能会有自己的page层css，若网络规模不大，可将网站内所有页面page层的代码放在一个文件里。根据页面注释，分块书写便于维护。通过命名规则来避免冲突！

 

CSS reset：HTML标签在浏览器里有默认的样式，不同的浏览器的默认样式之间有差别。解决方法是一开始就将浏览器的默认样式全部去掉，即通过重新定义标签的样式，覆盖掉浏览器提供的默认样式。CSS reset部分来自于YUI。

通用原子类：是一系列常用的基本类，不可再分。

 

CSS的很多样式具有继承性，但继承性的权重非常低，比标签选择符的权重低；

 

CSS命名：

a、可根据内容来选用合适的英文单词，如头部用head，导航用nav，菜单用menu等；

b、不轻易使用子选择符；

c、 命名CSS时，首先要判断它位于什么层，若在page层，需考虑如何避免冲突——加前缀。

 

相邻的margin-left和margin-right是不会重合的！

 

低权重原则——避免滥用子选择器；

CSS设置的样式是可以层叠的。

 

当不同的选择符的样式设置有冲突时，会采用权重高的选择符设置的样式！——CSS的选择符是有权重的。

权重的规则：HTML标签的权重是1，class的权重是10，id的权重是100.

若CSS选择符权重相同，则哪个选择符最后定义，就采用哪个选择符的样式！

 

使用子选择器，会增加CSS选择符的权重。CSS选择符的权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响；

为保证样式易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。少用子选择器，就需要多添加class。

 

过多的空白，会增大CSS文件的大小。

 

（4）CSS Sprite

图片翻转技术将多张图片合并为一张，利用background-position属性来展示我们需要的部分。

css sprite将网站的背景图合并到一张大图片上。

 

css sprite：

a、只能合并用于背景的图片；

b、对于横向和纵向都平铺的图片，不能使用css sprite。若是横向平铺的，只能将所有横向平铺的图片合并成一张大图，只能竖直排列。

 

使用css sprite最大的好处是减少http请求数，减轻服务器压力，但要付出降低开发效率和增大维护难度的代价。

 

（5）CSS Hack

a、IE条件注释法：

只加载到IE浏览器，对于非IE会忽略这条语句。

 

b、选择符前缀法（了解即可）：

原理是在CSS选择符前加一些只有特定浏览器才能识别的前缀，从而让某些样式只对特定浏览器生效。

如："*html"前缀只对IE6生效。"*+html"前缀只对IE7生效。

 

c、样式属性前缀法

原理是在样式的属性名前加前缀，这些前缀只在特定浏览器下才生效。

如："_"只在IE6下生效。"*"在IE6和IE7下生效。

 

a标签的四种状态的正确排序：（伪类：a:visited样式等）

love hate原则：即l(link)ov(visited)eh(hover)a(active)te

 

（6） 

 

（7）浏览器厂商发明了标准模式和怪异模式来解析网页。

怪异模式是为了兼容老浏览器下的代码，它的很多解析方式是不符合标准的。怪异模式的触发与DTD有关。

W3C标准，需要在HTML的最开始声明文件的DTD类型。 

 

（8）常见的块级元素有：div、p、form、ul、ol、li等；

常见的行级元素有：span、strong、em等；

默认情况下，块级元素的宽度会自动填满其父元素的宽度。

行级元素其宽度会随元素的内容而变化。

行级元素设置width、height属性无效。

行级元素的margin和padding属性很奇怪，水平方向的margin-left、margin-right、padding-left、padding-right都产生边距效果，但竖直方向的margin-top、margin-bottom、padding-top、padding-bottom不会产生边距效果。

 

块级元素对应于display:block；行内元素对应于display:inline。可通过修改display属性来切换块级元素和行内元素。

为了兼容IE，能用的display类型只有block、inline、none。IE6和IE7不支持display:inline-block，但它可触发hasLayout。但IE8和FF支持的。

display:inline-block特性：行内的块级元素，即可设置长宽，不单独占一行，它的宽度不会占满父元素。（IE6、7下，只能对行内元素实现display:inline-block，若是块级元素则不行）

 

position:relative和position:absolute都可改变元素在文档流中的位置，设置它们可让元素激活left、right、top、bottom和z-index属性（默认情况下，这些属性未激活，设置了也无效）。

position:absolute：完全脱离文档流。偏离的是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素。若祖先元素没有设置，那就相对于body元素。

position:relative：没有脱离文档流，偏离的是相对于原来在文档流中的位置。

 

float也能改变文档流。不同的是，float不能像relative或absolute那样，通过left、right、bottom、top属性精确控制元素的坐标，但它仍然让元素在z-index:0层排列。只能通过float:left或right来控制元素在同层里“左浮”和“右浮”，float会改变正常的文档流排列，影响到周围元素。

absolute和float会隐式改变display类型（none除外），只要设置了都会让元素以display:inline-block方式显示，可设置长宽，默认宽度不占满父元素。即使显式设置display:inline或block都无效。relative不会隐式改变display类型。

 

只需关心自己内部的样式，将布局的控制交给父元素！

 

z轴在元素设置position为absolute或relative后被激活，其大小由z-index设置，z-index越大，元素位置越靠上；

 

html标签，后出现的标签浮于先出现的标签之上。

 

浏览器解析页面时，会先判断元素的类型。若是窗口类型，会优先于非窗口类型的元素，显示在页面最顶端。若同属非窗口类型，才会去判断z-index的大小。

 

select元素在IE6下以窗口形式显示的（IE6 bug）：解决方法是用iframe遮住select！ 

 

IE6对png的透明度支持不好：本该是透明的地方，在IE6下会显示为浅蓝色。可用IE下私有的滤镜功能来解决。

 

（8）避免Js冲突

对全局变量进行有效控制：用匿名函数将脚步包起来，让变量的作用域控制在匿名函数内；如：

(function() {

    var a="aa";

})();

 

网页中js从功能上分为：

框架部分（包括定义全局变量、定义命名空间方法等）：框架部分的代码每个页面都相同。

应用部分：

 

 

window的onload事件要求网页内所有的元素全部加载完毕后才会触发。

 

 

IE下透明是通过滤镜实现，FF下透明是通过css的opacity属性实现。

在IE下，event对象是作为window的属性作用于全局作用域的；而在FF下，event对象是作为事件的参数而存在的。

 

事件的对象在IE下通过srcElement属性访问；在FF下，通过event对象的target属性访问。

阻止事件冒泡在IE下通过设置event对象的cancelBubble属性为true实现；在FF下，通过调用event对象的stopPropagation方法实现。

 

要让某个DOM节点监听事件，最简单的方法是使用onXXX方法（但不能叠加，只能覆盖）——>IE下用attachEvent（this指向window），FF下用addEventListener（this指向当前对象）方法代替onXXX监听事件，支持监听处理函数的叠加，而不是覆盖！

 

 

domnode.onXXX将直接调用的函数里的this指向domnode；

 

在IE中，delete是保留字；

class是js的保留字。在获取html标签的class属性时，要改用className。

 

对于常规属性，可使用node.XXX方式读取；对于自定义属性，可使用node.getAttribute("XXX")读取。属性值都是字符串类型的。

 

Ajax只支持字符串和xml这两种格式的返回数据。

 

（9）js面向对象编程

在js中，用函数来充当类。函数作为类时，通常用new来实例化。

当声明一个类时，其实同时生成了一个对应的原型。若构造函数和原型定义了同名的属性或方法，构造函数中的属性或方法覆盖原型中的同名的属性或方法。

注：this无论出现在构造函数中，还是出现在原型中，指向的都是实例对象！

在内存中，一个类的原型只有一个！写在原型中的方法一定是公有的，且无法访问私有属性。

作为函数的function，this指向的是window对象；作为类构造函数的function，this指向的是实例对象。

 

在js中，公有还是私有是通过作用域实现的！私有属性的作用域只在类的构造函数中！如：

function Animal(name) {

        this.name = name; //公有属性

        var age = 20;  //私有属性

        var move = function() {   //私有方法

 

        }

}

 

 

 

2、PS

（1）记录问题及使用的解决方案。

（2）服务器端压缩：

若使用Apache，应安装mod_gzip或mod_deflate，这些模块会检测浏览器是否能处理这种文件，若可以，就发送压缩版本。

（3）IE6中，width属性是内容、padding、border的宽度总和。

解决方法：不给元素添加具有指定宽度的padding，而将padding或margin添加到元素的父元素或子元素。

（4）可使用display属性改变生成的框的类型。不占用文档中的空间。

（5）前期构思很重要！

根据用户需求分析，考虑好框架，包括规范的制定、公共组件的设计和复杂功能的技术方案等。

（6）表单域用fieldset标签包起来，用legend标签说明表单的用途。每个input标签对应的说明文本用label标签，通过为input设置id属性，在label标签中设置“for=id”来让说明文本与相应的input关联起来！

（7）表格标题要用caption，表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单元格要区分开，表头用th，一般单元格用td。

（8）IE6下，若对元素设置了浮动，同时又设置了margin-left或margin-right，margin的值会加倍。解决此bug方法：display:inline。

（9）让浮动元素的父容器能根据浮动元素的高度而自适应高度，可以：

a、直接从父容器清除浮动元素的浮动；

b、让浮动元素后面紧跟一个用于清除浮动的空标签。（破坏了语义）

（10）模块化CSS——面向对象思维，模块化可代码高度重用。

如何划分模块：单一职责；

 

样式和功能相对独立（即与其它模块没有重复的地方）且稳定的部分可视为模块！每个模块都要完整包含自己区域的内容。

 

将相似的部分提取出来，进一步拆分成更小的模块！

模块与模块之间尽量不要包含相同的部分，若有相同部分，应将它们提取出来，拆分成一个独立的模块。

模块应在保证数量尽可能少的原则下，做到尽可能简单以提高重用性。

 

一个类只具有一个职责——面向对象思维！

 

组合的思路是将一个复杂的类分成易产生变化的部分和相对稳定的部分。将容易变化的部分拆分出去，每一种可能的变化设计成一个个单独的类，相对稳定的部分设计成一个主体类——遵循“单一职责”原则，易变化的类的实例赋值给主体类作为一个属性，实现类的组合。

 

id属性只能挂一个，class属性可挂多个，用空格分隔；

 

（11）CSS在IE下的解析很奇怪，对于一些怪异的问题往往大部分都和IE下一个属性相关——hasLayout。

hasLayout是IE专有的一个属性，用于CSS的解析引擎，出现的一些bug原因可能与hasLayout没有被自动触发有关。

可手动触发hasLayout属性解决bug——使用“zoom:1”可触发hasLayout。使用overflow:hidden也可以触发hasLayout属性。

极少数情况下，特别是使用DHTML时，使用"zoom:1"也会无效。此时需要使用“position:relative”来触发hasLayout。

 

hasLayout是用于辅助块级元素的盒模型解析的，它是用于块级元素的。若用于行级元素，会引发一些特殊效果。

（12）文本、图片等行内元素水平居中：给父元素设置text-align:center。

（13）确定宽度的块级元素的水平居中：

设置margin-left:auto和margin-right:auto来实现。即margin:0 auto;

（14）不确定宽度的块级元素的水平居中：

（15）table不是块级元素，仅设置margin-left:auto和margin-right:auto就可以实现table水平居中。

（16）父元素高度不确定的文本、图片，块级元素的竖直居中：给父容器设置相同上下内边距实现。

（17）父元素高度确定的单行文本的竖直居中：

通过给父元素设置line-height实现。line-height的值和父元素的高度值相同。

（18）父元素高度确定的多行文本、图片，块级元素的竖直居中：

css中用于竖直居中的属性vertical-align，但只有当父元素为td或th时，此属性才会生效。

td标签默认情况下隐式设置了vertical-align的值为middle。

（19）增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 解决firefox中div高度不自增的问题。

（20）