Web前端開發參考手冊_第1頁
Web前端開發參考手冊_第2頁
Web前端開發參考手冊_第3頁
免費預覽已結束，剩余18頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、Web前端開發參考手冊WEB前端開發參考手冊概況一（1. 1 WEB標準實現WEB標準二（2. 1 XHTML、CSS 介紹 2. 2 XHTML 書寫規范2. 2. 1 XHTML 結構2. 2. 2標簽規范2.3 XHTML常用標簽介紹2.4 CSS書寫規范2. 4. 1表命名參考2.4.2類/ID命名規范2. 4. 3樣式調用2. 4.4樣式簡寫2.5 CSS常用屬性介紹2.6圖片規范2. 7注釋規范2.8瀏覽器兼容一（概況1. 1 WEB標準WEB標準不是一個標準，而是一系列標準的集合。網頁主要山三部分組成:結 構、表現和行為。對應的標準也分三方面:結構化標準語言主要包括XHTML和

2、XML,表現標準語言主要包括CSS,行為標準主要包括對象模型（如W3C DOM）、EQIAScript等。這些標準大部分山W3C起草和發布，也有一些是其他標準組織制 訂的標準，比如 ECMA(European Computer ManufacturersAssociation)的 ECMAScript 標準。二、實現WEB標準2. 1 XHTML、CSS 介紹可擴展超文本置標語言(extensible HyperText Markup Language, XHTML), 是一種置標語言，表現方式與超文本置標語言(HTML)類似，不過語法上更加嚴格。 從繼承關系上講，HTML是一種基于標準通用置

3、標語言(SGML)的應用，是一種非常 靈活的置標語言，而XHTML則基于可擴展置標語言(XML), XML是SGML的一個子 集。XHTML 1. 0在2000年1月26日成為W3C的推薦標準。級聯樣式表(Cascading Style Sheet)簡稱"CSS”，通常乂稱為"風格樣式表 (Style Sheet)”，它是用來進行網頁風格設計的。比如，如果想讓鏈接字未點擊 時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。通過設 立樣式表，可以統一地控制HTML中各標志的顯示屬性。級聯樣式表可以使人更能 有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網

4、頁元素位置，外觀以 及創建特殊效果的能力。2. 2 XHTML書寫規范2. 2. 1 XHTML 結構文檔分為head和body兩個部分。html文檔中在head關標簽后面一定會跟著body的開標簽。html的開標簽下 面一定跟著head的開標簽，body的關標簽下面一定是html的關標簽，這中間都 是不能插入任何東西的。head和body在一個html中有且僅有一個。在head里面放置的內容是不會再頁面里顯示的。在頁面中顯示的內容放在 body 里。如下：<!DOCTYPEhtml PUBLIC "-/W3C/DTD XHTML 1. 0 Transitional/ZEN&q

5、uot;><html<head>樣式地址、JS地址、樣式等</head><body>瀏覽器能看到的內容部分</body></html>2. 2. 2標簽規范標簽可以分為成對標簽，或者是單標簽。成對標簽比如 div span ol ul li select option table tr th td dl dt dd em var span等等，而單標簽就比較少了比如input img br iframe等。完整的成對標簽如下:div>這是一個快標簽</div>或者<ol>li>列表項一&

6、lt;/li>li> 列表項二 </li><li>列表項三</li></ol>可以看到每一個標簽都有開標前和關標簽組成，內容放在開和關標簽之間。而單標簽的標簽應該這么寫：<br/><img src=/，images/1. gif" alt二"圖片描述"/><input type二"button" value二"按鈕"/> ;像這樣的單標簽，是不可能再嵌套任何內容的。而我們把斜線(/)放在標簽的 后尖括號前面，表示標簽結束。這點跟成

7、對標簽有很大區別。所有標簽必須合理嵌套正確的嵌套<div><span><var>llll</var></span></div>就像一個一個大盒子套了一個小盒子乂套了一個小盒子，當然還可以繼續嵌 套，看起來十分對稱。不正確的嵌套<div><span><var>llll</var></div></span>這里的標簽是不對稱的。你沒法一層一層的拆開盒子，這就是錯誤的。2.3 XHTML常用標簽介紹1、div標簽:塊元素。可以將文檔分為不同的部分。可以使用c

8、lass和id屬性 進一步控制頁面表現。div是css布局中使用最多的元素。2、p標簽:塊元素，表示一個文本段落，一般用于換行。3、標題標簽:塊元素，用來定義文本中的各種標題。從hl至h6有著嚴格的層 級關系。并且每個XHTML上hl元素有且只能使用一次。其中包括一系列的元素:hl, h2, h3, h4 , h5, h6,其中每個元素都對應有默認的字體樣式其代碼如下:<hl>text</hl><h2>text</h2><h3>text</h3><h4>text</h4><h5>text

9、</ho><h6>text</h6>4、ul和li標簽:塊元素，無序列表，詳見：5、和li標簽:塊元素，有序列表，詳見：6、dl、dt、dd標簽:塊元素，常用于生成類表格別表，dt、dd位于dl內部。 詳見：7、strong標簽：內聯元素，使文本以粗體顯示。8、&標簽：內聯元素，用于超鏈接（herf屬性）和設置內部文檔書簽（ID或Name 屬性）。9、em標簽：內聯元素，顯示效果為文本斜體。10、span標簽：內聯元素，用來區分文本中的一個部分。11、br標簽:使文本換行。12、img標簽：內聯元素，用來插入圖像文件，當使用img元素時候，其alt屬

10、 性必須加上，屬性內容將在圖片不能加載的時候顯示。13、label標簽:觸發鼠標事件，當鼠標事件作用于該元素時，也作用于相對應 的input標簽。14、input標簽:根據不同的type屬性值，可以是文本字段、復選框、掩碼后 的文本控件、單選按鈕、按鈕等等。用于獲取提交的數據。當input標簽為單選按 鈕和復選框時，瀏覽器的兼容性比較差，需要細心調整。15、select和option標簽：下拉列表，option位于select內部。16、textarea標簽:文本區域，用于輸入多行文本文字。17、table, tr, th, td標簽:表格，不推薦使用。2. 4 CSS書耳規范2. 4. 1表

11、命名參考駝峰命名法 例:myName全局樣式:global, css框架布局：layout, css字體樣式:font, css鏈接樣式：link, css扌丁印樣式:print, css2. 4. 2類/ID命名規范Container div ttcontainer 容器 Layout #layout 布局Header or banner div #head, ttheader 頁頭部分 Footer div #foot, iifooter 頁腳部分 Navigation list #nav 主導航Sub-navigation list ftsubNav 一.級導航 Menu #menu 菜

12、單Sub Menu tisubmenu 子菜單 Left or right side columns #sidebar_a, #sidebar_b左邊欄或右邊欄Main div #main頁面主體Tag #tag 標簽Message #msg #message 提示信息 Tips ittips 小技巧Vote #vote 投票Friend Link itfriendlink 友情連接 Title tttitle 標題Summary #summary 摘要Search input ttsearchlnput 搜索輸入框 Search output #search_output 搜索輸出和搜索結果

13、相似Search ttsearch 搜索Search bar tisearchBar 搜索條 Search results #search_results 搜索結果Copyright information #copyright 版權信息 brand #branding 商標branding-logo #1ogo LOGOSite information #siteinfo 網站信息Copyright information etc #siteinfoLegal 法律聲明Designer or other credits #siteinfoCredits 信譽Join us tijoinus

14、加入我們Partnership opportunities partner 合作伙伴Services #service 服務Regsiter #regsiter 注冊Arrow arr/arrow 箭頭Little itlittle 標題Website map #sitemap 網站地圖List ttlist 列表Home page #homepage 首頁Sub page subpage二級頁面子頁面Toolbar #tool, #toolbar 匸具條Next pulls if drop 下拉Next pulls menu #dorpmenu 下拉菜單Status status 狀態常用類

15、的命名應盡量以常見英文單詞為準，做到通俗易懂，并在適當的地方加 以注釋。對于二級類/ID命名，則采用組合書寫的模式，后一個單詞的首字母應大 寫：諸如“搜索框”則應命名為“searchinputM、“搜索圖標”命名這''searchicon"、"搜索按鈕”命名為"searchBtn"2. 4. 3樣式調用頁面內嵌法:就是將樣式表直接寫在頁面代碼的head區。<style type=” text/css” >bodybackground:white: color：black;</style>外部樣式表調用：將樣式表寫在

16、一個獨立的.css文件中，然后在頁面head區用 類似以下代碼調用。<link rel二"stylesheet" type二"text/css" href二"css/style, css" />標準的設計中，推薦使用外部調用法，可以不修改頁面只修改.css文件而改變 在符合web頁面的樣式。如果所有頁面都調用同一個樣式表文件，那么改一個樣式表文 件，可以改變所有文件的樣式。2. 4.4樣式簡寫公共樣式的縮寫：當兩個或多個類有想通的屬性值時，可以對屬性值進行縮寫。如：.searchpadding-left:30px;heig

17、ht： 35px;color:#fff; foot padding-left:30px;height： 15px;color:#fff;縮寫為： search, foot padding-left:30px; color:fff;.search height: 35px;) . foot height： 15px;同一屬性根據它的屬性值也可 以進行簡寫，如： search background-color:#333; background-image:url(/images/icon. gif);background-repeat: no-repeat;backgroundposition:l

18、eft; 縮寫為： search background:#333 url(/images/icon. gif) no-repeat left顏色值的縮寫：當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：.menu color:#ff3333;可縮寫為： menu color:#f33;在CSS中關于內外側邊框的距離是按照上、右、下、左 的順序來排列的，當這四個屬性值不同時也可直接縮寫，如：.btn margin-top:10px; margin-right:8px; margin-bottom:12px; marginleft :5px;padding-top:lOpx; padding-

19、right:8px;padding-bottom:12px; padding-left:8px;則可縮寫為： btn Margin:lOpx 8px 12px opx; Padding:lOpx 8px 12px opx; 而如果當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值可以直接縮 寫為兩個，如： btn margin-top：lOpx;margin-right:5px;margin-bottom:lOpx; margin-left:5px;縮寫為：btn margin:lOpx 5px;而當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成一個，如： btn margin-top：

20、lOpx;margin-right:lOpx; margin-bottom:lOpx; margin-left：lOpx;縮寫為：.btnmargin: 10px;） 一段完整的Css屬性編寫的順序為:浮動、寬度、高度（行高）、內邊距、外邊距、字體、背景色、背景圖、其他屬性。如：.headfloat：left;width：136px;height：16px;padding：lOpx;margin：lOpx;font：normal 18px/24px "微軟雅黑"；background：#333url （. /images/icon, gif） no-repeat leftd

21、isplay：block;2.5 CSS常用屬性介紹字體屬性:（font）大小font-size：只要用數值就可以,單位:PX樣式font-style： normal;（正 常）行高 line-height：單位:PX粗細 font-weight ： bold;（粗體）normal;（正常）大小寫 text-transform：capitalize;（首字母大寫）uppercase;（大寫）none;（無）修飾 text-decoration： underline;（下劃線）none;（無）常用字體:（fontfamily）般用Tahoma（英文和數字更好看）、宋體、微軟雅黑背景屬性：（bac

22、kground）色彩 background-color: #FFFFFF;圖片 background-image: url （圖片地址）；重復 background-repeat: no-repeat;滾動 background-attachment: fixed;（固定）scroll:（滾動）很少用 位置 background-position: left（水平）top（垂直）；簡寫方法 background:#000 url （.） repeat fixed left top;區塊屬性:（Block）字間距 letter-spacing: normal;數值對齊text-align： le

23、ft;（左對齊）right;（右對齊）center;（居中）縮進 text-indent：數值em;般一段話前面縮進為2em,表現形式為縮進兩個漢字垂直對齊 vertical-align: baseline;（基線）sub;（下標）super;（下標）top; text-top;middle; bottom; text-bottom;顯示display:block;（塊）inline;（內嵌）當兩個屬性同時用著的時候可以用 display: inline-block 解決。方框屬性：（Box）浮動float: left左浮right右浮none清除浮動 寬度width：數值高度height：數

24、值內邊距:padding上右下左外邊據:margin上右下左邊框屬性：（Border）border-style: dotted;（點線）dashed;（虛線）solid（實線）；border-width：; 邊框寬度border-color:#;簡寫方法 border：width style color;列表屬性：(List-style)類型list-style用值none格式化li定位屬性：(Position)Position： absolute; relative;overflow用其hidden屬性與height：數值 可以防止溢出；用其hidden屬性 與 height：autoszo

25、om： 1(兼容IE6必須要用這個屬性)設置自適應高度2.6圖片規范圖片的命名規范：名稱分為頭尾兩兩部分，用下劃線隔開。頭部分表示此圖片的大類性質。例如：放置在頁面頂部的廣告、裝飾圖案等長 方形的圖片我們取名:banner ;標志性的圖片我們取名為：logo ;在頁面上位置不固 定并且帶有鏈接的小圖片我們取名為button ;在頁面上某一個位置連續出現，性 質相同的鏈接欄口的圖片我們取名:menu ;裝飾用的照片我們取名：pic ;不帶鏈接 表示標題的圖片我們取名:title依照此原則類推。尾部分用來表示圖片的具體含義，用英文字母表示。例如:banner_sohu. gif有onmouse或h

26、over效果的圖片，兩張分別在原有文件名后加"_on"和"_of f" 命名。如：banner_sohu_on. gif圖片質量：圖片質量與圖片格式有很大的關系，盡量用“f圖，并且在制作效果圖時就應 少用陰影、半透明效果圖，這樣可以減少圖片數量。PNG圖片盡量不要用，IE6下對PG的支持非常不好，兼容性調整的時候乂要分背景PG和插入圖片PG,很麻 煩。圖片尺寸：不同頁面，相同欄LI的圖片尺寸應按相同比例設計，尺寸不同，比例相同的同 一張圖片在瀏覽器里不會變形和失真太嚴重。插入圖片：插入圖片在XHTML表現為：<img src二"image

27、s/12090. gif" width二"120" height二"90" alt= n 人物頭像”/>寬度、高度和alt屬性必須給岀。當插入圖片有超級鏈接時，會默認有藍色邊框，所以我們在頁面最開始就應該 格式化圖片imgborder：0;這樣就不會有藍色邊框了。圖片背景：背景圖片在CSS表現為：background:url(. /images/dot. gif) left center no-repeat;2. 7注釋規范XHTML注釋：在實際工作中，有時會出現分不清注釋應該在標簽之上還是標簽之下，為了避 免這種情況，注釋信息統一寫在區

28、域標簽開始之前和結束之后，并以“S”或“E” 開始，表示區域注釋的開始或結束。例：<!二注釋內容start ><div></div><!二注釋內容end >在模塊制作中，可能會出現區域中還有區域的情況，為了更好的區分區域之間 的層級，引入了注釋層級的概念。區域注釋前面的等號表示了當前注釋的層級例： <!二注釋內容start > <!=注釋內容start > <!- =二注釋內容 start > <!=注釋內容end -> <!=注釋內容end > <!二注釋內容end >提示:不建議XHTML里寫注釋，兩個浮動的標簽之間添加注釋的時候，可能會 引起IE6字符復制掉行的BUG,很難處理，只有兩者間的刪除注釋。如果不添加注 釋，頁面標簽的排列必須層次清楚，排列對稱。再輔助火狐插件FireBug的使用， 就能清晰明了的查看網頁的布局和層次結構，完全可以不添加注釋。CSS注釋：在實際工作中，有時會出現分不清注釋應該在標簽之上還是標簽之下，為了避 免這種情況，注釋信息統一寫在區域標簽開始之前和結束之后，并以“S

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論