HTML5的目标
HTML5的目标是能够创建更简单的Web程序，书写出更简洁的HTML代码。为此提供了很多API；在HTML标签上开发出了新的属性、新的元素等等。
HTML5要解决的三个问题
-
Web浏览器之间的兼容性很低：Web浏览器之间的兼容性是非常低的，导致这个问题的原因就是“规范不统一”，HTML5详细分析了各浏览器所具有的功能，然后以此为基础，要求这些浏览器所有内部功能都要符合一个通用标准，从而解决兼容性问题。
-
文档结构不够明确：在HTML5之前，基本都是使用
<div>元素来描述文档，文档的结构不够清晰、明确。为了解决这个问题，HTML5追加了很多跟结构相关的元素。不仅如此，还结合了包括微格式、无障碍因公在内的各种各样的周边技术。 -
Web应用程序的功能受到了限制：为了弥补这方面的不足，HTML5已经开始提供各种各样Web应用上的新API,使富Web应用的实现变成了可能。
HTML5与HTML4的区别
HTML5以HTML4为基础，对HTML4进行了大量修改：
- 基本语法层面，DOCTYPE声明、内容类型（ContentType）、字符编码的指定方法、元素标记的省略、具有布尔值的属性、引号的省略等几个方面。
- 元素层面，HTML5中新增了许多元素，删除了HTML4中的部分元素。
- 属性层面，HTML5中新增了许多属性，删除了HTML4中的部分属性。
- 新增了全局属性。
语法的改变
HTML5中的标记方法
1.内容类型（ContentType）
HTML5的文件扩展符与内容类型保持不变，仍然是".html"或".htm"，内容类型仍然为"text/html"。
- DOCTYPE声明
DOCTYPE声明是HTML文件中必不可少的，它位于文件第一行。 HTML4中声明方法如下：
<!DOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Transitional// EN"
"http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML5中，一份文档将适用所有版本的HTML，声明方法（不区分大小写）如下：
<!DOCTYPE html>
3. 指定字符编码
在HTML4中，使用meta元素的形式指定文件中的字符编码：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
在HTML5中，可以使用对<meta>元素直接追加charset属性的方式来指定字符编码：
<meta charset="UTF-8">
HTML5开始，对于文件的字符编码推荐使用UTF-8。
HTML5提供的兼容性
- 可以省略标记的元素
在HTML 5中，元素的标记可以省略。具体来说，分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。
-
不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式，只允许使用“<元素/>”的形式进行书写。有：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
- 具有boolean值的属性，boolean的属性值有多种写法：
<!-- 只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!-- 不写属性代表属性为false-->
<input type="checkbox">
<!-- 属性值= 属性名, 代表属性为true-->
<input type="checkbox" checked="checked">
<!-- 属性值= 空字符串, 代表属性为true-->
<input type="checkbox" checked="">
3. 省略引号：当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性值两边的引号可以省略。
<!-- 请注意type 的属性值两边的引号 -->
<input type="text">
<input type='text'>
<input type=text>
代码清单2-1完全是用HTML 5写成的。其中省略了<html>、<head>、<body>等元素。可以通过这个示例复习一下HTML 5的DOCTYPE声明、用<meta>元素的charset属性指定字符编码、<p>元素的结束标记的省略、使用<元素/>的方式来结束<meta>元素，以及<br>元素等本节中所介绍的知识要点。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML 5 标记示例</title>
<p> 这段代码是根据HTML 5 语法
<br/> 编写出来的。
新增的元素
新增的结构元素
| 元素名称 | 元素介绍 | HTML5代码实例 | HTML4代码示例 |
|---|---|---|---|
| section 元素 | 表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分，可以与h1/h2/h3等元素结合使用，标明文档结构 | <section>...</section> | <div>...</div> |
| article 元素 | 表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。 | <article表示..</article> | <div>...</div> |
| aside 元素 | 表示article元素的内容之外的、与article元素的内容相关的辅助信息。 | <aside>...</aside> | <div>...</div> |
| header 元素 | 表示页面中一个内容区块或整个页面标题 | <header>...</header> | <div>...</div> |
| footer 元素 | 表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。 | <footer>...</footer> | <div>...</div> |
| nav 元素 | 表示页面中导航链接的部分 | <nav>...</nav> | <ul>...</ul> |
| figure 元素 | 表示一段独立的留内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题 | <figure><figcaption>PRC</figcaption><p>...</p></figure> | <d1><h1>PRC</h1><p>...</p></d1> |
| main 元素 | 表示网页中的主要内容。主内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。 | <main>...</main> | <div>...</div> |
新增的其他元素
| 元素名称 | 元素介绍 | HTML5代码实例 | HTML4代码示例 |
|---|---|---|---|
| video 元素 | 定义视频，比如电影片段或其他视频流 | <video src="movie.ogg" controls="controls">video元素</video> | <object type="video/ogg" data="movie.ogv"> <param name="src" value="movie.ogv"> </object> |
| audio 元素 | 定义音频，比如音乐或其他音频流 | <audio src="someaudio.wav">audio元素</audio> | <object type="application/ogg" data="someaudio.wav"> <param name="src" value="someaudio.wav"> </object> |
| embed 元素 | 插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等 | <embed src="horse.wav"/> | <object data="flash.swf" type="application/x-shockwave-flash"></object> |
| mark 元素 | 在视觉上向用户呈现出高亮的文字，一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词 | <mark>高亮内容</mark> | <span></span> |
| progress 元素 | 表示运行中的进程，可以使用progress元素来显示JavaScript中耗费时间的函数的进程 | <progress value="22" max="100"></progress> | - |
| meter 元素 | 表示度量衡，仅用于已知最大值和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义 | <meter value="2" min="0" max="10"></meter>或<meter value="0.6">60</meter> | - |
| time 元素 | 表示日期或时间，也可以同时表示两者 | <time>9:00</time> | <span>9:00</span> |
| wbr 元素 | br 元素的升级，表示软换行，br 元素是此处必须换行，wbr是浏览器窗口或父级元素的宽度足够宽时，不进行换行，当宽度不够时，主动进行换行。 | <p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object. </p> | - |
| canvas 元素 | 表示图形，比如图标和其他图像，这个元素本身没有行为，仅提供一块画布，但把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上 | <canvas i="myCanvas" width="200" height="200"></canvas> | <object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object> |
| details 元素 | 表示用户要求得到并且可以得到的细节信息，它可以与 summary 元素配合使用。summary 提供标题或图例。标题是可见的，用户点击标题时，会显示细节信息，summary 应该是 details 元素的第一个子元素 | <details><summary>HTML5</summary>This document teaches you everything you have to learn about HTML5</details> | - |
| datalist 元素 | 表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表 | <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> | - |
| output 元素 | 作为计算结果输出显示 | <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output></form> | <span></span> |
| source 元素 | 作为<video>和<audio>的媒介元素，定义媒介资源，比如电影片段或其他视频流 | <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> | <param> |
| dialog 元素 | 表示对话框 | <dialog open>This is an open dialog window</dialog> | - |
新增的input元素的类型
- email： 表示必须输入e-mail地址的文本输入框。
- url：表示必须输入URL地址的文本输入框。
- number：表示必须输入数值的文本框。
- range：表示必须输入一定范围内数字值的文本输入框。
- Date Pickers：HTML5拥有多个可供选取日期和时间的新型输入文本框。
- date：选取日、月、年。
- month：选取月、年。
- week：选取周和年。
- time：选取时间（小时和分钟）。
- datetime：选取时间、日、月、年（UTC时间）。
- datetime-local：选取时间、日、月、年（本地时间）。
新增的属性
表单相关的属性
| 属性名称 | 描述 |
|---|---|
| autofocus | 让元素在画面打开时自动获得焦点。 |
| placeholder | 提示用户可以输入的内容。 |
| form | 声明某个元素属于哪个表单，然后将其放置在页面上任何位置，而不是表单以内。 |
| required | 检查元素一定要要有输入内容。 |
| autocomlete | 配合datalist元素，实现自动补全功能。 |
| min、max、 | 限制number类型的最小值、最大值和步进值。 |
| autofocus | 让元素在画面打开时自动获得焦点。 |
| multiple | 允许输出多个值，常用于图片上传。 |
| pattern | 声明验证输入值的正则表达式。 |
| autofocus | 让元素在画面打开时自动获得焦点。 |
| formaction、formenctype、formmethod、formnovalidate、formtarget、target | 可以重载form元素的action、enctype、method、novalidate与target属性。 |
| novalidate | 取消提交表单时的有关检查，表单可以被无条件提交。 |
| maxlength、wrap | 规定textarea的字数限制和换行方式。 |
链接相关的属性
| 属性名称 | 描述 |
|---|---|
| media、download | 为a与area元素规定目标URL是什么类型、以及修改交互为直接下载目标链接所指向的资源而不是在线打开。 |
其他属性
| 属性名称 | 描述 |
|---|---|
| start、reversed | 为ol元素增加的属性，定义列表的开始编号和列表倒序显示开关。 |
| charset | 为meta元素提供的属性，为文档的字符编码的指定提供了一种方式。 |
| scoped | 为style元素提供的属性，用来规定样式的作用范围。 |
| async | 为script元素提供的属性，定义脚本是否异步执行。 |
| manifest | 为html元素提供的属性，开发离线Web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。 |
全局属性
| 属性名称 | 描述 |
|---|---|
| contentEditable | 定义元素是否可编辑，设置为true就是可编辑，false就是不可编辑。 |
| hidden | 定义元素是否被渲染，设置为true时，元素处于不渲染状态，false就是正常渲染。 |
| tabindex | 在网页内敲击Tab能访问到的元素，设置为n就表示该控件是第n个被访问到。 |
新增的事件
只监听一次的事件
HTML 5中对元素对象的addEventListener方法进行了扩充，允许开发者将该方法的第三个参数定义为一个配置对象，从而设置一个附加的选项，允许在配置对象中添加once属性值，用以让事件监听器只监听一次。
让事件监听器只监听一次的代码使用示例如代码清单2-3所示。
<!DOCTYPE html>
<head>
<meta charset="utf-8 ">
<title>让事件监听器只监听一次</title>
</head>
<input id="button" type="button" value="点击我"></input>
<script>
document.getElementById("button").addEventListener("click",function(){
alert("按钮被点击!");
},{
once: true
});
</script>
