HTML5学习笔记之二——HTML5与HTML4的区别（1）

清心明目

浏览: 105423 次

最近访客更多访客>>

djch

壹亻憔悴

xubukang

jnchenim

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

HTML5

二者的区别包括以下几个方面：

1.语法的改变；

2.新增和废除的元素；

3.新增和废除的属性；

4.全局属性。

--------------------------------------------

一、语法的改变

1.HTML5中的标记方法

1）内容类型（ContentType）

HTML5的文件扩展符与内容类型都不变，即扩展符仍然为.html或者.htm，内容类型仍然为“text/html”；

2)DOCTYPE声明

HTML5中的DOCTYPE声明方法（不区分大小写,不区分引号是单引号还是双引号）如下：

<!DOCTYPE html>

3）指定字符编码

在HTML4中，使用meta元素的形式指定文件中的字符编码，如下：

在HTML5中，可以使用对<meta>元素追加charset属性的方式来指定字符编码，如下：

-----------------------------------------------

需要注意的是：两种方法单独使用都有效，但是不能同时混合使用两种方法。从HTML5开始，对于文件的字符编码推荐是UTF-8.

2.HTML5确保了与之前版本的兼容性

1)可以省略标记的元素

在HTML5中，元素的标记可以省略。可分为“不允许写结束标记”,“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。

a）不允许写结束标记的元素，格式为<元素/>

area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr

b）可以省略结束标记的元素

li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th

c)可以省略全部标记的元素有

html,head,body,colgroup,tbody

不允许写结束标记的元素是指：不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>的形式进行书写。

可以省略全部标记的元素是指：该元素可以完全被省略。虽然标记被省略了，但该元素还是以隐式的方式存在。可以使用document进行访问。

2）具有boolean值的属性

见示例代码：

3）省略引号

在HTML5中，当属性值不包括空字符串,”<“,">","=",单引号,双引号等字符时，属性值两边的引号可以省略。示例代码如下:

4）标记示例：

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5标记示例</title>
<p>这段代码是根据HTML5
<br/>编写出来的

在火狐浏览器上预览结果如下：

二、新增和废除的元素

1.新增结构元素

article 元素表示页面中的一个内容区块，如章节，页眉，页脚或者页面中的其他部分。可以与h1,h2,h3,h4,h5,h6等元素结合起来使用，标示文档结构。示例：<section>...</section>在html4中对应的是<div>...</div>
aside 元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。示例：<aside>...</aside>在html4中对应的是<div>...</div>
header元素表示页面中一个内容区块或整个页面的标题。示例：<header>...</header>在html4中对应的是<div>...</div>
hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合。示例：<hgroup>...</hgroup>在html4中对应的是<div>...</div>
footer 元素表示整个页面或者页面中一个内容区块的脚注。比如创作者的姓名，创建日期，联系方式等。示例：<footer></footer>在html4中对应的是<div>...</div>
nav 元素表示页面中导航链接的部分。示例：<nav>...</nav>在html4中对应的是<ul>...</ul>
figure 元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。示例：HTML5中，<figure><figcaption>PRC</figcaption><p>The Republilc of China was born in 1949 ...</p></figure>.对应到HTML4中，<dl><h1>PRC</h1><p>The Republilc of China was born in 1949 ...</p></dl>

2.新增的其他元素

video元素定义视频，比如电影片段或其他视频流, 等同于html4的object元素 HTML5:<video src="movie.ogg" controls="controls">video元素</video> HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
audio元素定义音频，比如音乐或其他音频流等同于html4的object元素.HTML5:<audio src="someaudio.wav"> audio 标签</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3 等同于html4的object元素HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>
mark元素主要用来在视觉上向用户那些需要突出显示或者高亮显示的文字等同于html4的span元素HTML5: <mark></mark>
HTML4: <span></span>
progress元素表示运行中的进程，可以使用progress来显示JavaScript中消耗时间的函数的进程 html4中无法实现HTML5: <progress></progress> HTML4: none
meter元素表示度量衡。仅用于已知最大值和最小值的度量。必须定义度量的范围，可以在元素的文本中。也可以在min/max属性中定义 html4无法实现 HTML5: <meter></meter> HTML4: none
time元素表示日期或者时间，也可以同时表示两者等同于html4的span元素 HTML5: <time></time>
HTML4: <span></span>
ruby元素表示ruby注释 rt元素表示字符的解释或发音 rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容 HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none
wbr元素表示软换行。他与br元素的区别：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行。
canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端javascript，以使脚本能够把想绘制的东西绘制到这块画布上
command元素表示命令按钮，比如单选按钮，复选按钮或按钮
details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息，summary元素应该details元素的第一个元素
datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表 html5新增功能。
datagrid元素表示可选数据的列表，他以树形列表的形式来显示。
keygen元素表示生成密匙。 output元素表示不同类型的输出，比如脚本的输出 source元素为媒介元素定义媒介资源对应html4的<param>
menu元素表示菜单列表。当希望列出表单空间时使用

3.新增的input元素的类型

    该类型表示必须输入E-mail地址的文本输入框
    HTML5中代码示例:
    <input type="email" />

    该类型表示必须输入URL地址的文本输入框
    HTML5中代码示例:
    <input type"url" />

number

    该类型表示必须输入数值的文本输入框
    HTML5中代码示例:
    <input type=“number" />

range

    该类型表示必须输入一定范围内数字值的文本输入框
    HTML5中代码示例:
    <input type="number" name="points" min="1" max="10" />

Date Pickers(数据检出器)

    HTML5拥有多个可供选择日期和时间的新输入类型:
    date-选取日、月、年
    month-选取月、年
    week-选取周、年
    time-选取时间（小时和分钟）
    datetime-选取时间、日、月、年（UTC时间）

    datetime-local 选取时间、日、月、年（本地时间）
    HTML5中代码示例
    <input type="date" />

4.废除的元素

1)、能用css替代的元素：对于basefont、big、font、s、tt、u、这些元素，由于它们的功能都是纯粹的画面展示服务的，而HTML5中提倡把画面展示性功能放在css样式中统一编辑，所以将这些元素废除。
2)、不再使用Frame框架：由于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元素，使用yl元素替代；废除isindex元素，使用form元素与input元素相结合的方式替代；废除listing元素，使用pre元素替代；废除nextid元素，使用guids替代；废除plaintext元素，使用 ”text/plian“ MIME类型替代。