03-Web前端知識點總結(jié)

《03-Web前端知識點總結(jié)》由會員分享，可在線閱讀，更多相關(guān)《03-Web前端知識點總結(jié)（18頁珍藏版）》請在裝配圖網(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 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 value readonly 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 rgb font family 設(shè)置字體 宋體 黑體 font weight 設(shè)置文字粗體 normal lightar bold font style 設(shè)置字體斜體 normal italic font 設(shè)置字體所有屬性 必須按順序設(shè)置 text decoration 設(shè)置文本下劃線格式 none underline line through text align 元素中的內(nèi)容水平方向?qū)?left rigth center 齊方式 line height 設(shè)置行高 像素 vertical align 元素中的內(nèi)容垂直方向的對齊 top bottom middle text indent 段落首行縮進 1 像素 2 em text transform 控制英文字母大小寫 none capitalize uppercase lowercase width 設(shè)置元素的寬度 像素 heigth 設(shè)置元素的高度 像素 background color 設(shè)置背景顏色 1 英文單詞 2 rgb background image 設(shè)置背景圖片 url 圖片路徑 background repeat 設(shè)置背景圖像重復(fù)方式 repeat no repeatrepeat x repeat y background size 設(shè)置背景圖像的大小 1 像素 2 百分比 background position 設(shè)置背景圖片的出現(xiàn)位置 像素 background 設(shè)置所有背景屬性 display 設(shè)置元素是否可見 none block inline overflow 設(shè)置內(nèi)容超出父區(qū)域時如何處理 hidden visible list style type 設(shè)置列表符號類型 disc circle none list style image 用圖片作為編號 url 圖片路徑 opacity 設(shè)置元素的透明度 從 0 0 完全透明 到1 0 完全不透明 cursor 設(shè)置鼠標到達元素上的鼠標形狀 pointer text border 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 location window 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 9 D 匹配任意一個非數(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 要么是 abc 要么是 liming 要么是 zxy 4 需要用到轉(zhuǎn)義的字符有 例如 說明 在 中 這 4 個字符必須寫轉(zhuǎn)義字符才能表達本身 其它字符寫不寫轉(zhuǎn)義都行能表達本身 在 外必須用轉(zhuǎn)義字符 5 附加參數(shù) var regex d 4 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 注意 導(dǎo)入 jQuery 函數(shù)庫語句必須在導(dǎo)入獨立 js 文件語句的上方 三 選擇器 1 id 選擇器 id 屬性值 2 類選擇器 class 屬性的值 3 標簽選擇器 標簽名 4 包含選擇器 1 間接包含 sss ttt input 2 直接包含 sss input ttt 5 屬性選擇器 input name 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 表單提交 五 方法 1 操作標簽 1 刪除 remove 無參時把對象刪除 有參時從多個對象中刪除符合條件的 只能是字符串 empty 刪除內(nèi)容 不刪除標簽本身 jquery 方法參數(shù)就 3 種形式 myul myul html 標簽代碼 2 增加 append 父子關(guān)系 最后 after 兄弟 before 兄弟 p appendTo div 父子關(guān)系 把自己添加到父標簽的最后 p insertBefore foo 兄弟 新增加在原有兄弟的前面 3 修改 replaceWith 參數(shù)只能是 jquery 對象 不能是字符串 4 創(chuàng)建標簽對象 html 代碼 2 操作 html 標簽的屬性 attr removeAttr val 3 操作標簽內(nèi)容 html text 4 操作標簽的 css 屬性 css addClass removeClass 5 獲取標簽對象的相關(guān)方法 為了獲取標簽對象有 2 種方式 1 選擇器 2 相關(guān)方法 p eq 1 p parent 獲取 p 的父親 p next 獲取 p 的下一個兄弟 p prev 獲取 p 的上一個兄弟 六 循環(huán) 語法 each object function i n 循環(huán)體語句 功能 循環(huán)遍歷 jquery 對象數(shù)組中的每個一個標簽對象 遍歷普通數(shù)組 參數(shù) 參數(shù) 1 jquery 對象數(shù)組 普通數(shù)組 參數(shù) 2 方法定義 在方法體內(nèi)寫循環(huán)體 參數(shù) i 整形 每次循環(huán)的循環(huán)變量 從 0 開始 參數(shù) n 每次循環(huán)時真正的值 每次循環(huán)的當前對象 本身是 DOM 對象 使用時轉(zhuǎn)換成 JQuery 對象 js 對象 jquery 對象 arr i js 對象 function i n 方法里返回 false 將停止循環(huán) 就像在普通的循環(huán)中使用 break function i n 方法里返回 true 跳至下一個循環(huán) 就像在普通的循環(huán)中使用 continue