web 前端（三）

web前端工程师有较好的编码习惯，能写出高效率的OOP（面向对象编程）代码，并对代码进行压缩上线以降低带宽消耗等。

 

公共网关接口CGI(Common GatewayInterface) 是WWW技术中最重要的技术之一，有着不可替代的重要地位。CGI是外部应用程序（CGI程序）与Web服务器之间的接口标准，在CGI程序和Web服务器之间传递信息的规程。CGI规范允许Web服务器执行外部程序，并将它们的输出发送给Web浏览器，CGI将Web的一组简单的静态超媒体文档变成一个完整的新的交互式媒体。

 

IE 与 FF 不兼容的原因 

(1) 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px,下留白3px，ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案：给文字设定line-height。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍 1px 的差异。

【line-height：设置行间的距离（行高）：p.small {line-height:90%}  p.big {line-height:200%}   normal  默认，设置合理的行间距； number 设置数字，此数字会与当前的字体尺寸相乘来设置间距；%比；inherit。 】

 

(2) ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie 下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

 

(3) 浮动的清除，ff下不清除浮动是不行的。

 

ie 劣迹：
（1） double-margin:bug。ie6下给浮动容器定义margin-left 或者 margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。
【display:inline 它可以让行内显示为块的元素，变为行内显示：如<div>DIV1</div>  <div>DIV2</div>
   这里DIV1 和 DIV2 分别占一行，但是你给他们加上属性后变了
   <div style="display：inline">DIV1</div>
   <div style="display:inline">DIV2</div>
   DIV1和DIV2这时候显示在同一行了。
  display:block,block 会让应用里该css属性的HTML标记变成块级别元素，例如SPAN是行内显示的，但是加了display:block属性就不一样了。
  <span style="display:block">SPAN1</span>
  <span style="display:block">SPAN2</span>
  <display:inline>比较经典的用法是用在<ul>下的<li>中内联block一般一个块占一行，除非float inline是自动排为一行,就行段内的文字一样，可成为多行。
   display:inline比较经典的用法是用在<ul>下的<li>中内联block 一般一个块占一行，除非float inline 是自动排为一行，就像段内的文字一样，可成为多行。
   display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。
   display:inline 对应不显示为 display:none。
   display:block 对应不显示为 hidden。
   样式为none的元素不占位置，而样式为hidden的元素虽然不显示但还是占地方。
   】

（2） img下的留白，
<div>
<img src="" mce_src="">

</div>
把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写
<div>

<img src=" "  mce_src=" "/></div>
后面两个标签要紧挨着。ie下这个bug依然存在。解决方案：给img设定 display:block。

（3）失去line-height:<div style="line-height:20px"><img />文字</div>,很遗憾，在ie6下单行文字line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让imag和文字都float起来。

 

对web客户端技术未来趋势发展谈谈看法：
  javascript + ajax = RIA
  Adobe Flash AS3
  Flex
  Sliveright

 
web 开发团队人员应该如何分工协作
  布局 CSS 脚本
  比如脚本人员长期的积累可能铸造类型YUI这样的产品级脚本库。

 

 web开发脚本开发环境用什么，调试用什么
  试过aptana,现在就用editplus
  调试肯定用firebug,ie下看页面DOM 用IEInspector

 

 如果有个新技术，现在需要掌握，你会怎么做
  新技术的发现我一般是通过RSS工具， GoogleReader
  每天有半小时左右在看最新的资讯，技术走向
  官网 Doc, samples
  如果要用到项目中，有困难的问题，我会SVN得到最新的这个技术的源码，深入跟踪进去，看实现原理。
 
前端开发的优化问题：
产品发布时，js的压缩，即函数名替换,整个文件压缩成一行。css 开发的时候 注释写清楚，先有个base.css,然后根据不同页面需要再加css，发布的时候将css中的一个定义写成一行，目的是压缩文件大小。
最终发布的时候甚至可以将css,js分别压缩成一个文件，甚至css,js通过技巧压缩到一个里边(亮点)。
这样的目的是，减少用户访问web产品的http连接数。

 

web前端开发流程：
首先根据产品的定位,用户群，确定配色，然后纸上设计整体布局，然后Png或者psd出效果图，切出需要的小图片，然后手写代码div+css构造出页面，然后根据功能写脚本。

 

参考126邮箱首页，将所有小图片放到一个图片中。
众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。 
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。 
实现方法： 
首先将小图片整合到一张大的图片上，为了简单化，可以把多图放在同一列上，这样就可以把x轴定义为0。 
然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px; 例子： 

我们使用上图中的auther.gif作为背景时，如果代码如下： 

<div class="max">最大化</div> 这两个class都使用同一个图片：

.max { width:16px; height:16px; 
background-image:url(/images/css-sprites.gif);

background-repeat: no-repeat; //我们并不想让它平铺 

text-indent:-999em; //隐藏文本的一种方法 } 
效果都只能得到上图中的tag_icon.gif中的图为背景，根本无法得到我们需要的背景。因为我们还没有指定background-position，默认为 0 0，可以看下上图，刚好是tag_icon.gif图。好了，我们要找到代表auther.gif的图在大图中的位置找出来。经过测量，按钮位于Y轴的350px处，按钮位于x轴50px处。想一想我们如何才能让它们能够显示出来呢？明显得到代码如下：

.max { 
background-position: 50 -350px; } 
耶，我们成功了： 
（注意：为了举例的方便，本例子直接在HTML内置样式，切勿在实践中的非特殊情况使用这种方式）。 优点 
我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。 缺点  
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。 由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。 前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS 
Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。 总结 
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。  

prototype.js实现的基本原理
将功能封装
比如Ajax.Request,还是有判断浏览器的代码；Position 这样的实现页面元素的计算

 

Prototype 太大，如果一个页面功能不需要这样的，自己实现，怎么做？
首先页面,css脚本分离之后，脚本中将整个模块功能写成一个类 var Do={}
其中初始化函数init:function(){},然后最后做Do.init()
其中init会对页面上form中需要交互的元素绑定事件，比如$('input1').onclick=function(){}
 

IE FF 脚本的区别(续)：

 

 

 

Ajax里边FF是new XMLHttpRequest，而IE是 
try new ActiveXObject(’Msxml2.XMLHTTP’)  try new ActiveXObject(’Microsoft.XMLHTTP’)

 

常用HTML标签代码

◆１．文字设置代码：
<font face=黑体 size=4 color=red>文字设置代码</font>

◆２．大号文字设置代码：
<font face=黑体 style=font:50pt color=red>文字设置代码</font>

◆３．文字的边外加光辉效果代码：
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt "> <FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如画江山</FONT></div>

◆４．文字重叠效果代码：
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#000000,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%"> <FONT style="FONT-FAMILY:隶书">社会主义好！</FONT> </div>

◆５．文字竖排代码：
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>

◆６．一条横线代码：
<CENTER> <HR SIZE=2 color=#ffff00 ALIGN=CENTER WIDTH="500"> </CENTER>

◆７．贴图代码1：
<img src="图片地址">

◆８．贴图代码2：
<INPUT src="图片地址" type=image width=500>

◆９．羽化图片代码：
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="图片地址" type=image width=400>

◆１０．超连接代码：
<A href="连接网页地址" target=_blank>说明文字</A>

◆１１．从左向右移动的代码：
<MARQUEE scrollAmount=3 direction=right> 文字或图片从左向右移动 </marquee>

◆１２．从右向左移动的代码：
<marquee scrollamount=2 direction=left> 文字或图片从右向左移动 </marquee>

◆１３．从下向上移动的代码：
<marquee scrollamount=1 direction=up > 文字或图片从下向上移动 </marquee>

◆１４．从上向下移动的代码：
<marquee scrollamount=5 direction=down >文字或图片从下向上移动 </marquee>

◆１５．左右来回走移动的代码：
<marquee scrollamount=8 behavior=alternate > 文字或图片左右来回走移动 </marquee>

◆１６．相对定位代码：
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
</DIV>

◆１７．绝对定位代码：
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
</DIV>

◆１８．相对定位与绝对定位加叠图片代码：
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
<INPUT type=image width=160 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" >
</INPUT> </DIV> </DIV>

◆１９．各种常用标签语句：
<BR> 过行单标签． <p></p> 过段标签． <pre>文字依原始样式显示标签</pre>
 一个空格． <li>文字行首加一个圆点．</li>圆点标签．

◆２０．定位标签代码：
<CENTER>内容居中</CENTER>
<DIV align=center> 内容居中</DIV>
<p align=CENTE>内容居中</P>
<p align=LEFT>内容居左</P>
<p align=RIGHT>内容居右</P>

水平加竖直定位指令语句（放在表格的列标签内）：
<td align=LEFT valign=top>居左靠顶</td>
<td align=center valign=top>居中靠顶</td>
<td align=right valign=top>居右靠顶</td>
<td align=LEFT valign=bottom>居左靠底</td>
<td align=center valign=bottom>居中靠底</td>
<td align=right valign=bottom>居右靠底</td>

◆２１．银色播放器代码：
<EMBED src="音乐文件地址" width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">

 

display属性值:
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column  此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。