第二篇 html5和css3开发基础与应用
第一章 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 属性 |