设为首页收藏本站
切换到窄版

 找回密码
 用户注册

QQ登录

只需一步，快速开始

ACE Developer»论坛 › 其它技术研讨 › 其它语言及技术 › 五分钟学会HTML5！
返回列表 发新帖
查看: 4958|回复: 1

五分钟学会HTML5！

[复制链接]
发表于 2012-1-13 18:18:44 | 显示全部楼层 |阅读模式
来自【iTran乐译】第2期活动，第8篇文章 。
毫无疑问，对于开发人员而言，HTML5已是一个热点话题。如果你需要快速了解HTML5的功能的基本原理，阅读本文是你最好的选择。
本文来自The Code Project的付费搜索位置，由Solution Center提供。这里的文章致力于向大家提供我们认为对开发人员来说有用和有价值的产品和服务的相关信息。
由和HTML5 / CSS3 Zone带来 。
本文会涵盖新的语义标签、为绘图和动画而设计的画布（canvas）、音频和视频支持，以及在旧版浏览器上如何使用HTML5。看完这些内容所用的时间可能会比五分钟多一点点，但我保证会讲得快一些。请接着看下去，下面的内容肯定值得你这么做！
语义标签和页面布局
我们首先讲一个关于一所大学的经典故事。这所大学在建设校园草地时，没有开辟任何步行小道，他们把整个空地种上草，然后等待。
一年以后，人们经常走过的地方，草都被踩光了。于是，这所大学就将这些地方铺设为真正的人行道。
棒极了！这些人行道是人们真正“走”出来的。
HTML5新语义元素的诞生正是基于同样的逻辑。（关于这一点，可以参看W3C设计指南中的“Pave the Cowpaths”。）
语义元素清晰地向浏览器和开发人员表明了它们的涵义和用途，要理解这一点，可以将它们与< div>标签进行对比。在HTML文件内，< div>标签能定义出一个分区或者一个小节，但是它无法告诉我们分区里的内容，不能传达任何清晰的涵义。
开发人员通常会将ID或者类名与< div>标签配合使用，这会向程序员传达更多的涵义。但遗憾的是，这并不能帮助浏览器领会那种标签的用途。< div id="header">
在HTML5中，有不少新的富含语义的元素，可以向浏览器和开发人员传达元素的用途。< header>
W3C挖掘了数亿个的Web页面，找出开发人员一直在使用的ID和类名。一旦开发人员抛出div1、div2这些无意义标签，他们就得到了一个描述非常细致的已经在使用的元素的列表，并让其成为W3C的标准设置。
下面是HTML5的一部分新的语义元素：
• article
• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• time
由于这些元素的语义很丰富，相信你可能会猜出其中大部分元素的作用。
为了说得更清楚，下面给出一张图示。
header和footer的作用不言自明，nav将创造一个导航条或者菜单条。此外，你可以用section和article将页面内容分为几个部分。最后，aside元素用来安置附带的内容，比如说，以边栏的形式放上一些相关链接。
下面是一个简单的例子，其中的代码就用到了这些元素。
<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>Title</title>    <link href="css/html5reset.css" rel="stylesheet" />    <link href="css/style.css" rel="stylesheet" /></head><body>    <header>        <hgroup>            <h1>Header in h1</h1>            <h2>Subheader in h2</h2>        </hgroup>    </header>    <nav>        <ul>            <li><a href="#">Menu Option 1</a></li>            <li><a href="#">Menu Option 2</a></li>            <li><a href="#">Menu Option 3</a></li>        </ul>    </nav>    <section>        <article>            <header>                <h1>Article #1</h1>            </header>            <section>                This is the first article.  This is <mark>highlighted</mark>.            </section>        </article>        <article>            <header>                <h1>Article #2</h1>            </header>            <section>                This is the second article.  These articles could be blog posts, etc.              </section>        </article>    </section>    <aside>        <section>            <h1>Links</h1>            <ul>                <li><a href="#">Link 1</a></li>                <li><a href="#">Link 2</a></li>                <li><a href="#">Link 3</a></li>            </ul>        </section>        <figure>            <img width="85" height="85"                 src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"                 alt="Jennifer Marsman" />            <figcaption>Jennifer Marsman</figcaption>        </figure>    </aside>    <footer>Footer - Copyright 2011</footer></body></html>
当然，在这个例子里，我也引出了另外几个新元素。
不知道你是否注意到hgroup元素，它将h1和h2这两个header组合到一起了？
我们可以用mark元素将重要文本高亮显示或标记出来。如果要在内容中插入一张图（图像、图表、照片和代码片段等），可以使用figure元素。而figcaption元素能为图加上标题。当把以上代码和一些CSS代码组合后，得到的Web页面如下图所示。（注：这里的CSS部分来自我博学多才的同事Brandon Satrom所写的TechEd talk，而其他与页面美化无关的效果都是我做的。）
在一些擅长CSS的朋友（可惜我不擅长CSS）的帮助下，上面这个结果看起来靓爆了！实际上，有了HTML的描述性，完成这个页面非常容易。
还要说明一点，如果你是Visual Studio的拥趸，请确保已经安装了Visual Studio 2010 SP1。否则，你将发现Visual Studio并不理解HTML5元素，从而导致Web页面上到处是歪歪曲曲的线条。
然后，在Visual Studio菜单中依次选择“Tools”-“Options”，打开一个“Options”对话框。从左侧的导航面板，依次展开“Text Editor”和“HTML”，单击“Validation”。在“Target”下拉列表框中选择HTML5，这样就能得到对HTML5 IntelliSense的支持了。
为了深入理解语义元素，请访问以下链接：
使用Canvas元素在HTML5中进行绘画
HTML5中另外一个新元素是< canvas>标签。顾名思义，它就是一块用来绘画的空白平面。你需要使用JavaScript在这块画布上进行操作和绘画。
你可能需要为canvas元素赋予一个id属性，这样就能通过JavaScript代码以编程的方式访问它。如果你正在使用jQuery，并且在页面上只有一个canvas，你可以使用$(‘canvas’)来访问它，而不用为它命名。
你也可以为canvas指定height（高度）和width（宽度），但这不是必需的。在< canvas> 和< /canvas>标签之间，你还可以指定一些文本，显示在不支持canvas元素的浏览器中。
下面是使用canvas进行绘画的一个简单例子。（我希望画一张苏格兰国旗，如果画得不是非常精确，请见谅。）
<!DOCTYPE HTML><html><body>    <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>    <script type="text/javascript">        var canvas = document.getElementById('myCanvas');        var ctx = canvas.getContext('2d');        // Draw blue rectangle        ctx.fillStyle = '#0065BD';        ctx.fillRect(0, 0, 125, 75);        // Draw white X        ctx.beginPath();        ctx.lineWidth = "15";        ctx.strokeStyle = "white";        ctx.moveTo(0, 0);        ctx.lineTo(125, 75);        ctx.moveTo(125, 0);        ctx.lineTo(0, 75);        ctx.stroke();    </script></body></html>
上面的代码将生成以下结果。
现在我们从头到尾分析一下代码。
首先，我创建了一块画布（canvas），并为它赋予了一个ID叫“myCanvas”。如果运行这段代码的浏览器不支持canvas元素，它就会在旗帜原本要出现的位置显示“Your browser does not support the canvas tag”。
接下来，我编写了一段脚本。记住，canvas标签只是一个用来画图的容器，你必须用JavaScript来画图并将其呈现出来。我首先通过使用ID“myCanvas”获得了对canvas的一个引用，然后得到canvas的上下文。上下文所提供的方法和属性，都可以用来在canvas上操作图形和进行绘画。这里指定了参数“2d”，表示我将在2维的环境中来进行绘画。
第三步，完成蓝色矩形的绘画。我用fillStyle方法指定了矩形的颜色为蓝色，再用fillRect方法画出了矩形，后者的参数指定了矩形的大小与位置。fillRect(0, 0, 125, 75)表示：从左上角的顶点（0,0）开始画一个矩形，宽为125像素，高为75像素。
最后，我在旗帜上画出了一个白色的“X”。我首先调用beginPath方法启动画路径的进程。指定的lineWidth属性值（也就是路径的宽度）为15像素，这是通过不断猜想加尝试才找到的看起来最合适的值。另一个属性strokeStyle则被指定为“white”，以表示路径颜色为白色。接下来，依靠moveTo和lineTo两个方法描绘出了整个路径。这两个方法都会定位出一个用来绘图的光标，其区别在于：前者移动光标的时候不会画出一条线，而后者在移动的同时会画线。在画X的过程中，首先从（0,0）——左上角开始，然后画一条线到（125,75）——右下角。接着把光标移到（125,0）——右上角，一笔画到（0,75）——左下角。最后的stroke方法将真正地呈现这些笔画。
canvas与SVG的简单对比
可缩放矢量图形（Scalable Vector Graphics，简称SVG）是在浏览器窗口进行绘画的一个早期标准。随着HTML5的canvas的发布，许多人都想知道它们之间到底孰优孰劣。
在我看来，它们之间最大的区别就是：canvas使用立即呈现模式，而SVG使用保留呈现模式。这意味着，canvas可以让所画的图形立即呈现在显示器里。在上面给出的代码中，一旦旗帜画完，系统就会“忘掉”它，且不会有任何状态保留下来。如果对它进行改动，将会导致彻底的重画。与之相比，SVG保留了所呈现对象的一个完整模型。要对图做出改动时，你只需要指出改动的地方（例如矩形的新位置），浏览器来负责呈现新的图形。这节省了开发人员的工作，但也为维护模块付出了性能上的代价。
能够同时通过CSS和JavaScript来进行设计，是SVG另一个值得称道的优点。与之相比，canvas只能通过JavaScript来进行操作。
两者其他的区别如下表所示。
如果想了解更多细节的不同之处，推荐你去阅读下面一些文章（前面的表就是经过作者同意后从下面的文章里拿来的）。
音频和视频支持
HTML5最大的新特色之一就是支持音频和视频。在HTML5之前，我们必须使用插件如Silverlight或Flash来实现这些功能。在HTML5中，你可以直接使用新标签< audio> 和 < video>将音频和视频嵌入到页面。
从编码的角度来看，audio和video元素使用起来很简单（下面我会深入地谈到它们的一些属性）。所有的主流浏览器都支持audio和video元素，包括最新版本的IE、Firefox、Chrome、Opera和Safari。虽然如此，有一点很关键：你需要编码解码器去播放音频和视频，而不同的浏览器支持的编码解码器是不同的（想要进一步了解视频容器和编码解码器，可以访问链接http://diveintohtml5.org/video.html）。幸运的是，这不会成为技术障碍，因为HTML5对音频和视频的支持方式非常灵活（各个浏览器支持的音频和视频格式一般有好几种，它会轮流使用这几种格式去播放音频和视频）。*当然，你最好提供多种格式的音频和视频源，以满足不同浏览器的需求。*此外，你还可以继续使用Silverlight或Flash插件。最后，在开始和结束标签（例如< audio> 和 < /audio>）之间的文本，会在浏览器不支持audio或video元素的时候显示到web页面上。
例如：
<audio controls="controls">    <source src="laughter.mp3" type="audio/mp3" />    <source src="laughter.ogg" type="audio/ogg" />    Your browser does not support the audio element.</audio>
执行这段代码时，浏览器将首先试图播放laughter.mp3文件。如果没有合适的编码解码器去播放，它会转向播放下一个文件laughter.ogg。如果浏览器根本不认识audio元素，它会在音频控件的位置显示文本“Your browser does not support the audio element”。
关于音频和视频，需要警告大家的是：HTML5并没有内置的数字版权管理（digital rights management，简称DRM）支持，作为开发人员，你必须自己实现它。关于这个话题，可以参看这里。（如果你需要DRM内容，也可以试试Silverlight DRM documentation，它或许是更便捷的解决方案。）
现在，让我们深入探讨这两个新元素。
音频
首先，让我们看看< audio>的更多细节。
<audio controls="controls">    <source src="laughter.mp3" type="audio/mp3" />    <source src="laughter.ogg" type="audio/ogg" />    Your browser does not support the audio element.</audio>
前面已经介绍过，浏览器会依次尝试播放每个音频源，直到找到一个能播放的源。
注意这里多了一个controls属性。使用这个属性后，浏览器将显示音频回放控件，包括播放/暂停按钮、时间显示控件、静音按钮和音量控件。在绝大多数情形下，把这些控件展示给用户是明智的。我非常讨厌打开一个网页时有声音响起，而且没法把它停止、静音或者调低，难道你不是这样？
在IE浏览器中，各种音频控件如下图所示。
在不同的浏览器中，这些控件的外观并不一样。Chrome浏览器中的音频回放控件如下图所示（它正在播放一首歌）。当你的鼠标指针悬停在整个控件最右边的声音图标上时，将会弹出一个下拉式的音量控制条。
下图是Firefox中的控件样式，截图停在了一首歌暂停的时刻。和Chrome一样，它也有一个弹出式的音量控制条（本图未显示），可以通过将鼠标指针悬停在控件最右边的声音图标上弹出它。
audio元素的其他一些有趣的属性如下表所示。
下面这段示例代码，执行时将显示音频回放控件，并在音频文件加载完成后立刻自动播放，完成后再一遍又一遍地重复播放。
<audio controls="controls" autoplay="autoplay" loop="loop">    <source src="laughter.mp3" type="audio/mp3" />    <source src="laughter.ogg" type="audio/ogg" />    Your browser does not support the audio element.</audio>
如果你想在自己的浏览器中好好研究< audio>元素，可以参考http://w3schools.com/上的“Tryit Editor”。它可以用来编辑一些示例代码，然后看看会发生什么。此外，你也可以参阅下面这篇文章——How to add an HTML5 audio player to your site（如何向你的站点添加HTML5音频播放器）。
视频
现在，让我们试试< video>元素。
<video width="320" height="240" controls="controls">    <source src="movie.ogg" type="video/ogg" />    <source src="movie.mp4" type="video/mp4" />    <source src="movie.webm" type="video/webm" />    Your browser does not support the video tag.</video>
前面讲过，video元素也支持多个源，它会按顺序依次尝试播放。
与audio元素相同，video元素也有一个controls属性。视频控件在IE浏览器中的截图如下所示。
video元素其他一些有趣的属性如下表所示。
如果你希望继续研究< video>元素，可以使用来自http://w3schools.com/的“Tryit Editor”，用它来编辑一些示例代码，然后看看代码生成的效果。
如果想学习关于video和audio的更多内容，请访问以下几个链接。

傲游高品质VPS主机，特价促销
回复

使用道具 举报

 楼主| 发表于 2012-1-13 18:19:14 | 显示全部楼层
HTML5开发与旧式浏览器的兼容
我们已经讨论了HTML5许多很酷的新功能，包括新的语义元素、为画图而生的canvas标签，以及音频与视频支持。
你可能会想：这些东西是很好，但当用户的浏览器不兼容HTML5时，可能就没法使用它们了。更不用说一些所谓的“支持”HTML5的浏览器，实际上只支持它的一部分功能而已。并不是所有HTML5新功能都会被所有浏览器所支持，而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。
不过，有一种方法可以使用新的特性，同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。
根据Paul Irish的说法，polyfill是模拟未来API的shim，它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时，polyfill会补充其中的空隙。学会使用这些polyfill，你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。
获得polyfill支持的一种方法是使用JavaScript库——Modernizr（当然可用的不止这一种）。它会带来特性侦测能力，这样你就能检查浏览器究竟是否支持某种功能（比如canvas元素）。如果不支持，就提供一个备用的选择。
<!DOCTYPE html>
让我们研究一个示例。还记得吗？在介绍语义元素与页面布局时，我们已经使用过这个例子了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Title</title>
  6.     <link href="css/html5reset.css" rel="stylesheet" />
  7.     <link href="css/style.css" rel="stylesheet" />
  8. </head>
  9. <body>
  10.     <header>
  11.         <hgroup>
  12.             <h1>Header in h1</h1>
  13.             <h2>Subheader in h2</h2>
  14.         </hgroup>
  15.     </header>
  16.     <nav>
  17.         <ul>
  18.             <li><a href="#">Menu Option 1</a></li>
  19.             <li><a href="#">Menu Option 2</a></li>
  20.             <li><a href="#">Menu Option 3</a></li>
  21.         </ul>
  22.     </nav>
  23.     <section>
  24.         <article>
  25.             <header>
  26.                 <h1>Article #1</h1>
  27.             </header>
  28.             <section>
  29.                 This is the first article.  This is <mark>highlighted</mark>.
  30.             </section>
  31.         </article>
  32.         <article>
  33.             <header>
  34.                 <h1>Article #2</h1>
  35.             </header>
  36.             <section>
  37.                 This is the second article.  These articles could be blog posts, etc.  
  38.             </section>
  39.         </article>
  40.     </section>
  41.     <aside>
  42.         <section>
  43.             <h1>Links</h1>
  44.             <ul>
  45.                 <li><a href="#">Link 1</a></li>
  46.                 <li><a href="#">Link 2</a></li>
  47.                 <li><a href="#">Link 3</a></li>
  48.             </ul>
  49.         </section>
  50.         <figure>
  51.             <img width="85" height="85"
  52.                 src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
  53.                 alt="Jennifer Marsman" />
  54.             <figcaption>Jennifer Marsman</figcaption>
  55.         </figure>
  56.     </aside>
  57.     <footer>Footer - Copyright 2011</footer>
  58. </body>
  59. </html>
复制代码


这段代码包含了一系列不被旧版浏览器支持的新HTML5元素。记住，在IE9中，它的效果如下图所示。
我们可以使用Internet Explorer开发工具观察它在旧版IE中的模样。在Internet Explorer界面下，按F12键打开Internet Explorer开发工具。
注意，现在的Browser Mode（在页面上方的灰色菜单栏里）被设置为IE9。单击Browser Mode，在弹出的下拉列表中选择“Internet Explorer 8”（IE8不支持HTML5）。
修改完成，转到不兼容HTML5的浏览器之后，Web页面变得如下图所示。
这个效果看起来非常差劲，但实际上问题没那么严重。页面布局变得乱糟糟的原因，是IE8没能识别我所使用的那些HTML5新元素，于是就没有把它们加到DOM，随之而来的就是我们不能使用CSS去设计页面。
尽管如此，增加一条对Modernizr的引用（不需要改动任何其他代码！），就会把这些元素强制放入DOM。从http://www.modernizr.com/download/下载完Modernizr后，在< head>区域添加一条引用即可，代码如下所示。
  1. <head>
  2.     <meta charset="utf-8" />
  3.     <title>Title</title>
  4.     <link href="css/html5reset.css" rel="stylesheet" />
  5.     <link href="css/style.css" rel="stylesheet" />
  6.     <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
  7.     <script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
  8. </head>
复制代码
这里增加了两条脚本引用，一条指向jQuery，一条指向Modernizr。现在并不真的需要使用jQuery，但下一个脚本中它就要大显身手，所以这里一并增加了对它们的引用。
这么一个简单的变化，使得页面在IE8中变成了下图所示的式样。
它并不完美，但已经与我们在IE9中见到的原版本相当接近。Modernizr把这些IE8不能理解的HTML5新元素加入了DOM，正因为如此，我们才能用CSS去设计它们。
其实，Modernizr可以做的远不止此。仔细观察前述Web页面的IE8和IE9版本，你会发现后者的两个article和图片的四角上有非常好看的圆角效果，而IE8中却没有。使用Modernizr，同样可以修复这一效果。
  1. <script type="text/javascript">
  2.         if (!Modernizr.borderradius) {
  3.             $.getScript("script/jquery.corner.js", function() {
  4.                 $("article").corner();
  5.                 $("figure").corner();
  6.             });
  7.         }
  8. </script>
复制代码
在这个脚本中，我们首先检查Modernizr对象，看它是否支持“borderradius”（这是CSS3的一项特性）。如果不支持，再使用一段jQuery脚本调用jquery.corner.js（前提是先从http://jquery.malsup.com/corner/下载它，然后在< head>中引用jQuery——正像我前面所做的那样）。接下来，简单地从脚本中为article和figure调用corner方法，即可形成圆角效果。
除了上面所说，你还可以用一种稍微不同的方法解决这个问题。Modernizr有一个可选的（未包含）条件资源加载器（conditional resource loader），即Modernizr.load()，它基于Yepnope.js。它允许你只将用户需要的polyfill脚本载入页面，而且这种异步和并行的载入有时候会带来性能上的提升。为了得到Modernizr.load，你必须在一个自定义的Modernizr版本中（必须在http://www.modernizr.com/download/上创建）包含它，开发版本中并没有包含它。使用Modernizr.load，我们可以写出下列脚本：

  1. <script type="text/javascript">
  2.         Modernizr.load({
  3.             test: Modernizr.borderradius,
  4.             nope: 'script/jquery.corner.js',
  5.             callback: function () {
  6.                 $('article').corner();
  7.                 $('figure').corner();
  8.             }
  9.         });
  10. </script>
复制代码
总而言之，这段代码实现了与前面的脚本相同的功能。Modernizr.load首先检测布尔属性“Modernizr.borderradius”以确定它是否被支持。然后，nope定义了在test为false时将要加载的源。尽管IE8并不支持CSS3属性“borderradius”，但它会载入jquery.corner.js脚本。最后，callback指定了一个函数，脚本载入完成后会执行该函数。因此，我们在这个函数里为article和figure调用了corner方法（就像前面的代码那样）。如果你想进一步研究Modernizr.load，http://www.modernizr.com/docs/#load上有一份简明教程可供参考。
不管使用上面哪种脚本，我们得到的IE8（不支持HTML5）版本Web页面都如上图所示。
因此，使用polyfill或者其他工具（例如Modernizr），就可以使用HTML5的新功能，同时在旧版本浏览器上提供良好的用户体验。这方面的更多信息，请参考http://www.diveintohtml5.org/detect.html，这里详细地阐述了Modernizr侦测HTML5特性的细节。
小结
在这篇HTML5的导论中，我们谈到了语义标签、canvas、audio和video，以及如何在使用HTML5的同时保持对旧版浏览器的支持。需要注意的是，我们还有很多东西没有讲：微数据（microdata），存储，CSS3，等等……接下来，我会给出一些继续学习HTML5的资源。
IE Test Drive：就算你不使用IE，也不要忘了它其实是一个优秀的站点。这里的demo多如牛毛：入门Demo， HTML5 Demo，图形Demo，以及浏览器Demo。你可以在最喜欢的浏览器中尽情试用它们。本站点还有一些指向其他资源的链接。
Beauty of the Web：这是一个专门展示优秀web站点的地方。这些站点充分利用了HTML5的硬件加速特性，以及那些与IE9契合的pinning特性。
BuildMyPinnedSite：在使用pinning和Windows整合时，你需要的所有代码、想法和示例都可以在这里找到。
HTML5 Labs：本站点提供Web标准化组织（如W3C）发布的不稳定规格说明书，以及早期的Microsoft原型。在这里，你可以对IndexedDB、 WebSockets、 FileAPI和Media Capture API等原型先睹为快。
视频
Brandon Satrom 在TechEd 2011上的演讲 “Application Development with HTML5” ：这场长达一小时的经典演讲，阐述了HTML5开发的精髓。
来自MIX 2011的HTML5演讲：大量关于HTML5的会议。
工具
许多开发工具都已提供HTML5支持，试试下面这些：

  • Visual Studio 2010 SP1 – SP1 增加了对HTML5、CSS3 IntelliSense和Validation基本功能的支持。更多相关信息请参见http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx。

  • Web Standards升级版Microsoft Visual Studio 2010 SP1 – 这是一个Visual Studio 的扩展，它增加了对HTML5、CSS3 IntelliSense和Validation高阶功能的支持，基于目前的W3C说明书。

  • WebMatrix –默认以“开包即用”的方式支持HTML5（使用默认的HTML5文档类型和模板代码来添加一个新的HTML页面）。

  • ASP.NET MVC 3工具升级
    New Project 对话框包含了一个复选框，可以让你使用带项目模板的HTML5版本。
    借助于Modernizr 1.7，这些模板所提供的兼容性使得较低版本的浏览器也能够支持HTML5和CSS3。

  • Expression Web 4 SP1
    包含HTML5 IntelliSense，同时支持Code Editor和设计视图。
    更丰富的CSS3 样式编辑和IntelliSense。
    SuperPreview Page Interaction Mode（超前预览页面交互模式）和在线服务 (远程浏览器，包括Chrome、 IE8、IE9、Safari 4&5，平台包括Windows和Mac) 。

除了以上这些开发工具，不要忘记下面两条：

  • Windows Phone “Mango” 包含Internet Explorer 9，它支持HTML5站点。

  • Internet Explorer 10 Paltform Preview（平台预演）支持许多新的CSS3和HTML5特性，完整的特性清单位于http://msdn.microsoft.com/en-us/ie/gg192966.aspx。

HTML5就介绍到这里，要开发优秀的网站，就看你了！
许可证
本文，包括相关的源代码和文件，都得到了The Code Project Open License (CPOL)的许可。
关于作者
傲游高品质VPS主机，特价促销
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 用户注册

本版积分规则

Archiver|手机版|小黑屋|ACE Developer ( 京ICP备06055248号 )

GMT+8, 2024-11-21 23:24 , Processed in 0.026961 second(s), 5 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表