《网站前端技术》（梁玲）621-7 教案 第5课 HTML与HTML5（四）_第1页
《网站前端技术》（梁玲）621-7 教案 第5课 HTML与HTML5（四）_第2页
《网站前端技术》（梁玲）621-7 教案 第5课 HTML与HTML5（四）_第3页
《网站前端技术》（梁玲）621-7 教案 第5课 HTML与HTML5（四）_第4页
《网站前端技术》（梁玲）621-7 教案 第5课 HTML与HTML5（四）_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第5课HTML与HTML5（四）课时2课时（90min）教学目标知识技能目标：掌握HTML的列表标签、表单标签素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML列表标签、HTML表单标签教学难点：HTML表单标签教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（28min）→头脑风暴（10min）第2节课：→传授新知（37min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解HTML列表标签、表单标签的相关概念。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题HTML列表标签有什么作用？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）2.8HTML列表标签【教师】讲解HTML列表标签的作用、分类列表可以将相关信息有条理地组织在一起。HTML中提供了3种列表，分别是无序列表、有序列表和定义列表。【学生】聆听、记录、理解2.8.1无序列表【教师】讲解HTML无序列表的基本语法与示例<ul>即无序列表标签，用于定义无序列表，其可选择的属性有type。type属性用于定义列表项目符号的类型，其值有disc、square、circle、none。其中，disc表示实心圆；square表示实心方块；circle表示空心圆；none表示无列表项目符号。<li>即列表项标签，用于定义列表项目，可用在无序列表和有序列表中。<ul>和<li>标签都是块标签，它们的语法格式如下：<ul> <li>列表内容1</li> <li>列表内容2</li> … <li>列表内容n</li></ul>【示例2-8-1】编辑HTML文档<body>标签的内容，代码如下：<body> <p>爱好</p> <ultype="square"> <li>运动</li> <li>听音乐</li> <li>羽毛球</li> </ul></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“无序列表效果”图片（详见教材），并讲解效果：页面显示无序列表，列表项前面的符号为实心正方形。【学生】聆听、记录、理解2.8.2有序列表【教师】讲解HTML有序列表的基本语法与示例【课堂互动】✈【教师】提问HTML中有序列表应有什么设置？✈【学生】聆听、思考、回答<ol>即有序列表标签，用于定义有序列表，其可选择的属性有type和start。（1）type属相用于定义列表项目符号的类型，其值有1（默认值）、a、A、i、Ⅰ。其中，1表示数字有序列表；a表示按小写字母顺序排列的有序列表；A表示按大写字母顺序排列的有序列表；i时表示小写罗马字母；Ⅰ表示大写罗马字母。（2）start属性用于定义有序列表的起始值，其值为数值，默认的值为1。<ol>标签是块标签，其语法格式如下：<ol> <li>列表内容1</li> <li>列表内容2</li> … <li>列表内容n</li></ol>【示例2-8-2】编辑HTML文档<body>标签的内容，代码如下：<body> <p>爱好</p> <oltype="a"start="3"> <li>运动</li> <li>听音乐</li> <li>羽毛球</li> </ol></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“有序列表效果”图片（详见教材），并讲解效果：页面显示有序列表，列表项前面的符号为英文小写字母，从计数值3开始，即这里显示的c。【学生】聆听、记录、理解2.8.3定义列表【教师】讲解HTML定义列表的基本语法与示例【课堂互动】✈【教师】提问HTML中定义列表应有什么设置？✈【学生】聆听、思考、回答<dl>标签用于定义列表，结合<dt>和<dd>标签使用。<dt>标签用于定义列表中的项目。<dd>标签用于描述列表中的项目。它们都是块标签，其语法格式如下：<dl> <dt>列表项目1</dt> <dd>描述1</dd> <dt>列表项目2</dt> <dd>描述2</dd> … <dt>列表项目n</dt> <dd>描述n</dd></dl>【示例2-8-3】编辑HTML文档<body>标签的内容，代码如下：<body> <body> <p>爱好</p> <dl> <dt>运动</dt> <dd>如跑步、游泳</dd> <dt>听音乐</dt> <dd>尤其是英文经典歌曲和红色经典歌曲</dd> <dt>专业性工作</dt> <dd>如编写程序，实现网站前端后台效果</dd> </dl></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“定义列表效果”图片（详见教材），并讲解效果：页面显示自己定义的列表。【学生】聆听、记录、理解2.9HTML表单标签【教师】讲解表单标签的基本语法与示例✈【多媒体】组织学生扫码播放“HTML表单标签”视频（详见教材），让学生对这部分内容有一个大致地了解表单在网页中主要负责数据采集功能。对于用户而言，它是数据录入和提交的界面；对于网站而言，它是获取用户信息的途径。2.9.1表单标签<form>【教师】讲解表单标签<form>的基本语法与示例<form>标签用于为用户输入创建HTML表单，其可选择的属性有name、action、method、enctype、target。（1）name属性用于给表单命名，一般与表单id属性值相同，该属性方便JavaScript程序捕捉。（2）action属性用于指定表单数据提交的目标位置，是一般表单的必有属性，默认为当前页面，其值为目标地址。（3）method属性用于指定数据提交到服务器时使用哪种HTTP方法，其值有两种get和post。该属性是表单的必有属性，其默认值是get。①get方法，通过URL传递给程序。它将表单中的数据按照“变量名=值”的形式，添加到action所指向的目标位置后，两者使用“？”连接，各变量之间使用“&”连接。该方法数据容量小，数据暴露在URL中，非常不安全。②post方法，将表单中的数据放在form的数据体中，按照变量名和值相对应的方式，传递到action所指向的目标位置。该方法能传输大容量的数据，并且所有操作对用户来说都是不可见的，非常安全。【高手点拨】简单、少量、安全的数据可以使用get方法进行传递。大量或者需要保密的数据则使用post方法进行传递。（4）enctype属性用于指定表单数据在发送到服务器时的编码类型，其值有三个。①application/x-www-form-urlencoded（默认值）：在传送前对所有字符编码，在传输大型文件时效率较低。②multipart/form-data：指定传输的数据为二进制类型。③text/plain：纯文本传输，不对特殊字符编码，但是空格会转换为加号“+”。（5）target属性用于定义表单数据提交地址的打开方式，其值有_self（默认值）和_blank。①_self表示在当前页面打开。②_blank表示在新页面打开。<form>标签是块标签，其语法格式如下：<formname="表单名称"action="表单处理程序"method="传送方法"enctype="表单数据的编码类型"target="提交地址打开方式">…</form>通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML列表标签的语法及使用，以及表单标签的相关内容头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中的有序列表标签<ol>设计选项，以及使用<form>标签为用户输入创建HTML表单。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（3min）【教师】提出以下问题HTML表单控件有什么功能？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（37min）2.9.2表单控件<input>【教师】讲解表单控件<input>的使用与示例表单控件是提供一组允许用户操作的控件，从而接收用户输入的数据。<input>标签用于搜集用户信息，是表单中功能最丰富、种类最多的控件。【课堂互动】✈【教师】提问HTML中表单控件<input>有哪些可选属性？✈【学生】聆听、思考、回答<input>标签可选择的属性有type、value、name。（1）type属性用于规定表单控件的类型。不同的type值使得<input>标签具有不同的功能。（2）value属性用于规定预备提交的值，一般由用户输入或选择。（3）name属性用于规定表单控件的名称，由开发者定义。通过设置<input>标签不同的type属性值，可以获得不同功能的控件。1．文本域text当type的值为text时，可获得文本域控件，它可以为用户提交文本内容提供便利。该控件的语法格式如下：<inputtype="text"value="默认值"name="单行文本框名称"/>【示例2-9-1】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.jsp"> <inputtype="text"value="搜索一下"name="comName"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“文本域加载初始效果”以及“用户输入信息效果”图片（详见教材），并讲解效果：页面中文本框显示默认值“搜索一下。用户可以在文本框中输入文本，显示内容会随之改变，提交的值即value属性的值，且当用户提交时，变量comName的值即为文本框中的显示值。【提示】在HTML中，表单控件存在于form表单中。2．密码域password当type的值为password时，可获得密码域控件，它可以将用户输入的值设置为不可见，且默认显示为实心圆点。该控件的语法格式如下：<inputtype="password"value="默认值"name="密码域名称"/>【示例2-9-2】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.jsp"> <inputtype="password"value="123456"name="userPass"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“密码域效果”图片（详见教材），并讲解效果：密码域显示为实心圆点，默认值为“123456”。当用户输入自己的密码后，value的值随之改变，表单提交的变量名为“userPass”，其值为value的值。3．隐藏域hidden当type的值为hidden时，可获得隐藏域控件，它用于定义需要提交但不需要显示或不方便显示的信息。该控件的语法格式如下：<inputtype="hidden"value="默认值"name="隐藏域名称"/>【示例2-9-3】在【示例2-9-1】的基础上，编辑HTML文档<body>标签的内容，即在表单中添加隐藏域控件，代码如下：<body> <formaction="index.jsp"> <inputtype="text"value="搜索一下"name="comName"/> <inputtype="hidden"value="1"name="comId"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“隐藏域在‘元’栏目框中的效果”图片（详见教材），并讲解效果：文本域正常显示，但隐藏域不显示。但是，在页面空白处右击鼠标，然后在弹出的选项栏中选择“审查元素（N）”选项，便可以在网页下方的“元素”栏目框中看到隐藏域的内容。4．单选按钮radio当type的值为radio时，可获得单选按钮控件，允许用户选取给定数目的选择中的一个选项。该控件的语法格式如下：<inputtype="radio"name="单选按钮名称"value="信息值1"/>信息值显示1<inputtype="radio"name="单选按钮名称"value="信息值2"/>信息值显示2…<inputtype="radio"name="单选按钮名称"value="信息值n"/>信息值显示n【示例2-9-4】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.jsp"> <palign="center">从事专业</p> <inputtype="radio"name="speciality"value="security"/>信息安全 <inputtype="radio"name="speciality"value="software"/>软件工程 <inputtype="radio"name="speciality"value="comApp"checked="checked"/>计算机应用 </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“单选按钮效果”图片（详见教材），并讲解效果：页面中显示三个相互关联的单选按钮，且默认选项为“计算机应用。页面中单选按钮的名字是speciality，用户只能选择其中一个单选按钮。若用户选择“计算机应用”前面的单选按钮，则speciality的值为comApp。【提示】checked属性用于规定页面加载后默认选定的input元素，属性设置“checked="checked"”可以简写为“checked”。5．复选框checkbox当type的值为checkbox时，可获得复选框控件，允许用户在一定数目的选择中选取一个或多个选项。该控件的语法格式如下：<inputtype="checkbox"name="复选框名称"value="选项值1"/>选项显示1<inputtype="checkbox"name="复选框名称"value="选项值2"/>选项显示2…<inputtype="checkbox"name="复选框名称"value="选项值n"/>选项显示n【示例2-9-5】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.jsp"> <palign="left">爱好：</p> <inputtype="checkbox"name="hobby"value="walk"/>散步 <inputtype="checkbox"name="hobby"value="music"checked="checked"/>音乐……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“复选框效果”图片（详见教材），并讲解效果：页面中显示四个相互关联的复选框，且默认选择了两个选项，即音乐和视频。用户还可以根据自己的情况重新选择选项。【提示】具有属性checked="checked"的项目为默认所选项。6．按钮【课堂互动】✈【教师】提问根据具体单击行为触发的功能，按钮可以分为哪几种？✈【学生】聆听、思考、回答按钮根据具体单击行为触发的功能不同，可以分为以下三种。（1）普通按钮button当type的值为button时，可获得普通按钮控件，通过单击按钮触发动态行为，通常用来执行JavaScript脚本。该控件的语法格式如下：<inputtype="button"value="按钮上显示的内容，起到提示用户的作用"name="按钮名称"onclick="触发程序">（2）提交按钮submit当type的值为submit时，可获得提交按钮控件，通过单击行为将表单上的各元素值提交给表单处理程序。该控件的语法格式如下：<inputtype="submit"value="按钮上显示的内容，起到提示用户的作用"/>【示例2-9-6】在【示例2-9-5】的基础上，编辑HTML文档<body>标签的内容，即添加提交按钮控件，代码如下：<body> <formaction="index.jsp"> <palign="left">爱好：</p> <inputtype="checkbox"name="hobby"value="walk"/>散步 <inputtype="checkbox"name="hobby"value="music"checked="checked"/>音乐……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“提交按钮效果”图片（详见教材），并讲解效果：页面中显示“确认提交”按钮。单击按钮可将表单上hobby的值提交给表单处理程序。（3）重置按钮reset当type的值为reset时，可获得重置按钮控件，通过单击该按钮可以刷新表单上相关控件的值，重新显示为初始值。该控件的语法格式如下：<inputtype="reset"value="重置信息"/>【示例2-9-7】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.html"name="reg"> 用户名： <inputtype="text"value="请输入用户名"name="userName"/><br/> 工龄： <inputtype="number"begin="2"end="10"value="5"/><br/>……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“页面初始状态效果”“页面输入数据的效果”“单击“确认提交”按钮提交表单地址栏效果”图片（详见教材），并讲解效果：页面中输入数据，然后单击“确认提交”按钮，链接地址会显示相关参数的值。单击“重置信息”按钮，则表单各控件值重新加载为初始值，页面也变为初始状态。【提示】因“工龄”文本之后的文本框没有name属性，所以提交后地址栏中没有相应参数。7．图像域image当type的值为image时，可获得图像域控件，用于定义图像形式的提交按钮，与submit按钮作用相同。该控件的语法格式如下：<inputtype="image"src="按钮图像文件路径"/>【示例2-9-8】在【示例2-9-7】的基础上，编辑HTML文档<body>标签的内容，即更换提交按钮，代码如下：<body> <formaction="index.html"name="reg"> 用户名： <inputtype="text"value="请输入用户名"name="userName"/><br/> 工龄： <inputtype="number"begin="2"end="10"value="5"/><br/>……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“图像按钮效果”图片（详见教材），并讲解效果：页面中显示图像形式的提交按钮。8．文件域file当type的值为file时，可获得文件域控件，用于上传文件，如图像文件、文本文件等。该控件的语法格式如下：<inputtype="file"name="控件名称"/>【示例2-9-9】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.html"name="reg"> 附件上传 <inputtype="file"name="bannerImg"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“文件域按钮效果”、“上传文件ban1.jpg后的效果”图片（详见教材），并讲解效果：页面中显示按钮“选择文件”，且按钮后跟文本“未选择任何文件”。单击按钮，弹出打开文件对话框。【学生】聆听、记录、理解2.9.3多行文本域<textarea>【教师】讲解多行文本域<textarea>的基本语法与示例【课堂互动】✈【教师】提问HTML中多行文本域<textarea>标签应有什么设置？✈【学生】聆听、思考、回答有时用户需要输入大量的文本内容，单行文本框显然无法实现。HTML为开发者提供了多行文本区域<textarea>标签。该标签的属性有rows、cols、name。其中，rows属性用于规定文本区内的可见行数；cols属性用于规定文本区内的可见宽度；name属性用于规定控件名称，也是参数提交时使用的变量名称。<textarea>标签是行标签，其语法格式如下：<textareaname="控件名称"cols="每行字符数"rows="显示的行数"></textarea>【示例2-9-10】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.html"name="reg"> <textareaname="content"id=""cols="50"rows="5"></textarea> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“多行文本区域标签效果”图片（详见教材），并讲解效果：页面中显示变量名为content的文本区域，显示5行，每行显示50个字符（英文字符），相当于25个汉字。当输入的内容超过5行，则显示滚动条，每行显示的汉字数变为24个。【学生】聆听、记录、理解2.9.4下拉列表<select>【教师】讲解下拉列表<select>的基本语法与示例<select>标签称为下拉列表或滚动列表，也是常用的用户交互表单元素，它由子元素<option>标签配合实现下拉列表功能。【课堂互动】✈【教师】提问HTML中下拉列表<select>标签有哪些属性？✈【学生】聆听、思考、回答<select>标签的属性有name，用于规定控件名称，也是提交表单时提交的下拉列表名称。<option>标签的属性有value和selected。其中，value属性用于规定送往服务器的选项值。selected属性用于规定选项（在首次显示在列表中时）表现为选中状态

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论