為何使用Html5+CSS3
一：大多瀏覽器支持，低版本也沒問題
我看點這方面的資料，是為了做手機應用網站（有三個方案，這個是備用方案），可以開發響應式網站，可以脫離開發平臺進行跨平臺。
在Html5網頁中引入Modernizr，就能讓IE支持HTML5新元素。
HTML5樣板文件快速開發（html5boilerplate.com）
二：布局、標簽省時省力
- <header>
- <!--語義相當於<div class="header">-->
- <nav>導航</nav>
- </header>
這樣開發者就不用標記標簽的結束位置了，定位時會很方便，也易於搜索引擎進行判斷。
<header>定義頁面或區段的頭部；
<footer>定義頁面或區段的尾部；
<nav>定義頁面或區段的（主）導航區域；
<section>頁面的邏輯區域或內容組合，比如一個用於“簡介”，另一個用於“新聞列表”。
<article>定義正文或一篇完整的內容，能被直接粘貼到別的地方有獨立意義，比如“博客正文”。
<aside>定義補充或相關內容，側邊欄，廣告欄等。
<a>標簽可以包含多個標簽
- <a href="index.html"><h2>一</h2><img src="home.jpg"></a>
<vedio>、<audio>快速添加視頻、音頻
- <video src="myVideo.ogg" controls width="640" height="480">這裏提示你沒有使用支持HTML5的瀏覽器</video> //controls播放控制欄；支持ogg和mp4格式；響應式視頻：普通情況可以使用max-width:100% height:auto，如果是外部<iframe>視頻，則使用FitVids的jQuery插件
三：離線Web應用
通過.manifest文件指定哪些文件可以離線訪問的
四：更靈活的CSS3
01.可以多欄顯示文本
column-width:12em; //試了幾個瀏覽器好像很多無效的~
02.眾多選擇器
body[id="2^"]{} //id為"2"開頭的標簽
li:first-child 、 li:last-child //針對列表的首尾項
- li:nth-child(2n+1)//第“1”個li元素起，每“2”個顏色為紅色
- color: red;
- }
- <ul>
- <li>?????</li>
- <li>22222222</li>
- <li>33333333</li>
- </ul>
p::first-line{color:red;} //第一行文字為紅色
五：更豐富CSS3
傳統CSS實現圓角、陰影等效果，一般要借助圖片來實現，使用CSS3代替圖片，可以有效減少http請求，取得更快的網頁加載速度。不同瀏覽器對不同的CSS特性可能要使用不同的代碼，可以使用預處理器SASS或LESS才處理。
01.CSS3輕松應用邊框圓角
- <html>
- <head>
- <style>
- a
- {
- background-color:red;
- border-top-left-radius:8px;/*圓角位置和大小*/
- border-top-right-radius:8px;
- padding:0.8em;
- }
- </style>
- </head>
- <body>
- <br />
- <a href="#">圓角</a>
- </body>
- </html>
02.可以使用@font-face嵌入網頁字體，還可以使用可縮放的ICON（非圖片格式，fico.lensco.be）
03.使用透明通道
- <style>
- body{
- background:url(01.jpg) no-repeat;
- }
- #wrapper{
- background-color:hsla(100,100%,100%,0.7);/*HSL是360度色相環*/
- width:500px;
- height:500px;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- 透明區域
- </div>
- </body>
04文字陰影
- text-shadow:5px 5px 2px #333; //（正負）右、下、陰影程度、顏色
浮雕效果：
- <head>
- <style>
- #wrapper{
- height:500px;
- background-color:ActiveBorder;
- text-shadow:0px 1px 0px hsla(0,0%,100%,0.75);
- font-size:30px;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- 浮雕效果
- </div>
- </body>
同理可以使用盒陰影box-shadow給照片加陰影
05顏色漸變
- background:linear-gradient(90deg,red 0%,blue 50%,#ffffff 100%);
可以控制線性漸變方向漸變位置等，還有徑向（球狀）漸變
06文字2D變形
代碼參數比較多，在網站 http://www.useragentman.com/matrix/ 進行制作吧
之外還有圖片3D效果，貌似用得還不多。http://webdesignerwall.com/ 這裏有很多很酷的關於這方面的內容，我還特別在裏面找了一篇文章翻譯出來了：http://blog.csdn.net/wowkk/article/details/12572447
最後說下表單的優勢，HTML5可以在不借助jQuery的情況下，對用戶的輸入行為進行判斷（某些瀏覽器對HTML5表單支持也不是很好，可以通過Webshims Lib來解決）。
- <head>
- <style>
- /*偽選擇器*/
- .input:required /*如果沒有填入必填項，則邊框變紅色*/
- {
- border:1px solid #f00;
- }
- .input:focus:invalid /*如果填入的數據無效時*/
- {
- }
- .input:focus:invalid /*如果填入的數據正確時*/
- {
- }
- </style>
- </head>
- <body>
- <form method="post">
- <div>
- <label for="userName">請輸入用戶名</label>
- <input id="userName" type="text" placeholder="例如:Admin" required aria-required="true" autofocus />
- <!--placeholder表示提示輸入
- required aria-required="true"表示為必填項；
- autofocus表示自動獲取到光標焦點
- pattern屬性可以填正則表達式，可以判定用戶的輸入行為
- -->
- <input type="search" value="與text差不多，部分瀏覽器表現比較強悍" />
- <!--此外還有type=number之類的-->
- <input type="submit" value="確定" />
- </div>
- </form>
- </body>
補充：
使用HTML5 Boilerplate來寫HTML5網站，它帶有組織好的文件夾結構和CSS文件，加入當前編碼的最佳實踐、瀏覽器的bug修復以及js庫。
為何使用Html5+CSS3