html5已经流行了很多年了，现在各大主流浏览器对它已经有了很好的支持，相对html4, 增加了很多属性用来替代之前的javascript脚本，比如一个元素在页面加载完之后自动获得焦点，只需要在元素中指定属性autofocus。除此之外，h5还具有三大特性：
- 兼容性：H5在老版本的浏览器也可以正常运行
- 实用性：只是封装了简单的功能，没有封装更复杂的
- 非革命性：h5的功能是发展性的。
h5解决的三个问题
- web浏览器之间的兼容性很低，各大浏览器的规范不统一，导致同一段html/css/javascript在不同的浏览器上运行经常会出现意想不到的后果，h5的使命是详细分析各web浏览器所具有的功能，然后以此为基础，要求这些浏览器所有内部功能都要符合一个通用标准。然后以这个标准来写代码，那么在各个浏览器都能正常运行了
- 文档结构不明确，在h4中，想要表达复杂的层次结构，必须嵌套很深的
<div class=“title”><div class=“content”>……</div></div>，这样会导致代码很臃肿且不好维护，在h5中，加了很多例如：header, section,article,aside,footer,nav等元素，这些元素表示页面的特定结构组成部分，使我们的代码清晰简洁可读性强。 - web应用程序的功能受到了限制，h5与web应用程序的关系很薄弱，web程序一般是先从网络下载然后执行，因此为了安全起见，对会威胁到用户安全的功能进行限制，比如：想同时上传多个文件就不允许了。为了弥补这方面的不足，h5提供了很多新的api, 各大浏览器也封装着这些api, 使web应用程序变得更加丰富。
h5与h4的区别
语法的变化
h5中的标记方法
-
内容类型(ContentType)
扩展符仍是.html或.htm，内容类型仍是”text/html” -
DOCTYPE声明
h4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
h5:
<!doctype html>
3、指定字符编码
h4:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
h5:
<meta charset="UTF-8”>
h5确保的兼容性
-
可以省略标记的元素
h5中，元素的标记可以省略，分为以下三类：- 不允许写结束标记的元素：
area base br col command embed hr img input keygen link meta param source
trak wbr ,指的是不允许用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>的形式，例如：不能写
...</br>,
只能写
- 可省略结束标记的元素：
li dt dd p rt rp optgroup option colgroup thead tbody tfoot tr td th - 可以省略全部标记的元素：
html head body colgroup tbody, 是指该元素可以完全省略，但是，即使是省略了，在文档结构中它还存在，可以用document.body访问。
- 不允许写结束标记的元素：
-
具有boolean值的属性，对于
disabled readonly等，只写属性名不指定属性值时，表示属性值是true, 如果属性值是false, 只要不指定属性即可。要想使属性值为true，也可以将属性名或空字符串设定为属性值。 -
省略引号
当属性值不包括空串、<、>、 =、 单双引号等字符时，属性值两边的引号可以省略， 例如：
<input type=“text”> <input type=‘text’> <input type=text>
新增的元素结构
- section 元素
section元素表示页面中的一个内容区域，比如章节、页眉、页脚、或页面中的其他部分。示例：
<section>…</section>
在h4中 只能写
<div>..<div>
- article元素
article表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章或报纸中的一篇文章。示例：
<article>…</article>
在h4中 只能写
<div>..<div>
- aside元素
aside元素表示article元素的内容之外的、与article 元素内容相关的辅助信息，示例：
<aside>…</aside>
在h4中 只能写
<div>..<div>
- header元素
header元素表示页面中一个内容区块或整个页面的标题，示例:
<header>…</header>
在h4中 只能写
<div>..<div>
- footer元素
footer元素表示整个页面或页面中一个内容区块的脚注，一般包含制作这的姓名、创作日期等。示例：
<footer>…</footer>
在h4中 只能写
<div>..<div>
- nav元素
nav元素表示页面中导航链接的部分，示例：
<nav></nav>
在h4中
<ul></ul>
- figure元素
figure元素表示一段独立的流内容，把figure元素删除不会对文档流产生影响，示例：
<figure>
<figcaption>告白气球</figcaption>
<p>你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶</p>
</figure>
在h4中需要写：
<dl>
<h1>告白气球</h1>
<p>你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶</p>
</dl>
- main元素
main元素表示网页中的主要内容，示例
<main>…</main>
在h4中 只能写
<div>...<div>
新增的其他元素
- video元素
video元素用于定义视频，示例：
<video src="movie.ogg" controls="controls”>ace-千灯愿</video>
在h4中，需要写成：
<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
- audio元素
audio元素用于定义音频。示例：
<audio src="someaudio.wav”>七朵-蝴蝶恋</audio>
在h4中，需要写成：
<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
- embed元素
embed 元素用来插入各种多媒体，格式可以是MIDI, Wav, AIFF, AU, MP3等，示例：
<embed src="horse.wav" />
在h4中，需要些成：
<object data="flash.swf" type="application/x-shockwave-flash"></object>
- mark元素
mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用就是在搜索结果中向用户高亮显示搜索关键字。示例：
<mark></mark>
在h4中，需要写成
<span></span>
- progress元素
progress元素表示运行中的进程，可以使用progress来显示javascript中耗费时间的函数的进程，示例：
<progress></progress>
这个功能在h4中没有。
- meter元素
meter元素度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义，示例：
<meter max="100" min="1" value="70"></meter>
70%的电池
- time元素
time元素表示日期和时间，示例
<time></time>
在h4中
<span></span>
- canvas元素
canvas元素表示图形，比如图表或其他图像，这个元素本身没有行为，只是提供一块画布，把绘图的api给客户端的javascript使用，使脚本能把想绘制的东西画到画布上。示例：
<canvas id="myCanvas" width="200" height="200"></canvas>
在h4中：
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
- command元素
command元素表示命令按钮，比如单选按钮、复选框或按钮，示例：
<command onclick=cut()" label="cut”>
- details元素
details元素表示用户要求得到并且可以得到的细节信息，可以与summary元素配合使用，summary 元素提供标题或图例，标题是可见的，当用户单机标题时，显示细节信息，示例：
<details>
<summary>蝴蝶恋</summary>
蝴蝶翩翩徘徊山水之间 怎比春留恋莺莺燕燕
</details>
- datalist元素
datalist元素表示可选数据的列表，与input元素配合使用，可做输入输出值的下拉列表，示例：
<datalist></datalist>
-
keygen元素
keygen 标签规定用于表单的密钥对生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器。示例：
<keygen> -
output元素
output表示不同类型的输出，比如脚本的输出，示例：
<output></output>在h4中<span></span> -
source元素
标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源, 示例：
<source>, 在h4中<param> -
dialog
表示对话框，就是弹出来的那种，示例：
<dialog></dialog>
网友评论