HTML5

語義化標籤

ie9需要將display改為block

<header>頭部</header>
<nav>導航</nav>
<aside>側邊欄</aside>
<section>塊級標籤</section>
<article>
<section>內容標籤下的塊級標籤</section>
</article>
<footer>底部</footer>

input標籤

autocomplete預設為on最好關閉

<form action="" method="POST">
    郵箱：<input type = "email" required="required" />
    url: <input type = "url" placeholder="123" />
    日期：<input type = "date" />
    時間：<input type = "time" />
    數字：<input type = "number" />
    電話：<input type="tel" required />
    搜尋：<input type = "search" autofocus="autofocus"  autocomplete="off" />
    顏色：<input type = "color" />
    檔案：<input type = "file" multiple="multiple" />
    	 <input type="submit" value="提交">
</form>

video標籤

src屬性：新增播放檔案

autoplay屬性：video標籤預設不會播放，需要新增一個auto play才可以自動播放

controls屬性：顯示控制條

poster屬性：播放前的佔點陣圖片

loop屬性：迴圈播放，一般廣告視訊使用

preload屬性：預載入視訊，於autoplay相沖

muted屬性：靜音

width/height：同img

viedo標籤2

意義：解決瀏覽器之間不相容的問題

格式：webm/mp4/ogg

<video>
    <source src="" type="cideo/webm"></source>
	<source src="" type="cideo/MP4"></source>
	<source src="" type="cideo/ogg"></source>
</video>

audio標籤

src屬性：新增播放檔案

autoplay屬性：video標籤預設不會播放，需要新增一個auto play才可以自動播放

controls屬性：顯示控制條

loop屬性：迴圈播放，一般廣告視訊使用

preload屬性：預載入視訊，於autoplay相沖

muted屬性：靜音

詳情和概要

概要資訊 詳細資訊

跑馬燈

direction屬性：滾動方向

scrollamount屬性：滾動速度

loop屬性：設定滾動次數，預設為- 1，迴圈滾動

behavior:設定滾動型別：1、slide邊界停止2、alternate邊界回彈

內容

CSS3

偽類選擇器

link:從未被訪問過的

visited:已經被訪問過的

hover:移入移除

active：長按狀態下樣式

注：順序不能變

過渡

過渡三要素

hover:過渡狀態的變化

transition-property:過渡的屬性值

transition-duration:過渡的持續時長

過渡屬性補充

transition-delay:過渡延遲時長
transition-timing-function:
- ease（逐漸慢下來）預設
- ease-in（加速）
- ease-out（減速）
- ease-in-out(先加後減)
- linear（勻速 ）
- 當多個屬性要執行過渡時，用“，”隔開即可

transition-property: width , background-color;
transition-duration: 5s,5s;
transition-delay: 2s;
transition-timing-fubction:ease-in-out

簡寫方式

transition：property duration timing-function delay;

例：transition:width 5s linear 2s;

多個屬性簡寫方式：transition:width 5s linear 2s，background 5s;

所有屬性簡寫方式：transition:all 5s

過渡使用步驟

1、基本介面佈局

2、修改屬性樣式

3、新增元素過渡效果

2D轉換

transform:rotate(45deg);|旋轉（順時針方向）|預設是圍繞z軸旋轉
transform:rotateX|rotateY(45deg)垂直翻轉|水平翻轉45°
transform:translate（100px,0px）;平移(x,y)	
transform:translate（50%,50%）向左向上移動自身位置，一般設負數用於水平居中
transform:scale(1.5,1.5);|縮放（水平,垂直）預設為1

簡寫

transform:rotate(45deg) scale(1,1.5) translate（100px,0px）；
注：旋轉平移不是水平平移，而是根據旋轉的方向進行水平平移|多個屬性用” 空格 “隔開
transform-origin:200px 0px;|旋轉定點標，預設為50%，50%;

透視(近大遠小)

perspective：500px(透視距離)
注： 1、有了透視才能看得到水平垂直翻轉的效果
	2、透視需要新增元素到祖先元素上
	

3D轉換

區別：預設的2D轉換隻有寬度和高度，沒有厚度效果

開啟方式：transform-style:preserve-3D;

注：當你旋轉90deg後，z面會朝上。transform:translateZ（100px）

陰影

盒子陰影

box-shadow: 1px 3px 5px rgba(0, 0, 0, .2);

box-shadow:水平偏移 垂直偏移 模糊度 陰影擴張 陰影顏色 引用方向
陰影顏色預設與內容一致
應用方向預設向外

文字陰影

text-shadow:水平偏移 垂直偏移 模糊度 陰影顏色
text-shadow:2px 2px 2px ;

動畫

過渡與動畫區別：動畫需要人為觸發才會執行動畫，而動畫不需要

三要素：

animation-name:move;	設定動畫名稱

animation-duration:5s	設定動畫持續時長
	
@keyframes  move{		設定動畫效果
	from:{
        margin-left:0;
    }
	to:{
     	margin-left:500px;   
    }
}

其他屬性

animation-delay:3s;延長几秒（每次距離下一次動畫執行的時間）
animation-timing-function:linear;執行速度
animation-iteration-count:3|infinite;重複次數:3次|無限次
animation-direction:normal|alternate;正常|往返動畫
animation-play-state:running|paused;控制動畫狀態：執行|暫停
animation-fill-mode:none|forwards|backwards|both;指定動畫等待和結束狀態的樣式:預設|等待保持第一幀|結束保持最後一幀|both

簡寫

animation:動畫名稱 持續時長 運動速度 延遲時間 執行次數 往返動畫
例:animation:sport 2s linear 2s 5 alternate;
@keyframes sport{
    to{
       margin-left:0px; 
    }
    from{
        margin-left:100px;
    }
}
簡寫 animation:sport 2s;

漸變

線性漸變可以通過（to/deg）來修改方向
徑向漸變可以通過（at 位置 位置）修改漸變的位置

線性漸變

background:linert-gradient(red,green);預設從上至下漸變
background:linert-gradient(to top right,red,green);向右上漸變
background:linert-gradient(45deg,red,green);順時針方向
background:linert-gradient(to right,red 100px,green 200px,blue 300px);
注： 1、最少需要兩個顏色.
	2、也可以手動指定格式：顏色 範圍。除了第一個是純色範圍，後邊的都是漸變色範圍

徑向漸變

background：radial-gradient(red，green);
background：radial-gradient(100px at 200px 100px,red,green);第一個引數指定漸變範圍，漸變位置，第二個引數與線性漸變相同

計算

calc:可以用來動態計算長度值

calc(100% - 58px)

背景

尺寸屬性

backround-size:100px 100px;（寬，高）

backround-size:100% 100%;設定背景寬高佔元素寬高的百分比

backround-size:100px  auto;(寬度100px;高度等比拉伸)

backround-size:cover;寬度高度都拉伸到100%；

backround-size:contain；寬度高度一個拉伸到100%；

圖片定位

background-origin:padding-box(預設的，圖片預設定位在padding上)

background-origin:border-box(從border上開始定位)

background-origin:content-box(在內容區域開始定位)

繪製

background-clip:border-box(預設，從border上開始繪製)
background-clip:padding-box(在padding區域開始繪製)
background-clip:content-box(在內容區域開始繪製)
-webkit-background-clip:text(私有屬性：背景顏色僅繪製文字)

多重背景

background:url(./img1.jpg),url(./img2.jpg);
background-position:left top ,right top;

建議多張背景圖的時 候背景樣式分開寫

注：先新增的背景圖片顯示在圖片上邊

邊框

邊框圓角：繪製圓角根據指定值找到圓心，根據指定值繪製圓弧

可以單獨設定值，格式為：border-top-left-radios: 200px 100px;

邊框圖片

border-imager-source:url("./img/111.jpg")
border-image-slice:70 70 70 70 指定圖片進行切割
border-image-repeat:round|repeat|stretch;設定除四個角以外圖片的填充方式:環繞|平鋪|拉伸
border-imager-outset:10px 30px 10px 30px ;指定邊框向外移動 

連寫方式

border-image :url ("./img/111.jpg") 70 round

圖片垂直對齊

vertical-align:設定元素垂直對齊方式
vertical-align:baseline;預設:與基線（一行文字中最短文字的底部）對齊
vertical-align:top/bottom;與盒子頂部/底部對齊
vertical-align:text-top/text-bottom;與文字頂部/底部對齊
vertical-align:middle；與中線對齊
注：與text-alight設定給父元素不同，vertical-alight設定給子元素，只對行內元素起效

background：radial-gradient(red，green);
background：radial-gradient(100px at 200px 100px,red,green);第一個引數指定漸變範圍，漸變位置，第二個引數與線性漸變相同