一、html5視頻《video》
1贝或、視頻格式：
（1）ogg 是帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。
（2）MPEG4 是帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件兽赁。
（3）WebM =是帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件掸屡。
2、video的標簽屬性
（1）autoplay 出現(xiàn)該屬性視頻就會馬上播放
<video src="./2f53d5a0d3459eefe705379f41fc193f.mp4" autoplay="autoplay"></video>
（2）controus 出現(xiàn)該屬性 視頻顯示播放按鈕粉洼。
（3）height 用于設置瀏覽器高度
（4）width 用于設置瀏覽器寬度
<video src="./2f53d5a0d3459eefe705379f41fc193f.mp4" controls="controls" width="500px" height="500px"></video>
（5）loop 如果出現(xiàn)該屬性 播放完在循環(huán)播放
（6）preload 出現(xiàn)該屬性 預備播放
（7）src 播放視頻的url
二节预、音頻標簽《audio》
1、audio音頻格式
（1）Ogg Vorbis （2）MP3 （3）Wav
2属韧、audio 標簽屬性
（1）autoplay 出現(xiàn)該屬性音頻就緒就會馬上播放
（2）controus 出現(xiàn)該屬性 視頻顯示播放按鈕安拟。
（3）preload 出現(xiàn)該屬性 預備播放
（4）src 播放音頻的url
三、Canvas（用于繪畫）
1宵喂、什么是canvas糠赦？
（1）canvas 元素用于在網(wǎng)頁上繪制圖形。
拖拽、
（2）拖拽是一種特別常見特性拙泽，應用范圍非常廣淌山，在HTML5中拖拽成了一部分，任何元素都可以拖拽顾瞻。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
//找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
//然后泼疑，創(chuàng)建 context 對象：
var ctx=c.getContext("2d");
//getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑朋其、矩形王浴、圓形、字符以及添加圖像的方法梅猿。
//下面的兩行代碼繪制一個紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
四氓辣、sessionStorage（臨時存儲）和localStorage（長期存儲）
1、sessionStorage 是臨時存儲 瀏覽器頁面關(guān)閉會消失
// 設置sessionStorage
sessionStorage.setItem('存儲對象名', 存儲對象值)
// 讀取sessionStorage
sesessionStorage.getItem('存儲對象名')
2袱蚓、localStorage 是永久存儲 瀏覽器頁面關(guān)閉不會消失
// 設置localStorage
localStorage.setItem('存儲對象名', 存儲對象值)//將localStorage中存儲信息钞啸，由于localStorage中的存儲值必須是個字符串，我們可以使用JSON.stringify()這個方法把他變成字符串
// 讀取localStorage
localStorage.getItem('存儲對象名')// 獲取localStorage中的信息喇潘，在獲取到信息是体斩，我們可以只使用JSON.parse()轉(zhuǎn)換成對象使用
//刪除或清空localStorage的方法
// 1、刪除指定的
localStorage.removeItem("變量")
// 2颖低、清空所有的
localStorage.clear()
// 遍歷本地存儲的方法
for (var i in localStorage) {
if (localStorage.getItem(i)) {
console.log(localStorage.getItem(i));
}
}
五絮吵、新增的語義化標簽
1、section：獨立內(nèi)容模塊 忱屑，可以h1-h6組成大綱 蹬敲，表示文檔結(jié)構(gòu)，有章節(jié)莺戒、頁眉伴嗡、頁腳或其他部分。
2从铲、article ：（文章） 文章核心部分
3瘪校、aside 標簽內(nèi)容之外相輔的信息 側(cè)邊欄
4、header 頭部/標題
5名段、footer 尾部標簽
6阱扬、nav 導航
7、figure標簽 代替原來的li>img+p就是有文字有圖片的區(qū)域
六伸辟、新增的表單控件
1价认、type"email"：限制用戶輸入為油箱類型
<input type="email" name="email">
2、type=”url”：限制用戶輸入為網(wǎng)址自娩，即輸入內(nèi)容必須含有"http:"
<input type="url" name="" id="">
3、type=Date ：日期選擇器
<input type="date" name="bday">
4、type=”search”：搜索
<input type="search" >
5忙迁、type=”color”：顏色
<input type="color" name="" id="">
6脐彩、type=”tel”：手機號
<input type="tel" name="usrtel">
六、html5 地理位置
<p id="demo">點擊按鈕獲取您當前坐標（可能需要比較長的時間獲孺⑷印）：</p>
<button onclick="getLocation()">點我</button>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML = "該瀏覽器不支持獲取地理位置惠奸。";
}
}
function showPosition(position) {
x.innerHTML = "緯度: " + position.coords.latitude +
"<br>經(jīng)度: " + position.coords.longitude;
}
</script>
一、CSS3 新特性
1恰梢、新增屬性選擇器
（1）E[att^=“val”] ：選擇具有att屬性且屬性值為以val開頭的字符串的E元素佛南。
（2）E[att$=“val”] ：選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素。
（3）E[att*=“val”] ：選擇具有att屬性且屬性值為包含val的字符串的E元素嵌言。
<style>
div[class^="a"]{ /*以a開始*/
background-color: blue;
}
div[class$="a"]{ /*以a結(jié)束*/
background-color: green;
}
div[class*="a"]{ /*選擇到所有含a的*/
background-color: red;
}
</style>
<div class="abc">div1</div>
<div class="acc">div2</div>
<div class="cba">div3</div>
2嗅回、新增的偽類選擇器
（1）、:not(s)：匹配不含有s選擇符的元素E摧茴。
<style>
p {
color: #000000;
}
:not(p) {
color: #ff0000;
}
</style>
<h1>這是標題</h1>
<p>這是一個段落绵载。</p>
<p>這是另一個段落。</p>
<div>這是 div 元素中的文本苛白。</div>
（2）娃豹、:root：匹配E元素在文檔的根元素。在HTML中购裙，根元素永遠是HTML
<style>
:root
{
background:#ff0000;
}
</style>
<h1>我是h</h1>
（3）懂版、:last-child ：匹配父元素的最后一個子元素E。
<style>
p:last-child
{
background:#ff0000;
}
</style>
<p>p1</p>
<p>p2</p>
<p>p3</p>
（4）躏率、:only-child：匹配父元素僅有的一個子元素E躯畴。
p:only-child
{
background:#ff0000;
}
</style>
<div>
<p>這是一個段落。</p>
</div>
<div>
<span>這是一個 span禾锤。</span>
<p>這是一個段落私股。</p>
</div>
（5）、:nth-child(n)：匹配父元素的第n個子元素E恩掷，假設該子元素不是E倡鲸，則選擇符無效。
<style>
.list div:nth-child(2){
background-color:red;
}
</style>
<div class="list">
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
（6）:nth-last-child(n) ：匹配父元素的倒數(shù)第n個子元素E黄娘，假設該子元素不是E峭状，則選擇符無效。
<style>
p:nth-last-child(2) {
background: #ff0000;
}
</style>
<h1>這是標題</h1>
<p>第一個段落逼争。</p>
<p>第二個段落优床。</p>
<p>第三個段落。</p>
<p>第四個段落誓焦。</p>
<p>第五個段落胆敞。</p>
（7）:first-of-type：匹配父元素下第一個類型為E的子元素。
<style>
p:first-of-type {
background: #ff0000;
}
</style>
<p>一</p>
<p>二</p>
<p>三</p>
<p>四</p>
<p>五</p>
（8）:last-of-type：匹配父元素下的所有E子元素中的倒數(shù)第一個。
<style>
p:last-of-type
{
background:#ff0000;
}
</style>
<h1>這是標題</h1>
<p>這是第一個段落移层。</p>
<p>這是第二個段落仍翰。</p>
<p>這是第三個段落。</p>
<p>這是第四個段落观话。</p>
（9）:only-of-type：匹配父元素的所有子元素中唯一的那個子元素E予借。
<style>
p:only-of-type {
background: #ff0000;
}
</style>
<div>
<p>p</p>
</div>
<div>
<p>hhh</p>
<p>hhh</p>
</div>
（10）、:nth-of-type(n) ：匹配父元素的第n個子元素E频蛔。
<style>
p:nth-of-type(2){
background:#ff0000;
}
</style>
<h1>這是標題</h1>
<p>第一個段落灵迫。</p>
<p>第二個段落。</p>
<p>第三個段落晦溪。</p>
<p>第四個段落瀑粥。</p>
<p>第五個段落。</p>
（11）尼变、:nth-last-of-type(n)：匹配父元素的倒數(shù)第n個子元素E利凑。
<style>
p:nth-last-of-type(1) {
background: #ff0000;
}
</style>
<p>p</p>
<p>hhh</p>
<p>hhh</p>
（12）:empty：匹配沒有任何子元素（包括text節(jié)點）的元素E。
<style>
p:empty {
width: 100px;
height: 20px;
background: #ff0000;
}
</style>
<p></p>
<p></p>
<p>第三個段落嫌术。</p>
<p>第四個段落哀澈。</p>
<p>第五個段落。</p>
二度气、透明度
1割按、opacity
<style>
div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
</style>
<div></div>
2、bgra
<style>
div {
width: 100px;
height: 100px;
background-color:rgba(250,250,250,0.9);
}
</style>
<div></div>
三磷籍、Word Wrap
word-break: break-word; //長單詞換行
四 文字陰影
<style>
div {
text-shadow:x方向偏移量 y方向偏移量 陰影長度 陰影顏色;
}
</style>
<div>asdas </div>
五适荣、盒子陰影
<style>
div {
box-shadow:x方向偏移量 y方向偏移量 陰影長度 陰影顏色;
}
</style>
<div>asdas </div>
六、漸變
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
七 院领、媒體查詢
@media screen and (min-width:970px){
body{
background-color: red;
}
}
@media screen and (min-width: 560px) and (max-width: 969px){
body{
background-color: green;
}
}
@media screen and (min-width: 321px) and (max-width: 559px){
body{
background-color: blue;
}
}
@media screen and (max-width: 320px){
body{
background-color: yellow;
}
}
媒體查詢書寫規(guī)則
注意：為了防止混亂弛矛，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔
八 比然、邊框圓角
border-radius: 數(shù)值+單位(em,rem,px,%);
九丈氓、動畫
/* 動畫名稱 */
animation-name: move;
/* 動畫花費時長 */
animation-duration: 2s;
/* 動畫速度曲線 */
animation-timing-function: ease-in-out; //上圖運動曲線這里也可以使用
/* 動畫等待多長時間執(zhí)行 */
animation-delay: 2s;
/* 規(guī)定動畫播放次數(shù) infinite: 無限循環(huán) */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 動畫結(jié)束之后的狀態(tài) */
animation-fill-mode: forwards;
十、彈性盒（flex）
display: flex;//設置彈性和
flex-direction: row;
/*彈性盒方向：主軸方向X軸 */
flex-direction: column;
/* 彈性盒方向：主軸Y軸方向 */
flex-direction: row-reverse;
/* 彈性盒方向：主軸方向X軸 倒敘 */
flex-direction: column-reverse;
/* 彈性盒方向：主軸Y軸方向 倒敘*/
flex-wrap: nowrap;
/* 彈性盒換行：不換行 默認的 */
flex-wrap: wrap;
/* 彈性盒換行：換行 */
/*設置主軸方向子元素排列順序*/
justify-content: flex-start;
/* 從左到右排列 默認的 */
justify-content: flex-end;
/* 從尾部開始排列 不影響子元素排列順序 */
justify-content: center;
/* 從主軸居中對齊 */
justify-content: space-around;
/* 平分主軸剩余空間 */
justify-content: space-between;
/* 兩邊對齊强法，中間評分剩余空間 */
justify-content: space-evenly;
/* 間距相同 */
align-items: flex-start;//從頭部開始
align-items: flex-end;//從尾部開始
align-items: center;//居中顯示
align-items: stretch;//拉伸
}
