web前端學習總結(jié)1

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

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

3、圖片塊：figure5. 引述文段，段落縮進：blockquote6. 背景顏色：mark7. 虛線下劃線：abbr8. 上標下標：sub/sup9. 下劃線：ins10. 刪除線：del（標記已刪除內(nèi)容）s（標記不準確內(nèi)容）11. 等寬字體：code12. 預格式化：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:為了讓對應的標簽識別，添加CSSName：為了讓服務器和腳本識別，通常與id設為一樣Size：文本框大小Maxlength：能輸入的最大字符數(shù)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. 創(chuàng)建提交按鈕：<input type="submit" value="點此提交" /> 創(chuàng)建帶圖像的提交按鈕：<button type="image"><img src="1.jpg">點擊這里</button> 創(chuàng)建圖像按鈕：<input type="image" alt="提交" src="1.jpg" />Submit

10、reset重置10. 文本區(qū)域：<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.頁面中空格的使用：全角：中文空格 半角；&nbsp; 項目完成包中，文件夾及文件名稱全部采用小寫字母，不使用中

15、文文件名； 其它特殊符號： 1) <(&lt;) 2) >(&gt;) 六.基本設置-public.css 1 全局設置 上下邊距(margin、padding)：0(px) 左右邊距(margin)：auto(自動) 底色(background):#FFF(白色) 字體(font-family)、字號(font-szie)、字色(color)：”宋體” 12px #666 代碼： /* 全局CSS定義 */ bodymargin:0 auto;padding:0;background:#FFF;color:#666;font:12px 宋體' div,fo

16、rm,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:nonetable,td,input,textareafont-size:12px2 頁面標簽初始化設置 1. 常用基本標div,form,ul,ol,li,span,p,dl,dt,dd,img設置基本標簽的間距、邊框默認值為0。2. h1h6標題默認標題內(nèi)字號12px，內(nèi)外間距為0px，文字不加粗。

17、3. ul,ol,li 列表默認不顯示項目符號。4. h2 欄目標題說明：h2標簽被定義為欄目標題特殊使用，在標簽中非標題文字默認居右顯示，主標題文字使用span標簽包含，居左顯示。5. 默認鏈接顏色常態(tài)下不顯示文字下劃線，顏色為灰(#333)，鼠標懸浮時：顯示文字下劃線，顏色變?yōu)榘导t(#ccc)。6. 狀態(tài)：a:link未點 a:visited已點 a:focus鍵盤選中 a:hover指針停留 a:active正在點3 頁面寬度 默認頁面寬(命名規(guī)范)：按柵格化進行4 .clear 結(jié)束容器內(nèi)各元素的浮動屬性，使相鄰容器或元素節(jié)點正常顯示。以下是清除浮動的幾種方法方法一.clear cle

18、ar:both; height:0; font-size:0; line-height:0或.clear border-top: 1px solid transparent !important;margin-top: -1px !important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;或.clearclear:both;font-size:1px;width:1px;height:0;visibility:hidde

19、n;margin-top:0px!important;*margin-top:-1px;line-height:0使用方法: <div class="clear"></div>RightLeft <div class="clear"></div>方法二.clearzoom:1;.clear:after clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:" ." 或.claer&

20、#160;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="#">送花服務</a></li> <li><a href="#">賓館住宿</a></li> <li><a href="#&quo