經常使用的HTML5和CSS3標籤及用法（入門篇）

1、HTML5

1.標籤

　　HTML5本質上只是增長了一些語義化標籤

　　只兼容高版本（ie9以上）瀏覽器

　　最有用的三個標籤：video 視頻

　　　　　　　　   　　audio 音頻

　　　　　　　  　 　　canvas 畫圖板，替代flash（操做上比較困難）

　　用處不大但不少時候又能夠用到的一些標籤：

　　　　　　　　　　　header　　頭部

　　　　　　　　　　　footer　　 尾部

　　　　　　　　　　　nav　　　 導航

　　　　　　　　　　　aside　　 側邊欄

　　　　　　　　　　　section　　模塊

2.表單裏面新添加的一些html5屬性

<form>
   <input type="email" />      郵箱輸入，自帶錯誤提示(沒法修改樣式)

　　<input type="color" />　　　 一個能夠選擇顏色的調色板
                  

   <input type="date" />　　　　年月日下拉框 （在手機上顯示的時候，會有滑動的選擇，很好看）

              

       <input type="month" />   選擇月份下拉框
              
       <input type="week" />   周選擇下拉框
              

       <input type="url" />     URL

       <input type="tel" />     調用手機數字鍵盤

       <input type="search" />　　搜索（帶個叉 可關

       <input type="range" />　　拖拽條
                
       <input type="number" max="10" min="0" />   有條件範圍的數字框

   </form>

2、css3 （IE9如下不兼容 9部分兼容)

　　一、盒子陰影  box-shadow:x   y   blur（模糊度）  spread(內擴充，至關於padding)   color   inset（內陰影）;

　　　　　例 box-shadow:100px 100px 0px 100px #f00;  box-shadow:0px 0px 50px 0px #f00 inset; 

　　二、文字陰影  text-shadow:x y blur color;

　　　　　例 text-shadow:1px 1px 1px #000;   div:hover{ text-shadow:1px 1px 1px #000; } 

　　三、背景透明度  background：rgba（0，0，0，alpha）

　　　　　opacity 會把子級也透明，rgba只把背景色透明，因此推薦使用rgba

　　　　　　　　　　opacity:0.1   透明度（ie8以上）

　　　　　　　　　　低版本瀏覽器寫法：filter：alpha(opacity:50);

　　四、背景圖大小  background-size : width height;

　　　　　使用background-size，要不cover等比縮放，要不寫死（會致使圖片拉伸，變形），沒法同時定義圖片的寬高又讓其等比縮放。

　　五、background:url(),url();     多個背景圖

div{ width:800px; height:600px; background:url(../img/2.jpg) no-repeat,url(../img/2.jpeg) no-repeat center; background-size:200px 200px; border:1px solid red; }

 

　　六、圓角　　border-radius  可使用像素也可使用百分比

　　　　　　一個值：四個方向
　　　　　　兩個值：左上右下 右上左下
　　　　　　三個值：左上 右上左下 右下
　　　　　　四個值：左上 右上 右下 左下（順時針）

　　七、過渡　　transition:1s 時間    樣式（all 全部樣式）  運動類型  寫的值不分順序

　　　　　　linear勻速     ease先加後減（緩衝）     ease-in加速      ease-out減速

　　八、瀏覽器前綴

　　　　（transition會涉及到瀏覽器前綴）

　　　　　　-webkit- 谷歌瀏覽器

　　　　　　-moz- 火狐瀏覽器

　　　　　　-ms- IE瀏覽器

　　　　　　-o- 歐朋

　　九、漸變色 

　　　　線性漸變background-image:-webkit-linear-gradient(方向left top,color起始顏色，color結束顏色);

　　　　重複漸變background-image:-webkit-repeating-linear-gradient(left top,clolr,color);

　　十、文字描邊

　　　　-webkit-text-stroke:描邊大小 color； -webkit-text-stroke:2px red; 

　　十一、css3動畫：

　　　　animation：time時間，name名字，ease類型，infinite重複運動

 

　　　　@keyframes name{

　　　　　　to{}

　　　　　　from{}

　　　　　　0%{}

　　　　　　100%{}

　　　　}

1 <style>
2 @keyframes test{
3     to{ left:300px; }
4     from{ left:0; }
5 }
6 div{ width:200px; height:200px; background:red; animation:test ease 1s infinite; position:absolute; left:0; top:0 }
7 </style>

1 <style>
2 @keyframes test{
3     0%{ left:0px; }
4     50%{ top:200px; }
5     100%{ left:300px; }
6 }
7 div{ width:200px; height:200px; background:red; animation:test ease 1s infinite; position:absolute; left:0; top:0 }
8 </style>

 

　　十二、倒影

　　-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1))

　　below向下 above向上 left right

　　1三、濾鏡　　-webkit-filter:blur(0px 模糊度)；

　　1四、變形

 transform: translate(x,y) 移動px rotate() 旋轉deg skew(x,y) 傾斜deg scale(x,y) 放大比例 transform:transform(x,y) rotate() skew(x,y) scale(x,y); 從後往前執行