您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • HTML5学习教程六 HTML5 Canvas

    HTML5学习教程六 HTML5 Canvas

    HTML5学习教程HTML5 Canvas

    canvas 元素用于在网页上绘制图形。
    什么是 Canvas?
    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
    画布是一个矩形区域,您可以控制其每一像素。
    canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    下面jQuery吧创建 Canvas 元素
    向 HTML5 页面添加 canvas 元素。
    规定元素的 id、宽度和高度:

    <canvas id="myCanvas" width="200" height="100"></canvas>

    通过 JavaScript 来绘制
    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

    JavaScript 使用 id 来寻找 canvas 元素:

    var c=document.getElementById("myCanvas");

    然后,创建 context 对象:

    var cxt=c.getContext("2d"); getContext("2d")

    对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    下面的两行代码绘制一个红色的矩形:

    cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75); 

    fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
    理解坐标
    上面的 fillRect 方法拥有参数 (0,0,150,75)。
    意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
    如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
    ct_html5_canvas_coordinates

    <!DOCTYPE HTML><html><head><style type="text/css"> body{font-size:70%;font-family:verdana,helvetica,arial,sans-serif;}</style><script type="text/javascript"> function cnvs_getCoordinates(e){x=e.clientX;y=e.clientY;document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";} function cnvs_clearCoordinates(){document.getElementById("xycoordinates").innerHTML="";}</script></head><body style="margin:0px;"><p>把鼠标悬停在下面的矩形上可以看到坐标:</p><div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div><br /><br /><br /><div id="xycoordinates"></div> </body></html>

    Canvas 实例:理解坐标
    实例:把鼠标悬停在矩形上可以看到坐标
    更多 Canvas 实例
    下面的在 canvas 元素上进行绘画的更多实例:
    实例 - 线条
    通过指定从何处开始,在何处结束,来绘制一条线:
    Canvas 实例:线条
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

    亲自试一试

    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script></body></html>

    实例 - 圆形
    通过规定尺寸、颜色和位置,来绘制一个圆:
    ct_html5_canvas_circle
    Canvas 实例:圆形
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script></body></html>

    亲自试一试

    实例 - 渐变
    使用您指定的颜色来绘制渐变背景:
    ct_html5_canvas_gradient
    Canvas 实例:渐变
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script></body></html>

    亲自试一试

    实例 - 图像
    把一幅图像放置到画布上:
    ct_html5_canvas_image
    Canvas 实例:图像
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="flower.png"cxt.drawImage(img,0,0);</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

    亲自试一试

    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="/i/eg_flower.png"cxt.drawImage(img,0,0);</script></body></html>
  • 移动前端制作之自适应制作

    移动前端制作之自适应制作

    随着移动前端的手机屏幕分辨率越来越多,自适应设计制作显得越来越重要。如何自适应屏高和屏宽是每个设计和制作人员共同需要考虑的事情。设计人员需要考虑N多分辨率的情况,而制作人员则需要考虑如何自适应布局等等。

    我先从设计的角度来阐述这个问题,首先要考虑如何进行自适应设计。这个需要和制作人员进行沟通后决定,如果制作人员采用响应式布局(稍后会介绍此布局)的制作方案的话,则需要设计人员根据不同的屏宽来设计不同的效果图以便提供给制作人员进行响应式布局制作。如果制作人员采用高宽最大化(稍后会介绍此布局)来进行布局制作的话,则需要设计人员提供一个最合理的分辨率设计效果图来适应主流的所有分辨率屏幕的手机。

    一、响应式布局

    相应式布局的核心内容其实就是使用CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

      <link rel=”stylesheet” type=”text/css”media=”screen and (max-device-width: 400px)”href=”tinyScreen.css” />

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

     <link rel=”stylesheet” type=”text/css”media=”screen and (min-width: 400px) and (max-device-width: 600px)”href=”smallScreen.css” />

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

     @import url(“tinyScreen.css”) screen and (max-device-width: 400px);

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

      @media screen and (max-device-width: 400px) {.column { float: none; width:auto;}#sidebar { display:none;}}

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    以上所述就是响应式布局,主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适应的制作。这种方法比较布局灵活,一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是,设计成本和制作成本都较高,需要做不同的设计模版和页面模版,花费的时间较长。

    二、高宽最大化

    所谓的高宽最大化是我自定义的名称,其意思是说,只设计一个模版,这个模版无论是从宽度上还是高度上,都做成最大比例的设计图,例如:IOS的iphone系列它们的显示比例宽高之比为:2:3。iphone5显示比例约小些。而安卓系列品牌较杂,不同品牌不同的分辨率,即使同一品牌不同型号也有不同分辨率的。这个很纠结。

    但大体上可以分为。2:3、3:4、3:5这三种比值。所以,为了兼容所有的浏览器,在设计图的时候要采用比值最小的为基本蓝图。即3:5的比例,也就是说以高度最高的为基本蓝图。为什么要这么做?以下来解释:

    这里需要用到CSS3的几个重要属性即:

    -webkit-background-size:100% 100%;

    此属性为背景尺寸自动100%进行平铺和拉伸,我们可以使用这个尺寸来进行设置。第一个100%为X轴,第二个100%为Y轴。我们可以把Y轴的比例设置成auto。同时配合background-position属性来使用就可以达到自适应目的。如果我们想取图的上半部分则可以设置background-position:top;即可。这样当设计图做成3:5的分辨率时就会可以适应所有手机浏览器,3:5的手机自然是全屏。而2:3或是3:4的手机浏览器有了以上两种CSS样式控制就可以做到宽度全屏。而高度则根据background-position:top;取图的上半部分从而也是全屏(只是高度从上往下取到4,而未到5)。举个实际像素大家就明白了。比如一张效果图是320*516像素的。3:5高度的就是320*516,而2:3比例的则取图的320*480部分。下面的高度36像素就不取了。用这种方法达到全屏自动适应的目的。而内容部分高度和宽度都使用100%或是auto来进行设置即可。字体样式则采用em而非px。就可以了。

    此方法有些笨拙,但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。

  • HTML5布局教程

    HTML5布局教程

    html5基本布局
    1

    html5结构代码

    <!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header> <hgroup> <h1>html5结构代码</h1> <h2>HTML5布局教程</h2> </hgroup></header><nav> <ul> <li></li> <li></li> </ul> <</nav><section> <article></article> <aside></aside></section><section></section><footer></footer></body></head>

    html5详细页布局
    2
    html5结构代码

    <!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header> <hgroup> <h1>HTML5布局教程</h1> <h2>html5详细页布局</h2> </hgroup></header><nav> <ul> <li></li> <li></li> </ul> <</nav><article> <hgroup></hgroup> <section></section></article><aside></aside><footer></footer></body></head>
  • 如何让IE系列支持header、nav、section、article、aside、footer等HTML5标签

    如何让IE系列支持header、nav、section、article、aside、footer等HTML5标签

    习惯用了火狐,谷歌浏览器的,可是子啊IE系列中html5代码标签用不了,请原谅我依然坚守XP系统。
    那么如何让IE系列支持header、nav、section、article、aside、footer等HTML5标签呢?

    让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。

    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。

    这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。

    以下是html5的js文件中的代码:

    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

    除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。

    <!--[if IE]><script>(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()</script><![endif]-->

    还有布局中有用到

    <header>、<nav>、<section>、<article>、<aside>、<footer>

    首先css样式给他们渲染个

    header, footer, article, section, nav, menu, hgroup {display: block;}

    IE6-IE8都无法去解析

    <section>

    等标签,不过我们可以用一小段JS代码来修正它,用document.createElement(tagName) 来创建未知的元素IE的解析器会识别出这些元素

    <script type="text/javascript">document.createElement("section");document.createElement("article");document.createElement("footer");document.createElement("header");document.createElement("hgroup");document.createElement("nav");document.createElement("menu");</script>
  • HTML5学习教程五 HTML5拖放

    HTML5学习教程五 HTML5拖放

    HTML5学习教程五 HTML5拖放
    刚升级了wordpress看看 好使不?
    1
    HTML5 拖放(Drag 和 drop)是 标准的组成部分。

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
    浏览器支持
    Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

    注释:在 Safari 5.1.2 中不支持拖放。

    下面的例子是一个简单的拖放实例:

    <!DOCTYPE HTML><html><head><script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" /></body></html>

    它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。
    设置元素为可拖放

    首先,为了使元素可拖动,把 draggable 属性设置为 true :

    拖动什么 - ondragstart 和 setData()

    然后,规定当元素被拖动时,会发生什么。

    在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

    dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
    放到何处 - ondragover

    ondragover 事件规定在何处放置被拖动的数据。

    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()

    进行放置 - ondrop

    当放置被拖数据时,会发生 drop 事件。

    在上面的例子中,ondrop 属性调用了一个函数,drop(event):

    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }

    代码解释:

    调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
    通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    被拖数据是被拖元素的 id ("drag1")
    把被拖元素追加到放置元素(目标元素)中

  • HTML5学习教程四 HTML5音频

    HTML5学习教程四 HTML5音频

    HTML5学习教程四 HTML5音频
    HTML5 提供了播放音频的标准。
    Web 上的音频

    直到现在,仍然不存在一项旨在网页上播放音频的标准。

    今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

    HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

    audio 元素能够播放声音文件或者音频流。
    音频格式

    当前,audio 元素支持三种音频格式:
    IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
    Ogg Vorbis √ √ √
    MP3 √ √ √
    Wav √ √ √
    如何工作

    如需在 HTML5 中播放音频,您所有需要的是:

    <audio src="song.ogg" controls="controls"></audio>

    control 属性供添加播放、暂停和音量控件。

    audio 之间插入的内容是供不支持 audio 元素的浏览器显示的:
    实例

    <audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>

    上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

    要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

    audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
    实例

    <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>

    Internet Explorer

    Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。

    如果出现该属性,则音频在页面加载时进行加载,并预备播放。

    如果使用 "autoplay",则忽略该属性。
    src url 要播放的音频的 URL。

  • HTML5学习教程三 HTML5 video – 使用 DOM 进行控制

    HTML5学习教程三 HTML5 video – 使用 DOM 进行控制

    HTML5学习教程三 HTML5 video - 使用 DOM 进行控制
    HTML5 video - 使用 DOM 进行控制
    HTML5 video 元素同样拥有方法、属性和事件。

    其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,video 元素开始播放、已暂停,已停止,等等。

    下例中简单的方法,向我们演示了如何使用 video 元素,读取并设置属性,以及如何调用方法。
    实例

    为视频创建简单的播放/暂停以及调整尺寸控件:

    调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。

    <!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video></div> <script type="text/javascript">var myVideo=document.getElementById("video1");function playPause(){ if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig(){ myVideo.width=560; } function makeSmall(){ myVideo.width=320; } function makeNormal(){ myVideo.width=420; } </script> </body> </html>

    HTML5 video - 方法、属性以及事件

    下面列出了大多数浏览器支持的视频方法、属性和事件:

    方法 属性 事件play() currentSrc playpause() currentTime pauseload() videoWidth progresscanPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width 

    注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

  • HTML 5 学习教程二 HTML5视频

    HTML 5 学习教程二 HTML5视频

    HTML 5 学习教程二 HTML5视频

    许多时髦的网站都提供视频HTML5 提供了展示视频的标准。

    Web 上的视频
    直到现在,仍然不存在一项旨在网页上显示视频的标准。
    今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
    HTML5 规定了一种通过 video 元素来包含视频的标准方法。
    视频格式
    当前,video 元素支持三种视频格式:
    格式 IE Firefox Opera Chrome Safari
    Ogg No 3.5+ 10.5+ 5.0+ No
    MPEG 4 9.0+ No No 5.0+ 3.0+
    WebM No 4.0+ 10.6+ 6.0+ No
    Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
    MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
    WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

    如何工作
    如需在 HTML5 中显示视频,您所有需要的是:

    <video src="movie.ogg" controls="controls"></video>

    control 属性供添加播放、暂停和音量控件。
    包含宽度和高度属性也是不错的主意。

    <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:实例<video src="movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag.</video>

    上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
    要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
    video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
    实例

    <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>

    Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
    video标签的属性
    属性 值 描述
    autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
    height pixels 设置视频播放器的高度。
    loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
    preload preload
    如果出现该属性,则视频在页面加载时进行加载,并预备播放。
    如果使用 "autoplay",则忽略该属性。
    src url 要播放的视频的 URL。
    width pixels 设置视频播放器的宽度。

  • HTML 5 学习教程一 HTML5简介

    HTML 5 学习教程一 HTML5简介

    HTML 5 学习教程一 HTML5简介
    什么是 HTML5?

    HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 是下一代的 HTML。

    HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

    HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
    HTML5 是如何起步的?

    HTML5 是 W3C 与 WHATWG 合作的结果。

    编者注:W3C 指 World Wide Web Consortium,万维网联盟。

    编者注:WHATWG 指 Web Hypertext Application Technology Working Group。

    WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

    为 HTML5 建立的一些规则:

    新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
    减少对外部插件的需求(比如 Flash)
    更优秀的错误处理
    更多取代脚本的标记
    HTML5 应该独立于设备
    开发进程应对公众透明

    新特性

    HTML5 中的一些有趣的新特性:

     用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、search

    浏览器支持

    最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!