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移动前端开发基础与实战(微课版)