ACCESSHTML5 学习笔记(一)——HTML5一律要跟新增标签

目录

一、HTML5概要

1.1、为什么要HTML5

1.2、什么是HTML5

1.3、HTML5现状与浏览器支持

1.4、HTML5特性

1.5、HTML5亮点和缺点

  • 1.5.1、优点
  • 1.5.2、缺点

1.6、HTML5效果亮

1.7、HTML5读及开发工具

  • 1.7.1、基础要求
  • 1.7.2、开发工具

1.8、HTML5语法规则及文档声明

  • 1.8.1、语法规则
  • 1.8.2、文档声明
  • 1.8.2、文档声明

仲、废弃的签

其三、新增的价签

3.1、新增的布局标签

  • 3.2、新增加其他元素
  • 3.2.1、meter
  • 3.2.2、time
  • 3.2.3、progress
  • 3.2.4、datalist

3.3、多媒体标签

  • 3.3.1、video视频标签
  • 3.3.2、audio音频标签
  • 3.3.3、embed元素 

四、HTML5兼容性

4.1、兼容性测试

4.2、HTML5向下兼容

  • 4.2.1、兼容测试
  • 4.2.2、html5shiv
  • 4.2.3、Modernizr

五、示例下载

目录

一、HTML5概要

1.1、为什么用HTML5

1.2、什么是HTML5

1.3、HTML5现状和浏览器支持

1.4、HTML5特性

1.5、HTML5独到之处和缺点

  • 1.5.1、优点
  • 1.5.2、缺点

1.6、HTML5功效亮

1.7、HTML5念和开发工具

  • 1.7.1、基础要求
  • 1.7.2、开发工具

1.8、HTML5语法规则和文档声明

  • 1.8.1、语法规则
  • 1.8.2、文档声明
  • 1.8.2、文档声明

次、废弃之竹签

老三、新增的标签

3.1、新增的组织标签

  • 3.2、新添其它元素
  • 3.2.1、meter
  • 3.2.2、time
  • 3.2.3、progress
  • 3.2.4、datalist

3.3、多媒体标签

  • 3.3.1、video视频标签
  • 3.3.2、audio音频标签
  • 3.3.3、embed元素 

四、HTML5兼容性

4.1、兼容性测试

4.2、HTML5向下兼容

  • 4.2.1、兼容测试
  • 4.2.2、html5shiv
  • 4.2.3、Modernizr

五、示例下载

一、HTML5概要

ACCESS 1

1.1、为什么要HTML5

HTML4老不能够满足日益提高的互联网要,特别是运动互联网。为了增强浏览器功能Flash被周边应用,但安全及安宁堪忧,不符合当动端应用(耗电、触摸、不放)。

HTML5增强了浏览器的原生功能,符合HTML5业内之浏览器功能以更加强大,减少了Web应用对插件的依,让用户体验更好,让开发尤其惠及,另外W3C从出HTML4.0届5.0里头联合经历了17年,HTML的转很粗,这并无符合一个吓产品的形成规则。

1.2、什么是HTML5

HTML5乘的是概括HTML、CSS和JavaScript在内的一样学技术整合。它愿意会减少网页浏览器对于急需插件的丰富性网络应用服务(Plug-in-Based
Rich Internet Application,RIA),例如:AdobeFlash、Microsoft
Silverlight与Oracle
JavaFX的需要,并且提供再多会行加强网络下的标准集。HTML5是HTML最新版本,2014年10月由于万维网联盟(W3C)完成专业制定。目标是替换1999年所制定的HTML
4.01跟XHTML
1.0标准,以期能在互联网使用迅速发展的时刻,使网络正式及相当当代底网需求。

1.3、HTML5现状与浏览器支持

大多数主流浏览器已经支持HTML5,但是各个浏览器支持之方法和语法有差异性。支持Html5的浏览器包括Firefox(火狐浏览器),IE9
连同更胜版本,Chrome(谷歌浏览器),Safari,Opera等现代浏览器。

ACCESS 2

支撑得分:

ACCESS 3

ACCESS 4

若想打听又多要看本文的兼容性那无异节约的情。

PC端(总分555分):

ACCESS 5

平板(总分555分):

ACCESS 6

移动(总分555分):

ACCESS 7

1.4、HTML5特性

HTML5 八个特色类别对应的8单Logo
语义网、离线&存储、设备看、通信
多媒体、图形和特效、性能与合、呈现(CSS3)

ACCESS 8

1.4.1. 语义特性(Class:Semantic)

HTML5与网页又好之义及结构。更加助长的竹签将趁着对RDFa的。

1.4.2. 当地存储特性(Class: OFFLINE & STORAGE)

HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI

1.4.3. 装置看特性 (Class: DEVICE ACCESS)

为走开要不行。重力影响、全球地理定位、麦克风、摄像头

1.4.4. 连接特性(Class: CONNECTIVITY)

WebSocket、Server-Sent Events实现双向连接,消息推送

1.4.5. 网页多媒体特性( Class: MULTIMEDIA)

支撑网页端的Audio、Video等多媒体功能。

1.4.6. 三维、图形和特效特性(Class: 3D, Graphics & Effects)

随即无异于招将Flash打败,图形增强,SVG,Canvas,WebGL,2D/3D游戏与页面视觉特效。

1.4.7. 特性和集成特性(Class: Performance & Integration)

从未用户会永远等待你的Loading,HTML5加WebWorker、XMLHttpRequest2

1.4.8.呈现(CSS3/styling)

而外DOM接口,HTML5日增了双重多样化的应用程序接口(API):

HTML5Canvas API:有关动态出现与渲染图形、图表、图像以及动画片的API
HTML5音频和视频:HTML5里新增的因素,它们为开发者提供了同样效通用的、集成的、脚本式的拍卖音频与视频的API,而不管需安装其他插件
离线存储数据库(离线网络应用程序)
编辑
拖放
跨文档通信
通信/网络
Communication APIs:构建实时和跨源(cross-origin)通信的片生基础:
跨文档通信(Cross Document Messaging)与XMLHttpRequest Level 2。
浏览历史管理
MIME和磋商进程时表头登记
微数据
网页存储
如上技术尽管是WHATWG HTML说明文档的情节,但并不曾满包于W3C
HTML5的征文档里。一些相关的技术,像下所列的,并无包括以当下2客文档中之别样一样份吃。W3C给这些技巧单独出版了印证文档。
Geolocation
API:用户可共享地理位置,并于Web应用的相助下享用位置感知服务(location-aware
services)
目录数据库API(Indexed Database API,以前也WebSimpleDB)
文件API:处理公事及传和操纵文件
目及文件系统:这个API是为着满足客户端在尚未好之数据库支持情况下存储要求
文件写入:从网应用程序向文件里写内容
一个广的误会是HTML5力所能及以网页遭到提供动画效果,这是尴尬的,动画效果是得般配JavaScript和CSS。然而静态HTML5郎才女貌CSS可以代表出覆杂的排版结构以原生支持与视频的夹及控制(控制一般由JavaScript运行),因此简单得把HTML5单位时间之状态理解吧动画片的严重性帧。

1.5、HTML5亮点和缺点

1.5.1、优点

1、网络正式联合、HTML5自是由W3C推荐下的。
2、多设备、跨平台
3、即时更新。
4、提高可用性和改良用户的团结体验;
5、有几乎只新的标签,这将推向开发人员定义重要之始末;
6、可以被站点带来更多的多媒体元素(视频及韵律);
7、可以很好之替代Flash和Silverlight;
8、涉及到网站的抓取和目录的当儿,对于SEO很要好;
9、被大量运叫运动应用程序和玩耍。

1.5.2、缺点

a)、安全:像前Firefox4的web
socket和晶莹剔透代理的实现在重的平安问题,同时web storage、web socket
这样的功能非常轻吃黑客利用,来盗窃用户之音与素材。
b)、完善性:许多特点各浏览器的支持程度呢非雷同。
c)、技术门槛:HTML5简化开发者工作的而表示了生过多新的性能与API需要开发者学习,像web
worker、web socket、web storage
等新特色,后台还浏览器原理的学问,机遇之以也是宏大的挑战
d)、性能:某些平台上之引擎问题导致HTML5性能低下。
e)、浏览器兼容性:最要命缺陷,IE9以下浏览器几乎全军覆没。

1.6、HTML5效亮

 HTML5对前版本的话,并非简单的版升级,而是相同不良全面的框架和总体性的晋升及优化;这表现于:语法更简约、新增了汪洋底语义性标签、强大的canvas元素代替flash、丰富的API接口使用大方便了开发者和浏览器的相互。其中,关键提升在:基于HTML5有力的初添框架,如手机端设备和页面进行交互,如重力感应、地理定位、离线操作等,
在主流移动端平台,可以非常自在地起定义性能强劲的webapp,包括打、动画以及企业级的应用开发。

ACCESS 9

CSS3绘制《辛普森同家》

ACCESS 10

HTML5付出的戏

1.7、HTML5上及开发工具

1.7.1、基础要求

HTML+CSS+JavaScript与另一样栽Web服务器后台技术使(Java,dotNET,PHP)

1.7.2、开发工具

主流浏览器,如Chrome浏览器、Firefox浏览器、Safari浏览器、IE9+浏览器、IETester等

HTML5对准开发工具并从未范围,任意的文本编辑器都可以使:webstorm/notepad++

  • zendcode /textMate + zendcode / sublime 2,Visual Studio2013+,Visual
    Studio Code,HBuilder等

苟习惯了eclipse的恋人可以利用HBuilder,eclipse实在未切合用来形容前端脚本(4千万美刀的东西…),

HBuilder是DCloud(数字天堂)推出的同样款支持HTML5的Web开发IDE。它基于Eclipse,所以顺其自然地配合了Eclipse的插件。
赶早,是HBuilder的极充分优势,通过整体的语法提示和代码输入法、代码块等,大幅升级HTML、js、css的开销效率。官网:http://www.dcloud.io/

ACCESS 11

1.8、HTML5语法规则与文档声明

1.8.1、语法规则

a)、标签而小写
属性值不加” “或 ‘ ‘
b)、可以省略某些标签
HTML body head tbody
c)、可以大概某些结束标签
tr td li 
d)、单标签不用加了标签
img input
e)、废除的竹签,看第二点
font center big

1.8.2、文档声明

<!DOCTYPE> 声明必须放在 HTML5 文档中的首先履行,也不怕是坐落
<HTML> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属 HTML
标签,它是一模一样长条指令,告诉浏览器编写页面所用之号子的本。
每当具有 HTML 文档中确定 doctype
是老主要的,这样浏览器就是可知了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而
HTML 5 不根据 SGML,因此不欲对 DTD 进行引用。

1.8.2、文档声明

次、废弃之标签

以下的 HTML 4.01
元素在HTML5蒙受早就被去除,虽然浏览器为兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是直浏览器对新签的支撑过以不够,视项目的受众对象要早晚矣。

2.1、能因此CSS代替的要素 

这些要素包含basefont、big、center、font、s、strike、tt、u。这些因素纯粹是为页面显示用底,表现的始末应由CSS完成。

2.2、frame框架

这些因素包含frameset、frame、noframes。HTML5受不支持frame框架,只支持iframe框架,或者用劳动器方创建的是因为多单页面组成的合乎页面的款型,删除上述就三独标签。

2.3、只有部分浏览器支持的要素

这些元素包含applet、bgsound、blink、marquee等标签。

2.4、其他给抛的要素

废除rb,使用ruby替代
废除acronym使用abbr替代
废除dir使用ul替代
丢掉isindex使用form与input相结合的主意代替
废除listing使用pre替代
废除xmp使用code替代
废除nextid使用guids
扔plaintex使用“text/plian”(无格式正文)MIME类型替代

老三、新增的竹签

3.1、新增的结构标签

于HTML4.01被div被广泛用于各种布局环境在,没有明白的概念,HTML5为了SEO将div语义化了,新添结构标签如下:

a)、section元素 
意味着页面中的一个内容区块,比如章节、页眉、页脚或页面的旁一些。可以跟h1、
h2……等要素构成起来用,表示文档结构。例:HTML5受到<section>……</section>;HTML4受<div>
……</div>。

b)、article元素 
代表页面中千篇一律块以及上下文不相干的独自内容。比如同篇文章。

c)、aside元素 
表示article元素内容之外的、与article元素内容有关的援手信息。

d)、header元素 
表示页面中一个情节区块或真个页面的标题。

e)、hgroup元素 
代表针对确页面或页面中之一个内容区块的题目进行组合。

f)、footer元素 
表示一切页面或页面被一个情节区块的脚注。一般的话,他会包含创作者的人名、创作日期和创作者的联络信息。

g)、nav元素 
表示页面中导航链接的组成部分。

h)、figure元素 
表示同样段独立的流动内容,一般代表文档主体流内容遭之一个单身单元。使用figcaption元素为figure元素组添加标题。例如: 
<figure> 
<figcaption>PRC</figcaption> 
<p>The People’s Republic of China was born in 1949</p> 
</figure> 
HTML4面临常常写作 
<dl> 
<h1>prc</h1> 
<p>The People’s Republic of China was born in 1949</p> 
</dl>

ACCESS 12

示例:

ACCESS 13 View Code

 

运行结果:

ACCESS 14

3.2、新长其它元素

3.2.1、meter

意味着一定范围外的数值,可用于工资、数量、百分比等
max表示无比可怜价值,min表示最好小价,value代表时价。

<meter max="100" min="0" value="60" style="width: 300px;"></meter>

ACCESS 15

足试用js控制为它们从0变化及100。

3.2.2、time

time。表示时间价值,属性datetime强调日
大会时:<time>2015-10-6</time>

<time>2015-10-6</time>
我们在每天早上 <time>8:30</time> 开始上课。 我在<time datetime="2017-02-14">情人节</time>有个约会。

运转效果:

ACCESS 16

 因为拖欠标签是一个语义标签,在浏览器上查看时不曾专门的法力,基本和无设置标签的效用等同。

3.2.3、progress

为此来代表进度长

        <h3>progress</h3>
        <progress value="75" max="100"></progress>

max:最要命价值,完成时之价值

value:当前值

firefox运行结果:

 ACCESS 17

chrome运行结果:

ACCESS 18

3.2.4、datalist

欠标签定义可选数据的列表。与 input
元素配合下,就可打有输入值的下拉列表。

当和input组合时既可做到选择有好输入。

ACCESS 19

ACCESS 20

        <input type="text" list="countries" />
        <datalist id="countries">
            <option value="中国"></option>
            <option value="美国"></option>
            <option value="日本"></option>
        </datalist>

ACCESS 21

ACCESS 22

 ACCESS 23

3.2.5、mark元素 
重中之重用以在视觉及望用户呈现哪些需要突出展示或高亮显示的契。典型以搜索结果受高亮显示搜素关键字。 
HTML5<mark></mark>;HTML4 <span></span>。

3.2.6、ruby元素 
概念 ruby 注释(中文注音或字符)。 
以及 <ruby> 以及 <rt> 标签一同以。ruby
元素由一个要么多独字符(需要一个说明/发音)和一个供该消息的 rt
元素组成,还连但摘的 rp 元素,定义当浏览器不支持 “ruby”
元素时展示的情节。 
<ruby> 

<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> 
</ruby>

3.2.7、rt元素 
概念字符(中文注音或字符)的说还是发音。

3.2.8、rp元素 
在 ruby 注释中行使,以定义不支持 ruby 元素的浏览器所出示的内容。

3.2.9、wbr元素 
表示软换行。与br元素的区别:br元素表示此必须换行;wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时),不换行,而宽不够时积极在这边换行。

3.2.10、canvas元素 
概念图形,比如图片以及任何图像。<canvas>
元素只是图容器(画布),必须采用下本来绘制图形。 
<canvas id=”myCanvas”></canvas><script
type=”text/javascript”> 
var canvas=document.getElementById(‘myCanvas’); 
var ctx=canvas.getContext(‘2d’); 
ctx.fillStyle=’#FF0000′; 
ctx.fillRect(0,0,80,100); 
</script>

3.2.11、command元素
表示命令按钮,比如单选按钮、复选框或按钮。
惟有当 command 元素位于 menu
元素内经常,该因素才是可见的。否则不见面显示是元素,但是足以用它规定键盘快捷键。。 
<menu> 
<command onclick=”alert(‘Hello World’)”> 
Click Me!</command> 
</menu>

3.2.12、details标签 
用于描述文档或文档某个部分的细节 。 
而和 summary 标签配合以,summary可以为 details
定义标题。标题是可见的,用户点击标题时,会来得有
details。summary应该是details的首先个子元素。

3.2.14、datalist标签 
概念选项列表。请与 input 元素配合以该因素,来定义 input
可能的价值。datalist
及其选项不见面给显示出来,它不过是合法的输入值列表。使用 input 元素的 list
属性来绑定 datalist。

3.2.15、output标签 
概念不同种类的出口,比如脚本的输出。 
<form action=”form_action.asp” method=”get” name=”sumform”> 
<output name=”sum”></output> 
</form>

3.2.16、menu标签 
概念菜单列表。当期列出表单控件时以该标签。注意与nav的分,menu专门用于表单控件。

3.3、多媒体标签

倘急需以页面中播放音频与视频我们常会就此用的不二法门有:

a)、embed

<embed
src=’http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf’
allowFullScreen=’true’ quality=’high’ width=’480′ height=’400′
align=’middle’ allowScriptAccess=’always’
type=’application/x-shockwave-flash’></embed>

<embed src=”img/iceage4.mp4″></embed>

b)、使用flash播放器

只要一些老三正值插件,flowplayer602

html5多媒体组件指的是video(视频)组件和audio(音频)组件。HTML5多媒体组件可以当无指诸如Flash
Player等第三方插件的气象下,直接以公的网页上嵌入多媒体组件。浏览器提供原生支持视频的新力量让网页开发人员更易在非因让外置插件有效性的状下,在他们的网站上上加视频组件。由于苹果公司时当iPhone和iPad上采用的Flash技术的局限性,HTML5多媒体组件的力就是亮越来越重要了。

3.3.1、video视频标签

用以在播音视频,电影

标签基本格式如下:

ACCESS 24

ACCESS 25

        <video width="800" height="600" controls="controls" poster="content/1.jpg">
            <source src="content/iceage4.mp4" type="video/mp4"></source>
            <source src="content/iceage4.webm" type="video/webm"></source>
            <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                <param name="movie" value="myvideo.swf" />
                <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
            </object>
            当前浏览器不支持 video直接播放,点击这里下载视频: <a href="content/iceage4.webm">下载视频</a>
        </video>

ACCESS 26

ACCESS 27

运作效果:

ACCESS 28

source是望频源,可以生出多种,当一栽失败时将择生一样种,主要出如下3栽:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

格式支持情况:

ACCESS 29

 标签属性:

ACCESS 30

 source子标签属性:

 ACCESS 31

video API方法

ACCESS 32

video API属性

ACCESS 33

video API事件

ACCESS 34

注意:

        <video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg">
            您的浏览器太老了,请升级,视频下载<a href="#">地址</a>
        </video>

多数之HTML5签的innerHTML内容是浏览器不支持该标签时显示的情。

事件绑定与监听的分别:

ACCESS 35

ACCESS 36

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件绑定与监听的区别</title>
    </head>

    <body>
        <button id="btnA">按钮A</button>
        <button id="btnB">按钮B</button>
        <script type="text/javascript">
            var btnA = document.getElementById("btnA");
            var btnB = document.getElementById("btnB");
            btnA.onclick = function() {
                alert("你点了一下");
            }
            btnA.onclick = function() {
                alert("你又点了一下");
            }

            btnB.addEventListener("click",function(event){
                alert("你点了一下");
            },false);

            btnB.addEventListener("click",function(event){
                alert("你又点了一下");
            },false);
        </script>
    </body>

</html>

ACCESS 37

ACCESS 38

运转结果:

ACCESS 39

运用on事件称为之款式绑定事件后绑定会蒙前绑定的风波,也就是是终极一个绑定的轩然大波会收效;

动addEventListener绑定事件则不见面盖,可又于一个素上绑定多单相同之风波。

video API的性能和事件示例:

ACCESS 40

ACCESS 41

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Video 标签</title>
    </head>
    <body>
        <video id="videoIce" width="800" height="600" controls="controls" poster="content/1.jpg">
            <source src="content/iceage4.mp4" type="video/mp4"></source>
            <source src="content/iceage4.webm" type="video/webm"></source>
            <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                <param name="movie" value="myvideo.swf" />
                <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
            </object> 当前浏览器不支持 video直接播放,点击这里下载视频:
            <a href="content/iceage4.webm">下载视频</a>
        </video>
        <h2>
            <button onclick="play()">播放</button>
            <button onclick="pause()">暂停</button>

        </h2>
        <script type="text/javascript">
           var videoIce=document.getElementById("videoIce");
            function play() {
                videoIce.play();
            }

            function pause() {
                videoIce.pause();
            }

            videoIce.ontimeupdate = function() {
                document.getElementById("msg").innerHTML=videoIce.currentTime;
            }
        </script>
    </body>

</html>

ACCESS 42

ACCESS 43

运作结果:

ACCESS 44

 练习:

ACCESS 45

3.3.2、audio音频标签

 audio可以兑现播放声音,音乐效果。

<audio src=http://baidu/demo/test.mp3 controls >
汝的浏览器不支持audio元素
</autio>

<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"></audio>

 ACCESS 46

audio标签的性,很多属性都是跟video相同的:

autoplay:true|false,如果是 true,则音频在稳后当即播放。 
controls:true|false 如果是true,则为用户展示控件,比如播放按钮。 
end:numeric value
定义播放器在音频流中的哪里停止播放。默认地,声音会播放到终极。 
loopend:numeric value 定义在音频流中循环播放停止的岗位,默认是 end
属性的值。 
loopstart: numeric value 定义在音频流中循环播放的开头位置。默认是 start
属性的价。 
playcount: numeric value 定义音频片断播放多少坏。默认是 1。 
src: url 所播放音频的 url。 
start : numeric value
定义播放器在音频流中初露播报的职。默认地,声音以起进行播放。

source子标签

使用source元素作为多媒体元素的子标签
例:
<audio>
<source src=’test.mp3’ type=’audio/mpeg’/>
<source src=’test.ogg’ type=’audio/ogg’/>
<source src=’test.spx’ type=’audio/ogg’/>
</audio>
采用source元素,浏览器在列表顺序查找,直到找到一个它们亦可播放的文件格式,找到后,就播放该公文并忽略随后的别元素。

audio的API与video基本雷同,下面是一个自定义调整音量的演示:

ACCESS 47

ACCESS 48

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>audio标签</title>
    </head>
    <body>
        <h2>audio标签</h2>
        <audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3">
            <marquee><h2>换个浏览器吧,太老了</h2></marquee>
        </audio>
        <input type="range" min="0" max="100" onchange="setVolume(this)" />  
        <script type="text/javascript">
            function setVolume(obj){
                document.getElementById("mp3").volume=obj.value*0.01;
            }
        </script>
    </body>
</html>

ACCESS 49

ACCESS 50

运转结果:

ACCESS 51

高低只于0-1中。

3.3.3、embed元素 

故而来放开内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例:<embed
src=”flash.swf” /> 
HTML4惨遭代码示例<object data=”flash.swf”
type=”application/x-shockwave-flash”><object>

四、HTML5兼容性

至今多数现代浏览器对HTML5的支撑就死高了,特别是移动端,但HTML5尚是在一些标签的兼容性问题的,只要世界上还发1单以上之浏览器就会见存在兼容问题,

4.1、兼容性测试

1、当前浏览器HTML5支持情况在线测试:http://www.html5test.com/

IE8浏览器,得分33分,共555分

ACCESS 52

Chrome浏览器,54版,共555分,得分499分

ACCESS 53

2、当前浏览器对HTML5、CSS3的支撑情况:http://www.findmebyip.com/

ACCESS 54

ACCESS 55

3、各个浏览器对HTML5、CSS3支持情况大全:http://www.caniuse.com/

足用于测试指定的HTML,CSS3,JavaScript新技巧,以Web SQL
Database的支持情况为例:

ACCESS 56

4.2、HTML5向下兼容

4.2.1、兼容测试

呢底测试兼容性,做一个大概的演示,脚本如下:

ACCESS 57

ACCESS 58

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <style type="text/css">
            #section1{
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <section id="section1"></section>
    </body>
</html>

ACCESS 59

ACCESS 60

IE8浏览效果:

ACCESS 61

为何非显示,因为IE8不识section这个HTML5签,浏览器测试结果如下:

ACCESS 62

从今IE9开始才有的支撑HTML5饱受之签。

4.2.2、html5shiv

html5shiv可以经充分粗略的JavaScript让IE6-IE9浏览器还支持HTML5遭到之因素
HTML5 Shiv这得于具备考古价值之Internet
Explorer支持HTML5互相关元素,同时也IE6-9, Safari 4.x (以及iPhone 3.x),
以及Firefox 3.x资基本的HTML5样式。
品种地址:https://github.com/aFarkas/html5shiv

下载后当页面被引入插件,代码如下:

ACCESS 63

ACCESS 64

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <!--[if lt IE 9]>
          <script src="js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
        <![endif]-->
        <style type="text/css">
            #section1 {
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <section id="section1"></section>
    </body>
</html>

ACCESS 65

ACCESS 66

运行效果:

ACCESS 67

可观看在IE8下虽会健康下section了,但是建议在非支持HTML5的浏览器中避免使用HTML5签,可以就此div替代;

除此以外不要觉得使用了此大概的插件后有所的HTML5意义以不支持HTML5的浏览器被还起了,它只是做了概括的匹配功能,如

video标签在IE8中不能够采取,使用了该插件后仍然未可知播放视频。

4.2.3、Modernizr

Modernizr 是一个用来检测浏览器功能支撑情况的 JavaScript 库。
目前,通过查浏览器对同名目繁多测试的拍卖状态,Modernizr 可以检测18宗 CSS3
功能以及40差不多项有关HTML5 的机能。
它比传统检测浏览器名称(浏览器嗅探)的法进一步可靠。
一整套测试的实行时间只有用几稍微秒。 此外,Modernizr
网站通过定制脚本只对您感兴趣的元素进行检测,从而实现效率优化。
https://modernizr.com/

此为CSS3面临的线性渐变成例子,在支撑CSS3的浏览器采用渐变,如果非支持则利用图片,先生成为检测的js:

ACCESS 68

引入插件后的剧本如下:

ACCESS 69

ACCESS 70

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <style type="text/css">
            #div1 {
                height: 100px;
                background:linear-gradient(#36f,#9cf);
            }
            .no-cssgradients #div1{
                background:url(content/bg.png) repeat-x;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <script src="js/modernizr-custom.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

ACCESS 71

ACCESS 72

 

ACCESS 73

ACCESS 74

运插件后,当页面运行时会自动检测浏览器是否支持有特定的功效,如果支持则会以html标签上补偿加一个好像样式而:cssgradients,如果无支持则会加加一个像样样式:no-*,如no-cssgradients。 

Modernizr.video   //在js中判断是否支持video标签

ACCESS 75

五、示例下载

 示范下载:github

参照:http://www.cnblogs.com/best

相关文章