前端（十一）

一html5

接下來 咱們要學習html五、css3 的知識。html5不單單只是作爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，增長了不少語義標籤，本質上新語義標籤與<div>、<span>沒有區別，只是其具備表意性。

input增長了不少type的類型：郵件、日期等類型。

增長了提示輸入框（和select有點像，不過select是選擇框）

<input type="text" list="myData">
<datalist id="myData">
    <option>本科</option>
    <option>研究生</option>
    <option>不明</option>
</datalist>複製代碼

增長了輸入事件：當輸入時候調用方法，當驗證錯誤時候的方法。

• oninput()：用戶輸入內容時觸發，可用於輸入字數統計。

• oninvalid()：驗證不經過時觸發。好比，若是驗證不經過時，想彈出一段提示文字，就能夠用到它。

增長了多媒體播放，在HTML5以前，在網頁上播放音頻/視頻的通用方法是利用Flash來播放。而且移動設備的瀏覽器並不支持Flash插件。如今html5給咱們提供了：

音頻

<audio src="music/yinyue.mp3" autoplay controls> </audio>複製代碼

視頻

<video src="video/movie.mp4" controls autoplay></video>複製代碼

新增長DOM操做方式：獲取節點方式增長了：

• document.querySelector("selector") 經過CSS選擇器獲取符合條件的第一個元素。

• document.querySelectorAll("selector") 經過CSS選擇器獲取符合條件的全部元素，以類數組形式存在。

修改class方式增長了：

• Node.classList.add("class") 添加class

• Node.classList.remove("class") 移除class

• Node.classList.toggle("class") 切換class，有則移除，無則添加

• Node.classList.contains("class") 檢測是否存在class

js 裏能夠經過 box1.index=100; box1.title 來自定義屬性和獲取屬性。

H5能夠直接在標籤裏添加自定義屬性，但必須以 data- 開頭。

二css3僞元素

元素：<p>內容</p>稱爲元素。那麼什麼是僞元素呢？就是在當前元素的左邊或右邊增長一個相似的元素。如：

左邊添加一個元素，元素的內容是smyhvae

div::before{       
     content:"smyhvae";    
     color:red;       
     background-color: pink;          
     width: 100px;       
     height: 50px;        
     display: inline-block;           
  }複製代碼

右邊添加一個元素，元素的內容是 永不止步

div::after{    
        content:"永不止步";         
        color:yellowgreen;     
   }複製代碼

注意：僞元素結合content去設置，僞元素是行內元素，須要轉換成塊元素才能設置寬高。

相似於選擇器的功能：

• E::first-letter 設置元素 E 裏面的第一個字符的樣式。

• E::first-line 設置元素 E 裏面的第一行的樣式。

三css3新屬性

3.1顏色相關的

RGBA、HSLA可應用於全部使用顏色的地方。

RGBA 即：Red、Green、Blue、Alpha  

R、G、B 的取值範圍是：0~255

background-color: rgba(0, 0, 255, 0.3);複製代碼

HSLA  即

• H 色調，取值範圍 0~360。0或360表示紅色、120表示綠色、240表示藍色。

• S 飽和度，取值範圍 0%~100%。值越大，越鮮豔。

• L 亮度，取值範圍 0%~100%。亮度最大時爲白色，最小時爲黑色。

• A 透明度，取值範圍 0~1。

background-color: hsla(240,50%,50%,0.4);複製代碼

關於設置透明度的其餘方式：

• opacity: 0.3; 會將整個盒子及子盒子設置透明度。也就是說，當盒子設置半透明的時候，會影響裏面的子盒子。
• background: transparent; 能夠單獨設置透明度，但設置的是徹底透明（不可調節透明度）。

3.2文本相關的

text-shadow：設置文本的陰影

格式舉例：

text-shadow: 20px 27px 22px pink;複製代碼

參數解釋：水平位移 垂直位移 模糊程度 陰影顏色。

3.3盒子模型

CSS3 對盒模型作出了新的定義，即容許開發人員指定盒子寬度和高度的計算方式。

這就須要用到 box-sizing屬性。它的屬性值能夠是：content-box、border-box。解釋以下。

外加模式：（css的默認方式）

box-sizing: content-box;複製代碼

解釋：此時設置的 width 和 height 是內容區域的寬高。盒子的實際寬度 = 設置的 width + padding + border。此時改變 padding 和 border 的大小，也不會改變內容的寬高，而是盒子的總寬高發生變化。

內減模式：【須要注意】

box-sizing: border-box;複製代碼

解釋：此時設置的 width 和 height 是盒子的總寬高。盒子的實際寬度 = 設置的 width。此時改變 padding 和 border 的大小，會改變內容的寬高，盒子的總寬高不變。

3.4邊框相關的

邊框圓角：border-radius 屬性 。可讓圖片變成圓形效果。

邊框陰影：box-shadow 屬性。 box-shadow: 水平偏移 垂直偏移 模糊程度 陰影大小 陰影顏色

邊框圖片： border-image: url("images/border.png") 27/20px round;

3.5背景相關的

設置背景圖片的尺寸：

/* 寬、高的具體數值 */
background-size: 500px 500px;

/* 寬高的百分比 */
background-size: 50% 50%;   // 若是兩個屬性值相同，能夠簡寫成：background-size: 50%;

background-size: 100% auto;  //這個屬性能夠本身試驗一下。

/* cover：會自動調整縮放比例，保證圖片始終填充滿背景區域，若有溢出部分則會被隱藏。 */
background-size: cover;

/* contain：會自動調整縮放比例，保證圖片始終完整顯示在背景區域。  */
background-size: contain;複製代碼

控制背景顯示：

/* 從 padding-box 內邊距開始顯示背景圖 */
background-origin: padding-box;           //默認值

/* 從 border-box 邊框開始顯示背景圖  */
background-origin: border-box;

/* 從 content-box 內容區域開始顯示背景圖  */
background-origin: content-box;複製代碼

背景裁剪：

background-clip: content-box; 超出的部分，將裁剪掉。屬性值能夠是：

• border-box 超出 border-box 的部分，將裁剪掉

• padding-box 超出 padding-box 的部分，將裁剪掉

• content-box 超出 content-box 的部分，將裁剪掉

3.6動畫相關的

過渡動畫：

transition: 讓哪些屬性進行過分 過渡的持續時間 運動曲線 延遲時間;複製代碼

轉換動畫：

縮放：transform: scale(x, y);x：表示水平方向的縮放倍數。y：表示垂直方向的縮放倍數。

位移： transform: translate(水平位移, 垂直位移);

transform: translateX(100px);    //沿着 X 軸移動

transform: translateY(360px);    //沿着 Y 軸移動

transform: translateZ(360px);    //沿着 Z 軸移動複製代碼

旋轉： transform: rotate(角度); 改變旋轉原點： transform-origin: 水平座標 垂直座標;

transform: rotateX(360deg);    //繞 X 軸旋轉360度

transform: rotateY(360deg);    //繞 Y 軸旋轉360度

transform: rotateZ(360deg);    //繞 Z 軸旋轉360度複製代碼

3D動畫

transform-style: preserve-3d;     //讓 子盒子 位於三維空間裏

transform-style: flat;            //讓子盒子位於此元素所在的平面內（子盒子被扁平化）複製代碼

複雜的動畫

一、定義動畫的步驟

（1）經過@keyframes定義動畫；

（2）將這段動畫經過百分比，分割成多個節點；而後各節點中分別定義各屬性；

（3）在指定元素裏，經過 animation 屬性調用動畫。