(1)HTML5現在已經不是SGML的子集,主要是關於圖像,位置,存儲,地理定位等功能的增加。 繪畫canvas元素; 用於媒介回放的video和audio元素; 本地離線存儲localStorage長期存儲數據,瀏覽器關閉後數據不丟失,sessionStorage的數據在瀏覽器關閉後自動刪除; 語 ...
(1)HTML5現在已經不是SGML的子集,主要是關於圖像,位置,存儲,地理定位等功能的增加。
-
繪畫canvas元素;
-
用於媒介回放的video和audio元素;
-
本地離線存儲localStorage長期存儲數據,瀏覽器關閉後數據不丟失,sessionStorage的數據在瀏覽器關閉後自動刪除;
-
語意化更好的內容元素,比如article、footer、header、nav、section;
-
表單控制項,calendar、date、time、email、url、search;
-
新的技術webworker,websockt和Geolocation。
(2)CSS3新特性:
- 實現圓角(border-radius),陰影(box-shadow),邊框圖片(border-image);
- 對文字加特效(text-shadow),強制文本換行(word-wrap),線性漸變(linear-gradient);
- 實現旋轉transform:rotate(90deg),縮放scale(0.85,0.90),translate(0px,-30px)定位,傾斜skew(-9deg,0deg);
- 增加了更多的CSS選擇器、多背景、rgba();
- 唯一引入的偽元素是::selection ;
- 實現媒體查詢(@media),多欄佈局(flex)。
(3)移除的元素
- 純表現的元素:basefont,big,center,font,s,strike,tt,u;
- 對可用性產生負面影響的元素:frame,frameset,noframes;
(4)HTML5新標簽的瀏覽器相容問題是瀏覽器不能識別HTML5新標簽而不能使用,解決辦法有兩種:
- 方法1:實現標簽被識別
通過document.createElement(tagName)方法即可讓瀏覽器識別新標簽,瀏覽器支持新標簽後,還可以為新標簽添加CSS樣式。
- 方法2:JavaScript解決方案
A)使用html5shim:
在<head>中調用以下代碼:
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
當然也可以直接把這個文件下載到自己的網站上,但這個文件必須在head標簽中調用。
B)使用kill IE6
在</body>之前調用以下代碼:
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
(5)區分HTML和HTML5:
- DOCTYPE聲明
- 新增的元素