HTML,CSS（一）
阿新 • • 發佈：2018-11-23
HTML
-
瀏覽器
a. 渲染引擎 b. js執行引擎 -
主流的瀏覽器核心
a. chrome (blink) b. ie (trident) c. safari (webkit) 蘋果瀏覽器 d. firfox (gecko) 火狐 內建工具較多 e. opera (presto)歐朋瀏覽器 -
標籤
a. 塊級元素（display:block）div h1-6 footer header ul ol li... 預設是沿Y軸排列 可以調節高度和寬度 可以調節上下左右的佈局 b. 行內元素 （display:inline）a span label 預設是沿X軸排列 不能調節高度 不能控制上下，但是能調節左右 （display:inline-block）行內塊狀 都可以修改 預設是沿X軸排列 不能調節高度 不能控制上下左右 置換元素（預設擁有行內元素的特點，預設不受style控制） img、video、audio、button
4.HTML的頁面結構
lang="en" 瀏覽器的解析格式 en代表英文 a. DOCTYPT html 告訴瀏覽器當前使用的是h5的解析規則 如果使用的一些標籤有斜槓，那就意味著以後的最新版本有可能移除此標籤，不再推薦使用， 有可能影響當前頁面的佈局，如果一定要使用一些不再建議使用的標籤，可以修改解析規則， 快捷鍵 html:4t(過度版本) html:4s(正式版本) b. HTML的根節點 head 書寫的內容是針對於瀏覽器的 meta標籤 配置一些針對於瀏覽器或裝置的操作 charset 告訴瀏覽器編碼格式 viewport 針對於移動端的配置 link 引入css檔案 或者 設定網站logo rel=”ICON” href中寫logo路徑 title 當前標籤頁的名稱，瀏覽器收藏時的預設名稱 body 主內容（使用者看的檢視區域）
-
常用標籤
a. a標籤 href中可以書寫js程式碼 javascript:comfirm("確認"?1:1); 本地路徑 第三方路徑 id 錨點 target 值為_blank時，點選會開啟一個新的視窗 預設_self不開啟新視窗 b. table列表，管理系統應用比較多，官方的PC應用比較少，因為其渲染效率比較低 border 書寫在style外，和style中不一樣 bordercolor border框的顏色，書寫在style外 table-layout 計算td的寬度，書寫在style中 suto 預設 根據當前框中的內容決定寬度，效率低 fixed 將所有的td寫死，不用動態的計算，效率比較高 td中的style屬性 vertical-align 垂直位置的調節 middle 當前的內容垂直居中 top 當前的內容 上當 botton 當前的內容 放置於下方 text-align 文字居中 c. img width 、 height 寬和高 src 圖片地址 也可以放置 圖片轉成的字串 字串的優點：沒有實體檔案的圖片，不用維護圖片 缺點：體積會變大 增大33%的體積 base64會將檔案3位元組分成24個，24個又分為4組，一組6個位置不夠一個位元組的8位， 所以最高位補0，所以會增大33% alt 當圖片不顯示的時候提示資訊 title 滑鼠放在上面的提醒 d. textarea cols 中文+英文的平均文字寬度 rows 文字列 代表文字的高度 resize 控制拖拽 none -- 禁止橫向縱向拖拽 vertical -- 只能垂直方向拉伸 horizontal -- 只能水平拖拽拉伸 -
H5表單驗證相關屬性（PC端應用較少）
can i user XXX 網站可以檢視瀏覽器的相容性 a. email required -- 必須填寫的欄位 maxlength -- 最大的輸入長度 minlength -- 最小的輸入長度 在手機使用此type時，輸入法會自動進入郵箱填寫模式 b. number required -- 必須填寫的欄位 max -- 只能適用於number,最大的值 min -- 只能適用於number，最小值 在手機上使用此type時，輸入法自動進入數字介面 c. tel （PC端不支援，移動端可以使用，並且會自動切換小鍵盤） maxlength -- 最大輸入長度 minlength -- 最小輸入長度 用於輸入電話號碼 d. search（適用於移動端） maxlength -- 最大輸入長度 minlength -- 最小輸入長度 在手機上使用此type時，輸入法的右下角會有搜尋按鈕 e. color 可以進行管理系統使用者選擇自己喜歡的顏色 f. range max 代表當前拖拽的最大值 為數字 g. label（H5新標籤，適用於移動端，可以增加使用者體驗） for -- 書寫的是繫結的input的id 可以用於上傳功能，繫結上傳的input後隱藏當前原生的input h. datalist（H5新標籤） input中的list屬性繫結datalist的id 下拉過濾效果，一般datalist中的資料都是動態獲取的 i. progressl（H5新標籤）載入條 max -- 最大值 value -- 當前值 佔比 j. video（H5新標籤） src -- 本地視訊的路徑 controls -- 新增控制檯（播放等操作按鈕） poster -- 視訊封面、值為圖片的路徑 can i use 查詢支援率最高的前幾個視訊格式，video中使用source標籤來相容不同格式的視訊（加在video標籤中） js操作屬性 currectTime -- 獲取當前視訊的播放時間（可用於投放廣告） playbackRate -- 獲取當前視訊的播放速度，預設為1，可以進行自定義速度 duration -- 獲取當前視訊的總長度 單位：秒 paused -- 獲取當前視訊是否處於暫停狀態（可用於投放廣告） js操作方法 pause() -- 方法呼叫可以暫停視訊 play() -- 方法呼叫可以播放視訊 k. audio（H5新標籤） src -- 本地的音訊路徑 controls -- 新增控制檯（視訊的播放按鈕以及進度條等） can i use 查詢支援率最高的前幾個音訊格式，video中使用source標籤來相容不同格式的音訊（加在audio標籤中） js操作屬性 currentTime -- 返回當前的播放的時間 duration -- 音訊的總時長 單位：秒 js的操作方法 pause() 暫停 play() 播放 -
H5離線快取（H5的新特性）
a. 前端快取 快取的檔案 通常用於快取CSS檔案、JS檔案、圖片 b. manifest配置離線快取屬性，需要書寫配置檔案來制定快取的檔案 優點：減少伺服器的壓力，充分利用了瀏覽器本身的特性 存在的缺點 快取的頁面或者檔案一旦修改，瀏覽器預設檢測不到，它會一直使用本地的快取，忽略後端的資料 chrome://appcache-internals --- 手動刪除快取 自動監聽快取的修改，然後在重新生成快取 當修改了快取的頁面後者檔案時再修改配置檔案，使用者訪問時會自動生成新的快取，但是有一個缺點，第一次重新整理 會優先訪問本地的快取，第二次才會獲取新的資料 解決：監聽快取變更的事件，然後自動重新整理一次 配置檔案： CACHE MANIFEST #version 1.6(每次更新資料要更改一下配置檔案，否則不重新整理) CACHE: 需要快取的資源 例：demo.html js重新整理頁面： window.applicationCache.addEventListener("updateready",function(){ console.log("頁面的資料改動，需要重新生成快取"); window.location.reload(); } -
H5本地儲存（5M左右）
a. 將需要持久化的資訊 儲存在瀏覽器上 b. localStorage.key = value 如果要存的是物件，在儲存的時候JSON.stringify進行轉換，獲取的時候JSON.parse轉換 c. localStorage.clear() 刪除所有localStorage中儲存的物件 d. localStorage完成購物車，可以進行不登入也可以新增購物車 優點：不走伺服器，可以減輕伺服器的壓力，在購物車結賬時才會伴隨請求反送到後臺生成訂單 缺點： 不走伺服器，沒有辦法同步到多個終端裝置 換個瀏覽器購物車就沒了 e. sessionStorage 只能儲存字串 sessionStorage.key = value 指的是頁面關閉時自動清除 -
localStorage 與 cookie 和 session 的區別？
1. 區別： localStorage不註定伴隨請求傳送到後臺 localStorage預設大小為5M localStorage預設可以儲存中文，但是隻能儲存字串型別的資料 localStorage儲存在瀏覽器，永久生效 cookie 和 session是由後端生成，localStorage直接在瀏覽器中生成 2. 相同點 都是key-value的形式儲存 -
FileReader
轉換圖片成base64 程式碼： //選中圖片後 自動將圖片轉換成base64顯示在頁面指定的區域 var element = document.querySelector("#header"); element.onchange = function(){ //從file中將圖片提取 var head = element.files[0]; //將圖片交給FileReader轉換成base64 var reader = new FileRader(); //呼叫readAsDaraURL將圖片轉換成base64 reader.readAsDataURL(head); //readAsDataURL是非同步操作 所有需要監聽來獲取非同步的處理結果 //reader監聽onload 在轉換完畢後 通過回撥返回給當前的使用者 reader.onload = function(a){ //回撥會攜帶非同步的執行結果 document.querySelector("#img_head").src=this.result; } }