本文详细介绍了HTML5的新特性，包括保留的常用元素、新增的通用属性、新增的常用元素等，同时对拖放API进行了深入讲解。
文章目录
一、HTML 5保留的常用元素
HTML 5保留了原有HTML规范的绝大部分元素和属性，删除了少量元素和属性——主要删除了文档样式相关的各种元素和属性，比如<font.../>元素，width属性等，HTML 5规范推荐使用CSS样式来控制HTML文档样式。
1.基本元素
HTML 5保留的基本元素有如下几个：
<!--...-->:定义HTML注释。位于<!--与-->之间的内容会被当成注释处理。<html>:它是HTML 5文档的根元素。但HTML 5允许完全省略这个元素。<head>:它用于定义HTML 5文档的页面头部分。但HTML 5允许完全省略这个元素。<title>:它用于定义HTML 5文档的页面标题。<body>:它用于定义HTML 5文档的页面主体部分，该标签可以指定id、class、style等核心属性，还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等时间属性，这些属性用于指定JavaScrip脚本。<style>:该元素用于引入样式定义。<h1>到<h6>:定义标题一到标题六。<p>:定义段落，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。<br>:插入一个换行，该标签可以指定id、class、style等核心属性。<hr>:定义水平线，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。HTML 5中<hr.../>还代表了主题结束的语义。<div>:定义文档中的节。该标签可以指定id、class、style等属性，还可以指定onclick等各种事件属性。<span>:与<div>基本相似，区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。
提示：几乎所有的HTML元素都可以指定
id、style和class属性。其中id属性用于为HTML元素指定一个唯一标识，该表示是通过DOM访问HTML元素的重要途径。class和style属性是CSS样式相关属性。
>**注意:`
2.文本格式化元素
下面这些元素让文本内容在浏览器中呈现出特定效果。
<b.../>:定义粗体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。<i>:定义斜体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。<em>:定义强调文本，实际效果与斜体文本差不多。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。<strong>:定义粗体文本。与<b>标签的作用和用法基本相同。
HTML 5为
<strong.../>元素增加了语义，使用<strong.../>包起来的文本代表重要的文本。
<small>:定义小号字体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
奇怪的是，HTML 5删除了原有的
<big.../>元素，<big.../>元素用于定义大号字体文本。但HTML 5保留了<small.../>元素，且对<small.../>元素进行了重新定义，HTML 5定义了<small.../>元素专门用于标识所谓的“小字印刷体”，通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。
<sup>:定义上标文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。<sub>:定义下标文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。<bdo>:定义**文本显示方向**。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。除此之外，该标签也可以指定<dir>属性，该属性值只能是ltr或者rtl。
如果希望让HTML页面内的文本更美观，例如改变他们的颜色、背景等，这些就不再由HTML标签来完成了。此处介绍的文本格式化标签只能进行一些基本格式化，如果需要对文本进行更丰富的格式化，则建议使用CSS样式单。
3.语义相关元素
HTML 5保留了如下语义相关元素
<abbr>:用于表示一个缩写。使用该元素时可指定如下属性.
-
title：该元素用于指定该缩写所代表的全称。
<address>:用于标识一个地址。浏览器通常会用斜体子显式<address.../>所包含的文本。<blockquote>:用于定义一段长的引用文本。浏览器会使用缩进的方式显式这段被引用文本。使用<blockquote.../>元素可指定如下属性。
-
cite:该属性指定该引用文本所引用的网址URL。
<q>:用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。
<cite>:用于标识作品（一本书、一部电影、一首歌曲）的标题。常常浏览器会用斜体字显示<cite.../>所包含的文本。<code>:用于标识一段计算机代码。<dfn>:用于定义一个专业术语。浏览器通常会用粗体或斜体字显示<dfn.../>所包含的文本。<del>:定义文档中被删除的文本。浏览器通常会以中划线形式显示<del>包含的文本。<ins>:定义文档中的插入文本。浏览器通常会以下划线形式显示<ins>包含的文本。
<del.../>元素和<ins.../>元素通常结合使用，用于标识文档被“修订”的效果。其中<del.../>元素标识被删除，而<ins.../>表示更新的文本。而且使用这两个元素时都可以指定如下两个属性。
-<cite>:该属性值为一个URL，该URL对应的文本解释了文本被删除或插入的原因。
-<datetime>:定义文本被删除或插入的日期、时间。
-
<pre>:用于表示该元素所包含的文本已经进行了“预格式化”。也就是说，<pre.../>元素所包含文本中的恐吓、回车、Tab键和其他格式字符都会被保留下来，但浏览器会处理<pre.../>元素内大部分HTML元素。 -
<samp>:用于定义示范文本内容。 -
<kbd>:用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中会经常使用该元素。 -
<var>:用于表示一个变量。浏览器通常会用斜体字显示<var.../>所包含的文本。
###4.超链接和锚点
HTML 5保留了定义超链接的<a.../>元素，该元素可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。它还可以指定如下三个重要属性。 -
href:指定超链接所关联的另一个资源。 -
target:指定使用框架集中的哪一个框架来装载另一个资源。该属性的值可以是_self、_blank、_top、_parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。 -
media：指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。
除此之外，<a.../>元素还可以生成一个命名锚点，命名锚点用于在HTML页面中生成一个定位点，这样允许超链接直接链接到指定页面的该定位点。
插入定位锚点需要指定name属性，name属性值就是该命名锚点的名称。例如如下代码：
<!-- 下面代码会生成一个命名锚点 -->
<a name="test"></a>
用浏览器浏览命名锚点时，该命名锚点不会生成任何显示内容，我们可以使用如下超链接来定位到该锚点：
<a href="anchor.html#test">定位到test锚点</a>
从上面代码可以看出，定位到指定锚点需要在URL资源后指定锚点名，锚点名和URL资源之间以#隔开。
5.列表相关元素
HTML 5还保留了如下几个列表相关元素
<ul>:定义无序列表。该元素可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。该元素只能包含<li.../>子元素。<ol>:定义有序列表。该元素可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。该元素只能包含<li.../>子元素。除此之外，在HTML 5规范中，该原素还可以指定如下三个属性。
start:指定列表项的起始数字。默认是第一个，如1、A等。type:指定使用哪种类型的编号，例如1代表使用数字，A和a代表使用字母，I和i代表使用罗马数字。该属性在HTML 5规范中已经不推荐使用了，推荐使用CSS来定义。reversed:该属性指定是否将排序反转。很遗憾，目前没有任何浏览器支持该属性。
- :定义列表项目。该元素可以指定`id、class、style`等核心属性，还可以指定`onclick`等各种事件属性。该元素里可以包含与`
6.图像相关元素
HTML 5保留了<img.../>元素在页面中定义图像，这个元素只能是一个空元素，它不可以包含任何内容。该元素可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。不仅如此，使用该元素必须指定如下两个属性。
src:该属性指定图片文件所在的位置，该属性值既可以是相对路径，也可以是绝对路径。alt:该属性指定一段文本，该文本将作为该图片的提示信息。
除此之外，该元素还可以指定如下两个可选属性。
height:指定该图片的高度，该属性可以是百分比，也可以是像素值。width:指定该图片的宽度，该属性可以是百分比，也可以是像素值。
除此之外，与图片相关的还有如下两个标签。
<map>:用于定义图片映射。该元素主要可以包含一个或多个<area.../>子元素，每个<area.../>子元素定义一个区域，不同区域可链接到不同URL。<area>:用于定义图片映射的内部区域。该元素只能是一个空元素，该元素除了可以指定id、class、style等核心属性，也可以指定onclick等各种事件属性。还可以指定onfocus、onblur等焦点相关属性。除此之外，还可以指定如下几个属性。
shape:指定该内部区域是哪种区域，该属性的默认值是“rect”，即矩形区域；coords:指定多个坐标值，用于确定区域位置。href:用于确定该区域所连接的资源。alt:该属性指定一段文本，该文本将作为该图片的提示信息。target:指定使用框架集中的哪一个框架来装载另一个资源。该属性的值可以是_self、_blank、_top、_parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。media:指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。
一旦我们使用<map.../>元素定义了图片映射之后，就可以让指定图片使用该图片映射，通过为<img.../>元素指定usemap属性让该图片使用图片映射，设置usemap属性值为#mapname即可。
7.表格相关元素
HTML 5保留了定义表格的如下标签。
<table>:
cellpadding:
cellspacing:
width:
<caption><tr><td>:
colspan:
rowspan
height
width
<th><tbody><thead><tfoot>
除此之外，如果需要在页面中为某列整体指定属性，HTML 5保留了如下两个标签。
<col>
span
<colgroup>
8.框架相关元素
HTML 5不再推荐在页面中使用框架集，因此HTML 5删除了<frameset.../>、<frame.../>和<noframes.../>这3个标签。
HTML 5依然保留了一个与框架相关的元素：<iframe.../>元素，该元素可以在普通HTML页面中使用，该元素用于在普通HTML页面中生成一个内联框架，可以直接放在HTML页面的任意位置。该元素除了可指定id、style、class等核心属性外，还可以指定如下属性。
src:该属性指定一个URL，指定该iframe将装载哪个页面。
二、HTML 5新增的通用属性
HTML 5保留了大部分原有的HTML元素，但为这些元素增加了一些通用属性，这些通用属性极大地增强了HTML元素的功能
1.contentEditable属性
HTML 5为大部分HTML元素都增加了contentEditable属性，如果将该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素里内容。
contentEditable属性具有“可继承”的特点：如果一个HTML元素的父元素是“可编辑”的，那么它默认也是可编辑的，除非显式指定contentEditable=“false”。
当用户编辑完成后，用户编辑的内容就会直接显示在该页面中（不要刷新页面，一旦刷新页面就会重新加载，编辑的内容就会丢失），开发者可以通过该元素的innerHTML属性来获取编辑后的内容。
2.designMode属性
该属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on时，该页面上所有可支持contentEditable属性的元素都变成可编辑状态；designMode属性默认为off。
在JavaScript代码中只能修改整个HTML页面的designMode属性。例如如下代码可以打开HTML页面的designMode属性。
document.designMode = "on";
3.hidden属性
HTML 5为所有元素都提供了一个hidden属性，这个属性支持true、false两个属性值，一旦把某个HTML元素的hidden设为true，就意味着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间。
提示：
hidden属性可以代替CSS样式单中的display属性，设置hidden="true"相当于在CSS中设置display:none。
4.spellcheck属性
HTML为<input.../>、<textarea.../>等元素增加了spellcheck属性。该属性可支持true、false两个属性值，如果设置"spellcheck="true""，浏览器将会负责对用户输入的文本内容执行输入检查，如果检查不通过，浏览器会对拼错的单词进行提示。
三、HTML 5新增的常用元素
为了更好地表达HTML的文档结构、文档语义，HTML 5也新增了大量元素，这些元素更好地丰富了HTML文档的语义。
1.文档结构元素
在HTML 5以前，HTML页面只能使用<div.../>元素作为结构元素，而HTML 5则提供了<article.../>、<section.../>、<nav.../>、<aside.../>、<header.../>、<footer.../>等文档结构元素。下面先简单列出这些元素的概要功能。
<article>:该元素用于代表页面上独立、完整的一篇“文章”，该元素表示的内容可以是一个帖子、一篇Blog文章、一篇短文、一条完整的回复等。关于<article.../>的简单规则如下：
<article.../>元素内部可使用<header.../>定义文章“标题”部分。
<article.../>元素内部可使用<footer.../>定义文章“脚注”部分。
<article.../>元素内部可使用多个<section.../>把文章内容分成几个“段落”。
<article.../>元素内部可嵌套多个<article.../>作为它的附属“文章”，比如一篇Blog文章后面可以有多篇回复文章。
<section>:该元素用于对页面的内容进行分块。<section.../>元素通常也可由标题和内容组成。关于<section.../>元素的简单规则如下：
通常建议
<section.../>元素包含一个标题（也就是<h1.../>~<h6.../>元素定义的标题）。
<section.../>元素可以包含多个<article.../>元素，表示该“分块”内部包含多篇文章。
<section.../>元素可以嵌套<section.../>元素，用于标识该“分块”包含多个“子分块”。
<nav>:该元素专门用于定义页面上的“导航条”，包括页面上方的“主导航条”、侧边的“边栏导航”、页面内部的“页面导航”、页面下方的“底部导航”等，HTML 5推荐将这些导航链接分别放在响应的<nav.../>元素中进行管理。<aside>:该元素专门用于定义当前页面或当前文章的附属信息，通常来说，推荐<aside.../>元素使用CSS渲染成侧边栏。<header>:该元素主要用于为<article>元素定义“头部”信息。该元素内部既可包含多个<h1.../>~<h6.../>这样的标题元素，也可包含<hgroup.../>元素，还可包含普通的<p.../>、<span.../>等元素。<hgroup>:该元素主要用于组织多个<h1.../>~<h6.../>这样的标题元素。当<header.../>需要包含多个标题元素时，可以考虑使用<hgroup.../>把它们组成一组。<footer>:该元素主要用于为<article.../>元素定义“脚注”部分，包括该文章的版权信息、作者授权信息等。<figure.../>:该元素用于表示一块独立的“图片区域”，该元素内部可包含一个或多个<img.../>元素所代表的图片。除此之外，该元素内部还可包含一个<figcaption.../>元素，用于定义该“图片区域”的标题。<figcaption>:该元素通常放在<figure.../>内部，用于定义“图片区域”的标题。
2.语义相关元素
HTML 5也提供了如下两个语义相关元素。
<mark>:用于显示HTML页面中需要重点“关注”的内容。该元素可以指定id、style、class和hidden等通用属性。浏览器通常会用黄色显示<mark.../>标注的内容。<time>:用来显示被标注内容是日期、时间或日期时间。使用该元素时除了可以指定id、style、class和hidden等通用属性外，还可指定如下属性。
datetime:该属性主要用于向机器提供时间（向流浏览器呈现的时间放在<time>和</time>之间），datetime属性的属性值应该是符合yyyy-MM-ddTHH：mm格式的日期时间。当然，也可以只指定日期，或只指定时间。
只有Chrome浏览器支持<details.../>与<summary.../>元素
3.两个特殊功能的元素
HTML 5还新增了如下两个具有特殊功能的元素。
<meter>:
value
min
max
low
high
optimum
<progress>:
max
value
四、HTML 5头部和元信息
使用<head.../>元素可以定义HTML文档头，该元素可以包含如下子元素。
<script>:该元素用于包含JavaScript脚本。<style>:该元素用于定义内部CSS样式。<link>:该元素用于链接外部CSS样式等资源<title>:该元素用于定义文档标题。该元素较为常用的属性是id，作为其唯一标识。该元素只能包含文本内容，该文本内容就是该文本的标题。<base>:该元素用于指定该页面中所有链接的基准链接。<meta>:该元素用于定义HTML页面的元数据。
<base.../>元素必须是空元素，该元素除了可以指定id作为其唯一标识之外，还可以指定如下两个属性。
href:指定所有链接的基准链接。target:指定超链接默认在哪个窗口打开链接。该属性值只能是_blank、_parent、_self、_top其中之一。
<meta.../>元素用于定义页面元信息，定义元信息也就是指定一些name-value对。该元素除了可以指定id属性之外，还可以指定如下三个属性：
http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。name：指定元信息的名称，该名称值可以随意指定。content：指定元信息的值。
http-equiv属性所支持的值主要有如下几个：
Expires：指定网页的过期时间。一旦网页过期，必须重新从服务器上下载。Pragma：指定禁止浏览器从本地磁盘缓存中调阅页面内容，浏览器一旦离开该网页就无法脱机访问该页面。Refresh：指定浏览器多长时间后自动刷新指定页面。Set-Cookie：设置Cookie。如果网页过期，那么客户端上的Cookie也将被删除。content-Type：设置该页面的内容类型和所有字符集。
五、HTML 5新增的拖放API
HTML 5新增了关于拖放的API，通过拖放API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更友好的人机交互界面。
拖放操作可以分成两个动作：在某个元素上按下鼠标，并移动鼠标（没有松开鼠标），此时开始拖动；在拖动过程中，只要没有松开鼠标，将会不断地产生拖动事件——这个过程被称为“拖”；把被拖动的元素拖动到另外一个元素上并松开鼠标——这个动作被称为“放”。拖放操作由“拖”和“放”两个动作组成。
1.启动拖动
在HTML 5中，<img…/>元素默认就是可拖动的；而<a…/>元素只要设置了href属性，它默认也是可拖动的。
对于普通元素而言，如果希望把它变成可拖动的，开发者只要把该元素的draggable属性设为true即可。但仅仅设置该元素的draggable属性还不够，因为仅仅设置了draggable="true"只表示该元素可拖动，但拖动时并未携带数据，因此用户看不到拖动效果。
为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。代码如下：
<script type="text/javaScript">
var source = document.getElementById("source");
source.ondragstart = function(evt)
{
// 让拖动操作携带数据
evt.dateTransfer.setData("text/plain", "www.fkjava.org");
}
</script>
2.接受“放”
不管是拖动图片，还是拖动<div…/>元素，拖动时都显示了一个“禁止”的标志，这表明拖动图片、拖动<div…/>时，被拖到“目的地”并不接受被拖动的元素——这是因为当被拖动元素被“拖过”document对象时，document对象默认组织了拖动事件，而其他HTML组件也是位于document对象内的，因此它们也不能接受“放”。
为了让document可以接收“放”，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。在上面的JavaScript代码后增加如下代码：
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
在用户拖放HTML元素的过程中，可能触发如下表所示的事件。
3.DataTransfer对象
拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法。
- dataTransfer.dropEffect:设置或返回拖放目标上允许放生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为"none"、“copy”、"link"和"move"四个值之一。
- dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性可设置为"none"、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all"和"uninitialized”。
- dataTransfer.items:
- dataTransfer.setDragImage(element, x, y):
- dataTransfer.addElement(element):
- dataTransfer.types:
- dataTransfer.getData(format):
- dataTransfer.setData(format, data):
- dataTransfer.clearData([format]):
通过DataTransfer对象，可以让拖放操作实现更丰富的功能——开发者可以在拖放开始时（ondragstart事件）将拖放源的数据存入DataTransfer对象中，然后在拖放结束时从DataTransfer对象中读取数据，这样就可以完成更负责的拖放操作了。
扫一扫
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
