HTML5 中的一些有趣的新特性：
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
HTML 5 拖放
首先，爲了使元素可拖動，把 draggable 屬性設置爲 true，拖動什麼 - ondragstart 和 setData()ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。 dataTransfer.setData() 方法設置被拖數據的數據類型和值，在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")，放到何處 - ondragover如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 這要通過調用 ondragover 事件的 event.preventDefault() 方法，進行放置 - ondrop當放置被拖數據時，會發生 drop 事件，調用 preventDefault() 來避免瀏覽器對數據的默認處理
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
HTML 5 Canvas
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。 畫布是一個矩形區域，您可以控制其每一像素。 canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法
HTML5 內聯 SVG
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用於定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
SVG 是萬維網聯盟的標準
SVG 圖像可通過文本編輯器來創建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
Canvas 與 SVG 的比較
Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用
HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲當用戶關閉瀏覽器窗口後，數據會被刪除
em與rem的區別
1em 等於當前的字體尺寸。
2em 等於當前字體尺寸的兩倍。
例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。
在 CSS 中，em 是非常有用的單位，因爲它可以自動適應用戶所使用的字體。
REM表示“Root EM”,字面上指的是根元素的em大小
因爲em不同元素的參照物不一樣（都是該元素父元素），所以在計算的時候不方便，相比之下rem就只有一個參照物（html元素）
css優先級算法
！important > 內聯樣式 > id > class > 標籤 > 通配符 > 繼承 > 默認
第一等：代表內聯樣式，如: style=””，權值爲1000。
第二等：代表ID選擇器，如：#content，權值爲0100。
第三等：代表類，僞類和屬性選擇器，如.content，權值爲0010。
第四等：代表標籤選擇器和僞元素選擇器，如div p，權值爲0001。
第五等：通用選擇器（*），子選擇器（>），相鄰同胞選擇器（+），權值爲0000
CSS等高佈局
- table元素中的table-cell元素默認就是等高的
- flex佈局flex爲1
- 左邊浮動，右邊加上一個margin-left值，讓他實現左邊固定，右邊自適應的佈局效果
flex彈性佈局的應用場景
- flex-direction決定主軸方向
- flex-wrap是否換行
- justify-content主軸上的對齊方式
- align-items交叉軸上如何對
網格佈局、聖盃佈局、固定底欄佈局、流式佈局、懸掛式佈局
CSS選擇符有哪些？哪些屬性可以繼承？
- 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標籤選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.後代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = “external”]） 9.僞類選擇器（a:hover, li:nth-child）
- 可繼承的樣式： font-size font-family color
- 不可繼承的樣式：border padding margin width height;
清除浮動的方法
- clear:both
- 父元素設置 overflow：hidden
- 父元素設置display:table
擴展知識
1.img是什麼元素？
我第一反應是行內元素。判斷一個元素是行內元素，還是塊元素，無非就是看它是否是獨佔一行。img標籤顯然沒有獨佔一行，固它是行內元素。這沒有問題。
2.既然img是行內元素，那爲什麼可以通過CSS設置框高呢？
這一問，給我問住了，確實之前沒有想過這個問題，翻了一下資料，大概比較好的解釋就是:
儘管img是行內元素，但同時它也是置換元素，置換元素一般內置框高屬性，因此可以設置其框高。
3.引申問題：那麼什麼又是“置換元素”呢？
置換元素就是會根據標籤屬性來顯示的元素。反之就是非置換元素了。
比如img根據src屬性來顯示，input根據value屬性來顯示，因此可知道img和input是置換元素，當然同理textarea, select,也是置換元素
git
1. git checkout -b dev 新建dev分支
2. 需要把dev的代碼合併到master上，首先git checkout dev 切到dev分支上，get merge master
3.git如何撤銷上一次commit操作：第一種情況：還沒有push，只是在本地commit（git reset 每次commit的SHA-1）2.commit push 代碼已經更新到遠程倉庫（git revert 每次commit的SHA-1）
4.git diff 文件 會顯示該文件變化的地方。也可以對比兩個文件
使用git將項目回退到某個指定的歷史版本
- 使用git log命令查看所有的歷史版本,獲取某個歷史版本id(覈對剛纔自己找到的id)
- 通過指令進行回退到指定的歷史版本.
假如要回退的歷史版本id爲46b66217d92af8c64bcd1d796fe67695022c9d54;
CTRL + C 退出git log狀態;
git reset --hard 46b66217d92af8c64bcd1d796fe67695022c9d54 - 將修改push到遠程服務器develop分支上
git push -f -u origin develop - 進入gitlab頁面確認是否成功回退