1、 第 1 页HTML5第一章灵璧石 第 2 页目录 目录 .2第 1章 前言 .51.1 认识 HTML5.51.2 语法规范 .5第 2章 语义标签 .62.1 常用新语义标签 .82.2 兼容处理 .9第 3章 表单 .103.1 输入类型 (表单类型，表单元素，表单属性,表单事件.) .103.2 表单元素（标签） .113.3 表单属性 .123.4 表单事件 .133.5 案例练习 .14第 4章 多媒体 .154.1 音频 .154.2 视频 .16第 5章 DOM 扩展 .185.1 获取元素 .185.2 类名操作 .185.3 自定义属性 .18第 3 页5.4 案例练习 (
2、tab 切换) .19第 1章前言1.1 认识 HTML5前面我们学习的 html 是什么？Html4.0 网页开发： html 结构 4.0Css -样式 2.0 Js 行为 用户交互HTML5 是 html4.0 升级版结构 Html5 、样式 css3 、行为: API 都有所增强 HTML5 并不仅仅只是做为 HTML 标记语言的一个最新版本，更重要的是它制定了 Web 应用开发的一系列标准，成为第一个将 Web 做为应用开发平台的 HTML 语言。灵璧石 第 4 页HTML5 定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些 Ja
3、vascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合 Canvas我们可开发网页版游戏。广义概念：HTML5 代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API 在内的一套技术组合 H5 范称HTML + CSS3 + JS 优点：http:/ 语法规范HTML5 在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。见代码实例第 5 页特点：1、更简洁2、更宽松单标签不用写关闭符号双标签省略结束标签html、head、body、
4、colgroup、tbody 可以完全省略实际开发中应规范书写，不建议太随意 ！W3C 验证地址https:/validator.w3.org/灵璧石 第 6 页第 2章语义标签语义标签对于我们并不陌生，如表示一个段落、 表示一个无序列表 表示一系列标题等，在此基础上 HTML5 增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。传统的做法我们或许通过增加类名如 class=“header“、class=“footer“，使HTML 页面具有语义性，但是不具有通用性 。HTML5 则是通过新增语义标签的形式来解决这个问题，例如、等，这样就可以使其具有通用性。此章
5、节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。传统网页布局：第 7 页H5 经典网页布局:2.1 常用新语义标签表示导航灵璧石 第 8 页表示页眉表示页脚表示区块表示文章 如文章、评论、帖子、博客表示侧边栏 如文章的侧栏表示媒介内容分组 与 ul li 做个比较表示标记 (带用“UI”，不怎么用)表示进度 (带用“UI”，不怎么用)表示日期本质上新语义标签与、没有区别，只是其具有表意性，使用时除了在 HTML 结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成 相当于 。不要好奇，它只是一个标签！尽量避免全局使用 header、foot
6、er、aside 等语义标签。2.2 兼容处理(我们在测试 ie 的兼容的时候，有一个叫做 ietest 的软件，这个软件可以模拟 ie6-ie11)在不支持 HTML5 新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在 IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(tagName)创建的自定义标签，于是我们的解决方案就第 9 页是将 HTML5 的新标签全部通过 document.createElement(tagName)来创建一遍，这样 IE 低版
7、本也能正常解析 HTML5 新标签了，在实际开发中我们更多采用的是通过检测 IE 浏览器的版本来加载三方的一个 JS 库来解决兼容问题。第 3章表单伴随着互联网富应用以及移动开发的兴起，传统的 Web 表单已经越来越不能满足开发的需求，所以 HTML5 在 Web 表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。此章节学习目的，了解 HTML5 表单的新增的特性，以及 PC 和移动设备间的差异，其兼容性较差。3.1 输入类型 (表单类型，表单元素，表单属性 ,表单事件.)email 输入 email 格式tel 手机号码 url 只能输入 url 格式number 只能输入数字search 搜索框灵璧石 第 10 页range 范围 滑动条color 拾色器time 时间date 日期 不是绝对的-datetime 时间日期month 月份week 星期部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。3.2 表单元素（标签）数据列表与 input 配合使用男女不详 生成加密字符串keygen 元素 keygen 元素的作用是提供一种验证用户的可靠方法。 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键， 一个是私钥，一个公钥。
