html5与html4页面结构区别,Html5与Html4的区别

本文主要介绍Html5和Html4的区别。

语法的改变

内容类型

HTML5 的文件扩展符与内容类型保持不变。扩展符仍然为“.html”或“.htm”，内容类型(ContentType)仍然为“text/html”。

DOCTYPE声明

DOCTYPE 声明是 HTML 文件中必不可少的，它位于文件第一行。在 XHTML 1.0 Transitional 中，它的声明方法如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在 HTML5 中，刻意不使用版本声明，一份文档将会适用于所有版本的 HTML。HTML5 中的 DOCTYPE 声明方法(不区分大小写)如下：

另外，当使用工具时，也可以在 DOCTYPE 声明方式中加入 SYSTEM 识别符，声明方法如下面的代码所示：

在 HTML5 中像这样的 DOCTYPE 声明是允许的(不区分大小写，引号不区分是单引号还是双引号)。

指定字符编码

在 HTML4 中，使用 meta 标签的形式指定文件中的字符编码，如下所示：

在 HTML5 中，可以使用对 标签直接追加 charset 属性的方式来指定字符编码，如下所示：

两种方法都有效，可以继续使用前面那种方式(通过 content 属性来指定)，但是不能同时混合使用两种方式，在以前的 HTML 代码中可能会存在下面代码所示的标记方式，但在 HTML5 中，这种字符编码方式将被认为是错误的，这一点请注意：

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

可以省略标记的元素

在 HTML5 中，标签的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三类情况列举一个标签清单，其中包括 HTML5 中的新标签。

不允许写结束标记的标签有：

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

可以省略结束标记的标签有：

li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

可以省略全部标记的标签有：

html、head、body、colgroup、tbody。

“不允许写结束标记的标签”是指，不允许使用开始标记与结束标记将标签括起来的形式，只允许使用“”的形式进行书写。例如“
...”的书写方式是错误的，正确的书写方式为“
”。当然，HTML5之前的版本中
这种写法可以被沿用。

“可以省略全部标记的标签”是指，该标签可以完全被省略。请注意，即使标记被省略了，该标签还是以隐式的方式存在的。例如将body标签省略不写时，但它在文档结构中还是存在的，可以使用document.body进行访问。

具有boolean值的属性

对于具有boolean值的属性，例如 disabled 与 readonly 等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设为flase，可以不使用该属性。另外，要想将属性值设为true时，也可以将属性名设定为属值，或将空字符串设定为属性值。属性值的设定方法可以参考下面的示例：

省略引号

在之前的 HTML 版本中，大家已经知道，指定属性值的时候，属性值两边既可以用双引号，也可以用单引号。HTML5 在此基础上做了一些改进，当属性值不包括空字符串、“”、"="、单引号、双引号等字符时，属性值两边的引号可以省略。如下面的代码所示：

示例：

HTML5 标记示例

这段代码是根据HTML5语法

编写出来的。

1、该代码完全是用 HTML5 写成的；

2、省略了、

、等标签；

3、DOCTYPE申明使用了 HTML5 支持的简洁申明方式；

4、用标签的 charset 属性指定字符编码；

5、省略了

标签的结束标记；

6、使用的方式来结束

标签以及
标签。

新增和废除的元素(标签)

新增的结构标签

在 HTML5 中，新增了以下与结构相关的标签：

section标签

section 标签表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。

它可以与h1、h2、h3、h4、h5、h6等标签结合起来使用，标识文档结构。

HTML5 中代码示例：

....

HTML4 中代码示例：

...

article标签

article 标签表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章或报纸中的一篇文章。

HTML5 中代码示例：

...

HTML4 中代码示例：

...

aside标签

aside 标签表示 article 标签的内容之外、并与article 标签的内容相关的辅助信息。

HTML5 中代码示例：

...

HTML4 中代码示例：

...

header标签

header 标签表示页面中的一个内容区块或整个页面的标题。

HTML5 中代码示例：

...

HTML4 中代码示例：

...

hgroup标签

hgroup 标签用于对整个页面或页面中一个内容区块的标题进行组合。

HTML5 中代码示例：

...

HTML4 中代码示例：

...

footer标签

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

HTML5 中代码示例：

...

HTML4 中代码示例：

...

nav标签

nav标签表示页面中导航链接的部分。

HTML5 中代码示例：

...

HTML4 中代码示例：

• ...

figure标签

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

HTML5 中代码示例：

新增的结构标签

在 HTML5 中，新增了以下与结构相关的标签：

HTML4 中代码示例：

新增的结构标签

在 HTML5 中，新增了以下与结构相关的标签：

新增的其他标签

除了结构标签外，在 HTML5 中，还新增了以下标签：

video标签

video 标签定义视频，比如电影片段或其他视频流。

HTML5 中代码示例：

video标签

HTML4 中代码示例：

audio标签

audio 标签定义音频，比如音乐或其他音频流。

HTML5 中代码示例：

audio标签

HTML4 中代码示例：

canvas标签

canvas 标签表示图形，比如图表和其他图像。这个标签本身没有行为，仅提供一块画布，但它把一个绘图 API 展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。

HTML5 中代码示例：

HTML4 中代码示例：

embed标签

embed 标签用来插入各种多媒体，格式可以是 midi、wav、aiff、au、mp3等。

HTML5 中代码示例：

HTML4 中代码示例：

mark标签

mark 标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark 标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5 中代码示例：

...

HTML4 中代码示例：

...

progress标签

progress 标签表示一个进度条，可以使用 progress 标签来显示那些执行耗时较长的操作，提升用户体验。

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增功能，故无法用 HTML4 代码来实现，只能通过 javascript 来控制。

time标签

time 标签表示日期或时间，也可以同时表示两者。

HTML5 中代码示例：

...

HTML4 中代码示例：

...

ruby标签

ruby 标签表示 ruby 注释(中文注音或字符)。

HTML5 中代码示例：

漢(魏)

HTML4 中代码示例：

这是 HTML5 中新增的功能。

rt标签

rt 标签表示字符(中文注音或字符)的解释或发音。

HTML5 中代码示例：

漢魏

HTML4 中代码示例：

这是 HTML5 中新增的功能。

rp标签

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

HTML5 中代码示例：

漢(魏)

HTML4 中代码示例：

这是 HTML5 中新增的功能。

wbr标签

wbr 标签表示软换行。wbr 标签与 br 标签的区别是：br 标签表示此处必须换行；而 wbr 标签的意思是浏览器窗口或父级标签的宽度足够宽时(没必要换行时)，不进行换行，而当宽度不够时，主动在此处进行换行。wbr 标签好像对字符型的语言作用挺大，但是对于中文，貌似没多大用处。

HTML5 中代码示例：

To learn AJAX, you must be familiar with the XMLHttpRequest Object.

HTML4 中代码示例：

这是 HTML5 中新增的功能。

command标签

command 标签表示命令按钮，比如单选按钮、复选框或按钮。

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

details标签

details 标签表示用户要求得到并且可以得到的细节信息。它可以与 summary 标签配合使用。summary 标签提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息。summary 标签应该是 details 标签的第一个子标签。

HTML5 中代码示例：

HTML5

This document teaches you everything you have to learn about HTML 5.

HTML4 中代码示例：

这是 HTML5 中新增的功能。

datalist标签

datalist 标签表示可选数据的列表，与 input 标签配合使用，可以制作出输入值的下拉列表。

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

datagrid标签

datagrid 标签表示可选数据的列表，它以树形列表的形式来显示。

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

keygen标签

keygen 标签表示生成密钥。

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

output标签

output 标签表示不同类型的输出，比如脚本的输出。

HTML5 中代码示例：

HTML4 中代码示例：

source标签

source 标签为媒介标签(比如和)定义媒介资源。

HTML5 中代码示例：

HTML4 中代码示例：

menu标签

menu 标签表示菜单列表。当希望列出表单控件时使用该标签。

HTML5 中代码示例：

• Red
• Blue

HTML4 中代码示例：

在 HTML4 中 menu 标签不被推荐使用。

新增的input标签的类型

HTML5 中新增了很多 input 标签的类型，现列举如下：

email

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

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

url

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

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

number

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

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

range

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

HTML5 中代码示例：

HTML4 中代码示例：

这是 HTML5 中新增的功能。

Date Pickers

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

HTML5 中代码示例：

----选取日、月、年

----选取月、年

----选取周和年

----选取时间(小时和分钟)

----选取时间、日、月、年(UTC时间)

----选取时间、日、月、年(本地时间)

HTML4 中代码示例：

这是 HTML5 中新增的功能。

废除的标签

由于各种原因，在 HTML5 中废除了很多标签，简单介绍如下。

1、能使用CSS替代的标签

对于 basefont、big、center、font、s、strike、tt、u这些标签，由于它们的功能都是纯粹为画面展示服务的，在 HTML5 中提倡把画面展示型功能放在 CSS 样式表中统一编辑，所以将这些标签废除了，并使用添加或编辑 CSS 样式表的方式进行替代。

2、不再使用frame框架

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

3、只有部分浏览器支持的标签

对于 applet、bgsound、blink、marquee 等标签，由于只有部分浏览器支持这些标签，特别是 bgsound 标签以及 marquee 标签，只被 IE 所支持，所以在 HTML5 中被废除。其中 applet 标签可由 embed 标签或 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. contentEditable

主要功能：是否允许用户编辑元素内容。bool值。

例:

这是一段可编辑的段落。请试着编辑该文本。

语法:

属性值:

值

描述

true

规定可以编辑元素内容。

false

规定无法编辑元素内容。

classname

继承父元素的 contenteditable 属性。

2. designMode

主要功能：指定整个页面是否允许用户编辑元素内容。bool值。

3. hidden

主要功能：隐藏页面元素。bool值。

4. spellcheck

主要功能：规定是否对元素内容进行拼写检查。

可对以下文本进行拼写检查：

类型为 text 的 input 元素中的值(非密码)

textarea 元素中的值

可编辑元素中的值

5. tabindex

主要功能：规定当使用 "tab" 键进行导航时元素的顺序。

以下元素支持tableindex属性：, , , , , 以及 。

xyz

space

com

6.draggable

主要功能：规定元素是否可拖动。

提示：链接和图像默认是可拖动的。

This is a draggable paragraph.

属性值:

值

描述

true

规定元素是可拖动的。

false

规定元素是不可拖动的。

auto

使用浏览器的默认特性。