時光飛逝，一晃已經工作了10年了,2014年一個人揹著書包拉著箱子，下火車去做637路公交車的場景歷歷在目，637路公交車從起點坐到終點，開啟了工作的第一站，這趟已經在路上行駛了10年的列車，經歷多了多次上車與下車，這10年網際網路高速的發展，有幸趕上這個時代，個人也得到了很大的成長。感謝，感恩，這10年遇見的人和事。明年將是下一個10年的第一年加油。
1.對html 語義化標籤的理解
html語義化標籤簡單來說頁面有良好的結構，使元素有含義便於理解。
優點可以使頁面呈現出清晰的機構，有利於seo和搜尋引擎抓取資訊，便於團隊的開發和管理。
常見的語義化標籤有：
<header> - 定義頁面或區段的頭部 <nav> - 定義導航連結 <main> - 定義頁面的主要內容，一個頁面只能使用一次 <article> - 定義獨立的文章內容 <section> - 定義文件中的一個區段 <aside> - 定義與頁面主內容 minor 相關的內容 <footer>- 定義頁面或區段的底部。
2.常見的塊級級元素
p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd
塊級元素會單獨站一行，預設順序是從上到下的
在沒有設定寬度的時候寬度是100%
塊級元素裡面可以寫行內元素和塊級元素
3. 常見的行內元素
span、a、img、button、input、select、 i、strong、em、lable、b、
行內元素和其他元素會在一行且設定寬度高度無效，可以透過line-heigth 設定高度，不會破壞文字流
設定margin 和 padding 只有左右生效 其他無效
寬度不是不能改的 只能是文字寬度或者圖片寬度，行內元素只能容納 行內元素。
4.html5 新增了哪些屬性常用的
html5 主要關於影像，位置，儲存，多工等。
影片video 音訊audio 畫布canvas
<img src="image.jpg" srcset="image2x.jpg 2x, image3x.jpg 3x" alt="description">
input 標籤新增type email url number range date month week time datetime
本地儲存 localStorage 長期儲存資料 需要手動清除
sessionStorage 瀏覽器關閉後自動刪除
5.meta viewport 的用法
viewport 是用來適配移動端，可以用來控制長視窗的大小和比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width viewport ：寬度(數值/device-width)
height viewport ：高度(數值/device-height)
initial-scale ：初始縮放比例 為一個數字，可以帶小數
maximum-scale ：最大縮放比例 為一個數字，可以帶小數
minimum-scale ：最小縮放比例 為一個數字，可以帶小數
user-scalable ：是否允許使用者縮放(yes/no）
6.cookie,sessionStorage和localStorage 的區別
|
cookie
|
localStorage
|
sessionStorage
|
|
|
初始化設定
|
客戶端或者伺服器，伺服器可以透過Set-Cookie 設定請求頭
|
客戶端
|
客戶端
|
|
是否永久儲存
|
手動設定
|
永久設定
|
當前頁面關閉時
|
|
在瀏覽器繪畫中是否保持不變
|
是否設定了過期時間
|
是
|
否
|
|
是否跟隨請求返回給伺服器
|
Cookie 會透過請求頭自動傳送給伺服器
|
否
|
否
|
|
容量
|
4kb
|
5MB
|
5MB
|
|
訪問許可權
|
當前瀏覽器任意視窗
|
當前瀏覽器任意視窗
|
當前視窗
|
7.src和href 的區別
src 通常用img,video,audio,script 元素，透過src 屬性，可以指定外部資源的來源地址。
href 通常使用者 a,link 元素 透過 href 屬性，可以標識文件中引用的其他超文字。
8.iframe 框架有那些優缺點
優點:在頁面是獨立的沙箱模型，獨立的顯示一個頁面或者內容，不會與頁面其他元素產生衝突。可以在多個頁面引用同一個頁面或者內容，或者在一個系統中引用其他系統，可以減少程式碼的冗餘。載入是非同步的，頁面可以在不等iframe 載入完成的情況下進行展示。可以方便的實現跨域訪問。
缺點: iframe 可能會導致頁面載入速度變慢,阻塞主頁面的onload事件。iframe 中的內容互動可能比較複雜，因此要處理兩個不同的文件上下文。瀏覽器的後退按鈕無效。
9.嚴格模式約混雜模式
嚴格模式指的是以瀏覽器支援的最高標準執行(W3C標準)。
混雜模式指的是瀏覽器以向下相容的方式顯示內容，模擬老式瀏覽器的行為。
嚴格模式，直接書寫正確的DOCTYPE，不宣告或者宣告不完整的DOCTYPE 頁面會轉換成為怪異模式。
10.HTML5中的drag
dragAPI 用來實現對元素的拖拽功能，在標籤中新增了draggable=true 屬性後，元素將會成為一個可拖放元素，該元素通常與另一個拖放的目標區域元素配合使用。
dragstart 事件名稱，事件的主題是被拖放元素，開始拖放的時候觸發。
dragend 事件名稱，事件的主體是被拖放元素，結束拖放時觸發。
drag 事件的主體是被拖放元素，拖放中觸發。
dragenter 事件的主體是目標元素，進入目標元素的時候觸發。
dragleave 事件的主體是目標元素，離開目標元素時觸發。
dragover 是件的主體是目標元素，在目標元素中拖放的時候觸發。
dop 事件主體是目標元素，目標元素完全接受被拖放元素時觸發。
11.canvas與svg 的區別
canvas：畫布是透過js繪製的的2D影像，逐畫素進行渲染位置改變的時候會進行重新渲染
依賴解析度，不支援事件處理，能夠以.png,.jpg格式儲存影像。
svg:可伸縮向量圖形，基於XML描述的2D圖形語言 SVG 圖形屬性發生變化會進行重新繪製。
不依賴解析度，支援事件處理，複雜度高會減慢渲染速度。
後續還在更新中·············