更新時(shí)間：2024-11-06 19:19:39
網(wǎng)站建設(shè)
197HTML5有两大特点：一是加强了网页的性能。其次，增加了本地数据库等Web应用的功能。
广义上讲HTML5，其实是指包括HTML、CSS、JavaScript在内的一组技术组合。它希望减少浏览器对Adobe Flash、Microsoft Silverlight 和Oracle JavaFX 等基于插件的富互联网应用程序(RIA) 的需求，并提供更多能够有效增强网络应用程序的标准。放。
目前，HTML5 已经为开发者提供了许多新的标签，例如section、nav、article、header 和footer。这些标签语义化程度高，会被频繁使用，但在IE6、IE7、IE8、Firefox2等老浏览器中无法正常识别和使用。
一、HTML5标签在浏览器展示存在的问题
对于现阶段来说，使用HTML5标签可能遇到的最大问题是如何在不支持新标签的浏览器中正确处理它们。当我们在页面中使用HTML5 元素时，我们可能会得到三种不同的结果。
结果1：标记被视为错误并被忽略。那么在构建DOM的时候，会被当成标签不存在一样对待。
结果2：标签会被当做错误处理，仍然会按照构建DOM时预期的代码创建，HTML标签会被构造成内联元素（即虽然无法识别，但代码中的section 标签仍然会在dom 中创建对应的section 节点，但它是一个内联元素）。
结果3：标签被识别为HTML5 标签，然后替换为DOM 节点。 DOM 按预期构造，并将适当的样式应用于标签（在大多数情况下为块级元素）。
作为具体示例，请考虑以下代码：
title
文本
很多浏览器（比如Firefox 3.6和Safari4）在解析的时候会把div作为最外层的元素，然后在div里面是一个无法识别的元素（section），它会在DOM中被创建，作为内联元素存在。 h1 和p 元素都是section 元素的子节点。因为部分实际上存在于DOM 中，所以它们的样式也可以修改。这种情况对应结果2。
IE9之前的版本会认为section标签错误，直接忽略，然后解析h1和p标签，成为div标签的子节点。也被认为是错误并被跳过。在这些浏览器中实际工作的代码是这样的：
标题
文本
嗯，除了老版本的IE浏览器生成的DOM结构与其他浏览器不同之外，它对无法识别的标签的容错能力还是很好的。因为节节点没有在DOM 树中构建，所以不能设置样式。这种情况对应结果1。
当然，IE9、Firefox4+、Safari5+等支持HTML5的浏览器会创建正确的DOM结构，然后这些标签就会默认为HTML5规范中定义的默认样式。
那么，我们面临的最大问题就是相同的代码在不同的浏览器中形成不同的DOM结构，包含不同的样式。
二、如何解决HTML5标签不兼容
很多人可能会质疑：为什么旧的浏览器不能识别这些标签呢？其实错不在浏览器，因为当时不存在这样的标签，所以无法正确识别，而这种不正常的标签识别导致DOM结构异常。对此，人们想出了很多解决方案，在当前页面使用HTML5元素。为了兼容，每个解决方案都会遇到一些特定的问题。分享给大家：
1、实现标签被识别
我曾经做过一个测试（以IE8为例），是一篇文章标题和文章内容用蓝色文字，文章内容使用了article标签。代码如下：
文章标题
这是文章的内容，应该是一段蓝色的文字。在较旧的浏览器中，异常将在没有黑客攻击的情况下显示。
在IE8浏览器中显示如下：
IE8无法识别文章标签，标签上定义的CSS样式无效。在IE8 中，被解释为命名和
两个空标签元素与文章内容列为兄弟节点，如下图：
既然不能使用是因为无法识别标签，我的解决办法是让标签可以识别。幸运的是，只需传递document.createElement(tagName) 就可以让浏览器识别标签，让CSS 引擎知道标签的存在。假设我们上面的例子
在区域中添加以下代码：
>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中调用这段代码就行：
当然你也可以直接把这个文件下载到自己的网站上。但这个文件必须在head标签中调用，因为IE必须在元素解析这前知道这些元素，才能启作用！
但还要提醒你一下：
还要在你的CSS文件中加上以下代码，不然有可能会出现些莫名其妙的问题。
header,nav,article,section,aside,footer{display:block;}
另外excanvas.js是Google为IE6支持canvas元素写的脚本，以后我会跟大家再细说这样的例子，感兴趣的朋友可以去试试。
（2）使用Kill IE6
除此之外你还可以使用KILL IE6一族，前提是你的浏览器允许执行JS文件。方法很简单，在你的网站的之前加上以下代码就可以了：
上面写的前缀html5是纯粹是用于这个例子而且也不是官方支持的，你甚至可以用"foo"作为前缀，结果还是一样。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。
这个方法的缺陷很明显：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:
html5\:section {
display: block;
}
点评：这并不是我期望Web开发者编写代码的方式。虽然这是一个非常杰出的解决方案，但是这让应用变得不自然。我不希望看到文件中充满了带命名空间的元素。
4、Bulletproof技术（防弹衣技术）
说实话，我是第一次接触到这个技术，建议在所有新的HTML5块级元素中增加一个内部的div元素，然后包含一个CSS class，用这个元素来替代HTML元素（类似在里面穿了一件防弹衣），例如：
在应用样式的时候，Tantek推荐直接给div增加样式，而不是给新元素增加样式
推荐使用：
.section {
color: blue;
}
而不是：
section {
color: blue;
}
这个方案的原理是用简单的方式将原来的样式应用方式转移到一个代表了HTML5标签的元素上。由于我一般情况下不会将样式通过标签名的方式应用到元素上，所以也并不完全支持这个建议。
这个方案的缺陷是不同的浏览器构建了不同的DOM结构，那么你必须在编写JavaScript和CSS的时候格外小心。获取子节点或者父节点的时候，不同的浏览器返回的结果可能会不一样。特别是在下面的代码中：
5、反向的bulletproof技术
还有一些方法，比如尝试使用和Tanteck方案相反的技术，也就是把HTML5元素放在div元素内部，例如：这个方案唯一的不同是HTML5元素的位置，其他都一样。喜欢这个技术的支持者认为他的一致性很好（适用于所有的元素，包括）。但是DOM结构的不同让这个方案意义变得不大。他的主要优势是技术上的一致性。
6、关于X-UA-Compatible的使用
目前绝大多数网站都用以下代码来作为IE8的兼容方法。
虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。
在X-UA-Compatible中可用的方法有：
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上
而使用，Emulate模式后则更重视。所以目前来说还是以使用
为首选。
7、通过修改HTML部分来实现
我的主要目标是确保我只需要修改HTML部分。这就意味着不需要修改CSS和JavaScript。为什么会有这样的需求？需要修改的Web应用视图越 多，你越有可能制造bug。将改变限制到一个视图也就限制了bug的出现，即使出现了bug，也可以减少你查找错误的范围。如果一个视图破相了，我可以知 道这是因为我增加了一个section元素，而不是考虑是不是CSS文件修改来带的影响。
在研究了所有这些解决方案，并进行一些尝试和设计之后，我回到了Tantek的方案。这是唯一一个只需要修改HTML而不用动CSS和HTML的方案。现在，我在他的方案基础上做了一些改进，来达到我想要的结果。
首先，我不会给那些代表HTML5元素的class增加样式（所以我不会使用.section这样的选择器）。我保留了div元素，然后再增加一个带语义的class来应用样式，并作为进行JavaScript操作的钩子。
例如，这样的代码：
经过改进后：
这样的修改完成后，我依然使用.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标签都应用在容器的内部，所以一切都显得很顺利。我想这才是一个真正的代码质量高的网站。
我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類(lèi)API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！
