1凡壤、HTML5新標(biāo)簽

HTML新加了許多語義化標(biāo)簽勺远，這些標(biāo)簽由于是新出的橙喘，適用于高版本瀏覽器，ie9以下不推薦使用胶逢，推薦手機瀏覽器使用厅瞎，因為手機瀏覽器出來的晚一點，但是瀏覽器的起點特別高初坠。
Header 頭部標(biāo)簽
nav 導(dǎo)航標(biāo)簽
section 文檔中的區(qū)段標(biāo)簽
article 文章標(biāo)簽
aside 側(cè)邊欄
footer 頁腳和簸，底部標(biāo)簽

801509-20160711082959467-525706727.png

2、拖拽

拖拽是一種特別常見特性碟刺，應(yīng)用范圍非常廣锁保，在HTML5中拖拽成了一部分，任何元素都可以拖拽半沽。
h5中使用draggable屬性改為true即可,false就可以阻止拖拽

<div draggable="true">231231</div>

3爽柒、音頻(audio)，視頻標(biāo)簽(video)

H5還規(guī)定了瀏覽器中的視頻者填，音頻規(guī)范

音頻

    <audio autoplay controls loop>
        <source src="../media/赤伶.mp3" type="audio/mpeg">
        <source src="../media/赤伶.ogg" type="audio/agg">
        對不起您的瀏覽器不支持音頻
    </audio>

音頻常用屬性
autoplay 自動播放
controls 播放控件
loop 循環(huán)播放

視頻

    <video  controls autoplay width="500px" muted loop poster="../img/桐.png" preload>
        <source src="../media/aaaa.mp4">
    </video>

視頻常用屬性
controls 播放控件
autoplay 自動播放
muted 靜音播放
loop 循環(huán)播放
poster 播放預(yù)加載圖片
preload 預(yù)加載auto（默認(rèn)加載）none(不加載)

4浩村、新增input類型

    <input type="color">  可以挑選顏色
    <input type="date">   日期input
    <input type="email">  郵箱input
    <input type="month">  只包括年，月日期
    <input type="number"> 只可以輸入數(shù)字類型
    <input type="range">  類似于進度條
    <input type="search"> 搜索框
    <input type="tel">    手機號input
    <input type="time">   只包括時間日期
    <input type="url">    可以放url路徑
    <input type="week">   xxx年的xx周

5幔托、表單元素

標(biāo)簽 datalist
<datalist> 元素規(guī)定輸入域的選項列表穴亏。
<datalist> 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動完成功能咽白。當(dāng)用戶在自動完成域中開始輸入時瓣赂，瀏覽器應(yīng)該在該域中顯示填寫的選項：
使用 <input> 元素的列表屬性與 <datalist> 元素綁定.

<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

6、localStorage和sessionStorage

這是h5新出的兩種數(shù)存儲存方式搅方。

localStorage和sessionStorage區(qū)別

1谬哀、localStorage生命周期是永久刺覆，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在史煎。

2谦屑、sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁，一旦窗口或標(biāo)簽頁被永久關(guān)閉了篇梭，那么所有通過sessionStorage存儲的數(shù)據(jù)也就被清空了氢橙。

3、不同瀏覽器無法共享localStorage或sessionStorage中的信息恬偷。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬于相同域名和端口）悍手，但是不同頁面或標(biāo)簽頁間無法共享sessionStorage的信息。

localStorage語法

   // 設(shè)置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));
        }
    }

sessionStorage語法

由于sessionStorage是在瀏覽器關(guān)閉就自動清除肆良，就不存在清除問題

    // 設(shè)置sessionStorage
    sessionStorage.setItem('存儲對象名', 存儲對象值)
    // 讀取sessionStorage
    sesessionStorage.getItem('存儲對象名')

7筛璧、HTML5 canvas(繪畫)

什么是 canvas?

1、HTML5 <canvas> 元素用于圖形的繪制惹恃，通過腳本 (通常是JavaScript)來完成.
2夭谤、<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形座舍。
3沮翔、你可以通過多種方法使用 canvas 繪制路徑,盒、圓曲秉、字符以及添加圖像采蚀。

簡單實列

<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>

Canvas 坐標(biāo)

canvas 是一個二維網(wǎng)格识啦。
canvas 的左上角坐標(biāo)為 (0,0)
上面的 fillRect 方法擁有參數(shù) (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形神妹，從左上角開始 (0,0)颓哮。

Canvas - 路徑

在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始坐標(biāo)
lineTo(x,y) 定義線條結(jié)束坐標(biāo)

8鸵荠、HTML5 地理定位

h5還推出了地理定位功能冕茅，但是要獲取到用戶同意才能進行定位
HTML5 Geolocation API 用于獲得用戶的地理位置。
鑒于該特性可能侵犯用戶的隱私蛹找，除非用戶同意姨伤，否則用戶位置信息是不可用的。
下面是h5地理定位簡單使用庸疾，不含錯誤處理乍楚。

<script>
function getLocation()
{
   // 檢測是否支持地理定位
    if (navigator.geolocation)
    {
    //如果支持，則運行 getCurrentPosition() 方法届慈。如果不支持徒溪，則向用戶顯示一段消息    
   //如果 getCurrentPosition() 運行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個 coordinates 對象
     navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="該瀏覽器不支持獲取地理位置拧篮。";
    }
}
 //showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度
function showPosition(position)
{
    x.innerHTML="緯度: " + position.coords.latitude + 
    "<br>經(jīng)度: " + position.coords.longitude;    
}
</script>

9词渤、H5 Web Workers

當(dāng)在 HTML 頁面中執(zhí)行腳本時，頁面的狀態(tài)是不可響應(yīng)的串绩，直到腳本已完成缺虐。
web worker 是運行在后臺的 JavaScript，獨立于其他腳本礁凡，不會影響頁面的性能高氮。您可以繼續(xù)做任何愿意做的事情：點擊、選取內(nèi)容等等顷牌，而此時 web worker 在后臺運行剪芍。（相當(dāng)于實現(xiàn)多線程并發(fā)）

10、HTML5 WebSocket

ws (1).png

css3

1舶吗、css3新增選擇器

屬性選擇器

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

20180816104833536.png

結(jié)構(gòu)性偽類選擇器—root

:root{background:orange}
html {background:orange;}

結(jié)構(gòu)性偽類選擇器—not

input:not([type="submit"]){
  border:1px solid red;
}

結(jié)構(gòu)性偽類選擇器—empty

p:empty {
  display: none;
}

結(jié)構(gòu)性偽類選擇器—target

:target選擇器稱為目標(biāo)選擇器征冷，用來匹配文檔(頁面)的url的某個標(biāo)志符的目標(biāo)元素。

結(jié)構(gòu)性偽類選擇器—first-child

:first-child選擇器表示的是選擇父元素的第一個子元素的元素E裤翩。簡單點理解就是選擇元素中的第一個子元素资盅，記住是子元素调榄，而不是后代元素踊赠。

結(jié)構(gòu)性偽類選擇器—last-child

:last-child選擇器與:first-child選擇器作用類似，不同的是:last-child選擇器選擇的是元素的最后一個子元素每庆。

結(jié)構(gòu)性偽類選擇器—nth-child(n)

:nth-child(n)選擇器用來定位某個父元素的一個或多個特定的子元素筐带。其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)缤灵，也可以是表達(dá)式(2n+1伦籍、-n+5)和關(guān)鍵詞(odd、even)腮出，但參數(shù)n的起始值始終是1帖鸦，而不是0。也就是說胚嘲，參數(shù)n的值為0時作儿，選擇器將選擇不到任何匹配的元素。

經(jīng)驗與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個表達(dá)式時馋劈，其中n是從0開始計算攻锰，當(dāng)表達(dá)式的值為0或小于0的時候，不選擇任何匹配的元素妓雾。如下表所示：

這里寫圖片描述

:only-child選擇器

:only-child選擇器選擇的是父元素中只有一個子元素娶吞，而且只有唯一的一個子元素。也就是說械姻，匹配的元素的父元素中僅有一個子元素妒蛇，而且是一個唯一的子元素。

:enabled和:disabled選擇器

在Web的表單中楷拳，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)绣夺，比如輸入框，密碼框唯竹，復(fù)選框等乐导。在默認(rèn)情況之下，這些表單元素都處在可用狀態(tài)浸颓。那么我們可以通過偽選擇器:enabled對這些表單元素設(shè)置樣式物臂。

:disabled選擇器剛好與:enabled選擇器相反旺拉，用來選擇不可用表單元素。要正常使用:disabled選擇器棵磷，需要在表單元素的HTML中設(shè)置“disabled”屬性蛾狗。

:checked選擇器

在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)仪媒。（大家都知道沉桌，要覆寫這兩個按鈕默認(rèn)樣式比較困難）。在CSS3中算吩，我們可以通過狀態(tài)選擇器:checked配合其他標(biāo)簽實現(xiàn)自定義樣式留凭。而:checked表示的是選中狀態(tài)。

::selection選擇器

::selection偽元素是用來匹配突出顯示的文本(用鼠標(biāo)選擇文本時的文本)偎巢。瀏覽器默認(rèn)情況下蔼夜，用鼠標(biāo)選擇網(wǎng)頁文本是以“深藍(lán)的背景，白色的字體”顯示的压昼。

:read-only和read-write選擇器

:read-only偽類選擇器用來指定處于只讀狀態(tài)元素的樣式求冷。簡單點理解就是，元素中設(shè)置了“readonly=’readonly’”

:read-write選擇器剛好與:read-only選擇器相反窍霞，主要用來指定當(dāng)元素處于非只讀狀態(tài)時的樣式匠题。

::before和::after

::before和::after這兩個主要用來給元素的前面或后面插入內(nèi)容，這兩個常和”content”配合使用但金，使用的場景最多的就是清除浮動

:nth-of-type

    p:nth-of-type(n){ //還可以寫odd(奇數(shù))和even(偶數(shù)) 還可以寫使用公式 (an + b)韭山。描述：表示周期的長度，n 是計數(shù)器（從 0 開始）傲绣，b 是偏移值掠哥。

    }

2、邊框圓角

 border-radius: 數(shù)值+單位(em,rem,px,%);

3秃诵、透明度

background: rgba(red, green, blue, 0-1);
opacity: 0-1;

rgba()和opacity:;區(qū)別

rgba()和opacity都能實現(xiàn)透明效果
但最大的不同是opacity作用于元素续搀，以及元素內(nèi)的所有內(nèi)容的透明度
而rgba()只作用于元素的顏色或其背景色。

4菠净、Word Wrap

word-break: break-word; //長單詞換行

5禁舷、文字陰影

text-shadow:x方向偏移量 y方向偏移量 陰影長度 陰影顏色;

6、盒陰影

box-shadow:x方向偏移量 y方向偏移量 陰影長度 陰影顏色

7毅往、漸變

背景漸變：background: linear-gradient(顏色1,顏色2),
          默認(rèn)是從上往下牵咙，改變方向，在顏色1前加上: to 方向
          也可以使用rgba()顏色
徑向漸變：background: radial-gradient(red,blue,yellow);

8攀唯、transform變形

    rotate(ndeg) 旋轉(zhuǎn)n角度
    scale(倍數(shù)) 縮放 scale(w倍數(shù),h倍數(shù))
    skew(ndeg) 變形
    translate(x,y) 位置移動

9洁桌、 transition過渡

 transition: all linear 03s; // all(全部) linear(運動曲線) （時間）

steps.png

10、css動畫

    自定義動畫：
        @keyframs 動畫名{
            from{}
            to{}
        }
    使用動畫：
        選擇器{
            css樣式;
            animation:animation: name duration timing-function delay iteration-count direction fill-mode;
            /* animation: 動畫名稱 持續(xù)時間 運動曲線 何時開始 播放次數(shù) 是否反方向 起始與結(jié)束狀態(tài) */
        }
  /* 動畫名稱 */
  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;

11侯嘀、媒體查詢

媒體查詢語法

@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;
            } 
        }

mediatype 查詢類型

1.jpg

關(guān)鍵字

關(guān)鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件另凌。

• and：可以將多個媒體特性連接到一起谱轨，相當(dāng)于“且”的意思。
• not：排除某個媒體類型吠谢，相當(dāng)于“非”的意思土童，可以省略。
• only：指定某個特定的媒體類型工坊，可以省略献汗。

媒體查詢書寫規(guī)則

注意：為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫王污，這樣代碼更簡潔

12罢吃、彈性盒(flex)

c3出來我認(rèn)為最強大，最好用的就是彈性盒玉掸，解決了浮動出現(xiàn)的任何問題

###  父項常見屬性
flex-direction：設(shè)置主軸的方向
justify-content：設(shè)置主軸上的子元素排列方式
flex-wrap：設(shè)置子元素是否換行  
align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
flex-flow：復(fù)合屬性刃麸，相當(dāng)于同時設(shè)置了 flex-direction 和 flex-wrap

• 在 flex 布局中，是分為主軸和側(cè)軸兩個方向司浪，同樣的叫法有 ： 行和列、x 軸和y 軸
• 默認(rèn)主軸方向就是 x 軸方向把沼，水平向右

• 默認(rèn)側(cè)軸方向就是 y 軸方向啊易，水平向下

  
  
  1.JPG
  
  
  注意： 主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸饮睬，剩下的就是側(cè)軸租谈。而我們的子元素是跟著主軸來排列的
  2.JPG

justify-content

justify-content：設(shè)置主軸上的子元素排列方式

3.JPG

flex-wrap

flex-wrap: 設(shè)置是否換行

• 默認(rèn)情況下，項目都排在一條線（又稱”軸線”）上捆愁。flex-wrap屬性定義割去，flex布局中默認(rèn)是不換行的。
• nowrap 不換行
• wrap 換行

align-content

align-content：設(shè)置側(cè)軸上的子元素排列方式（多行）

設(shè)置子項在側(cè)軸上的排列方式 并且只能用于子項出現(xiàn) 換行 的情況（多行）昼丑，在單行下是沒有效果的呻逆。

4.JPG

align-items

align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）

• 該屬性是控制子項在側(cè)軸（默認(rèn)是y軸）上的排列方式 在子項為單項（單行）的時候使用
• flex-start 從頭部開始
• flex-end 從尾部開始
• center 居中顯示
• stretch 拉伸

align-items和align-content區(qū)別

• align-items 適用于單行情況下， 只有上對齊菩帝、下對齊咖城、居中和 拉伸
• align-content適應(yīng)于換行（多行）的情況下（單行情況下無效）， 可以設(shè)置 上對齊呼奢、下對齊宜雀、居中、拉伸以及平均分配剩余空間等屬性值握础。
• 總結(jié)就是單行找align-items 多行找 align-content

子項常見屬性

• flex子項目占的份數(shù)

flex屬性

flex 屬性定義子項目分配剩余空間辐董，用flex來表示占多少份數(shù)。

.item {
    flex: <number>; /* 默認(rèn)值 0 */
}

13禀综、font-face屬性

@font-face是CSS3中的一個模塊简烘，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中他匪，隨著@font-face模塊的出現(xiàn)，我們在Web的開發(fā)中使用字體不怕只能使用Web安全字體

基本語法

  @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }