很多站长朋友们都不太清楚怎么避免html5错误,今天小编就来给大家整理怎么避免html5错误,希望对各位有所帮助,具体内容如下:

本文目录一览:

电脑看视频显示html5:Video file not found并且换了几个浏览器都这样。

电脑看视频显示html5:Video file not found是设置错误造成的,解决方法为:

1、使用360安全浏览器打开视频网站之后,点击 工具,开发人员工具。

2、点击右下角的齿轮图标。

3、点击 Overrides,然后勾选 Enable,User Agent,然后点击下方的下拉列表。

4、任意选择一款手机或平板。

5、确认设置无误之后,点击刷新当前窗口的网页。

6、如下图所示,即已经可以观看视频,右上角提示自定义Agent,不影响使用。

使用HTML5需要遵守哪些规则?

向大家介绍这些应该遵循的Web前端开发原则。

1、善用DIV来布局

当开发一个Web页面时,要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来,页面的代码会呈现出整洁、缩进良好的风格。

2、将HTML标签和CSS样式表分割开来

好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一条原则。然而,直到今天,仍然有很多开发者没有严格遵循这一原则。

不要在HTML标签里内嵌样式表代码。开发者应该养成习惯,单独建立文件,用以存放CSS样式表。而这也将方便其他开发者在修改你的代码时,能迅速完成工作。

3、优化CSS代码

现如今,为网站添加多个CSS文件的做法已经很普遍。但是,当网站包含的CSS文件过多时,会降低网站的响应速度。解决办法是:精简代码并对多个CSS文件进行优化,将其合并成一个文件。这个办法能显著提升网站的加载速度。此外,有很多工具可以用来优化CSS文件,例如CSS Optimizer、Clean CSS等。

4、优化JavaScript文件,并将其放到页面底部

和CSS一样,为页面添加多个Javascript文件也是很普遍的做法。但这同样会降低网站的响应速度。为此,开发者应该精简、优化这些Javascript文件。

但有一点和CSS不同,浏览器通常不支持并行加载。这也就是说,当浏览器加载Javascript文件时,将不再同时加载其它内容。而这就导致了网页的加载速度好像变慢了。

一个好的解决办法是:将Javascript文件的加载顺序放在最后。为了实现这一目标,开发者可以把Javascript代码放在HTML文档的底部,而最好的位置是放在接近/body标签的地方。

5、善用标题元素

h1 到 h6这些元素用来突出页面的重点内容。这有助于用户更加关注页面的重点部分。对于博客,推荐使用h1标签来突出博客标题。因为,博客标题几乎是页面中最重要的部分。

6、在合适的地方使用合适的HTML标签

HTML标签是构造规范内容结构的关键。例如,em标签用来强调重点内容。p标签适用于突出文章段落。如果想要在段落间加空行,就不要使用br /标签。

对于一组相关的元素,建议使用ul、ol或 dl标签。但是,不要错误的使用blockquote标签,因为它原本是用来定义块应用的。

7、避免滥用div标签

并不是所有块元素都应该用div标签来创建。例如,可以在内联元素的属性里添加display:block,将其以块元素的方式显示。

8、使用列表创建导航

使用ul列表标签,再配以相应的CSS样式,可以创建美观的导航菜单。

9、别忘了封闭标签

现在,每当我回忆起在大学里学到的关于Web开发的第一堂课时,教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准,标签应该被封闭。那是因为,在一些浏览器下,如果没有按照标准来将标签封闭,会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。

10、标签小写语法

标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果,但是,代码的可读性很差。下面这段代码可读性就非常差:

11、为图片标签添加alt属性

在img标签里,alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是,如果开发者在alt属性里添加了图片的描述内容,将会方便搜索引擎的抓取。

12、在表格里使用label和fieldset

为了提高代码质量,并让用户容易理解表格内容,我们应该用label 和 fieldset标签创建表格元素。

13、将浏览器兼容代码标明信息并相互分开

对一名Web开发者来说,跨浏览器兼容是一个被重点关注的问题。通常,开发者会针对不同的浏览器来编码,也即是CSS hack。但是,如果开发者在编码时,能注明代码为哪一个版本的浏览器所写,会为以后的维护工作带来极大方便。下面就是一个很好的示例:

14、避免过度注释

作为一名开发者,在代码中添加注释是一个好习惯,能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是,HTML/XHTML是文本标记语言,非常容易理解。因此,无需为每行代码都添加注释。

15、测试代码

推荐开发者使用W3C文本标记验证服务来测试代码。它是一个高效的测试工具,能帮助你发现页面中存在的错误。而且,它还能从页面错误出发,帮你定位到相应的代码。这一点通常在编码完成后很难做到。但开发者需要注意的是,验证通过的代码并非就是性能优异的代码。

以上就是分享的Web前端开发中应该遵循的开发原则。希望这些开发语言对从事Web前端的小伙伴们有帮助。

网页提示浏览器不支持HTML5,可是我用的是IE11啊,应该支持的啊,求大神帮解决

网页提示浏览器不支持HTML5是设置错误造成的,解决方法为:

1、打开IE,选择“工具”-“Internet选项”。

2、选择“安全”选卡,选择下面的“自定义级别”。

3、将Activex控件和插件下的启用和禁用单选按钮选择启用;将脚本下的启用和禁用单选按钮选择启用。

4、点击开始菜单,选择控制面板,点击“卸载程序”。

5、点击左上角的“查看已安装的更新”。

6、在右上角搜索框中搜索“KB3034196”,在搜索结果“KB3034196”补丁上单击右键,选择卸载,完成后按提示重启计算机即可。

如何处理html5新标签的浏览器兼容问题

目前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标签都应用在容器的内部,所以一切都显得很顺利。我想这才是一个真正的代码质量高的网站。

关于怎么避免html5错误的介绍到此就结束了,不知道本篇文章是否对您有帮助呢?如果你还想了解更多此类信息,记得收藏关注本站,我们会不定期更新哦。