Web前端知識(shí)點(diǎn)總結(jié).doc

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