1. 程式人生 > >html5CSS3有哪些新特性、移除了哪些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?

html5CSS3有哪些新特性、移除了哪些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?

google cti translate 功能 image 方案 near css html和html

(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聲明
  • 新增的元素

html5\CSS3有哪些新特性、移除了哪些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?