web前端學(xué)習(xí)總結(jié)(精華版)

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

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

3、圖片塊：figure5. 引述文段，段落縮進(jìn)：blockquote6. 背景顏色：mark7. 虛線下劃線：abbr8. 上標(biāo)下標(biāo)：sub/sup9. 下劃線：ins10. 刪除線：del（標(biāo)記已刪除內(nèi)容）s（標(biāo)記不精確內(nèi)容）11. 等寬字體：code12. 預(yù)格式化：pre13. 字號減小，表注釋：small14. 時間：time15. 換行：br16. html5定義區(qū)塊：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. 創(chuàng)建各種框: <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:為了讓對應(yīng)的標(biāo)簽識別，添加CSSName：為了讓服務(wù)器和腳本識別，通常與id設(shè)為一樣Size：文本框大小Maxlength：能輸入的最大字符數(shù)Pattern：正則表達(dá)式4. 添加標(biāo)簽： <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：默認(rèn)選擇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：默認(rèn)選擇 用<optgroup label="東北"></label>對選擇框進(jìn)行分組7. 上傳文件：<input type="file" id="zky" name="zky" size="5" />注：size：輸入路徑和文件名的字段的

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

10、reset重置10. 文本區(qū)域：<textarea name="zky" maxlength="30" rows="5" cols="5">請?jiān)诖溯斎胱址?lt;/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. 縮進(jìn)增加：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設(shè)置外圍限制；2. 浮動：float:left; 清除浮動：clear:both;3. 設(shè)置邊框： border:dotted 4px red;(dotted點(diǎn)狀、dashed虛線、solid實(shí)線)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. 創(chuàng)

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

16、t-)box-shadow:(inset內(nèi)陰影)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 ：漸變線沿逆時針方向轉(zhuǎn)至水平線的角度)六.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。七.一些約定 我們結(jié)合常用的一些命名習(xí)慣，再結(jié)合CSS的實(shí)際應(yīng)用，整理出一些較好的命名習(xí)慣。 1. 樣式名稱首字母統(tǒng)一為小寫字母，不能為數(shù)字，下劃線及特別字符；2. 樣式名盡量語義化或簡寫； 3. 樣式名需要組合拼寫時，接受全部小寫拼寫并使用下劃線連接

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

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

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

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

24、h日期：date功能區(qū)：shop標(biāo)題：title加入：joinus狀態(tài)：status按鈕：btn滾動：scroll標(biāo)簽頁：tab文章列表：list提示信息：msg當(dāng)前的：current小技巧：tips圖標(biāo)：icon注釋：note指南：guild服務(wù)：service熱點(diǎn)：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyright九.基本設(shè)置-public.css 9.1 全局設(shè)置 上下邊距(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 頁面標(biāo)簽初始化設(shè)置 1. 常用基本標(biāo)div,form,ul,ol,li,span,p,dl,dt,dd,img設(shè)置基本標(biāo)簽的間距、邊框默認(rèn)值為0。2. h1h6標(biāo)題默認(rèn)標(biāo)題內(nèi)字號12px，內(nèi)外間距為0px，文字不加粗。3. ul,ol,li 列表默認(rèn)不顯示項(xiàng)目符號。4. h2 欄目標(biāo)題說明：h2標(biāo)簽被定義為欄目標(biāo)題特別使用，在標(biāo)簽中非標(biāo)題文字默認(rèn)居右顯示，主標(biāo)題文字使用span標(biāo)簽包含，居左顯示。5. 默認(rèn)鏈接顏色常態(tài)下不顯示文字下劃線，顏色為灰(#333)，鼠標(biāo)懸浮時：顯示文字下劃線，顏色變?yōu)榘导t(#ccc)。

27、6. 狀態(tài)：a:link未點(diǎn) a:visited已點(diǎn) a:focus鍵盤選中 a:hover指針停留 a:active正在點(diǎn)9.3 頁面寬度 默認(rèn)頁面寬(命名規(guī)范)：按柵格化進(jìn)行9.4 .clear 結(jié)束容器內(nèi)各元素的浮動屬性，使相鄰容器或元素節(jié)點(diǎn)正常顯示。以下是清除浮動的幾種方法方法一.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="#">送花服