189 8069 5689
HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。
创新互联客户idc服务中心，提供达州主机托管、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心，我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务，资深网络工程师在机房提供7*24小时标准级技术保障。
广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。
目前HTML5已向开发人员提供了很多新的标签，如section，nav，article，header和footer等。这些标签语义化程度高，会被经常使用，但在IE6，IE7，IE8和Firefox 2等老式浏览器中却不能识别和正常使用。
一、HTML5标签在浏览器展示存在的问题
对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。
结果1：标签被当作错误处理并被忽略。那么DOM构建的时候，就会当作这个标签不存在。
结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建，并且HTML标签会被构造成行内元素（也就是说虽然不能识别，但是代码里section标签依然会在dom中创建一个对应section节点，但是属于行内元素）。
结果3：标签被识别为HTML5标签，然后用DOM节点对其进行替换。DOM在构建的时候和预想的一致，并且合适的样式会应用到标签上（大部分情况下是块级元素）。
有一个具体的例子，大家思考一下下面的代码：
div class="outer"
section
h1title/h1
ptext/p
/section
/div
很多浏览器（比如Firefox 3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在，所以也可以修改其样式。这种情况对应结果2。
IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。/section也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的：
div class="outer"
h1title/h1
ptext/p
/div
那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建，所以也就不能给其增加样式。这种情况对应结果1。
当然，支持HTML5的浏览器比如IE9，Firefox4+，Safari5+会创建正确的DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式。
那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构，并且含有不同的样式。
二、如何解决HTML5标签不兼容
或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签？其实错不在浏览器，因为在那个时代根本不存在这种标签，所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常。对此，人们想出了很多在现阶段页面中使用HTML5元素的解决方案。每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下：
1、实现标签被识别
马海祥曾做个一个测试（以IE8为例），是一个文章标题和蓝色字的文章内容，其中文章内容用了article标签。代码如下：
!DOCTYPE html
html xmlns="" lang="zh-CN"
head
meta charset="UTF-8" /
title测试/title
style
article{color:#06F;}
/style
/head
body
h1文章标题/h1
article
这是文章内容，应该是一段蓝色的文字。在老式浏览器中，如果不做hack将显示异常。
/article
/body
/html
在IE8浏览器中，显示如下：
IE8不能识别article标签， 定义在标签上的CSS样式没有起作用。 在IE8中，article被解释成命名为article /和/article /两个空的标签元素，与文章内容并列为兄弟节点，如下图所示：
既然因为不能识别标签而不能使用，那我们的解决办法就是让标签被识别出来。所幸，简单地通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在。假设我们上面的例子的head区域加上如下代码。
script
document.createElement('article');
/script
IE8浏览器中的DOM解释就会变成下图所示：
自然，文字也显示成正常的蓝色。如下图所示：
2、JavaScript解决方案
JavaScript解决方案目的是解决在旧版本的IE中样式应用的问题。老版本的IE不会识别不明元素已经是一个耳熟能详的特性，而如果这些元素已经通过document.createElement()创建，那么浏览器就可以识别这些标签，并可以将其在DOM树中构建，然后允许开发者对其应用样式。
这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点，然后可以对其应用样式。这个方法将HTML5块级元素设置成display:block，从而可以在各个浏览器中做到兼容。
今天测试以下把马海祥博客的网页改成了HTML5的，调试了一下，在FF和Opera中都显示正常了，到了IE6上却变得面目全非了。对此我还特意去找了一些使用JS代码支持HTML5标签元素的方法，在此也跟大家分享一下：
（1）、使用html5shiv
查看了一下，发现了html5shiv能解决这个问题，可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行：
!--if lt IE 9]
script src=""/script
![endif]--
当然你也可以直接把这个文件下载到自己的网站上。但这个文件必须在head标签中调用，因为IE必须在元素解析这前知道这些元素，才能启作用！但马海祥还要提醒你一下：还要在你的CSS文件中加上以下代码，不然有可能会出现些莫名其妙的问题。
header,nav,article,section,aside,footer{display:block;}
另外excanvas.js是Google为IE6支持canvas元素写的脚本，以后马海祥会跟大家再细说这样的例子，感兴趣的朋友可以去试试。
（2）、使用Kill IE6
除此之外你还可以使用KILL IE6一族，前提是你的浏览器允许执行JS文件。方法很简单，在你的网站的/body之前加上以下代码就可以了：
!--if lte IE 6]
script src=""/script
![endif]--
上面写的!--if lte IE 6]在正常的HTML中属于注释，不会被执行，但在IE中是一个判断语句，所以这些代码只有在IE中才会被识别并加载。
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判断符相同
说实话，马海祥不喜欢这个利用JavaScript解决的方案，因为它破坏了我最主要的web应用开发原则：我们不应该使用JavaScript来控制布局。不仅仅是因为这个做法给那些禁用脚本的用户带来了糟糕的用户体验，更重要的是，如果我们希望我们的web应用代码是面向未来，并且维护性高的，那么必须将视图相关部分分离出来。这个方案对在跨浏览器中构建相同的DOM结构很有帮助，也可以确保你的JavaScript和CSS在各个地方运行结果相同，但是这个优势并不能改变我对这个方法的不认同。
3、Namespace hack
永远不要缺乏使用hack解决问题的能力，在IE中还有其他技术来让浏览器识别不明的标签。这个来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素。例如：
html xmlns="" xmlns:html5=""
body
html5:section
!-- content --
/html5:section
/body
/html
前缀html5是纯粹是用于这个例子而且也不是官方支持的，你甚至可以用"foo"作为前缀，结果还是一样。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。
这个方法的缺陷很明显：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:
html5\:section {
display: block;
}
马海祥点评：这并不是我期望Web开发者编写代码的方式。虽然这是一个非常杰出的解决方案，但是这让应用变得不自然。我不希望看到文件中充满了带命名空间的元素。
4、Bulletproof技术（防弹衣技术）
说实话，我是第一次接触到这个技术，建议在所有新的HTML5块级元素中增加一个内部的div元素，然后包含一个CSS class，用这个元素来替代HTML元素（类似在里面穿了一件防弹衣），例如：
section
div class="section"
!-- content --
/div
/section
在应用样式的时候，Tantek推荐直接给div增加样式，而不是给新元素增加样式
推荐使用：
.section {
color: blue;
}
而不是：
section {
color: blue;
}
这个方案的原理是用简单的方式将原来的样式应用方式转移到一个代表了HTML5标签的元素上。由于我一般情况下不会将样式通过标签名的方式应用到元素上，所以马海祥也并完全支持这个建议。
马海祥觉得这个方案的缺陷是不同的浏览器构建了不同的DOM结构，那么你必须在编写JavaScript和CSS的时候格外小心。获取子节点或者父节点的时候，不同的浏览器返回的结果可能会不一样。特别是在下面的代码中：
div class="outer"
section
div class="section main"
!-- content --
/div/section
/div
5、反向的bulletproof技术
还有一些方法，比如尝试使用和Tanteck方案相反的技术，也就是把HTML5元素放在div元素内部，例如：
div class="section"
section
!-- content --
/section
div
这个方案唯一的不同是HTML5元素的位置，其他都一样。喜欢这个技术的支持者认为他的一致性很好（适用于所有的元素，包括hgroup）。但是DOM结构的不同让这个方案意义变得不大。他的主要优势是技术上的一致性。
6、关于X-UA-Compatible的使用
目前绝大多数网站都用以下代码来作为IE8的兼容方法。
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。
在X-UA-Compatible中可用的方法有：
meta http-equiv="X-UA-Compatible" content="IE=6"
meta http-equiv="X-UA-Compatible" content="IE=7"
meta http-equiv="X-UA-Compatible" content="IE=8"
meta http-equiv="X-UA-Compatible" content="IE=edge"
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"
而使用，Emulate模式后则更重视。
所以目前来说还是以使用
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
为首选。
7、通过修改HTML部分来实现
我的主要目标是确保我只需要修改HTML部分。这就意味着不需要修改CSS和JavaScript。为什么会有这样的需求？需要修改的Web应用视图越多，你越有可能制造bug。将改变限制到一个视图也就限制了bug的出现，即使出现了bug，也可以减少你查找错误的范围。如果一个视图破相了，我可以知道这是因为我增加了一个section元素，而不是考虑是不是CSS文件修改来带的影响。
在研究了所有这些解决方案，并进行一些尝试和设计之后，我回到了Tantek的方案。这是唯一一个只需要修改HTML而不用动CSS和HTML的方案。现在，我在他的方案基础上做了一些改进，来达到我想要的结果。
首先，我不会给那些代表HTML5元素的class增加样式（所以我不会使用.section这样的选择器）。我保留了div元素，然后再增加一个带语义的class来应用样式，并作为进行JavaScript操作的钩子。例如，这样的代码：
div class="content"
!-- content --
/div
经过改进后：
section
div class="section content"
!-- content --
/div
/section
这样的修改完成后，我依然使用.content作为样式和脚本的入口。这也意味着我不需要修改CSS和JavaScript。
然后，为了避免hgroup标签这样的情况，我选择不使用这个标签。我在我已有的所有页面中没有找到任何一个使用了这个标签的。由于hgroup标签只能包含标题元素，如果你确实想要使用这个标签，那么使用hrgoup来包含本身是非常安全的（假设它没有包含其他的块级元素）。
我在马海祥博客上花了很多时间来测试比较bulletproof和反向的bulletproof哪个更好一些。我做选择时最主要的决定因素就是反向的bulletproof需要我去增加CSS代码。在那些为HTML5标签创建了DOM节点但是没有应用默认样式的元素来说，div元素里包含了一个HTML5块级元素在很多情况下都会搅乱我的布局，因为创建的DOM节点是行内元素。我不得不明确增加CSS规则来让这个节点变成块级元素从而可以正常布局，这也就违反了我不修改CSS文件的初衷。
马海祥博客点评：
在我的研究中，我使用了多个页面，然后在这些页面上使用修改过后的bulletproof技术。我分别在简单和复杂的布局中，含有和不含有JavaScript交互进行测试。在每一个例子中，我只需要修改HTML就可以让页面表现正确（不修改JavaScript和CSS）。那么，子节点和父节点的问题怎么办？有趣的事情是我在测试中并没有遇到这样的问题。
理由很简单，因为我对代码苛刻的态度。我认真地做了第二遍检查：
（1）、标签名和ID不会用于应用样式（只是用class）。
（2）、尽量选择常用的CSS选择器并且尽量减少选择器的使用。
（3）、JavaScript代码不依赖于特定的DOM结构。
（4）、标签名不用于操作DOM。
我注意到另一个有趣的事情是我使用了HTML5元素作为容器。而这些新的元素仅仅是作为功能性模块的边界。你应该花费你的大部分时间为内部的元素编写样式和脚本而不是处理各个模块间的样式和脚本。由于马海祥博客的JavaScript和CSS标签都应用在容器的内部，所以一切都显得很顺利。我想这才是一个真正的代码质量高的网站。
内容区块是指将HTML页面按逻辑分割后的单位。对于页面网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
article
header
h1标题/h1
p发表日期：time pubdate="pubdate"2010/10/10/time/p
/header
particle的使用方法/p
footer
psmallCopyright @ yiiyaa.net All Rights Reserverd/samll/p
/footer
/article
注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。
嵌套的代码如下：
article
header
h1article元素使用方法/h1
p发表日期：time pubdate="pubdate"2010/10/10/time/p
/header
p此标签里显示的是article整个文章的主要内容，，下面的section元素里是对该文章的评论/p
section
h2评论/h2
article
header
h3发表者：maizi/h3
ptime pubdate datetime="2016-6-14"1小时前/time/p
/header
p这篇文章很不错啊，顶一下！/p
/article
article
header
h3发表者：小妮/h3
ptime pubdate datetime="2016-6-14T:21-26:00"1小时前/time/p
/header
p这篇文章很不错啊，对article解释的很详细/p
/article
/section
/article
示例内容分为几个部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论进行了区分（是一个分块元素，用来把页面中的内容进行区分），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立的、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。
1、section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，；
2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素，
3、section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素；
4、如果article、nav、aside元素都符合某条件，那么就不要用section元素定义；
5、section元素中的内容可以单独存储到数据库中或输出到word文档中。
section
h1section元素的/h1标题
psection区块的主题部分/p
/section
在HTML5中，你可以将所有页面的从属部分，譬如导航条、菜单、版权说明等包含一个统一的页面中，以便统一使用CSS样式来进行装饰。最后，关于section元素的使用禁忌总结如下：
1）不要将section元素用作设置样式的页面容器，那是div元素的工作。
2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
3）不要为没有标题的内容区块使用section元素。
三、两者的区别：
以上讲述了那么多，两者的区别到底是什么呢？事实上，在HTML5中，article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。另外，在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。
header
header元素描述了文档的头部区域
nav
标签定义导航链接的部分。
section
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
article
article 标签定义独立的内容。
aside
aside 标签定义页面主区域内容之外的内容（比如侧边栏）。
figcaption
figcaption 标签定义 figure 元素的标题.
figcaption元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
figure
figure标签规定独立的流内容（图像、图表、照片、代码等等）。
footer
footer 元素描述了文档的底部区域.
据我所知，新浪博客目前不支持HTML5音频播放，那个JS引用需要用户修改网站文件，新浪博客不支持用户对博客源代码的修改。所以目前你在新浪博客不管怎么折腾都是不可以的。
如果你的博客是自有FTP权限,在根目录创建一个文件夹,上传到这个文件夹里即可
1. W3Schools（需自备梯子）
W3School是学习HTML5最好的资源之一，它拥有的教程都带有例子，几乎可以解决你所需要的所有知识点。如果你想从基础开始学习HTML5的话，那么这个网站会是一个很好的选择。你可以学习到HTML5的所有元素，比如标签、图像、图形，以及无需多做其他操作，只需跟随教程的教书步骤走即可，用简单的语言解释和交互让学习变得简单。
2. Html Goodies
如果想要观看HTML5的速成课程，以及获取学习HTML5的所有性能，那么htmlgoodies会是一个不错的开始。在网站的左边部分，你可以看到分类细致的基础、教程。问答等，你可以任意快速跳转到自己想要开始学习的部分。
3. HTML5-tutorial（需自备梯子）
HTML5-tutorial可以让你在短时间内有一个良好的开局，在这里，你可以了解HTML5的基本知识和要点，如何构建一个网站、编辑和调试代码进行开发学习，很适合初学者入门学习。
4. HTML5 Doctor
HTML5 Doctor网站提供了许多内容不错的文章，这些文章将会帮你更好的学习和实现HTML5开发。而且，除了这一特色，网站还有一个“Ask the Doctor”部分，在这里，可以向专家提问，通过他们的专业讲解解决你遇到的所有问题。
5. Html5 Rocks（需自备梯子）
如果开发人员想要在网站中实现HTML5，并开展HTML5编码相关的研发，那么要关注Html5 Rocks网站。在这个网站中能够获取HTML5的所有功能信息，以及学习如何在网站或应用程序中实现。
6. Alison
Alison是免费学习HTML5的一个很好的在线平台，上面提供的HTML5课程，让你逐步去学习设计、构建和推出Web上的页面。你将获得高品质的视频和持续的学习时间，当然也可以按照自己的节奏去安排HTML5的学习。
7. Udacity
这是另一个很好的在线学习平台，无论你是初学者还是具有中级水平的开发人员，它都为你准备了相应的HTML5画布（canvas）和游戏开发的课程。有兴趣的，不妨一试。
8. thenewboston
在thenewboston你可以找到HTML5免费的视频课程，这个网站拥有很好的编程视频课程的合集，比如Adobe、Java和C++。在计算机科学部分你可以找到HTML5编程，可以得到一些HTML5、画布、视频播放器的教程，并且还都是免费的。
在线学习HTML5编程的高级教程
通过免费的教程、博客、视频，我们已经获得了基础和全面的HTML5编程知识，那么是时候通过高级的HTML5视频教程来深入的了解HTML5编程技巧。大量的实践之后，我发现了这些网站，你可以在HTML5上使用高端编程进行项目、小测验、应用来学习先进的HTML5。
9. Eduonix
如果不提及学习HTML5这一话题的话，我们真的会错过Eduonix。这是一个优秀的在线平台，你可以找到所有Web技术和移动开发技术。Eduonix的HTML5编程项目课程，是开发人员通过10个项目和测试，来提升他们HTML技能的一大资源。
10. Udemy
在这个平台上，无论你是什么类型的程序员都可以进来学习HTML5及其他一些的编程语言。这里通过互动视频来学习HTML5，当然学完还有相关认证。在Udemy上你可以找到基于HTML5的项目课程去提高你在Web设计中的技能。你只需在Udemy上注册并参加注册课程，就可以享受视频讲座。
11. Webucator
Webucator网站提供现场培训课程、私人培训、集体培训和自学课程，来对你的HTML5技能进行高级训练。不过你需要去支付一笔较高的费用，但有付出总会有回报的。