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 屬性的值。