03-Web前端知識點總結

《03-Web前端知識點總結》由會員分享，可在線閱讀，更多相關《03-Web前端知識點總結（18頁珍藏版）》請在裝配圖網(wǎng)上搜索。

HTML 知識點 一 功能 用來制作靜態(tài)網(wǎng)頁 網(wǎng)頁中的全部內容都是通過 Html 語言展現(xiàn)出來 使用場合 開發(fā)靜態(tài)網(wǎng)頁 二 思想 一切功能都由標簽實現(xiàn) 標簽具有四要素 三 常用標簽 標簽關鍵字 功能 常用屬性 設置字體 字號 顏色 face color size 換行 居中對齊 設置標題級別 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)建一列 元素居中 粗 體 設置表格的標題 收集用戶輸入信息 并提交 給服務器 action method 創(chuàng)建文本框 name value readonly disabled 創(chuàng)建密碼框 創(chuàng)建單選按鈕 checked 創(chuàng)建下拉列表框 name 創(chuàng)建列表項 value selected 創(chuàng)建復選框 checked 創(chuàng)建文本區(qū)域 name rows cols 創(chuàng)建隱藏控件 創(chuàng)建提交按鈕 創(chuàng)建重置按鈕 超級鏈接 網(wǎng)頁跳轉 href target 指定快速的查詢到該網(wǎng)頁的關鍵字 提供網(wǎng)頁內容的描述信息 指定文檔類型和頁面字符集 四 案例 1 詩篇 2 學生課程表 3 注冊頁 CSS 知識點 一 功能 1 css 格式化頁面中的各組成元素 2 css 決定元素在頁面的具體位置 二 思想 屬性是 css 最小構成單元 每個屬性都有特定功能 多個屬性構成樣式 由樣式修 飾 html 語言的標簽 三 樣式修飾標簽 1 style 屬性 html 標簽添加 style 屬性 屬性值是多個 css 屬性的組合 2 標簽選擇器 樣式名與標簽關鍵字相同 根據(jù)名稱相同自動關聯(lián) 3 ID 選擇器 1 樣式名以 開始 2 標簽添加 id 屬性與樣式關聯(lián) 4 類選擇器 1 樣式名以 開始 2 標簽添加 class 屬性與樣式關聯(lián) 5 屬性選擇器 標簽名 屬性名 屬性值 根據(jù)標簽關鍵字和屬性值自動關聯(lián) 6 包含選擇器 1 子樣式名中間加 或空格分隔 直接包含 2 看最后一個子樣式是什么選擇器就如何關聯(lián)標簽 7 多個樣式名同一樣式體 1 樣式名中間加逗號分隔 2 根據(jù)樣式類型決定如何與標簽關聯(lián) 8 多條件同時成立選擇器 1 多個子樣式名緊挨著 2 一個標簽必須同時具備這多個條件才可以被該樣式修飾 9 各選擇器使用場合 1 如果想根據(jù)標簽名用一個樣式修飾所有同名標簽時 用標簽選擇器 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 只設置 4 個邊框的邊框顏色 border style 只設置 4 個邊框的邊框線型 2 絕對定位 有 2 套坐標系統(tǒng) 1 如果該元素所有父標簽都沒有設置相對定位 那么瀏覽器左上角為坐標原點 根據(jù) left 與 top 值確定元素的位置 2 第一個設置相對定位的父標簽左上角為坐標原點 根據(jù) left 與 top 值確定元素的 位置 脫離標準文檔流 相關屬性 position absolute 表示絕對地址定位 通過絕對定位 元素可以放置到頁面上的任何位置 left 100px 絕對定位時表示與瀏覽器左邊框距離 top 100px 絕對定位時表示與瀏覽器上邊框距離 z index 在絕對定位層改變各元素層疊順序 屬性值是整數(shù) 越大越在上方 3 相對定位 元素原位置 標準文檔流的位置 左上角為坐標原點 根據(jù) left 與 top 值改變位置 沒有脫離標準文檔流 相關屬性 position relative 表示相對地址定位 通過相對定位 元素可以放置到頁面上的任何位置 left 100px 相對定位時表示與元素原始位置的左邊距離 top 100px 相對定位時表示與元素原始位置的上邊距離 4 浮動定位 把元素靠在在父容器左邊或右邊 兄弟元素都設置浮動后成為一行 脫離標準文檔 流 相關屬性 float 設置浮動定位 clear 清除浮動定位的影響 5 各定位方式使用場合 1 靠左或靠右 兄弟標簽一列變一行 文字環(huán)繞 浮動定位 2 移動位移比較小 用盒子模型 3 移動位移比較大 父容器相對定位 子元素絕對定位 五 添加獨立 css 文件 3 步驟 1 創(chuàng)建子文件夾和 css 文件 2 在 html 頁面用標簽導入獨立 css 文件 3 定義樣式并修飾各 html 標簽 六 靜態(tài)網(wǎng)頁開發(fā)思想 1 對網(wǎng)頁元素通用屬性進行設置 2 分析頁面的組成 整個網(wǎng)頁布局劃分為多個矩形區(qū)域 在矩形區(qū)域內部又可以 劃分子矩形區(qū)域 每個矩形區(qū)域都用標簽實現(xiàn) 3 用 html 標簽把實際元素放在標簽中 再用 css 實現(xiàn)元素定位和格式化 對 每個元素和 div 依次類推 搞定每個 div 區(qū)域 七 css 常用屬性 屬性名 功能 屬性值 font size 設置字號 1 像素 2 百分比 color 設置字體顏色 1 英文單詞 2 rgb font family 設置字體 宋體 黑體 font weight 設置文字粗體 normal lightar bold font style 設置字體斜體 normal italic font 設置字體所有屬性 必須按順序設置 text decoration 設置文本下劃線格式 none underline line through text align 元素中的內容水平方向對 left rigth center 齊方式 line height 設置行高 像素 vertical align 元素中的內容垂直方向的對齊 top bottom middle text indent 段落首行縮進 1 像素 2 em text transform 控制英文字母大小寫 none capitalize uppercase lowercase width 設置元素的寬度 像素 heigth 設置元素的高度 像素 background color 設置背景顏色 1 英文單詞 2 rgb background image 設置背景圖片 url 圖片路徑 background repeat 設置背景圖像重復方式 repeat no repeatrepeat x repeat y background size 設置背景圖像的大小 1 像素 2 百分比 background position 設置背景圖片的出現(xiàn)位置 像素 background 設置所有背景屬性 display 設置元素是否可見 none block inline overflow 設置內容超出父區(qū)域時如何處理 hidden visible list style type 設置列表符號類型 disc circle none list style image 用圖片作為編號 url 圖片路徑 opacity 設置元素的透明度 從 0 0 完全透明 到1 0 完全不透明 cursor 設置鼠標到達元素上的鼠標形狀 pointer text border radius 設置圓角矩形 像素 八 案例 1 房地產(chǎn)首頁 2 注冊頁 3 登錄頁 4 二級菜單 JavaScript 知識點 一 功能 瀏覽器執(zhí)行 html 代碼后實現(xiàn)動態(tài)改變網(wǎng)頁內容和格式從而實現(xiàn)動態(tài)效果 二 思想 1 分析有哪些動態(tài)效果 確定事件三要素并關聯(lián)從而實現(xiàn)一切功能 2 要實現(xiàn)某功能找已經(jīng)存在的對象和方法 三 html 導入獨立的 js 文件的步驟 1 創(chuàng)建文件夾和獨立 js 文件 2 用 標簽在 html 頁面中導入 3 在 js 文件中定義方法 并與 html 頁面的標簽關聯(lián) 四 事件關鍵字 1 onclick 鼠標單擊時觸發(fā) 2 onload 頁面全部內容被加載后立即觸發(fā) 該事件源是 body 3 onmouseover 鼠標進入?yún)^(qū)域時觸發(fā) 4 onmouseout 鼠標退出區(qū)域時觸發(fā) 5 onmousemove 鼠標在某區(qū)域移動時觸發(fā) 6 onchange 內容改變時觸發(fā) 7 onsubmit 表單提交數(shù)據(jù)時觸發(fā) 8 onblur 控件失去焦點時觸發(fā) 9 onfocus 控件獲取焦點時觸發(fā) 五 瀏覽器對象和方法 1 特性 所有對象都是由瀏覽器負責提供的 編程時可以直接調用方法 又稱 BOM 對象 2 瀏覽器對象的方法總結 內置對象名 功能 常用方法 1 window 代表瀏覽器窗口 alert 提示內容 setInterval 方法名 數(shù)值 clearInterval 對象名 setTimeout 方法名 時間 open blank width 800 height 500 parseInt 數(shù)值 eval prompt 提示信息 默認信息 彈出對話框 接受文本框內容 confirm 對話框上的提示信息 彈出對話框 有確定和取消 2 個 2 document 代表整個網(wǎng)頁 getElementById 標簽的 id 屬性 getElementsByTagName 標簽關 鍵字 getElementsByName 標簽的 name 屬性值 createElement 標簽關鍵字 write 內容 3 event 事件對象 event x 鼠標此時位置的橫坐標event y 鼠標此時位置的縱坐標 4 location window location locationlocation href 地址 六 DOM 對象的方法 1 原理 Dom 對象可以獲取 html 文檔的每個標簽 以及該標簽的屬性和內容 并可以對這 些標簽 屬性和內容進行修改從而實現(xiàn)動態(tài)的改變網(wǎng)頁內容和格式 2 DOM 對象方法總結 方法 功能 說明 getElementById 標簽的 id 屬 性 根據(jù)標簽的 id 獲取標簽對象 1 任何標簽對象可以調用 2 document 對象都可以調用 getElementsByTagName 標 簽名 根據(jù)標簽名獲取包含全部標 簽的數(shù)組 2 個 getElementsByName name 屬性值 根據(jù)標簽的 name 的屬性值 獲取所有標簽對象數(shù)組 1 只有 document 對象可以調 用該方法 createElement 標簽關鍵字 根據(jù)標簽關鍵字創(chuàng)建標簽對象 1 只有 document 對象可以調用該方法 appendChild node 把參數(shù)對象添加到父標簽內 2 個 insertBefore newnode oldnode 為父標簽對象增加一個子標 簽對象 2 個 removeChild node 為父標簽對象刪除一個子標簽對象 2 個 getAttributeNode 屬性名 根據(jù)屬性名獲取屬性對象 1 標簽對象可以調用該方法 setAttribute 屬性名 屬性值 為標簽對象添加一個新的屬 性或改變它現(xiàn)有屬性的值 1 標簽對象可以調用該方 法 屬性 意義 innerHTML 用來獲取或修改標簽對象中的文本內容 1 標簽對象可以調用該方法 parentNode 返回子標簽的父標簽對象 1 標簽對象可以調用該方法2 文本對象 firstChild 用來獲取父標簽的第一子標簽對象 1 標簽對象可以調用該方法 lastChild 返回父標簽的最后一個子標簽對象 1 標簽對象可以調用該方法 childNodes 返回父標簽所有子節(jié)點對象 1 標簽對象可以調用該方法 nextSibling 返回當前標簽對象的下一個兄弟節(jié)點 1 標簽對象可以調用該方法2 屬性對象 previousSibling 返回當前標簽對象的上一個兄弟節(jié)點 1 標簽對象可以調用該方法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ù)點 轉義字符 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 次 或者的關系 例如 xue 要么是 abc 要么是 liming 要么是 zxy 4 需要用到轉義的字符有 例如 說明 在 中 這 4 個字符必須寫轉義字符才能表達本身 其它字符寫不寫轉義都行能表達本身 在 外必須用轉義字符 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 選擇結構對數(shù)據(jù)進行校驗 一個控件對應一個 if 結構 如果對一個控件有多個校驗用 if 多分支 如果對一個控件只有 1 個校驗用 if 單分支 每個分支的條件 正則表達式 test 控件 value 值 我們對其取反運算 如果字符串符合要求則取反后返回假 不符合取反后返回真 每個分支的語句 錯誤信息處理語句 給保存錯誤信息的變量賦值 注意 數(shù)據(jù)不合法才執(zhí)行 if 語句體 6 為顯示錯誤信息的 span 標簽添加內容 7 返回值 str null 注意 導入 jQuery 函數(shù)庫語句必須在導入獨立 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 當標簽內容發(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 刪除內容 不刪除標簽本身 jquery 方法參數(shù)就 3 種形式 myul myul html 標簽代碼 2 增加 append 父子關系 最后 after 兄弟 before 兄弟 p appendTo div 父子關系 把自己添加到父標簽的最后 p insertBefore foo 兄弟 新增加在原有兄弟的前面 3 修改 replaceWith 參數(shù)只能是 jquery 對象 不能是字符串 4 創(chuàng)建標簽對象 html 代碼 2 操作 html 標簽的屬性 attr removeAttr val 3 操作標簽內容 html text 4 操作標簽的 css 屬性 css addClass removeClass 5 獲取標簽對象的相關方法 為了獲取標簽對象有 2 種方式 1 選擇器 2 相關方法 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 方法定義 在方法體內寫循環(huán)體 參數(shù) i 整形 每次循環(huán)的循環(huán)變量 從 0 開始 參數(shù) n 每次循環(huán)時真正的值 每次循環(huán)的當前對象 本身是 DOM 對象 使用時轉換成 JQuery 對象 js 對象 jquery 對象 arr i js 對象 function i n 方法里返回 false 將停止循環(huán) 就像在普通的循環(huán)中使用 break function i n 方法里返回 true 跳至下一個循環(huán) 就像在普通的循環(huán)中使用 continue