HTML5移动前端开发基础与实战第2章课件.pptx

1、第2章 HTML本章主要讲述HTML的相关知识。HTML（HyperText Markup Language）：超文本标记语言，是标准通用标记语言下的一个应用，也是一种规范、一种标准。HTML5移动前端开发基础与实战（微课版）1熟练掌握HTML常用元素的使用。2了解HTML多媒体标签。3了解拖放编程。4熟练掌握Web存储机制。学习目标5掌握使用canvas绘制图形。HTML标签由开始标签和结束标签组成。开始标签是被括号包围的元素名（如），结束标签是被括号包围的斜杠和元素名（如），某些HTML元素没有结束标签，如。2.1 HTML常用元素2.2.1 label、input、button、radi

2、o、checkbox、ul熟悉label及各种类型的input。演练2.1熟悉单选钮radio、复选框checkbox。演练2.2【注意观察】在标记中设定checked参数，则该选框就被默认选中。同一组单选具有相同的name，比如旅游组的name都设为“travel”。这样才能实现name相同的一组单选钮多选一的效果。掌握select元素的用法，并能获取select元素的索引、值、文本。演练2.3掌握datalist的用法。演练2.4熟悉无序列表ul、有序列表ol、动态生成列表元素。演练2.5对照结果，理解JavaScript代码，学会获取select元素单选、多选时如何获取选中的索引inde

3、x、文本text和值value。介绍如何使用email、url、number、range、date、month等表单验证元素，这些元素提供了更方便的输入控制和验证。2.1.2 安装package control组件熟悉各种表单验证元素。演练2.65Gaudio、video、canvas等元素的引入，提高了用户体验度。地理位置服务、拖放、本地数据存储、文件上传、离线应用等新特性也极大地丰富了前端编程。本节介绍其中一些常用新特性的使用。2.2 HTML5新特性2.2.1 多媒体使用video标签播放视频。演练2.7使用audio标签播放音频。演练2.8【注意】Chrome浏览器可能不支持自动播放。

4、2.2.2 拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。掌握拖放编程的一般方法。演练2.92.2.3 Web存储HTML5提供了两种在客户端存储数据的新方法：localStorage和sessionStorage，localStorage可以没有时间限制，sessionStorage有效期在一次会话内有效，比如当浏览器关闭后，该次会话数据丢失。不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。可以使用 JavaScript来存储和访问数据。理解localStorage和sessionStorage的用途并熟练

5、编程。演练2.10利用LocalStorage保存用户登录信息。演练2.112.2.4 canvas绘制图形canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。学会使用canvas绘制图形。演练2.12本章思考能不看书、不看帮助熟练编写input、radio、checkbox、a、img、button相关代码了吗？熟悉ul的基本语法了吗？会动态生成列表元素了吗？理解localStorage和sessionStorage了吗？能针对其熟练编程了吗？123学 习 进 步！HTML5移动前端开发基础与实战（微课版）