這個星期在前端這一塊，發現自己學的並不是很好，知其然不知其所以然，所以在網上查閱了一些基礎知識記錄在自己的部落格上。

表單：

表單元素（標籤）
 <datalist> 資料列表（input下的下拉選單）
 與input 配合使用
 <input type=”text” list=”data”>
 <datalist id=”data”>
 <option>男</option>
 <option>女</option>
 <option>不詳</option>
</datalist>
<meter>   表示度量器，不建議用作進度條
<progress></progress> 進度條
表單屬性：
placeholder 佔位符，autofocus 獲取焦點，autocomplete 自動完成，用於表單元素，也可用於表單自身(on/off)，required 必填項
pattern 正則表示式 驗證表單
表單事件：
oninput 使用者輸入內容時觸發，用於移動端輸入字數統計
oninvalid 驗證不通過時觸發
setCustomValidity 用於在頁面輸出一段資訊
多媒體：
<audio>音訊標籤 用於輸出音訊檔案
<video>視訊標籤 用於輸出視訊檔案
視訊DOM:(重點)
屬性：currentTime 視訊播放的當前進度、duration:視訊的總時間、
      paused:視訊播放的狀態
方法：load() 載入、play() 播放、pause() 暫停
事件：oncanplay: 事件在使用者可以開始播放視訊/音訊（audio/video）時觸發。
ontimeupdate:通過該事件來報告當前的播放進度。
onended:播放完時觸發。
全屏：video.webkitRequestFullScreen();
自定義屬性：
在H5中，可自定義屬性，使用data-*=””，可以通過node.dataset[‘’]，使用駝峰命名法。Node.dataset是以類物件形式存在的。
拖拽：在HTML5的規範中，我們可以通過為元素增加draggable="true"來設定此元素是否可以進行拖拽操作，其中圖片、連結預設是開啟的。
拖拽元素：頁面中設定了draggable="true"屬性的元素
目標元素：頁面中任何一個元素都可以成為目標元素
事件監聽
拖拽元素
ondrag 應用於拖拽元素，整個拖拽過程都會呼叫
ondragstart 應用於拖拽元素，當拖拽開始時呼叫
ondragleave 應用於拖拽元素，當滑鼠離開拖拽元素時呼叫
ondragend    應用於拖拽元素，當拖拽結束時呼叫
目標元素
ondragenter 應用於目標元素，當拖拽元素進入時呼叫
ondragover 應用於目標元素，當停留在目標元素上時呼叫
ondrop    應用於目標元素，當在目標元素上鬆開滑鼠時呼叫
ondragleave 應用於目標元素，當滑鼠離開目標元素時呼叫
Web儲存：
傳統方式document.cookie來進行儲存的。
window.sessionStorage
1、生命週期為關閉瀏覽器視窗
2、在同一個視窗下資料可以共享
window.localStorage
1、永久生效，除非手動刪除
2、可以多視窗共享
全屏：
 HTML5規範允許使用者自定義網頁上任一元素全屏顯示。
 requestFullscreen() 開啟全屏顯示
 cancleFullscreen() 關閉全屏顯示
但是需要加入私有化字首，不同瀏覽器相容性不同。
網路狀態
我們可以通過window.onLine來檢測，使用者當前的網路狀況，返回一個布林值
window.online使用者網路連線時被呼叫
window.offline使用者網路斷開時被呼叫
應用快取：
Font Awesome 字型框架：
Font Awesome為您提供可縮放的向量圖示，您可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支援的效果。
堅持漸進增強原則：
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。
區別：優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶。
屬性選擇器：通過屬性來選擇元素。
偽類選擇器：
1.以某元素相對於其父元素或兄弟元素的位置來獲取無素的結構偽類，是通過該元素的父元素來選擇選擇器
2.目標偽類：E:target 結合錨點進行使用，處於當前錨點的元素會被選中；
3.偽元素選擇器 ：：before/after
顏色設定問題：
單純用opacity設定透明度時，子盒子會繼承父盒子，用transparent設定透明度時，不能調節透明度，始終為0.
新出2個設定顏色方法：(均不會出現繼承問題）
rgba(red,green,blue,opacity)；
HSLA(Hue,Saturation,Lightness,opacity);
文字陰影:text-shadow，可分別設定偏移量、模糊度、顏色（可設透明度）:（可連續設定多個陰影，用逗號隔開）
（1）、水平偏移量 正值向右 負值向左；
（2）、垂直偏移量 正值向下 負值向上；
（3）、模糊度是不能為負值；
盒子模型：（相容性較好，可以使用）
可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
box-sizing 有兩個值:content-box  border-box
可以分成兩種情況：
content-box:物件的實際寬度等於設定的width值和border、padding之和。
border-box： 物件的實際寬度就等於設定的width值，即使定義有border和padding也不會改變物件的實際寬度。
私有化字首（hack)：
邊框:
1.邊框圓角（bordre-radius)
每個角可以設定兩個值 ，x 值，y值，可分別設定，用/分開。
2.邊框陰影(border-shadow)
共有5個值：偏移量、陰影大小、模糊度、顏色，inset還可以設定內陰影。注意：模糊度不能為負值，外陰影不用設定。
設定邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的佈局。
可以設定多重邊框陰影，實現更好的效果，增強立體感。
3.邊框圖片(border-image):其中設定圖片平鋪的時候，可選引數stretch 為拉昇，round 會自動調整縮放比例。
背景屬性：
最重要的是圖片尺寸，
引數cover會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢位部分則會被隱藏。整個背景圖片可能不完整顯示在背景區域.
引數contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。
也可以使用長度單位或百分比設定大小。
background-origin(原點，起點)設定背景定位的原點。
background-clip設定背景區域clip(裁切)。
以逗號分隔可以設定多背景，可用於自適應局，設定多屬性的時候，最後的大小用/隔開。
漸變：
1.線性漸變（line-gradient）：
linear-gradient線性漸變指沿著某條直線朝一個方向產生漸變效果。
Background:linear-gradient(
To right  表示方向 (left,top,right,left ,也可以使用度數)
      Yellow   漸變起始顏色
Green   漸變終止顏色)
2.徑向漸變（radial-gradient）：
radial-gradient徑向漸變指從一箇中心點開始沿著四周產生漸變效果。
 background: radial-gradient(
           150px  at  center,
           yellow,
           green);
過渡：
Transition:param1  param2
param1    要過渡的屬性
param2    過渡的時間.
transition-property設定過渡屬性
transition-duration設定過渡時間 用來控制速度
transition-timing-function設定過渡速度  
transition-delay設定過渡延時  超過時間後執行動畫
2D轉換：位移、旋轉、變形
縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放，x、y的取值可為小數，不可為負值；
移動 translate(x, y) 可以改變元素的位置，x、y可為負值；
旋轉 rotate(deg)可以對元素進行旋轉，正值為順時針，負值為逆時針；
傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜，可為負值，第二個引數不寫預設為0。
transform-origin可以調整元素轉換的原點
3D轉換：
透視：（perspective）透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。
perspective有兩種寫法：
a) 作為一個屬性，設定給父元素，作用於所有3D轉換的子元素。
b) 作為transform屬性的一個值，做用於元素自身。
設定內嵌的元素在 3D 空間如何呈現，這些子元素必須為轉換元素。
flat：所有子元素在 2D 平面呈現。preserve-3d：保留3D空間。
3D元素構建是指某個圖形是由多個元素構成的，可以給這些元素的父元素設定transform-style: preserve-3d來使其變成一個真正的3D圖形。
backface-visibility : 設定元素背面是否可見。
動畫-必要元素：
a、通過@keyframes指定動畫序列；
b、通過百分比將動畫序列分割成多個節點；
c、在各節點中分別定義各屬性；
d、通過animation將動畫應用於相應元素。
關鍵屬性
a、animation-name設定動畫序列名稱；
b、animation-duration動畫持續時間；
c、animation-delay動畫延時時間；
d、animation-timing-function動畫執行速度，linear、ease等；
e、animation-play-state動畫播放狀態，running、paused等；
f、animation-direction動畫逆播，alternate等；
g、animation-fill-mode動畫執行完畢後狀態，forwards、backwards等；
h、animation-iteration-count動畫執行次數，inifinate等；
i、steps(60) 表示動畫分成60步完成。
關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意
伸縮佈局：css3在佈局方面做了非常大的改進，使得我們對塊級元素的佈局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。(ui不支援伸縮佈局)。
主軸：Flex容器的主軸主要用來配置Flex專案，預設是水平方向
側軸：與主軸垂直的軸稱作側軸，預設是垂直方向的
方向：預設主軸從左向右，側軸預設從上到下
主軸和側軸並不是固定不變的，通過flex-direction可以互換。
必要元素：
a、指定一個盒子為伸縮盒子 display: flex；
b、設定屬性來調整此盒的子元素的佈局方式 例如 flex-direction；
c、明確主側軸及方向；
d、可互換主側軸，也可改變方向；
各屬性詳解
a、flex-direction調整主軸方向（預設為水平方向）；
b、justify-content調整主軸對齊；
c、align-items調整側軸對齊。
字型圖示-優點：
1、將所有圖示打包成字型庫，減少請求；
2、具有向量性，可保證清晰度；
3、使用靈活，便於維護；
H5的相容性問題：通過http://caniuse.com/ 可查詢CSS3各特性的支援程度，一般相容性處理的常見方法是為屬性新增私有字首，如不能解決，應避免使用，無需刻意去處理CSS3的相容性問題。