Web前端知識點總結(jié).doc

. WORD格式.資料 .HTML知識點一、功能用來制作靜態(tài)網(wǎng)頁，網(wǎng)頁中的全部內(nèi)容都是通過Html語言展現(xiàn)出來。使用場合：開發(fā)靜態(tài)網(wǎng)頁。二、思想一切功能都由標簽實現(xiàn)，標簽具有四要素。三、常用標簽標簽關(guān)鍵字功能常用屬性設(shè)置字體,字號,顏色face, color, size 換行 居中對齊 設(shè)置標題級別H1最大 h6最小align插入水平線size, width, align 劃分段落,align 創(chuàng)建有序編號列表type, start 定義一個列表項 定義無序符號列表type插入圖片src,width,height,border, title,alt插入表格border,width,height, bgcolor,bordercolor, cellpadding,cellspacing創(chuàng)建一行創(chuàng)建一列colspan, rowspan創(chuàng)建一列，元素居中，粗體設(shè)置表格的標題 收集用戶輸入信息,并提交給服務(wù)器action, method創(chuàng)建文本框name, valuereadonly, disabled創(chuàng)建密碼框 創(chuàng)建單選按鈕checked 創(chuàng)建下拉列表框name 創(chuàng)建列表項value, selected 創(chuàng)建復(fù)選框checked 創(chuàng)建文本區(qū)域name,rows, cols創(chuàng)建隱藏控件 創(chuàng)建提交按鈕創(chuàng)建重置按鈕 超級鏈接,網(wǎng)頁跳轉(zhuǎn)href, target指定快速的查詢到該網(wǎng)頁的關(guān)鍵字 /提供網(wǎng)頁內(nèi)容的描述信息 /指定文檔類型和頁面字符集四、案例1、詩篇2、學(xué)生課程表 3、注冊頁CSS知識點一、功能1、css格式化頁面中的各組成元素2、css決定元素在頁面的具體位置二、思想屬性是css最小構(gòu)成單元，每個屬性都有特定功能，多個屬性構(gòu)成樣式，由樣式修飾html語言的標簽。三、樣式修飾標簽1、style屬性html標簽添加style屬性，屬性值是多個css屬性的組合。2、標簽選擇器樣式名與標簽關(guān)鍵字相同，根據(jù)名稱相同自動關(guān)聯(lián)。3、ID選擇器1樣式名以#開始；2標簽添加id屬性與樣式關(guān)聯(lián)。4、類選擇器1樣式名以 . 開始；2標簽添加class屬性與樣式關(guān)聯(lián)。5、屬性選擇器標簽名屬性名=屬性值，根據(jù)標簽關(guān)鍵字和屬性值自動關(guān)聯(lián)。6、包含選擇器1子樣式名中間加或空格分隔 (直接包含)；2看最后一個子樣式是什么選擇器就如何關(guān)聯(lián)標簽。7、多個樣式名同一樣式體1樣式名中間加逗號分隔；2根據(jù)樣式類型決定如何與標簽關(guān)聯(lián)。8、多條件同時成立選擇器1多個子樣式名緊挨著 2一個標簽必須同時具備這多個條件才可以被該樣式修飾9、各選擇器使用場合1)如果想根據(jù)標簽名用一個樣式修飾所有同名標簽時，用標簽選擇器；2)如果一個樣式只想修飾唯一的一個標簽時，用id選擇器；3)如果一個樣式想修飾多個任意標簽時，用類選擇器；4)盡量使用包含選擇器。四、元素定位1、盒子模型通過設(shè)置標簽的內(nèi)外邊距從而改變元素的位置，沒有脫離標準文檔流。相關(guān)屬性：marging-top：外上邊距margin-right：外右邊距margin-bottom：外下邊距margin-left：外左邊距margin：同時設(shè)置上右下左四個外邊距 (順時針)padding-top：內(nèi)上邊距padding-right：內(nèi)右邊距padding- bottom：內(nèi)下邊距padding-left：內(nèi)左邊距padding：同時設(shè)置上右下左四個內(nèi)邊距border-top：設(shè)置上邊線的粗細,顏色,線型border-right：設(shè)置右邊線的粗細,顏色,線型border-bottom：設(shè)置下邊線的粗細,顏色,線型border- left：設(shè)置左邊線的粗細,顏色,線型border：同時設(shè)置四個邊線的粗細,顏色,線型border-width：只設(shè)置4個邊線的寬度(粗細) border-color：/只設(shè)置4個邊框的邊框顏色 border-style：只設(shè)置4個邊框的邊框線型2、絕對定位有2套坐標系統(tǒng)：1)如果該元素所有父標簽都沒有設(shè)置相對定位，那么瀏覽器左上角為坐標原點，根據(jù)left與top值確定元素的位置。2)第一個設(shè)置相對定位的父標簽左上角為坐標原點，根據(jù)left與top值確定元素的位置。脫離標準文檔流相關(guān)屬性：position: absolute;/表示絕對地址定位,通過絕對定位,元素可以放置到頁面上的任何位置。left:100px /絕對定位時表示與瀏覽器左邊框距離。top:100px/絕對定位時表示與瀏覽器上邊框距離。z-index: /在絕對定位層改變各元素層疊順序 屬性值是整數(shù) 越大越在上方。3、相對定位元素原位置(標準文檔流的位置)左上角為坐標原點，根據(jù)left與top值改變位置。沒有脫離標準文檔流。相關(guān)屬性position: relative;/表示相對地址定位,通過相對定位；元素可以放置到頁面上的任何位置。left:100px /相對定位時表示與元素原始位置的左邊距離。top:100px /相對定位時表示與元素原始位置的上邊距離。4、浮動定位把元素靠在在父容器左邊或右邊. 兄弟元素都設(shè)置浮動后成為一行，脫離標準文檔流。相關(guān)屬性float : 設(shè)置浮動定位clear: 清除浮動定位的影響5、各定位方式使用場合1)靠左或靠右，兄弟標簽一列變一行，文字環(huán)繞浮動定位。2)移動位移比較小，用盒子模型。3)移動位移比較大，父容器相對定位，子元素絕對定位。五、添加獨立css文件3步驟1、創(chuàng)建子文件夾和css文件2、在html頁面用標簽導(dǎo)入獨立css文件3、定義樣式并修飾各html標簽六、靜態(tài)網(wǎng)頁開發(fā)思想1、對網(wǎng)頁元素通用屬性進行設(shè)置。2、分析頁面的組成，整個網(wǎng)頁布局劃分為多個矩形區(qū)域，在矩形區(qū)域內(nèi)部又可以劃分子矩形區(qū)域，每個矩形區(qū)域都用標簽實現(xiàn)。3、用html標簽把實際元素放在標簽中，再用css實現(xiàn)元素定位和格式化(對每個元素和div)，依次類推，搞定每個div區(qū)域。七、css常用屬性屬性名功能屬性值font-size設(shè)置字號1)像素2)百分比color設(shè)置字體顏色1)英文單詞2)rgbfont-family設(shè)置字體宋體|黑體font-weight設(shè)置文字粗體normal、lightar、boldfont-style設(shè)置字體斜體normal、italicfont設(shè)置字體所有屬性必須按順序設(shè)置text-decoration設(shè)置文本下劃線格式none、underline、line-throughtext-align元素中的內(nèi)容水平方向?qū)R方式left、rigth、centerline-height設(shè)置行高像素vertical-align元素中的內(nèi)容垂直方向的對齊top、bottom、middletext-indent段落首行縮進1)像素2)emtext-transform控制英文字母大小寫none、capitalize、uppercase、lowercasewidth設(shè)置元素的寬度像素heigth設(shè)置元素的高度像素background-color設(shè)置背景顏色1)英文單詞2)rgbbackground-image設(shè)置背景圖片url(圖片路徑)background-repeat設(shè)置背景圖像重復(fù)方式repeat、no-repeatrepeat-x、repeat-ybackground-size設(shè)置背景圖像的大小1)像素2)百分比background-position設(shè)置背景圖片的出現(xiàn)位置像素background/設(shè)置所有背景屬性display設(shè)置元素是否可見none、block、inlineoverflow設(shè)置內(nèi)容超出父區(qū)域時如何處理hidden、visiblelist-style-type設(shè)置列表符號類型disc、circle、nonelist-style-image用圖片作為編號url(圖片路徑)opacity設(shè)置元素的透明度從0.0（完全透明）到1.0（完全不透明）cursor設(shè)置鼠標到達元素上的鼠標形狀pointer、textborder-radius設(shè)置圓角矩形像素八、案例1、房地產(chǎn)首頁 2、注冊頁 3、登錄頁 4、二級菜單JavaScript知識點一、功能瀏覽器執(zhí)行html代碼后實現(xiàn)動態(tài)改變網(wǎng)頁內(nèi)容和格式從而實現(xiàn)動態(tài)效果二、思想1、分析有哪些動態(tài)效果，確定事件三要素并關(guān)聯(lián)從而實現(xiàn)一切功能。2、要實現(xiàn)某功能找已經(jīng)存在的對象和方法。三、html導(dǎo)入獨立的js文件的步驟1、創(chuàng)建文件夾和獨立js文件。2、用標簽在html頁面中導(dǎo)入。3、在js文件中定義方法，并與html頁面的標簽關(guān)聯(lián)。四、事件關(guān)鍵字1、onclick：鼠標單擊時觸發(fā)。2、onload：頁面全部內(nèi)容被加載后立即觸發(fā)，該事件源是body。3、onmouseover：鼠標進入?yún)^(qū)域時觸發(fā)。4、onmouseout：鼠標退出區(qū)域時觸發(fā)。5、onmousemove：鼠標在某區(qū)域移動時觸發(fā)。6、onchange：內(nèi)容改變時觸發(fā)。7、onsubmit：表單提交數(shù)據(jù)時觸發(fā)。8、onblur：控件失去焦點時觸發(fā)。9、onfocus：控件獲取焦點時觸發(fā)。五、瀏覽器對象和方法1、特性所有對象都是由瀏覽器負責提供的，編程時可以直接調(diào)用方法，又稱BOM對象。2、瀏覽器對象的方法總結(jié)內(nèi)置對象名功能常用方法1、window代表瀏覽器窗口alert(提示內(nèi)容)setInterval(方法名(),數(shù)值)clearInterval(對象名)setTimeout(方法名(),時間) open(, _blank, width=800, height=500);parseInt(數(shù)值)eval()prompt(提示信息,默認信息)/彈出對話框,接受文本框內(nèi)容 confirm(對話框上的提示信息)/彈出對話框,有確定和取消2個2、document代表整個網(wǎng)頁getElementById(標簽的id屬性)getElementsByTagName(標簽關(guān)鍵字)getElementsByName(標簽的name屬性值)createElement(標簽關(guān)鍵字)write(內(nèi)容)3、event事件對象event.x 鼠標此時位置的橫坐標event.y 鼠標此時位置的縱坐標4、locationwindow. location= locationlocation.href(“地址”)六、DOM對象的方法1、原理Dom對象可以獲取html文檔的每個標簽，以及該標簽的屬性和內(nèi)容，并可以對這些標簽，屬性和內(nèi)容進行修改從而實現(xiàn)動態(tài)的改變網(wǎng)頁內(nèi)容和格式。2、DOM對象方法總結(jié)方法功能說明getElementById(標簽的id屬性)根據(jù)標簽的id獲取標簽對象1)任何標簽對象可以調(diào)用2)document對象都可以調(diào)用getElementsByTagName(標簽名)根據(jù)標簽名獲取包含全部標簽的數(shù)組2個getElementsByName(name屬性值)根據(jù)標簽的name的屬性值獲取所有標簽對象數(shù)組1)只有document對象可以調(diào)用該方法createElement(標簽關(guān)鍵字)根據(jù)標簽關(guān)鍵字創(chuàng)建標簽對象1)只有document對象可以調(diào)用該方法appendChild(node)把參數(shù)對象添加到父標簽內(nèi)2個insertBefore(newnode,oldnode)為父標簽對象增加一個子標簽對象2個removeChild(node)為父標簽對象刪除一個子標簽對象2個getAttributeNode(屬性名)根據(jù)屬性名獲取屬性對象1)標簽對象可以調(diào)用該方法setAttribute(屬性名,屬性值)為標簽對象添加一個新的屬性或改變它現(xiàn)有屬性的值1) 標簽對象可以調(diào)用該方法屬性意義innerHTML用來獲取或修改標簽對象中的文本內(nèi)容1)標簽對象可以調(diào)用該方法parentNode返回子標簽的父標簽對象1)標簽對象可以調(diào)用該方法2)文本對象firstChild用來獲取父標簽的第一子標簽對象1)標簽對象可以調(diào)用該方法lastChild返回父標簽的最后一個子標簽對象1)標簽對象可以調(diào)用該方法childNodes返回父標簽所有子節(jié)點對象1)標簽對象可以調(diào)用該方法nextSibling返回當前標簽對象的下一個兄弟節(jié)點1)標簽對象可以調(diào)用該方法2)屬性對象previousSibling返回當前標簽對象的上一個兄弟節(jié)點1)標簽對象可以調(diào)用該方法2)屬性對象七、正則表達式1、正則表達式使用場合客戶端表單數(shù)據(jù)校驗2、創(chuàng)建正則表達式的對象1 var regex = new RegExp(.6$);2 var pwdRegex = /.6$/;RegExp類的方法：test()/檢測字符串是否與正則表達式匹配3、正則表達式各通配符 （1）字符匹配符:：匹配多個字符中的任意一個字符例如：abc 匹配a,b,c其中的任意一個字符- ：用來指定范圍也可以表示字符-本身 例如:a-z : 表示匹配從a到z的任意一個字符A-Z : 表示匹配從A到Z的任意一個字符0-9 : 表示匹配從0到9的任意一個字符u4e00-u9fa5 : 表示匹配所有漢字中任意一個漢字 ：取反 ,注意只有用包圍才是取反 例如:A-Z : 表示匹配不是從A到Z的任意一個字符0-9 : 表示匹配不是從0到9的任意一個字符abc :匹配不是a,b,c中的任意一個字符d：匹配任意一個數(shù)字字符 相當于0-9D：匹配任意一個非數(shù)字字符 相當于0-9 w：匹配字母、數(shù)字、下劃線中的一個字符，相當于a-zA-Z0-9_W：與w相反，相當于a-zA-Z0-9_ .：匹配一個任意字符，除了n.：表示一個小數(shù)點，轉(zhuǎn)義字符s：匹配任何一個空白字符(空格，制表位)S：匹配任何一個非空白字符(空格，制表位)（2）定位符：規(guī)定字符出現(xiàn)的位置 ：字符串必須以后面的字符開始，開始標記，此時不能用包圍$ ：字符串必須以$前面的字符結(jié)束，結(jié)束標記。（3）限定字符出現(xiàn)次數(shù):數(shù)1,數(shù)2：限定前方字符出現(xiàn)次數(shù)= 數(shù)1 并且次數(shù)=數(shù)1+ ：限定前方字符出現(xiàn)次數(shù)=1等同于1,* ：限定前方字符出現(xiàn)次數(shù)=0 ? ：限定前方字符出現(xiàn)次數(shù)0次或1次|：或者的關(guān)系 例如: /(xue&)|(學(xué)$)|(薛$)/ ()：構(gòu)成一個整體，括號內(nèi)的內(nèi)容作為一個子表達式來處理。例如：abc：表示a、b、c其中的一個(abc)：表示子串a(chǎn)bc/abc?$/：0個或1個c/(abc)?$/：0個或1個abcvar unameRegex= /(abc$)|(liming$)|(zxy$)/;/要么是abc，要么是liming，要么是zxy（4）需要用到轉(zhuǎn)義的字符有. * ( ) $ / ? :例如：. *說明：在中/ 這4個字符必須寫轉(zhuǎn)義字符才能表達本身 其它字符寫不寫轉(zhuǎn)義都行能表達本身在外必須用轉(zhuǎn)義字符（5）附加參數(shù):var regex = /d4$/gi i：加i匹配時忽略大小寫，沒有i就嚴格區(qū)分大小寫。g：主要在從字符串中查找匹配的子串時起作用，加g表示查找出所有的匹配子串。例如：absdfwabdfwab34324ab ;var regex = /ab$/ 只找到1個absdfwabdfwab34324ab ; var regex = /ab$/g 只找到4個4、表單數(shù)據(jù)驗證7步驟(1)獲取各表單控件對象(2)獲取各控件的value值(3)根據(jù)id獲取顯示錯誤信息的span標簽對象(4)定義正則表達式對象(5)用if選擇結(jié)構(gòu)對數(shù)據(jù)進行校驗.一個控件對應(yīng)一個if結(jié)構(gòu)：如果對一個控件有多個校驗用if多分支如果對一個控件只有1個校驗用if單分支每個分支的條件：正則表達式.test(控件value值)我們對其取反運算如果字符串符合要求則取反后返回假,不符合取反后返回真每個分支的語句：錯誤信息處理語句(給保存錯誤信息的變量賦值) 注意：數(shù)據(jù)不合法才執(zhí)行if語句體(6)為顯示錯誤信息的span標簽添加內(nèi)容(7)返回值(str=null&stt2=null)注意：如果驗證單選按鈕或復(fù)選框第(2)步獲取checked屬性。八、案例1、圖片切換 2、級聯(lián)城市 3、表單數(shù)據(jù)驗證 4、植物大戰(zhàn)僵尸Jquery知識點一、功能和思想1、功能瀏覽器執(zhí)行html代碼后實現(xiàn)動態(tài)改變網(wǎng)頁內(nèi)容和格式從而實現(xiàn)動態(tài)效果。2、思想（1）分析有哪些動態(tài)效果,確定事件三要素并關(guān)聯(lián)從而實現(xiàn)一切功能（2）要實現(xiàn)某功能找已經(jīng)存在的對象和方法二、html添加jquery的3步驟1、創(chuàng)建js文件夾和獨立的js文件2、在html頁面中導(dǎo)入jQuery函數(shù)庫和獨立的js文件 3、在獨立文件中編寫jQuery代碼 $( function ()$(選擇器).事件方法(function () $(選擇器) .方法();); ) 注意：導(dǎo)入jQuery函數(shù)庫語句必須在導(dǎo)入獨立js文件語句的上方三、選擇器1、id選擇器$(#id屬性值) 2、類選擇器$(.class屬性的值)3、標簽選擇器$(標簽名) 4、包含選擇器 (1)間接包含：$(#sss .ttt input) ; (2)直接包含： $(#sssinput.ttt) ;5、屬性選擇器$(inputname=newsletter)6、基本過濾選擇器$(input: eq(0) )7、表單標簽屬性過濾選擇器$(input:checked)四、事件處理機制1、語法$(選擇器).事件方法(function () 方法語句;);2、常用事件方法名click( fn ) ：/當鼠標單擊時觸發(fā)blur( fn ) ：/當標簽失去焦點時觸發(fā)change( fn )： /當標簽內(nèi)容發(fā)生改變時觸發(fā) dblclick( fn )： /當鼠標雙擊擊時觸發(fā) focus( fn )： /當標簽獲得焦點時觸發(fā) keydown( fn ) ：/當鍵盤被按下時觸發(fā) keyup( fn )： /當鍵盤被釋放時觸發(fā)keypress( fn ) ：/按下并釋放時觸發(fā)mousedown(fn)：/鼠標按下mouseup(fn)： /鼠標釋放時觸發(fā)mousemove(fn)： /鼠標移動mouseout(fn)： /鼠標退出區(qū)域mouseover(fn)： /鼠標進入?yún)^(qū)域resize(fn)： /當窗口改變大小時觸發(fā)submit( fn )： /表單提交五、