2022年03-Web前端知識點總結(jié)知識分享

1、精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除一、功能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,widt

2、h,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,value readonly, disabled創(chuàng)建密碼框創(chuàng)建單項按鈕checked 創(chuàng)建下拉列表框name 創(chuàng)建列表項value, selected創(chuàng)建復(fù)選框checked只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - -

3、 -第 1 頁，共 19 頁 - - - - - - - - - -精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除 創(chuàng)建文本區(qū)域創(chuàng)建隱匿控件name,rows, cols創(chuàng)建提交按鈕創(chuàng)建重置按鈕 href, target指定快速的查詢到該網(wǎng)頁的關(guān)鍵字/供應(yīng)網(wǎng)頁內(nèi)容的描述信息/指定文檔類型和頁面字符集四、案例1、詩篇2、同學課程表3、注冊頁只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - - -第 2 頁，共 19 頁 - - - - - - - - - -精品word 名師歸納總結(jié) - - - - - -

4、- - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除精選名師 優(yōu)秀名師 - - - - - - - - - -第 5 頁，共 19 頁 - - - - - - - - - -一、功能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標簽

5、添加 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、多條件同時成立挑選器只供學習與溝通此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除1多個子樣式名緊挨著2一個標簽必需同時具備這多個條件才可以被該樣式修飾9、各挑選器使用場合1假如想依據(jù)標簽名用一個樣式修飾全部同名標簽時，用標簽挑選器；2假如一

6、個樣式只想修飾唯獨的一個標簽時，用id 挑選器；3假如一個樣式想修飾多個任意標簽時，用類挑選器；4盡量使用包含挑選器；四、元素定位1、盒子模型通過設(shè)置標簽的內(nèi)外邊距從而轉(zhuǎn)變元素的位置，沒有脫離標準文檔流；相關(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)邊距

7、border-top ：設(shè)置上邊線的粗細 ,顏色,線型border-right ：設(shè)置右邊線的粗細 ,顏色,線型border-bottom ：設(shè)置下邊線的粗細 ,顏色,線型border- left ：設(shè)置左邊線的粗細 ,顏色,線型border ：同時設(shè)置四個邊線的粗細,顏色,線型 border-width ：只設(shè)置 4 個邊線的寬度 粗細 border-color ：/只設(shè)置 4 個邊框的邊框顏色只供學習與溝通此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除border-style ：只設(shè)置 4 個邊框的邊框線型2、肯定定位有 2 套坐標系統(tǒng)：1假如該元素全部父標簽都沒有設(shè)置相對定位，那么瀏覽器左

8、上角為坐標原點，依據(jù) left 與 top 值確定元素的位置；2第一個設(shè)置相對定位的父標簽左上角為坐標原點，依據(jù)left 與 top 值確定元素的位置；脫離標準文檔流相關(guān)屬性：position:absolute;/表示肯定地址定位 ,通過肯定定位 ,元素可以放置到頁面上的任何位置；left:100px/肯定定位時表示與瀏覽器左邊框距離；top:100px/肯定定位時表示與瀏覽器上邊框距離；z-index :/在肯定定位層轉(zhuǎn)變各元素層疊次序?qū)傩灾凳钦麛?shù)越大越在上方；3、相對定位元素原位置 標準文檔流的位置 左上角為坐標原點， 依據(jù) left 與 top 值轉(zhuǎn)變位置；沒有脫離標準文檔流；相關(guān)屬性p

9、osition:relative;/表示相對地址定位 ,通過相對定位；元素可以放置到頁面上的任何位置；left:100px/相對定位時表示與元素原始位置的左邊距離；top:100px/相對定位時表示與元素原始位置的上邊距離；4、浮動定位只供學習與溝通精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除把元素靠在在父容器左邊或右邊. 兄弟元素都設(shè)置浮動后成為一行，脫離標準文檔流；相關(guān)屬性float :設(shè)置浮動定位clear:清除浮動定位的影響5、各定位方式使用場合1靠左或靠右，兄弟標簽一列變一行，文字圍繞浮動定位；2移動位移比較小

10、，用盒子模型；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

11、設(shè)置字體顏色1英文單詞 2rgbfont-family設(shè)置字體宋體 |黑體font-weight設(shè)置文字粗體normal 、lightar 、boldfont-style設(shè)置字體斜體normal 、italicfont設(shè)置字體全部屬性必需按次序設(shè)置text-decoration設(shè)置文本下劃線格式none、underline 、line-through只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - - -第 6 頁，共 19 頁 - - - - - - - - - -精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)

12、站刪除text-align元素中的內(nèi)容水平方向?qū)R方式left 、rigth 、centerline-height設(shè)置行高像素元素中的內(nèi)容垂直方向的vertical-align對齊top 、bottom 、middletext-indent段落首行縮進1像素 2emuppercase、lowercasewidth設(shè)置元素的寬度像素heigth設(shè)置元素的高度像素background-color設(shè)置背景顏色1英文單詞 2rgbbackground-image設(shè)置背景圖片url 圖片路徑 background-repeatbackground-size設(shè)置背景圖像重復(fù)方式設(shè)置背景圖像的大小repea

13、t 、no-repeatrepeat-x 、repeat-y1像素 2百分比background-position設(shè)置背景圖片的顯現(xiàn)位置像素background/設(shè)置全部背景屬性display設(shè)置元素是否可見none、block 、inlinetext-transform掌握英文字母大小寫none、capitalize 、overflow設(shè)置內(nèi)容超出父區(qū)域時如何處理hidden 、visiblelist-style-type設(shè)置列表符號類型disc 、circle 、none list-style-image用圖片作為編號url 圖片路徑 從 0.0（完全透亮）到opacity設(shè)置元素的透亮度

14、cursor設(shè)置鼠標到達元素上的鼠標外形1.0（完全不透亮）pointer 、textborder-radius設(shè)置圓角矩形像素八、案例1、房地產(chǎn)首頁2、注冊頁3、登錄頁只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - - -第 7 頁，共 19 頁 - - - - - - - - - -精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除4、二級菜單只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - - -第 8 頁，共 19 頁 - - - - - - - - - -精品word 名師歸納總結(jié)

15、- - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除一、功能JavaScript學問點瀏覽器執(zhí)行 html 代碼后實現(xiàn)動態(tài)轉(zhuǎn)變網(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、o

16、nmouseover：鼠標進入?yún)^(qū)域時觸發(fā)；4、onmouseout：鼠標退出區(qū)域時觸發(fā)；5、onmousemove：鼠標在某區(qū)域移動時觸發(fā)；6、onchange：內(nèi)容轉(zhuǎn)變時觸發(fā)；7、onsubmit ：表單提交數(shù)據(jù)時觸發(fā)；8、onblur ：控件失去焦點時觸發(fā)；9、onfocus：控件獵取焦點時觸發(fā)；五、瀏覽器對象和方法1、特性全部對象都是由瀏覽器負責供應(yīng)的，編程時可以直接調(diào)用方法，又稱BOM 對象；2、瀏覽器對象的方法總結(jié)內(nèi)置對象名功能常用方法1、window代表瀏覽器窗口alert 提示內(nèi)容 setInterval 方法名 , 數(shù)值 只供學習與溝通精選名師 優(yōu)秀名師 - - - - - -

17、 - - - -第 9 頁，共 19 頁 - - - - - - - - - -精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除clearInterval對象名 setTimeout 方法名 , 時間 open ,_blank,width=800, height=500;parseInt 數(shù)值 eval prompt提示信息 , 默認信息 / 彈出對話框 ,接受文本框內(nèi)容confirm對話框上的提示信息/ 彈出對話框 ,有確定和取消2 個2、document代表整個網(wǎng)頁getElementById 標簽的 id 屬性 get

18、ElementsByTagName 標 簽 關(guān)鍵字 getElementsByName標簽的name 屬性值 createElement 標簽關(guān)鍵字 write 內(nèi)容 3、event大事對象event.x鼠標此時位置的橫坐標event.y鼠標此時位置的縱坐標4、location六、 DOM對象的方法1、原理window. location= location location.href“地址 ”Dom 對象可以獵取 html 文檔的每個標簽，以及該標簽的屬性和內(nèi)容，并可以對這些標簽，屬性和內(nèi)容進行修改從而實現(xiàn)動態(tài)的轉(zhuǎn)變網(wǎng)頁內(nèi)容和格式；2、DOM對象方法總結(jié)方法功能說明getElementByI

19、d 標簽的 id 屬性getElementsByTagName標依據(jù)標簽的id 獵取標簽對象1任何標簽對象可以調(diào)用2document 對象都可以調(diào)用依據(jù)標簽名獵取包含全部標簽名 getElementsByName name 屬性值 createElement 標簽關(guān)鍵字 簽的數(shù)組依據(jù)標簽的name 的屬性值獵取全部標簽對象數(shù)組依據(jù)標簽關(guān)鍵字創(chuàng)建標簽對象2 個1只有 document 對象可以調(diào)用該方法1只有 document 對象可以調(diào)用該方法appendChildnode把參數(shù)對象添加到父標簽內(nèi)2 個只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - - -第 10 頁，共 1

20、9 頁 - - - - - - - - - -精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除insertBefore newnode,oldnoderemoveChildnode為父標簽對象增加一個子標2 個簽對象為父標簽對象刪除一個子標簽對象2 個getAttributeNode 屬性名 依據(jù)屬性名獵取屬性對象1標簽對象可以調(diào)用該方法setAttribute 屬性名 , 屬性值為標簽對象添加一個新的屬性或轉(zhuǎn)變它現(xiàn)有屬性的值1) 標簽對象可以調(diào)用該方法屬性意義用來獵取或修改標簽對象中innerHTML的文本內(nèi)容parent

21、Node返回子標簽的父標簽對象 用來獵取父標簽的第一子標1標簽對象可以調(diào)用該方法1標簽對象可以調(diào)用該方法2文本對象firstChildlastChild簽對象1標簽對象可以調(diào)用該方法返回父標簽的最終一個子標1標簽對象可以調(diào)用該方法簽對象childNodes返回父標簽全部子節(jié)點對象1標簽對象可以調(diào)用該方法nextSibling previousSibling七、正就表達式1、正就表達式使用場合客戶端表單數(shù)據(jù)校驗返回當前標簽對象的下一個兄弟節(jié)點返回當前標簽對象的上一個兄弟節(jié)點1標簽對象可以調(diào)用該方法2屬性對象1標簽對象可以調(diào)用該方法2屬性對象2、創(chuàng)建正就表達式的對象1 var regex = ne

22、w RegExp.6$; 2 var pwdRegex = /.6$/;RegExp 類的方法： test/檢測字符串是否與正就表達式匹配3、正就表達式各通配符（ 1）字符匹配符 : ：匹配多個字符中的任意一個字符例如：abc 匹配 a,b,c 其中的任意一個字符-：用來指定范疇也可以表示字符- 本身只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - - -第 11 頁，共 19 頁 - - - - - - - - - -精品word 名師歸納總結(jié) - - - - - - - - - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除例如:a-z :表示匹配從 a 到 z 的

23、任意一個字符 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-9w：匹配字母、數(shù)字、下劃線中的一個字符，相當于a-zA-Z0-9_W ：與w 相反，相當于 a-zA-Z0-9_ .：匹配一個任意字符，除了n.：表示一個小數(shù)點，轉(zhuǎn)義

24、字符s：匹配任何一個空白字符空格，制表位 S：匹配任何一個非空白字符空格，制表位 （ 2）定位符：規(guī)定字符顯現(xiàn)的位置：字符串必需以 后面的字符開頭，開頭標記，此時不能用 包圍$ ：字符串必需以 $前面的字符終止，終止標記；（ 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&| 學$|薛$/只供學習與溝通精選名師 優(yōu)秀名師 - - - - - - - - - -第 20 頁，共 19 頁 - - - - -

25、- - - - -此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除：構(gòu)成一個整體，括號內(nèi)的內(nèi)容作為一個子表達式來處理；例如：abc：表示 a、b、c 其中的一個abc：表示子串 abc/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 rege

26、x = /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)：假如對一個控件有多個校驗

27、用if 多分支 假如對一個控件只有1 個校驗用 if 單分支只供學習與溝通此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除每個分支的條件：正就表達式 .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)僵尸只供學習與溝通此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)

28、站刪除一、功能和思想Jquery學問點1、功能瀏覽器執(zhí)行 html 代碼后實現(xiàn)動態(tài)轉(zhuǎn)變網(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

29、 挑選器$#id屬性值 2、類挑選器$.class 屬性的值 3、標簽挑選器$ 標簽名 4、包含挑選器只供學習與溝通此文檔僅供收集于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系網(wǎng)站刪除1間接包含： $#sss.tttinput ;2直接包含：$#sssinput.ttt ;5、屬性挑選器$inputname=newsletter6、基本過濾挑選器$input: eq0 7、表單標簽屬性過濾挑選器$input:checked四、大事處理機制1、語法$ 挑選器 . 大事方法 function 方法語句 ;2、常用大事方法名click fn ：/當鼠標單擊時觸發(fā)blur fn ： /當標簽失去焦點時觸發(fā) change fn ： /當標簽內(nèi)容發(fā)生轉(zhuǎn)變時觸發(fā)dblclick fn ： /當鼠標雙擊擊時觸發(fā)focus fn ： /當標簽獲得焦點時觸發(fā)keydown fn ：/當鍵盤被按下時觸發(fā) keyup fn ： /當鍵盤被釋放時觸發(fā)keypress fn ：/按下并釋放時觸發(fā) mousedownfn ： /鼠標按下mouseupfn ： /鼠標釋放時觸發(fā)m