2024年Web前端知識點總結

HTML知識點壹、功能用來制作靜態網頁，網頁中的所有內容都是通過Html語言展現出來。使用場所：開發靜態網頁。二、思想壹切功能都由標簽實現，標簽具有四要素。三、常用標簽標簽關鍵字功能常用屬性<font></font>設置字體,字號,顏色face,color,size<br/>換行<center></center>居中對齊<hn></hn>設置標題級別H1最大h6最小align<hr/>插入水平線size,width,align<p></p>劃分段落,align<ol></ol>創立有序編號列表type,start<li></li>定義壹種列表項<ul></ul>定義無序符號列表type<img/>插入圖片src,width,height,border,title,alt<table></table>插入表格border,width,height,bgcolor,bordercolor,cellpadding,cellspacing<tr></tr>創立壹行<td></td>創立壹列colspan,rowspan<th></th>創立壹列，元素居中，粗體<caption></caption>設置表格的標題<form></form>搜集顧客輸入信息,并提交給服務器action,method<inputtype="text"/>創立文本框name,valuereadonly,disabled<inputtype="password"/>創立密碼框<inputtype="radio"/>創立單項選擇按鈕checked<select></select>創立下拉列表框name<option></option>創立列表項value,selected<inputtype="checkbox"/>創立復選框checked<textarea></textarea>創立文本區域name,rows,cols<inputtype="hidden"/>創立隱藏控件<inputtype="submit"/> 創立提交按鈕<inputtype="reset"/>創立重置按鈕<a></a>超級鏈接,網頁跳轉href,target<metaname="keywords"content="淘寶網"/>指定迅速的查詢到該網頁的關鍵字<metaname="description"content="淘寶網-亞洲最大/>開始；2>標簽添加class屬性與樣式關聯。5、屬性選擇器標簽名[屬性名=屬性值]，根據標簽關鍵字和屬性值自動關聯。6、包括選擇器1>子樣式名中間加>或空格分隔(>直接包括)；2>看最終壹種子樣式是什么選擇器就怎樣關聯標簽。7、多種樣式名同同樣式體1>樣式名中間加逗號分隔；2>根據樣式類型決定怎樣與標簽關聯。8、多條件同步成立選擇器1>多種子樣式名緊挨著2>壹種標簽必須同步具有這多種條件才可以被該樣式修飾9、各選擇器使用場所1)假如想根據標簽名用壹種樣式修飾所有同名標簽時，用標簽選擇器；2)假如壹種樣式只想修飾唯壹的壹種標簽時，用id選擇器；3)假如壹種樣式想修飾多種任意標簽時，用類選擇器；4)盡量使用包括選擇器。四、元素定位1、盒子模型通過設置標簽的內外邊距從而變化元素的位置，沒有脫離原則文檔流。有關屬性：marging-top：外上邊距margin-right：外右邊距margin-bottom：外下邊距margin-left：外左邊距margin：同步設置上右下左四個外邊距(順時針)padding-top：內上邊距padding-right：內右邊距padding-bottom：內下邊距padding-left：內左邊距padding：同步設置上右下左四個內邊距border-top：設置上邊線的粗細,顏色,線型border-right：設置右邊線的粗細,顏色,線型border-bottom：設置下邊線的粗細,顏色,線型border-left：設置左邊線的粗細,顏色,線型border：同步設置四個邊線的粗細,顏色,線型border-width：只設置4個邊線的寬度(粗細)border-color：兄弟元素都設置浮動後成為壹行，脫離原則文檔流。有關屬性float:設置浮動定位clear:清除浮動定位的影響5、各定位方式使用場所1)靠左或靠右，兄弟標簽壹列變壹行，文字圍繞——浮動定位。2)移動位移比較小，用盒子模型。3)移動位移比較大，父容器相對定位，子元素絕對定位。五、添加獨立css文獻3環節1、創立子文獻夾和css文獻2、在html頁面用<link>標簽導入獨立css文獻3、定義樣式并修飾各html標簽六、靜態網頁開發思想1、對網頁元素通用屬性進行設置。2、分析頁面的構成，整個網頁布局劃分為多種矩形區域，在矩形區域內部又可以劃分子矩形區域，每個矩形區域都用<div>標簽實現。3、用html標簽把實際元素放在<div>標簽中，再用css實現元素定位和格式化(對每個元素和div)，依次類推，搞定每個div區域。七、css常用屬性屬性名功能屬性值font-size設置字號1)像素2)比例color設置字體顏色1)英文單詞2)rgbfont-family設置字體宋體|黑體font-weight設置文字粗體normal、lightar、boldfont-style設置字體斜體normal、italicfont設置字體所有屬性必須按次序設置text-decoration設置文本下劃線格式none、underline、line-throughtext-align元素中的內容水平方向對齊方式left、rigth、centerline-height設置行高像素vertical-align元素中的內容垂直方向的對齊top、bottom、middletext-indent段落首行縮進1)像素2)emtext-transform控制英文字母大小寫none、capitalize、uppercase、lowercasewidth設置元素的寬度像素heigth設置元素的高度像素background-color設置背景顏色1)英文單詞2)rgbbackground-image設置背景圖片url('圖片途徑')background-repeat設置背景圖像反復方式repeat、no-repeatrepeat-x、repeat-ybackground-size設置背景圖像的大小1)像素2)比例background-position設置背景圖片的出現位置像素backgroundlocation=location(“地址”)六、DOM對象的措施1、原理Dom對象可以獲取html文檔的每個標簽，以及該標簽的屬性和內容，并可以對這些標簽，屬性和內容進行修改從而實現動態的變化網頁內容和格式。2、DOM對象措施總結措施功能闡明getElementById("標簽的id屬性")根據標簽的id獲取標簽對象1)任何標簽對象可以調用2)document對象都可以調用getElementsByTagName("標簽名")根據標簽名獲取包括所有標簽的數組2個getElementsByName("name屬性值")根據標簽的name的屬性值獲取所有標簽對象數組1)只有document對象可以調用該措施createElement("標簽關鍵字")根據標簽關鍵字創立標簽對象1)只有document對象可以調用該措施appendChild(node)把參數對象添加到父標簽內2個insertBefore(newnode,oldnode)為父標簽對象增長壹種子標簽對象2個removeChild(node)為父標簽對象刪除壹種子標簽對象2個getAttributeNode("屬性名")根據屬性名獲取屬性對象1)標簽對象可以調用該措施setAttribute("屬性名","屬性值")為標簽對象添加壹種新的屬性或變化它既有屬性的值1)標簽對象可以調用該措施屬性意義innerHTML用來獲取或修改標簽對象中的文本內容1)標簽對象可以調用該措施parentNode返回子標簽的父標簽對象1)標簽對象可以調用該措施2)文本對象firstChild用來獲取父標簽的第壹子標簽對象1)標簽對象可以調用該措施lastChild返回父標簽的最終壹種子標簽對象1)標簽對象可以調用該措施childNodes返回父標簽所有子節點對象1)標簽對象可以調用該措施nextSibling返回目前標簽對象的下壹種兄弟節點1)標簽對象可以調用該措施2)屬性對象previousSibling返回目前標簽對象的上壹種兄弟節點1)標簽對象可以調用該措施2)屬性對象七、正則體現式1、正則體現式使用場所客戶端表單數據校驗2、創立正則體現式的對象1>varregex=newRegExp("^.{6}$");2>varpwdRegex=/^.{6}$/;RegExp類的措施：test()匹配壹種任意字符，除了\n \.：表達壹種小數點，轉義字符\s：匹配任何壹種空白字符(空格，制表位)\S：匹配任何壹種非空白字符(空格，制表位)（2）定位符：規定字符出現的位置^：字符串必須以^背面的字符開始，開始標識，此時^不能用[]包圍$：字符串必須以$前面的字符結束，結束標識。（3）限定字符出現次數:{數1,數2}：限定前方字符出現次數>=數1并且次數<=數2；{數1}：前方字符出現次數=數1{數1,}：前方字符出現次數>=數1+：限定前方字符出現次數>=1等同于{1,} *：限定前方字符出現次數>=0：限定前方字符出現次數0次或1次|：或者的關系例如:/(^xue&)|(^學$)|(^薛$)/ ()：構成壹種整體，括號內的內容作為壹種子體現式來處理。例如：[abc]：表達a、b、c其中的壹種(abc)：表達子串"abc"/^abc$/：0個或1個c/^(abc)$/：0個或1個"abc"varunameRegex=/(^abc$)|(^liming$)|(^zxy$)/;*()$/\[]^{}:例如：\.\*闡明：在[]中/\[]這4個字符必須寫轉義字符才能體現自身其他字符寫不寫轉義都行能體現自身在[]外必須用轉義字符（5）附加參數:varregex=/^\d{4}$/gii：加i匹配時忽視大小寫，沒有i就嚴格辨別大小寫。g：重要在從字符串中查找匹配的子串時起作用，加g表達查找出所有的匹配子串。例如：absdfwabdfwab34324ab;varregex=/^ab$/只找到1個absdfwabdfwab34324ab;varregex=/^ab$/g只找到4個4、表單數據驗證7環節(1)獲取各表單控件對象(2)獲取各控件的value值(3)根據id獲取顯示錯誤信息的span標簽對象(4)定義正則體現式對象 (5)用if選擇構造對數據進行校驗.壹種控件對應壹種if構造：假如對壹種控件有多種校驗用if多分支假如對壹種控件只有1個校驗用if單分支每個分支的條件：正則體現式.test("控件value值")我們對其取反運算假如字符串符合規定則取反後返回假,不符合取反後返回真 每個分支的語句：錯誤信息處理語句(給保留錯誤信息的變量賦值)注意：數據不合法才執行if語句體(6)為顯示錯誤信息的span標簽添加內容(7)返回值(str==null&&stt2==null)注意：假如驗證單項選擇按鈕或復選框第(2)步獲取checked屬性。八、案例1、圖片切換2、級聯都市3、表單數據驗證4、植物大戰僵尸

Jquery知識點壹、功能和思想1、功能瀏覽器執行html代碼後實現動態變化網頁內容和格式從而實現動態效果。2、思想（1）分析有哪些動態效果,確定事件三要素并關聯從而實現壹切功能（2）要實現某功能找已經存在的對象和措施二、html添加jquery的3環節1、創立js文獻夾和獨立的js文獻2、在html頁面中導入jQuery函數庫和獨立的js文獻3、在獨立文獻中編寫jQuery代碼$(function(){$("選擇器").事件措施(function(){$("選擇器").措施();});} )注意：導入jQuery函數庫語句必須在導入獨立js文獻語句的上方三、選擇器1、id選擇器$("#id屬性值")2、類選擇器$(".class屬性的值")3、標簽選擇器$("標簽名")4、包括選擇器(1)間接包括：$("#sss.tttinput");(2)直接包括：$("#sss>input>.ttt");5、屬性選擇器$("input[name='newsletter']")6、基本過濾選擇器$("input:eq(0)")7、表單標簽屬性過濾選擇器$("input:checked")四、事件處理機制1、語法$("選擇器").事件措施(function(){措施語句;});2、常用事件措施名click([fn])：ppendTo("div");父子關系，把自已添加到父標簽的最終。$("p").insertBefore("#foo");兄弟，新增長在原有兄弟的前面。