第一章 html5开发基础与应用
2014 年 10 月 28 日，W3C 组织公开发布HTML5 标准规范。
官方文档 地址为：https://www.w3.org/TR/2014/REC-html5-20141028/
HTML5.1 文档地址：https://www.w3.org/TR/2015/WD-html51-20151008/
HTML5.2 文档地址：https://www.w3.org/TR/2017/REC-html52-20171214/
HTML5.3 文档地址：https://www.w3.org/TR/2018/WD-html53-20181018/
HTML5 针对大量不规范的 HTML 文档，做到了良好的兼容性。
- DTD 的变化
- HTML5 的语法变化
- 某些元素可以省略结束标签 （<p> <li> <dt> <dd> 等）
- 没有结束标签的元素 (< area> <base> <br> 等）
- 连开头标签一起省略的元素 （<html> <head> <body> <colgroup> <tbody> 等）
- 属性值可以不用引号括起来
- 标签不再区分大小写
- 某些标志性的属性可以省略属性值，通常为 boolean 类型
- 解决跨浏览器，跨平台问题
- 95%的浏览器都支持 HTML5，其中包含移动端等设备上使用的浏览器。 对于开发者来说，各浏览器更好的支持 HTML5，前端程序员开发 HTML+CSS+JavaScript 页面将会更加的轻松。
- 增强了 web 的应用程序
- Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页看视频成为了可能。
HTML5 是对以前的 HTML 发展产生出来的，因此，HTML5 保留了以前 HTML 绝大部分标签。
废弃标签 |
说明 |
basefont big center font strike tt |
用 CSS 处理可以更好地替代他们 |
frame frameset noframes |
使用这些标签，破坏了可使用性和可访问性 |
acronym applet dir |
不经常使用、会引起混乱、可被其他元素替代 |
HTML5 新增元素
在 HTML5 以前，HTML 页面只能用元素来作为结构元素，使得代码 阅读带来了极大的困扰性，故在 HTML5 中增加了大量的结构元素。
新增元素 |
说明 |
<header> |
用于定义文档或节的页眉 |
<footer> |
用于定义文档或节的页脚 |
<article> |
用于定义文档内的文章 |
<section> |
用于定义文档中的一个区域（或节） |
<aside> |
用于定义与当前页面或当前文章的内容几乎无关的附属信息 |
<figure> |
用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。 |
<figcaption> |
用于表示是与其相关联的引用的说明/标题，用于描述其父节点<figure>元素里的其他数据。 |
<hgroup> |
用于对多个<h1>~<h6>元素进行组合 |
<nav> |
用于定义页面上的导航链接部分 |
<mark> |
用于定义高亮文本 |
<time> |
用于显示被标注的内容是日期或时间（24小时制） |
<meter> |
用于表示一个已知最大值和最小值的计数器 |
<progress> |
用于表示一个进度条 |
<audio> |
定义声音，比如音乐或其他音频流 |
<video> |
定义视频，比如电影片段或其他视频流 |
<article>元素和<section>元素在使用上非常容易用错。原因也很明显，他们可以包含很多子元素，同时还可以互相嵌套。其实<article>元素可以看成是 一种特殊类型的<section>元素，它比<section>元素更强调独立性。即<section> 元素强调分段或分块，而<article>元素强调独立性。
HTML5 规范对通用属性也做了一定的修改。 保留了 id、style、class、dir、title、lang、accesskey 等通用属性。也新增了 contenteditable、designMode、hidden 等通用属性。
新增属性 |
说明 |
contentEditable |
contenteditable 属性规定元素内容是否可编辑 |
designMode |
相当于一个全局的 contenteditable 属性，如果把 designMode 属 性设置为 on，则该页面上的所有支持 contenteditable 属性的元素都变成可编辑状 态 |
hidden |
HTML5 的所有元素都有 hidden 属性，为 true 时显示，为 false 时隐藏，。CSS 中的 display 属性也可以设置，hidden="true"相当于 display:none。 |
对应元素 |
属性名称 |
替代方案 |
link，a |
charset |
在被链接的资源的中使用 HTTP Content-type 头元素 |
a |
shape，coords |
使用 area 元素代替 a 元素 |
img，iframe |
longdesc |
使用 a 元素链接到较长描述 |
link |
target |
多余属性，被省略 |
area |
nohref |
多余属性，被省略 |
head |
profile |
多余属性，被省略 |
html |
version |
多余属性，被省略 |
img |
name |
id |
meta |
scheme |
HTML5 不支持 |
object |
achieve ， classid ， codebase，codetype， declare，standby |
使用 data 或 type 属性类调用插件，需要使用这些属性来设置参数时，使用 param 属性 |
param |
valuetype，type |
使用 name 与 value 属性 |