返回首页

给您带来和HTML5 / CSS3的区
我将介绍新的语义标记,绘制,画布和动画,音频和视频的支持,以及如何使用旧的HTML5浏览器。可能有点超过五分钟,但我保证我会保持它快。我坚持...这将是值得的!语义标记和页面布局
有关于谁,当其校园建设的一所大学的伟大的故事,没有创造任何行走路径。他们只是种植的林草和等待。
一年后,草都被磨损,那里的人走到最频繁。所以这就是大学铺平了道路实际的人行道。
非常有意义!人行道上的人居然走到哪里都是一模一样。
HTML5新的语义元素的基础上,完全相同的逻辑(见W3C的设计指导,以"铺路的Cowpaths??/ A>)。
语义元素描述其意义或目的明确的浏览器和开发商。对比度(例如)LT; divgt;标签。 "LT; divgt;标签定义了一个部门,或在HTML文档中的一个部分,但它没有告诉我们任何关于其内容或传达任何明确的含义。 LT; divgt的;
开发通常使用的ID和/或类名与这些LT; divgt;标签。这传达更有意义的开发商,但不幸的是,它并不能帮助浏览器获得该标记的目的。HTML5的,也有新的语义丰富的元素,可以传达的目的开发商和浏览器的元素。LT; headergt的;
W3C的开采数十亿现有的网页,发现ID和类名开发商已经在使用。一旦他们扔出去DIV1,DIV2等,他们想出了一个丰富的,已经被用来描述元素列表,这些标准。
这里有几个新的语义元素在HTML5:文章除了figcaption 图页脚头hgroup纪念部分时间
,因为语义丰富,你大概可以猜测这些元素的最做。
但是以防万一,这里是一个可视化:
{S}
头和页脚是不言自明,资产净值创建一个导航或菜单栏。您可以使用的部分和文章进行分组您内容。最后,一​​旁的元素,可用于辅助内容,例如,作为一个侧边栏相关链接。
在这里一些代码,使用这些元素是一个简单的例子。

<!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头?
商标元素允许我强调或标记一些重要的文字。最后,图和figcaption元素指定的身影在我的内容(如图像,图表,照片,代码片段等),让我联想与该标题图分别。这里是该网页看起来像一些CSS结合。 (注:我借用我的天才队友这个CSS,但小于漂亮的最终效果是我。)
{S2的}
现在,想象中的人实际上是在CSS(我不是)手中。 "结果是非常强大的。 HTML的描述性使得它超级容易一起工作。
最后,如果你试图在Visual Studio,但你看到的波浪线随处可见,VS不明白HTML5元素,确保您有VisualStudio 2010的SP1安装。
然后,在Visual Studio菜单,工具,选项。在左侧导航窗格中,展开"文本编辑器,HTML格式,然后单击"验证"。从目标下拉菜单中,选择HTML5的。这会给你HTML5 IntelliSense支持。哇!
{S3的}
下潜更深层次的语义元素,检查:・ 如何启用HTML5标准支持・ 语义节W3C HTML5规范・ 潜入HTML5的章题为"这是什么意义??/ a>的语义画中的HTML5 Canvas元素
另一个 HTML5中的新元素是LT {A2} GT;标记。这只是这听起来像 - 一个空白的绘图表面。您需要使用JavaScript来操作,并在画布上绘制。
可能想给你的canvas元素的id属性,这样你就可以编程访问您的JavaScript代码(或如果你使用jQuery和它在页面上唯一的画布上,你可以访问使用$('画布??而无需将它命名)。
也可以(可选)指定的高度和宽度画布上。之间的LT; canvasgt;和lt ;/ canvasgt;,您可以指定某些文字显示在浏览器不支持canvas元素。
在这里使用在画布上绘制的是一个简单的例子。 (我试图绘制{A3的}。请原谅任何不准确之处。){C}
这里什么代码产生:
{四至}
让我们走过的代码。
首先,我创建实际的画布,并给它一个ID"myCanvas??如果此代码在浏览器中不支持的浏览HTML5 canvas元素,它会显示"您的浏览器不支持canvas标签??,而不是绘制标志。
下一步,我有一个脚本。记住,在画布上的标签仅仅是一个容器图形,你必须使用JavaScript绘制和渲染图形上。首先,我抢在画布上使用的"myCanvas?参考?ID,然后得到画布的背景下,它提供的方法/属性在画布上绘制和操纵图形。我指定了吗??D?使用?在页面上绘制2维背景。
然后,我得出了一个蓝色的矩形。我使用的FillStyle到指定的蓝色。我使用fillRect绘制矩形,指定大小和位置。调用{A4}(0,0,125,75)是指:在位置(0,0) - 上左角 - 绘制一个宽度为125像素,高度= 75像素的矩形。
最后,我画国旗上的白色的X。我第一次调用BeginPath开始绘画路径的过程。我指定线宽15像素(使用尝试不同的价值观的猜测和检查的方法,直到它看上去正确的)和"白??strokeStyle使路径的颜色白色。然后,我描绘出的路径,使用moveTo和lineTo。这些方法"光标定位为您绘制;??不同的是,moveTo的移动没有画线和LineTo绘制一条线,而移动光标。我开始移动到的位置(0,0) - 上左角 - 然后画线(125,75) - 较低的右上角。然后我移动位置(125,0) - 右上角的角落 - 画一条线(0,75) - 左下角角落。最后,中风的方法实际上使这些招。帆布与SVG的快速比较
可伸缩矢量图形(SVG)是较早在浏览器窗口绘制的标准。释放与HTML5的画布,很多人都知道如何比较。
我的眼里,最大的区别在于,帆布使用立即模式渲染和SVG使用保留模式呈现。这意味着画布直接导致渲染的图形显示。在我的代码以上,一旦绘制标志,它被遗忘了系统,没有一个国家是保留。改变需要一个完整的重绘。相比之下,SVG要呈现的对象保留一个完整的模型。做出改变,你可以简单的改变(例如)矩形的位置,浏览器将决定如何重新呈现它。这是少的工作开发商,但也更重量级的保持模型。
通过CSS风格的SVG除了为JavaScript的能力是值得调用了另一个考虑因素。画布可以操纵仅通过JavaScript。
在这里其他方面的差异是高层次的概述: 帆布 SVG的 抽象化   ;基于像素(动态位图)   ;基于形状  0; 分子 单个HTML元素 多个图形元素,成为文档的一部分 对象模型(DOM)  0;司机 只有通过脚本修改 修改通过脚本和CSS 事件模型 用户交互粒状(X,Y) 用户交互抽象(矩形,路径) 性能 性能是较小的表面和/或更大更好 对象数量 表现为数量较少的对象和/或更好 较大的表面 更详细的比较,我想指出你的一些会议(我拉这个令人难以置信的表与权限): 帕特里克Dengler??上当使用SVG和Canvas??jatinder曼的吗?A HREF ="htt​​p://channel9.msdn.com/events/MIX/MIX11/HTM03"深潜到HTML5画布??约翰Bristowe??A HREF ="htt​​p://bristowe.com/blog/2011/7/9/an-introduction-to-html5-canvas-3.html">简介HTML5画布??音频和视频支持
在HTML5是新的大的特点是能够支持播放音频和视频。到HTML5之前,你需要一个插件,如{A5}此功能。在HTML5中,你可以使用新的嵌入音频和视频LT; audiogt;和lt; videogt;标签。
编码的角度来看,音频和视频元素是非常简单易用。(我会给你一个更深入了解他们的属性下面。)音频视频元素,还支持所有主流浏览器(最新版本IE浏览器,火狐,铬,歌剧,和Safari)。然而,棘手的部分是,你需要播放音频和视频编解码器,不同的浏览器支持不同的编解码器。 (对于一个美妙的深入解释视频容器和编解码器,读{A6的。)幸运的是,这不是表演塞。音频支持和视频在一个辉煌的方式实施,那里是支持尝试几个不同的文件格式(浏览器将尝试每个然后下降到下一个,如果它不能玩)。作为一种最佳做法,你应该提供多个音频和视频的来源,以适应不同的浏览器。你也可以退回到Silverlight或Flash。最后,任何文字之间打开和关闭标签(如公升; audiogt;和lt ;/ audiogt ;)将显示在浏览器中不支持的音频或视频元素。
<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文件。如果音频元素不是在所有浏览器确认,它将显示文字"您的浏览器不支持音频元素??应该是音频控制。
音频和视频警告:有没有内置的数字版权管理(DRM)支持;您必须执行此作为自己的开发。看到{A7的}来自W3C的解释自己的立场。 (如果你有需要的DRM内容,还检查出的SilverlightDRM的文件,这可能是一个简单的解决方案。)
让我们把这些新元素的每个潜水。音频
首先,让我们看LT; audiogt;更详细。
<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>

已经讨论过的尝试,直到它希望每个源的后备效果找到一个可以播放。
注意有一个控制属性。这将显示音频播放包括播放/暂停按钮,时间,静音按钮和音量控制控制。在大多数情况下,这是很好的显示音频控制用户;我恨有声网站访问和无法停止,静音,或拒绝。不是吗?
这里在Internet Explorer的音频控制:
{五} 在不同的浏览器控件的外观不同。这里是他们像铬(播放一首歌曲)。当您悬停弹出下拉卷在最右边的声音图标。
{六}
在这里在Firefox的控制(一首歌暂停)。浏览器一样,它也有一个弹出的音量控制(未显示)当你在声音图标悬停远权利。
{七}
其他音频元素的乐趣属性包括: 属性   ; 可能的值 描述 & #160; 自动播放 自动播放 它准备尽快启动音频播放 控制 控制  60; 在页面上显示音频播放控制 循环 循环 & #160; 再次重复和发挥它完成每一次导致音频 预紧 汽车,元数据,无 决定是否要载入页面时加载的音频。 值自动将加载的音频,元数据将只加载 元数据与音频文件,没有人会不预紧 音频。 (此属性将被忽略,如果指定了自动播放。) SRC (一些网址) 指定播放的音频文件的URL 所以
此代码示例将不仅显示音频播放控制,但也开始音频播放立即重复了一遍,并在一个循环。{的C4}
你想发挥与LT; audiogt;自己的元素在您的浏览器是一个伟大的"Tryit编辑器,有吗??{A8的}允许您编辑一些示例代码,看看会发生什么。或尝试如何添加HTML5的音频播放器到您的网站。视频
现在,让我们来看看LT; videogt;元素。{C5的}正如我们
如上所述,视频元素有多个来源的支持,它为了将尝试和然后倒下的下一个选项。
一样音频,视频有一个控制的属性。这里是一个视频的截图控件在Internet Explorer中:
{S8的}
其他有趣的视频元素的属性包括: 属性 & #160; 可能的值 描述  0; 音频 静音 设置音频(目前,"静音??的默认状态是 唯一的选择) 自动播放 自动播放 开始视频播放,只要它已经准备好 控制  0; 控制  60; 在网页上显示视频播放控件 高度&# 160; (像素值) 设置的视频播放器的高度  0;循环 循环 导致再次重复和发挥它完成每一次的视频 海报 (一些网址) 当没有指定代表的视频图像的URL 视频数据是可用 预紧 汽车,元数据,无 决定是否要加载的加载页面时的视频。 值自动加载视频,元数据将只加载 元数据与视频文件,没有人会不预紧 视频。 (此属性将被忽略,如果指定了自动播放。) SRC  ; (一些网址) 指定播放的视频文件的URL  60;宽度 (像素值)   ; 设置的视频播放器的宽度 60;
发挥与LT; videogt元素自己,使用的"Tryit的编辑?从{A8的},使您可以编辑一些示例代码,看看会发生什么。
了解更多有关的视频和音频,检查:五件事你需要知道开始使用LT; audiogt;和lt; videogt;今天如何增加HTML5的音频播放器到您的网站学校HTML5视频HTML5的发展,同时保留旧版本的浏览器支持
我们已经讨论了很多清凉HTML5中的新功能,包括新语义元素,绘图画布标记,音频和视频的支持。
可能会认为这东西是真的很酷,但你不可能采用HTML5的当许多用户不兼容HTML5的浏览器。更何况,支持HTML5的浏览器支持不同件它不是所有新的HTML5功能支持所有的浏览器和可以实现各种功能不同。
但有 是一种没有打破您的网站,为用户使用的新功能旧的浏览器。可以使用polyfills。
据{A10的},polyfill是"一个垫片,模仿未来的API,提供回退功能旧的浏览器。??的polyfill填补的空白,在旧的浏览器不在您的网站支持HTML5的功能。学习使用polyfills会让您使用HTML5的今天,没有留下旧的浏览器的用户。
方式得到polyfill支持JavaScript库{A11}(但有许多polyfills可用)。 Modernizr的补充功能的检测能力 所以你可以检查,专门为浏览器是否支持(例如)canvas元素,如果它不提供备份选项。
我们走过一个例子。记住,我用时引入的代码示例语义元素和页面布局?这是再次:
<!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>

这代码包含了一个新的HTML5元素的数量,不支持在旧浏览器。请记住,在Internet Explorer 9,它看起来像这样:
{S9的}
可以使用Internet Explorer的开发工具,看到这看起来像在旧版本的IE浏览器。在Internet Explorer中,按F1​​2访问开发工具。
{S10的}
注意浏览器模式(在顶部的灰色菜单栏)目前设定为IE9的。点击浏览器上的模式,并从产生的下拉菜单,选择的"Internet Explorer 8??(不支持HTML5)。
{的S11}
后我做这一变化,并切换到一个非HTML5的兼容的浏览器,这是什么我的网页看起来像:
{的S12}虽然
这看起来像一个怪物要解决的问题,它实际上并不是那么糟糕。 ",这并不奏效的原因是IE8的不承认新的HTML5我使用的元素,所以它不将它们添加到DOM,所以你不能风格他们使用CSS。
然而,刚刚加入Modernizr的参考(未做任何其他代码的变化!)蛮力到DOM中的这些元素。从{A12}下载添加在LT参考; headgt像这样的:{C7-}
我增加了两个脚本引用,一个jQuery和一个Modernizr的。我不知道在这一点上确实需要jQuery的参考,但我们需要为它接下来的脚本,所以我现在加入。这个简单的变化,现在得到我的网站,这个国家在Internet Explorer 8:
{S13}
并不完美,但是这是非常接近原来的版本,我们看到Internet Explorer 9的。 Modernizr的补充,这些新的HTML5元素,IE8的不认识到DOM,因为他们在DOM中,我们可以风格他们使用CSS。
但是Modernizr的确实还不止这些!请注意,之一IE8和IE9网页版本之间的差异是,IE9的版本有漂亮的圆角上的两篇文章和图,IE8的版本没有。我们也可以使用Modernizr的解决这个问题。{C8的}
这个脚本,我们检查Modernizr的对象,看看是否有支持"borderradius??(CSS3的功能)。如果没有,我使用jQuery脚本jquery.corner.js(这是可供下载{A13号}需要额外的参考,我更早)到jQuery。然后,我只需拨打我的文章从该脚本的角落方法 数字给他们圆角。
你可以做到这一点的方式略有不同。 Modernizr的有一个可选(不包括)​​有条件的资源加载器称为Modernizr.load(),根据{A14高速公路}。这可以让你加载唯一的polyfilling脚本,用户需要,它加载的脚本异步并行有时会提供性能提升。为了得到Modernizr.load,你必须包括在自定义的Modernizr的建立 你必须创建{A12};它不包括在开发版本。与Modernizr.load,我们可以写一个这样的脚本:
    <script type="text/javascript">

        Modernizr.load({

            test: Modernizr.borderradius,

            nope: 'script/jquery.corner.js',

            callback: function () {

                $('article').corner();

                $('figure').corner();

            }

        });

    </script>

总之,这实现了我们以前的脚本相同的功能。modernizr.load首次测试布尔属性"Modernizr.borderradius的?看?是否支持它。然后,没了定义的资源加载测试是假的。由于IE8不支持CSS3属性"borderradius??会加载jquery.corner.js脚本。最后,回调指定函数运行时脚本加载完成,所以我们将调用"角落"??我的文章和数字,因为我们以前的方法。有一个简短的Modernizr.load教程{A16}如果你希望深入研究。
{S14系列}
现在,通过使用这些脚本,我们的Internet Explorer 8版本(不支持HTML5)看起来像这样:
因此,Modernizr的使用像polyfills和工具,使您能够利用新的HTML5功能,并提供一个很好的经验,以及旧的浏览器。有关更多信息,请{A17中}Modernizr的检测HTML5特性的详细描述。总结在此介绍到HTML5,我们讨论了语义标记,画布,音频和视频,使用HTML5同时保留旧browsers.nbsp支持,但也注意到,还有很多我们不包括:微观数据,存储等NBSP CSS3的,这里有一些资源,继续关于HTML5的学习:
{A18}??即使你不使用Internet Explorer,这是一个可怕的网站。它包含} {A19中的吨:速度演示,HTML5的演示,图形演示和浏览器演示。尝试在它们喜欢的浏览器!这个网站也有其他资源的链接。
美容网页?展示在网络上最好的网站HTML5硬件加速的优势和牵制功能与Internet Explorer 9的
{A20的}??所有的代码,想法,和样品,你需要使用固定和Windows集成
{A21号}??这个网站是微软的原型早期和不稳定规格如W3C的Web标准的机构。你可以玩像原型IndexedDB的WebSockets,FileAPI和媒体捕获的API。视频
布兰登在TechEd 2011交谈satrom"与HTML5应用开发???这是一个神话般的长达一小时的谈话,你需要知道做什么,指甲?HTML5的发展
HTML5的会谈从混用2011??丰富的HTML5会议工具
许多开发工具已经支持HTML5。尝试下列: 视觉 Studio 2010的SP1吗??SP1增加了基本的HTML5和CSS3 IntelliSense和验证。欲了解更多信息,请参阅 网站&# 160; 标准更新为Microsoft Visual Studio 2010 SP1的吗?? 这是一个Visual Studio扩展,增加了更新的HTML5和CSS3 IntelliSense和验证的Visual Studio 2010 SP1中,基于 目前W3C规范。 WebMatrix?? HTML5是支持开箱即用(添加一个新的HTML页面使用默认情况下, HTML5的默认DOCTYPE和模板代码) ASP.NET &# 160; MVC 3的工具更新 " 新建项目对话框中包含一个项目的复选框启用HTML5的版本 模板。 模板杠杆的Modernizr 1.7提供兼容性支持 在低级别浏览器的HTML5和CSS3。 表达 网站4 SP1 HTML5的  0; IntelliSense和支持在代码编辑器和设计视图 丰富的 CSS3的风格编辑和IntelliSense SuperPreview的 & #160;页面的交互模式和在线服务(远程浏览器包括铬, & #160; IE8中,IE9的,在Windows和Mac的Safari 4和5)
除了发展工具,不要忘记: 窗口  60; 电话"芒果??包含的Internet Explorer 9,  0; 支持HTML5的网站。 因特网 & #160; 总管10平台预览支持许多新的CSS3和HTML5特性的完整列表 在http://msdn.microsoft.com/en-us/ie/gg192966.aspx。
HTML5是here.nbsp;提出和发展NBSP!让人耳目一新的网站; |詹妮弗Marsman

回答

评论会员:游客 时间:2012/02/06
我使用VS2010的SP1和IE9当我运行的代码,它只是直降屏幕左侧列出。{BR​​}很像是IE8的运行的一个例子。我做标记命令的亮点。任何想法,我做错了吗??谢谢,道格拉斯
eddie2046
评论会员:良好的工作{S15} 时间:2012/02/06
drwho1979
评论会员:游客 时间:2012/02/06
珍妮弗,引进大到HTML5。感谢抽出时间来建立这个|TedlyMon
!惊人的工作
评论会员:ZAliPour 时间:2012/02/06
大组合的例子和解释
评论会员:Jepy 时间:2012/02/06
尼斯
: 7738007 |会员
评论会员:游客 时间:2012/02/06
清晰,易于uderstand:会员1296257:珍妮弗,它真棒!伟大的工作!那么锐利和清晰!你的文章是最好的起点,任何初学者
JustJimBean
评论会员:游客 时间:2012/02/06
大文章詹妮弗。我特别喜欢的一部分,在那里你解释如何添加到旧的浏览器的HTML5功能
atconway:初学者的大文章。