html5属于xhtml的一个版本(html最新版本)

编程之家2026-06-26925次浏览

各位老铁们，大家好，今天由我来为大家分享html5属于xhtml的一个版本，以及html最新版本的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

html5与传统html一样吗区别是什么

一. HTML5语法的改变

该知识点所说变化指的是基于HTML4基础上所定义的改变，主要有如下：

1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。

2.HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML。

3.从HTML5开始，对于文件的字符编码推荐使用UTF-8。

4.HTML5确保了与之前HTML版本的最大程度的兼容性。

为了保证兼容性，需从元素说起，在HTML5.中，元素的标记可以省略。其体来说，元素的标记分为“不允许写结束标记”、“可以省略结束标记”和‘“开始标记和结束标记全部可以省略”三种类型。

•不允许写结束标记元素有：area、base、br、col.....

•可以省略结束标记：li、dt、dd、p、rt......

•开始标记和结束标记全部可以省略：html、head、body.....

二.新增的结构元素

•section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分；

•article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章；

•aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息；

•header元素表示页面中一个内容区块或整个页面的标题；

•hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合；

•footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息；

•nav元素表示页面中导航链接的部分；

•figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为figure元素组添加标题

2、新增的其他元素

•audio元素定义音频，比如音乐或其他音频流；

•embed元素用来插入各种多媒体，格式可以是Midi、Wav、AU、MP3等；

•mark元素上要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用就是在搜索结果中向用户高亮显示搜素关键词；

•progress元素表示运行中的进程

•ruby元素表示ruby注释(中文注音或字符)

•rt元素表示字符(中文注音或字符)的解释或发音

•rp元素在ruby注释中使用，以定义不支持ruby素的浏览器所显示的内容。

•wbr元素表示软换行，而当宽度不够时，主动在此处进行换行

•canvas元素表示图形，比如图表和其他图像

•cammand元素表示命令按钮，比如单选按钮、复选框或按钮

•details元素表示用户要求得到并且可以得到的细节信息

•datagrid元素表示可选数据的列表，它以树形列表的形式来显示

•keygen元素表示生成密钥

•output元素表示不同类型的输出，比如脚本的输出

•source元素为媒介元素(比如<video>和<audio>)定义媒介资源

•menu元素表示菜单列表

3、新增的input元素

•email类型表示必须输入E-main地址的文本输入框

•url类型表示必须输入URL地址的文本输入框

•number类型表示必须输人数值的文本输入框

•range类型表示必须输入一定范围内数字值的文本输人框

HTML5拥有多个可供选取日期和时间的新型输入文本框:

•date——选取日、月、年

•month——选取月、年

•week——选取周和年

•time——选取时间(小时和分钟)

•datetime——一选取时间、日、月、年(UTC时间)

•datetime.local——选取时间、日、月、年(本地时间)

三.废除元素

1、能使用CSS替代的元素

•对干basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹去画面展示服务的，而HTML5中提倡把画面展示性功能放在CSS样式表中统一编辑，所以这些元素废除了

2、不再使用frame框架

•对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在HTML5中已不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上这三个元素废除。

3、只有部分浏览器支持的元素

•对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被废除。其中applet元素可由ernedd元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript编程的方式所替代

4、其他被废除的元素：

•废除rb元素，使用ruby元素替代

•废除acronym元素，使用abbr元素替代

•废除dir元素，使用ul元素替代

•废除isindex元素，使用form元素与input元素相结合的方式替代

•废除listing元素，使用pre元素替代

•废除xmp元素，使用code元素替代

•废除nextid元素，使用GUIDS替代

•废除plaintext元素，使用“ text/plian” MIME类型替代

四.新增属性和废除属性

一、新增属性

1、与表单相关属性

•新增autofocus属性，它以指定属性的方式让元素在画面打开时自动获得焦点；

•新增placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容；

•新增form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内；

•新增required属性，该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容；

2、与链接相关属性

•增加media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用；

•增加hreflang属性与rel属性，以保持与a元素、link元素的一致；

3、其他属性

•属性reverend，它指定列表倒序显示；

•为script元素增加async属性，它定义脚本是否异步执行；

二、废除属性

•能被CSS样式表替代的属性全部废除掉；

•多余属性，例如：target、profile、version等被废除掉；

五.全局属性

在HTML5中，新增了一个’‘全局属性“的概念。所谓全局属性，是指可以对任何元素都使用的属性。

1、contentEditable属性

•该属性允许用户编辑元素中的内容，可以获得鼠标焦点，属性为布尔值，可被指定为true或false。另外，该属性还有个隐藏inherit状态，为true时，允许编辑，为false时，不允许编辑，未指定时，由inherit决定。

2、designMode属性

•该属性用来决定整个页面是否可编辑。有两个属性“on”与"off"。属性为"on"时，可编辑，为“off”时，不可编辑。

3、hidden属性

•所有元素都允许使用一个hidden属性，该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染该元素，使该元素处于不可见状态。该属性值为布尔值，为true时，不可见，为false时，可见。

4、spellcheck属性

•该属性是HTML 5针对input元素(type=text)与textarea这两个文本输入框提供的一个新属性，主要对用户输入内容进行拼写与语法检查。属性值为布尔值，书写时必须明确声明属性值为true或false书写方式如下：

<!—以下两种书写方法正确—><textarea spellcheck="true"><input type=text spellcheck=false><!—以下两种书写方法为错误—><textarea spellcheck>

详解form属性

在HTML4中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以把他们书写在页面上任何地方，然后给元素制定一个form属性，属性值为该表单单位的id，这样就可以声明该元素从属于指定表单了。

<!DOCTYPEHTML>

<htmllang="en-US">

<head>

<metacharset="UTF-8">

<title>form属性</title>

</head>

<body>

<formaction=""id="testform">

<inputtype="text"name=""/>

</form>

<textareaform="testform"name=""cols="30"rows="10"></textarea>

</body>

</html>input元素从属于表单，它呗书写在表单内部，用不着再对它制定form属性。textarea元素呗书写在表单之外，但它从属于表单，所以表单的id制定给textareea元素的form属性。

这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加，因为它们不是被分散在各表单之内的了。

html与xhtml和html5的区别

HTML5和HTML的区别：

1. HTML5标准还在制定中

首先要注意的是，HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变。HTML4已经10多年了，不会有任何改变了。

2.简化的语法

HTML5简化了很多细微的语法，例如doctype的声明，只需要写<!doctype html>就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。

3.<canvas>标签替代Flash

Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。

4.新增<header>和<footer>标签

HTML5设计的一个原则是更好的体现网站的语义性，所以增加了<header>和<footer>这样的标签，用来明确表示网页的结构。

5.新增<section>和<article>标签

与<header>,<footer>类似，<section>和<article>也有利于清晰化网页的结构，更有利于SEO。

6.新增<menu>和<figure>标签

<menu>可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。<figure>标签使得网页文字和图片的排版更专业。

7.新增<audio>和<video>标签

这两个标签可能是HTML5里面最有用的两个标签了。顾名思义，这两个标签是用来播放音频和视频的。

8.全新的表单

HTML5对<form>和<forminput>标签进行了大量修改，添加了很多新的属性，也修改了很多属性。

9.删除<b>和<font>标签

这个改进还无法理解。不认为删除这两个标签对代码的改进有很大的帮助。官方的解释是应该用CSS来替代这两个标签。但还是觉得对于简单的文本，这两个标签还是很方便的。

10.删除<frame>,<center>,<big>标签

已经记不得上次是什么时候使用这些标签了。

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

HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。

广义论及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><section><h1>title</h1><p>text</p></section></div>

很多浏览器（比如Firefox 3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在，所以也可以修改其样式。这种情况对应结果2。

IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。</section>也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的：

<div><h1>title</h1><p>text</p></div>

那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建，所以也就不能给其增加样式。这种情况对应结果1。

当然，支持HTML5的浏览器比如IE9，Firefox4+，Safari5+会创建正确的DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式。

那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构，并且含有不同的样式。

二、如何解决HTML5标签不兼容

或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签？其实错不在浏览器，因为在那个时代根本不存在这种标签，所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常。对此，人们想出了很多在现阶段页面中使用HTML5元素的解决方案。每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下：

1、实现标签被识别

马海祥曾做个一个测试（以IE8为例），是一个文章标题和蓝色字的文章内容，其中文章内容用了article标签。代码如下：

<!DOCTYPE html><html xmlns=""><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>区域加上如下代码。

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文件。方法很简单，在你的网站的</body>之前加上以下代码就可以了：

上面写的<!--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前缀的元素。例如：

前缀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元素的位置，其他都一样。喜欢这个技术的支持者认为他的一致性很好（适用于所有的元素，包括<hgroup>）。但是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来包含本身是非常安全的（假设它没有包含其他的块级元素）。

好了，文章到此结束，希望可以帮助到大家。

dnf基础精通者称号怎么做？dnf神之真谛称号怎么刷最快dnf2011春节礼包？dnf2011npc贝利特

html5属于xhtml的一个版本(html最新版本)

html5与传统html一样吗 区别是什么

html与xhtml和html5的区别

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

html5与传统html一样吗区别是什么