1、Web總結一.名詞解釋 1. 橫切在固定頁面的寬度(按柵格化進行)并且對高度沒有限制的容器稱為一個標準橫切2. 留白兩個容器或碎片之間的上、下、左、右的空白距離3. 繼承元素可以從其父級元素中獲得一些可為自己使用的屬性或值。4. 圖片定位把圖片元素放置到一個靜態的、相對的、肯定的、或固定的位置中，利用CSS中對圖片進行遮罩屬性，多用于頁面中的修飾圖5. 底圖頁面中在標簽中使用的背景圖6. 齊底(圖)線用于區分橫切或碎片結束的線或圖7. 頁面結構頁面的基礎框架，由橫切、布局元素組成8. 焦點區(圖)最易注意的區域 9. 導航 在頁面中具有導向性的鏈接集合 10. 頭圖 頁面主題圖片11. 間距

2、碎片或文字間的距離12. 行高文字段落中行與行之間的距離13. 首行縮進文字段落首行縮進14. 浮動使被定義的區域脫離正常的頁面文檔流15. 碎片由文字、圖片組合成的內容區域16. 通欄廣告與頁面內容區同寬的廣告區域17. 功能按鈕具有交互屬性的按鈕18. 私有樣式當前頁面獨立使用的樣式，不具備公用性19. 水平(垂直)居中在頁面中的某個元素處于父級的上下或左右的相同距離20. 標準頭(尾)定義相同的頁面頭或尾元素集合二.文本格式化1. 段落：p2. 斜體：address（聯系信息）em（強調）i（突出不同）cite（引用）dfn（首次定義術語）3. 粗體：strong（重要）b（提醒）4.

3、圖片塊：figure5. 引述文段，段落縮進：blockquote6. 背景顏色：mark7. 虛線下劃線：abbr8. 上標下標：sub/sup9. 下劃線：ins10. 刪除線：del（標記已刪除內容）s（標記不精確內容）11. 等寬字體：code12. 預格式化：pre13. 字號減小，表注釋：small14. 時間：time15. 換行：br16. html5定義區塊：header nav article section aside footer div span三.表單表格1. <form method="post" action="show.ph

4、p" enctype="multipart/form-data">.</form>2. 表單元素的組織：<fieldset>.</fieldset><fieldset>.</fieldset>3. 創建各種框: <input type="text" id="name" name="name" class="zky" required="required" placeholder="請輸

5、入" value="http:/" autofocus="autofocus" size="12" maxlength="20" pattern="." />注：textpassword/url/tel/emailId:為了讓對應的標簽識別，添加CSSName：為了讓服務器和腳本識別，通常與id設為一樣Size：文本框大小Maxlength：能輸入的最大字符數Pattern：正則表達式4. 添加標簽： <label for="idname"><

6、;/label>5. 單(多)選按鈕：<input tupe="radio/checkbox" id="aaa" name="zky" value="beijing" /><label for="aaa">北京</label><input tupe="radio/checkbox" id="bbb" name="zky" value="shanghai" />&l

7、t;label for="bbb">上海</label>注：id各自唯一，name必須相同。checked：默認選擇6. 下拉框：<select id="zky" name="zky" size="12" multiple="multiple"><option value="beijing">北京</option><option value="shanghai">上海</option&

8、gt;<option value="chengdu">成都</option></select>注：size:選擇框的高度 multiple：允很多選 selected：默認選擇 用<optgroup label="東北"></label>對選擇框進行分組7. 上傳文件：<input type="file" id="zky" name="zky" size="5" />注：size：輸入路徑和文件名的字段的

9、寬度8. 禁用表單元素：<input disabled>9. 創建提交按鈕：<input type="submit" value="點此提交" /> 創建帶圖像的提交按鈕：<button type="image"><img src="1.jpg">點擊這里</button> 創建圖像按鈕：<input type="image" alt="提交" src="1.jpg" />Submit

10、reset重置10. 文本區域：<textarea name="zky" maxlength="30" rows="5" cols="5">請在此輸入字符</textarea>11. 表格 :<table><caption></caption><thead><tr><th scope="rowgroup">.</th><th scope="col">.<

11、;/th></tr></thead><tbody><tr><th scope="row">.</th><td rowspan="3">.</td><td>.</td></tr></tbody></table>四.文本格式化1. font：（斜體 粗體 小型大寫字母） 字體大小(必有) 行距 字體集（必有）;2. 文本背景： background：#foc url（1.jpg）repeat-x s

12、croll 0 0；3. 字間距：word-spacing:12px;4. 字偶距：letter-spacing:12px;5. 縮進增加：text-indent:12px;6. 小型大寫字母: font-variant:small-caps;7. 文本對齊：text-align:left；適用于block，inline-block8. 單詞大小寫: text-transform:capitalize(單詞首字母大寫)/uppercase(大寫)/lowercase(小寫)9. 文本上的線：text-decoraion:underline/overline/line-through;11. 空

13、格：white-space:pre(顯示全部空格回車)/nowrap（非斷行空格）；12. h316px; h512px; verdana,Geneva,sans-serif;13. 列表屬性： lilist-style:url(1.jpg) inside square;五.CSS布局1. width：不包括padding，border，margin；max-width設置外圍限制；2. 浮動：float:left; 清除浮動：clear:both;3. 設置邊框： border:dotted 4px red;(dotted點狀、dashed虛線、solid實線)4. 使元素對齊：vertic

14、al-align:baseline/middle/text-bottom.5. 顯示：display:black/inline/inline-block;6. 顯示：visibility:visible/hiddle;7. 相對定位：position:relative; top:5px; 相對于該元素的原始位置8. 肯定定位：position:absolute; top:5px; 相對于body或離他最近定位的祖先元素9. 三維位置：z-index:50; 越大的在最上面10. 廠商前綴：-webkit-(safari) moz-(firefox) ms-(IE) o-(opera)11. 創

15、建圓角：-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px; (左上角,角的半徑是50px)border-radius:50px;(全部角簡寫)12. 創建橢圓角： border-radius:40px/20px; （x半徑/y半徑）13. 創建圓形： border-radius:50px; 50px為元素半徑大小14. 文本加陰影：text-shadow: 2px 5px 5px #999; x/y/模糊半徑15. 元素加陰影：(-moz-/-webki

16、t-)box-shadow:(inset內陰影)2px 5px 5px #999; 5px 10px 2px #555(多重陰影);16. 多重背景：background:#000 url(1.png) 50% 102% no-repeat,#222 url(2.png) 12px -150px repeat-x;17. 透明度： opacity:.5; 01 透明不透明18. 漸變背景：background:linear-gradient(left,#000,#999); (left ：漸變線沿逆時針方向轉至水平線的角度)六.html5視頻音頻1. html5支持3種視頻：.ogg/.ogv

17、 .mp4/.m4v .webm2. 添加視頻：<video src="1.webm"></video>視頻屬性：src autoplay controls muted loop poster width height preload3. 為視頻添加多個來源：<video controls="controls"><source src="1.mp4" type="video/mp4"><source src="1.webm" type=&qu

18、ot;video/webm"> <object type="application/x-shockwave-flash" data="1.swf?videourl=1.mp4&control=true"> <param name="movie" value="1.swf?videourl=1.mp4&control=true"></object> /嵌入Flash動畫 <a href="1.mp4">下載該視頻<

19、;/a></video>4. html5支持5中音頻：.ogg .mp3 .wav .aac .mp45.添加音頻：<audio src="1.ogg"></audio>音頻屬性：src autoplay controls muted loop preload 。多個來源同video。七.一些約定 我們結合常用的一些命名習慣，再結合CSS的實際應用，整理出一些較好的命名習慣。 1. 樣式名稱首字母統一為小寫字母，不能為數字，下劃線及特別字符；2. 樣式名盡量語義化或簡寫； 3. 樣式名需要組合拼寫時，接受全部小寫拼寫并使用下劃線連接

20、，即：all_keyword； 4. 使用px(像素)為基本計量單位； 5. 頁面中空格的使用：全角：中文空格 半角；&nbsp; 6. 項目完成包中，文件夾及文件名稱全部接受小寫字母，不使用中文文件名； 7. 削減DIV的嵌套層數； 8. 給重要圖片加上alt屬性；給重要的元素和截斷的元素加上title； 9. 使用正確的注釋方法（詳見“注釋”章節）； 10. 特別情況下要求表現和內容分離，代碼中不要涉及任何表現的元素，例如：style、font等； 11. 雙標記簽都要有開頭和結束標簽，單標記標簽的后面肯定要加“ /”,例如：<br />等，并且有正確的層次；12. 其

21、它特別符號： 1) <(&lt;) 2) >(&gt;)八.命名空間 8.1外掛樣式名稱 全局：public.css 全局樣式為全站公用，為頁面樣式基礎，頁面中必須包含。 結構：layout.css 頁面結構類型簡單，并且公用類型較多時使用。多用在首頁級頁面和產品類頁面中。 私有：style.css 獨立頁面所使用的樣式文件，頁面中必須包含。 模塊 module.css 產品類頁面應用，將可復用類模塊進行剝離后，可與其它樣式協作使用。 默認 default.css文章 article.css圖片 photo.css下載 soft.css主題 themes.css 實

22、現換膚功能時應用。 補丁 mend.css 基于以上樣式進行的私有化修補。8.2 常用名稱 (1)頁面結構 容器: container頁頭：header內容：content/container/content(A)頁面主體：main頁尾：footer導航：nav側欄：sidebar欄目：column頁面外圍掌握整體布局寬度：wrapper左右中：left right center浮左浮右：fl fr清除浮動 clear(2)導航導航：nav主導航：mainbav子導航：subnav頂導航：topnav邊導航：sidebar左導航：leftsidebar右導航：rightsidebar

23、菜單：menu子菜單：submenu標題：title摘要：summary路徑：path(3)模塊化命名模塊頭部：hd模塊內容部分：bd模塊底部：ft(4)各內容頁對應標題：title副標題：subtitle屬性：properties簡介：infor內容：content分頁：page插入廣告：insert_ad表情：expression功能選項：options上下篇：up_down評論：comments相關內容：related下載地址：download播放地址：play_add(5)功能標志：logo廣告：banner登陸：login登錄條：loginbar注冊：regsiter搜尋：searc

24、h日期：date功能區：shop標題：title加入：joinus狀態：status按鈕：btn滾動：scroll標簽頁：tab文章列表：list提示信息：msg當前的：current小技巧：tips圖標：icon注釋：note指南：guild服務：service熱點：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權：copyright九.基本設置-public.css 9.1 全局設置 上下邊距(margin、padding)：0(px) 左右邊距(margin)：auto(自動) 底色(background):#FFF(白色) 字體(f

25、ont-family)、字號(font-szie)、字色(color)：”宋體” 12px #666 代碼： /* 全局CSS定義 */ bodymargin:0 auto;padding:0;background:#FFF;color:#666;font:12px 宋體' div,form,ul,ol,li,span,p,dl,dt,dd,imgmargin:0;padding:0;border:0;h1,h2,h3,h4,h5,h6margin:0;padding:0;font-size:12px;font-weight:normal;ul,ol,lilist-style:none

26、table,td,input,textareafont-size:12px9.2 頁面標簽初始化設置 1. 常用基本標div,form,ul,ol,li,span,p,dl,dt,dd,img設置基本標簽的間距、邊框默認值為0。2. h1h6標題默認標題內字號12px，內外間距為0px，文字不加粗。3. ul,ol,li 列表默認不顯示項目符號。4. h2 欄目標題說明：h2標簽被定義為欄目標題特別使用，在標簽中非標題文字默認居右顯示，主標題文字使用span標簽包含，居左顯示。5. 默認鏈接顏色常態下不顯示文字下劃線，顏色為灰(#333)，鼠標懸浮時：顯示文字下劃線，顏色變為暗紅(#ccc)。

27、6. 狀態：a:link未點 a:visited已點 a:focus鍵盤選中 a:hover指針停留 a:active正在點9.3 頁面寬度 默認頁面寬(命名規范)：按柵格化進行9.4 .clear 結束容器內各元素的浮動屬性，使相鄰容器或元素節點正常顯示。以下是清除浮動的幾種方法方法一.clear clear:both; height:0; font-size:0; line-height:0或.clear border-top: 1px solid transparent !important;margin-top: -1px !important;border-top: 0px;marg

28、in-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;或.clearclear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0使用方法: <div class="clear"></div>RightLeft <div class="clear&

29、quot;></div>方法二.clearzoom:1;.clear:after clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:" ." 或.claer height:auto; _height:200px; min-height:200px; verflow:auto; zoom:1; _overflow:visible;使用方法:<div class=""><ul class="clear"><li><a href="#">送水送氣</a></li> <li><a href="#">送花服