HTML 5新特性和HTML4对比

1 HTML 5 特性

1.1 指定字符编码

在 HTML4 中使用以下方式指定文件中的字符编码 ：

" data-snippet-id="ext.8e8c1e6d42aa1631b7dc7212889d959b" data-snippet-saved="false" data-codota-status="done">  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

在 HTML5 中，使用以下方式：

  <mate charset="UTF-8">

以下代码，在 HTML5 中被认为是错误的：

" data-snippet-id="ext.f318bf834aba75c19d01b837f5203755" data-snippet-saved="false" data-codota-status="done"><meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

1.2 可以省略的标记元素

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

• 不允许写结束标记的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
• 可以省略结束标记的元素：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

• 可以省略全部标记的元素：html、head、body、colgroup、tbody。

  不允许写结束标记的元素：只允许使用 “<元素 />” 的形式进行书写，例如 br。
  可以省略全部标记的元素：该元素可以完全被省略，即使省略了，该元素还是以隐式的方式存在。

1.3 具有 boolean 值的属性

具有boolean的属性，例如disabled、checked等

• 只写属性名不写属性值代表属性为true
<input type="checkbox" checked>
• 不写属性名，代表属性值为false
<input type="checkbox">
• 属性名 = 属性值，代表属性为true
<input type="checkbox" checked="checked">
• 属性名 = 空字符串，代表属性为true
<input type="checkbox" checked="">

1.4 省略引号

当属性值不包括空字符串、<、>、=、单引号、双引号等字符时，属性两边的引号可以省略。

2 HTML5 新增和废除的元素

2.1 新增的元素

元素	说明
section	表示页面中的一个内容区块，比如章节，页眉
article	表示页面中一块与上下文无关的独立内容，例如博客中的文章、报纸中的文章
aside	代表article元素的内容之外，与article元素的内容相关的辅助信息
header	表示页面中一个内容区块或整个页面的标题
hgroup	用于对整个页面或页面中一个内容区块的标题进行组合
footer	表示整个页面或页面中一块内容区域的脚注
nav	表示页面中导航链接的部分
figure	表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。使用figcaption为figure元素组添加标题
video	定义视频
audio	定义音频
embed	插入多媒体
mark	在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用就是在搜索结果中高亮显示搜索关键词
progress	表示运行中的进程
time	表示时间或日期
ruby	表示 ruby 注释
rt	表示字符的解释或发音
rp	在ruby注释中使用、以定义不支持ruby元素的浏览器所显示的内容
wbr	软换行元素，当宽度不够显示时才换行
canvas	提供一块画布，以供 JavaScript 绘制
command	表示命令按钮，例如单选按钮、复选按钮
details	与summary配合使用，summary提供标题或图例，标题是可见的，用户点击标题时，会显示出细节信息，summary元素应该是details元素的第一个子元素
datalist	表示可选数据的列表，与input元素配合使用，可以制作出输入框的下拉列表
datagrid	可选数据的列表，以树形列表的形式来显示
keygen	表示生成密钥
output	表示不同类型的输出，比如脚本的输出
source	为媒介元素定义媒介资源
menu	表示菜单列表，当希望列出表单控件时使用该标签

2.2 新增 input 元素的类型

类型	说明
email	表示必须输入 E-mail 地址的文本输入框
url	必须输入 URL 地址的文本输入框
number	必须输入数值的文本输入框
range	必须输入一定范围内数字值的文本输入框
date	选取年、月、日
month	选取年、月
week	选取周、年
time	选取时间
datetime	选取时间、日、月、年 (UTC 时间)
datetime-local	同上， 本地时间

2.3 废除的元素

2.3.1 使用 CSS 替代的元素

basefont、big、center、font、s、strike、tt、u

2.3.2 不再使用 frame 框架

由于 frame 框架对于网页可用性存在负面影响，因此废除了frameset、frame、noframes元素，只支持iframe框架

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

applet、bgsound、blink、marquee等元素只有部分浏览器支持，在 HTML5 中被废除。

废弃的元素	代替的元素
applet	embed 或 object
bgsound	audio
rb	ruby
acronym	abbr
dir	ul
isindex	form 与 input 结合的方式
listing	pre
xmp	code
nextid	GUIDS
plaintext	使用”text/plian” MIME 类型替代

3 新增和废除的属性

3.1 新增的属性

3.1.1 表单相关的属性

属性	使用范围	说明
autofocus	input(type=text)、select、textarea、button	让元素在画面打开时自动获取焦点
placeholder	input、textarea	对用户输入进行提示
form	input、output、select、textarea、button、fieldset	生命它属于哪一个表单，可以将其放置在页面任何位置上，而不是表单内
required	input(type=text)、textarea	在用户提交时进行检查，检查该元素内一定要有输入内容
autocomplete	input、datalist
min	input
multiple	input	允许上传文件时，一次上传多个文件
pattern	input
step	input
formaction、formenctype、formmethod、formnovalidate、formtarget	input、button	重载 form 元素的 action、enctype、method、novalidate、target 属性
disabled	fieldset	把子元素设为无效状态
novalidate	input、button	取消提交时进行的有关检查

3.1.2 链接相关属性

属性	使用范围	说明
media	a、area	规定目标 URL 是为什么类型的媒介 / 设备进行优化的，只能在 href 属性存在时使用
hreflang、rel	area	与 a 元素和 link 元素保持一致
sizes	link	与 icon 元素结合使用，该属性指定关联图片的大小
target	base	保持与 a 元素的一致性

3.1.3 其他属性

属性	使用范围	说明
reversed	ol	指定列表倒序显示
charset	meta	指定文档的字符编码
label	menu	为菜单定义一个可见的标注
type	menu	可以让菜单可以以上下文菜单、工具条、与列表菜单的三种形式出现
scoped	style	规定样式的作用范围，譬如只对页面上的某个树起作用
async	script	定义脚本是否异步执行
manifest	html	开始离线 web 应用程序时与 API 结合使用，定义一个 URL，在这个 URL 上描述文档的缓存信息
sandbox、seamless、srcdoc	iframe	提供页面安全性

3.2 废除的属性

HTML4 中的元素	使用该属性的元素	在 HTML５中的替代方案
rev	link、a	rel
charset	link 、a	在被链接的资源中使用 HTTP Content-type 头元素
shape、coords	a	使用 area 元素代替 a
longdese	img、iframe	使用 a 元素链接到较长描述
target	link	多余属性，被省略
nohref	area	多余属性，被省略
profile	head	多余属性，被省略
version	html	多余属性，被省略
name	img	id
scheme	meta	只为某个表单域使用 scheme
archive、classid、codebase、codetype、declare、standby	object	使用 data 与 type 属性类调用插件，需要使用这些属性来设置参数时，使用 param 属性
valuetype、type	param	使用 name 与 value 属性，不声明值的 MIME 类型
axis、abbr	td、th	使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细的内容使用 title 属性、来使单元格的内容变得简短
scope	td	在被链接的资源中使用 HTTP Content-type 头元素
align	caption、input、legend、div、h1、h2、h3、h4、h5、h6、p	使用 CSS 样式代替
alink、link、text、vlink、backgroud、bacolor	body	使用 CSS 样式代替
align、bgcolor、border、cellpadding、cellspacing、frame、rules、width	table	使用 CSS 样式代替
align、char、charoff、height、nowrap、valign	tbody、thead、tfoot	使用 CSS 样式表替代
align、bgcolor、char、charoff、height、nowrap、valign、width	th、td	使用 CSS 样式表替代
align、bgcolor、char、charoff、valign	tr	使用 CSS 样式表替代
align、char、charoff、valign、width	col、colgroup	使用 CSS 样式表代替
align、border、hspace、vspace	object	使用 CSS 样式表代替
clear	br	使用 CSS 样式表代替
compact、type	ol、ul、li	使用 CSS 样式表代替
compact	dl	使用 CSS 样式表代替
compact	menu	使用 CSS 样式表代替
width	pre	使用 CSS 样式表代替
align、hspace、vspace	img	使用 CSS 样式表代替
align、noshade、size、width	hr	使用 CSS 样式表代替
align、frameborder、scrolling、marginheight、marginwidth	iframe	使用 CSS 样式表代替
autosubmit	menu

3.3 全局属性

3.3.1 contentEditable 属性

• 允许用户编辑元素中的内容，所以该元素是可以获得鼠标焦点的元素
• 值为true或false
• 该属性具有inherit状态，当没有指定值时，继承父元素的值。
• 支持的元素有

defaults、a、abbr、acronym、address、b、bdo、big、blockquote、body、button、center、city、code、custom、dd、del、dfn、dir、div、dl、dt、em、fieldset、font、form、hn、i、inpt (type=button、password、radio、reset、submit、text)、ins、isindex、kbd、label

3.3.2 designMode 属性

• 用来指定整个页面是否可编辑
• 值为on或off
• 只能通过document.designMode='on'的方式修改。

3.3.3 hidden 属性

通知浏览器不再渲染该元素，使其处于不可见状态。

3.3.4 spellcheck 属性

• 针对input(type=text)和textarea提供的元素用于对用户的文本内容进行拼写和语法检查。
• 值为true和false
• 必须明确声明值属性值。不可以只写属性名
• readOnly和disabled设为true时，不进行拼写检查

3.3.5 tabindex属性

• 定义获得焦点的顺序。
• 当值为负数时，不可以通过Tab键获取焦点，但依然可以通过编程的方式获取焦点。

---

欢迎大家访问我的博客，转载请注明出处
http://blog.youkuaiyun.com/abyss521