第9课 网页数据编码  教学设计
课 题
网页数据编码
教学目标
1. 通过了解网页的数据编码，理解网页的数据请求与响应过程。
2. 通过体验网页表单，了解网页表单数据交互的过程。
重难点
教学重点：了解网页的数据编码，理解网页的数据请求与响应过程。
教学难点：通过体验设置网页表单，了解网页表单数据交互的过程。
课前准备
1. 网络教室。html获取input输入的数据
2. 在线应用相关软件或平台。
课时安排
1课时
教师活动
学生活动
设计意图
一、
引入
话题引入：你知道网页是如何实现交互的吗?你知道网页数据有哪些编码方式?
参与讨论
通过话题引导，激发学生学习兴趣，引出本课课题。
二、
新授
一、网页的编码
（一）你知道什么是网页编码？
网页编码是指用于表示和处理网页文本内容的字符编码方法。文本、图像、音频、视频等数据是通过HTML标签编码组织在网页中，再由浏览器解释并呈现。
（二）常用的网页编码举例
文本的段落可以使用标签<p> 组织；图像可以使 用标签<img/>实现将其插入文本中；多媒体的播放可以使用<audio>、<video>等标签组织，并能设置播放方式。
二、网页的数据请求与响应
（一）你知道什么是网页的数据请求与响应？
网页需要通过请求与响应以获取HTML数据，网页中如有多个媒体数据，则需要多次请求与响应，才能在网页上呈现。
（二）网页的数据请求与响应
活动一：使用<img/>标签添加图片文件，再尝试使用其他标签。
三、网页中的交互
（一）什么是网页中的交互？
网页中的交互是指用户与网页之间的互动行为，用户可以通过鼠标、键盘或触摸等输入设备与网页进行交互，而网页则会根据用户的操作做出相应的反馈或执行相应的动作。
（二）网页中的交互的形式：
1、点击链接
2、表单交互
3、按钮操作
4、鼠标悬停
5、下拉菜单
6、滚动交互
7、轮播图
8、弹出框和模态框
9、列表排序与过滤
10、拖放交互
（三）创建表单的基本步骤：
在HTML中，使用<form>标签创建表单元素，它会包裹表单中的各个字段和提交按钮。
（四）常见的表单字段包括：
1、<input type="text">：文本输入框，用于接收用户输入的文本。
2、<input type="password">：密码输入框，用于接收用户输入的密码，显示为密文。
3、<input type="checkbox">：复选框，允许用户选择一个或多个选项。
4、<input type="radio">：单选按钮，允许用户从一组选项中选择一个。
5、<select>和<option>：下拉菜单，允许用户从预定义的选项中选择一个。
6、<textarea>：多行文本输入框，用于接收用户输入的多行文本7、轮播图。
（五）教师演示创建一个包含文本输入框和提交按钮的表单。
活动二：制作一张调查家庭使用人工智能设备的网页。
学习网页编码
学习常见的网页编码
学习网页的数据请求与响应
完成活动一
学习网页中的交互
学习网页中的交互形式
学习创建表单的步骤
学习常见的表单字段
完成活动二
了解网页编码
了解常见的网页编码
了解网页的数据请求与响应
学以致用
了解网页中的交互
了解网页中的交互形式
了解创建表单的步骤
了解常见的表单字段
学以致用
三、课堂练习
随堂练习
1. 制作一张调查家庭使用人工智能设备的网页。
完成随堂练习
以练习巩固本节课的内容。
四、课堂小
结
一、网页的编码
二、网页数据的请求与响应
三、网页中的交互