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

下载本文档

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

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

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

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

（28min）2.14.3HTML5表单控件的新增属性【教师】讲解HTML5表单控件新增属性的使用与示例1．placeholder属性placeholder属性一般用于提示用户可输入的预期信息。当用户输入时，提示文本消失。【示例2-14-3】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"placeholder="请输入您的账号"/><br/> 密码：<inputtype="password"placeholder="请输入您的密码"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“placeholder属性的应用效果”“输入内容后“图片（详见教材），并讲解效果：用户输入账号和密码时，提示内容立即消失，刷新页面，页面变回初始状态。2.form属性form属性用于设置控件属于哪个表单，可以将表单控件置于<form>标签之外。它的值为某个表单的id值。【课堂互动】✈【教师】提问HTML中的form属性如何应用？✈【学生】聆听、思考、回答【示例2-14-14】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""id="login"> 账号：<inputtype="text"name="user_account"placeholder="请输入您的账号"/><br/> 密码：<inputtype="password"name="user_password"placeholder="请输入您的密码"/> </form> <inputtype="submit"form="login"/></body>【教师】ppt展示“form属性的应用效果”图片（详见教材），并讲解效果：HTML文件中“提交”按钮位于表单之外，但是页面中，“提交”按钮仍然可以提交数据，且提交后的数据作为参数跟在页面URL后面。3.formaction属性【示例2-14-15】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"name="user_account"placeholder="请输入您的账号"/><br/> 密码：<inputtype="password"name="user_password"placeholder="请输入您的密码"/><br/> <inputtype="submit"formaction="login"value="登录"/> <inputtype="submit"formaction="regist"value="注册"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“formaction属性的应用效果”“表单数据提交到不同的目标地址“图片（详见教材），并讲解效果：输入信息并单击“登录”按钮后，地址栏中的“？”参数前面是login；单击“注册”按钮后，地址栏中的“？”参数前面是regist。4.formmethod属性formmethod属性用于规定将表单数据发送到action属性规定的地址中的方法。【课堂互动】✈【教师】提问formmethod属性的作用是什么？✈【学生】聆听、思考、回答它可以覆盖<form>标签的method属性，还可以为不同的submit按钮设置不同的表单数据发送方法。该属性的取值有get（默认值）和post。【示例2-14-16】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"name="user_account"placeholder="请输入您的账号"/><br/> 密码：<inputtype="password"name="user_password"placeholder="请输入您的密码"/><br/> <inputtype="submit"formmethod="get"value="登录"/> <inputtype="submit"formmethod="post"value="注册"/> </form></body>【教师】ppt展示“不同的formmethod属性值的不同效果”图片（详见教材），并讲解效果：页面初始状态与form属性应用效果相同，当输入信息并单击“登录”按钮后，地址栏中会显示提交的表单数据。但是，单击“注册”按钮后，地址栏不会显示提交的表单数据。5.formenctype属性formenctype属性用于规定表单数据提交到服务器时的编码方式。它可以覆盖<form>标签的enctype属性，还可以为不同的submit按钮设置不同的表单数据编码方式。该属性的值有application/x-www-form-urlencoded（默认值）、multipart/form-data、text/plain。【示例2-14-17】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"name="user_account"placeholder="请输入您的账号"/><br/> 密码：<inputtype="password"name="user_password"placeholder="请输入您的密码"/><br/> <inputtype="submit"value="提交"/> <inputtype="submit"formenctype="multipart/form-data"value="以multipart/form-data编码方式提交"/> </form></body>【教师】ppt展示“formenctype属性的应用效果”图片（详见教材），并讲解效果：填写账号与密码，无论选择那种提交方式，地址栏中都会显示提交的表单数据。6.formtarget属性formtarget属性用于规定提交表单数据后页面地址的打开方式。它可以覆盖<form>标签的target属性，还可以为不同的submit按钮设置不同的页面地址打开方式。该属性的值有_self（默认值）和_blank。【课堂互动】✈【教师】提问HTML中的formtarget属性怎么应用？✈【学生】聆听、思考、回答【示例2-14-18】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"name="user_account"placeholder="请输入您的账号"/><br/> 密码：<inputtype="password"name="user_password"placeholder="请输入您的密码"/><br/> <inputtype="submit"value="提交"/> <inputtype="submit"formtarget="_blank"value="打开一个新窗口"/> </form></body>效果：填写账号与密码，单击“提交”按钮会在当前窗口打开页面；单击“打开一个新窗口”按钮会在新窗口打开页面。7.autocomplete属性【课堂互动】✈【教师】提问autocomplete属性有什么作用？✈【学生】聆听、思考、回答autocomplete属性用于规定输入字段是否开启自动完成功能，其取值有on（默认值）和off。当属性值为on时，启动自动完成功能；属性值为off时，禁用自动完成功能。【示例2-14-19】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"name="user_account"placeholder="请输入您的账号"autocomplete="on"/><br/> 密码：<inputtype="password"name="user_password"placeholder="请输入您的密码"/> <inputtype="submit"/> </form></body>效果：提交过信息后，再次输入时，输入框下方就会出现最近的历史输入信息。若属性autocomplete="off"，则输入框下方不会出现历史输入信息。8.autofocus属性autofocus属性用于规定页面加载后表单控件自动获得焦点，其取值为autofocus。【示例2-14-20】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"placeholder="请输入您的账号"autofocus="on"/><br/> 密码：<inputtype="password"placeholder="请输入您的密码"/><br/> <inputtype="submit"value="登录"/> </form></body>【教师】ppt展示“autofocus属性的应用效果”图片（详见教材），并讲解效果：页面加载后，“请输入您的账号”文本框边框凸起，且光标在该文本框内闪烁，该文本框获得焦点。9.required属性required属性用于规定必须在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。此外，在提交表单时，若字段中没有输入数据，浏览器会显示提示内容“请填写此字段”。该属性的取值为required。【示例2-14-21】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 账号：<inputtype="text"placeholder="请输入您的账号"required="required"/><br/> 密码：<inputtype="password"placeholder="请输入您的密码"/><br/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“required属性的应用效果”图片（详见教材），并讲解效果：如果账号还没有输入，直接单击“提交”按钮，页面中会显示“请填写此字段”的提示。10.list属性list属性可以为输入类型的表单控件指定一个可用的选项列表，用户可以直接输入信息，也可以从列表中选择。该属性的取值为与之关联的<datalist>标签的id值。【示例2-14-22】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 行业选择：<inputtype="text"name="myprof"list="profession"placeholder="可从列表中选择"/> <inputtype="submit"value="提交"/> </form> <datalistid="profession"> <optionvalue="education">教育</option> <optionvalue="manufacture">制造</option> <optionvalue="construction">建筑</option> <optionvalue="IT">IT</option> <optionvalue="food">食品</option> </datalist></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“list属性的应用效果”图片（详见教材），并讲解效果：当文本框获得焦点时，显示列表内容。【提示】代码中<datalist>标签可以置于任何地方，建议将其与关联的<input>放在一起。若用户输入了列表中原来没有的内容点，并单击“提交”按钮，则该内容会出现在列表底部。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解HTML5表单控件新增属性的语法及使用头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用placeholder属性提示用户可输入的预期信息，将输入字段开启自动完成功能，并且规定在提交之前必须填写输入字段。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（3min）【教师】提出以下问题除了之前所讲到的属性外，HTML5表单控件还有哪些新增属性？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（17min）2.14.3HTML5表单控件的新增属性【教师】讲解HTML5表单控件新增属性的使用与示例11.novalidate属性【课堂互动】✈【教师】提问novalidate属性起什么作用？✈【学生】聆听、思考、回答novalidate属性用于规定在提交表单时不对元素内容进行验证，其取值为novalidate。【示例2-14-23】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""novalidate="novalidate"> 账号：<inputtype="text"placeholder="请输入您的账号"required="required"/><br/> 密码：<inputtype="password"placeholder="请输入您的密码"/><br/> E-mail地址：<inputtype="email"placeholder="请输入您的邮箱地址"required="required"/> <inputtype="submit"/> </form></body>效果：为<form>标签设置novalidate属性，单击“提交”按钮后，对于输入的非邮件地址格式不进行验证，没有提示缺少@。12.pattern属性pattern属性用于验证表单输入的内容，可配合使用title属性定义验证规则提示，其取值为正则表达式。【示例2-14-24】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 姓名：<inputtype="text"placeholder="请输入您的姓名"required="required"pattern="^[\u4e00-\u9fa5]{2,4}$"title="2-4个中文字符"/><br/> 手机号：<inputtype="tel"placeholder="请输入您的手机号"pattern="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$"/> <inputtype="submit"/> </form> </body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“姓名正则验证效果”“手机号码正则验证效果“图片（详见教材），并讲解效果：因设置title属性，所以在姓名输入框中输入5个中文，单击“提交”按钮后，提示中附加格式要求。因未设置title属性，所以在手机号输入框中输入数字，并单击“提交”按钮后，提示中只要求保持格式一致，没有具体要求。13.maxlength属性和wrap属性maxlength和wrap属性都是<textarea>标签新增的属性。maxlength属性用于规定文本区域中的最大字符数，其取值为数值。wrap属性用于规定文本区域中的文本在提交表单时是否包含换行，其取值为soft（默认值）和hard。其中，soft表示不包含换行；hard表示包含换行（如果有换行）。【示例2-14-25】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction="index.html"id="login"> 请留下您的建议：<br/> <textareaname="somesuggestions"rows="2"cols="10"maxlength="25"wrap="hard"></textarea><br/> <inputtype="submit"value="提交"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“maxlength、wrap属性的应用效果”图片（详见教材），并讲解效果：在文本区域输入“wodehaizifeichangpiaoliang”，由于maxlength="25"，所以文本框；当wrap="soft"时，单击“提交”按钮后，地址栏中的参数中则只有输入的字符，没有换行“%0D%0A”。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解HTML5表单控件新增属性的语法及使用综合案例（20min）2.15综合案例——百度首页【教师】讲解编辑百度首页的具体操作【课堂互动】✈【教师】提问百度首页有什么功能与模块？✈【学生】聆听、思考、回答【教师】ppt展示图片“百度首页最终效果”（详见教材），辅助并讲解该项目实现的网页最终显示效果如图所示。网页中含有图片、文本、超链接、文本框控件和按钮等内容。1．搭建网站在C盘上新建文件夹，并命名为“baidu”，以此文件夹作为项目站点。【提示】在网站中的所有文件或文件夹名称都只能包含英文、下划线、数字，不能包含汉字，且首字母不能为数字。2．准备图像素材在“baidu”文件夹下新建文件夹，并命名为“img”，然后将图像素材“logo.gif”复制到“img”文件夹下。【提示】网站根目录中通常有各种功能目录，如用来存放图像资源的img目录，用来存放网站样式文件的css目录等。3．创建网站首页“index.html”（1）使用快捷方式在站点根目录下创建文本文档，并将文件名设置为“index.html”，其中.html为文件后缀名。（2）使用“记事本”工具打开“index.html”文件。【提示】一个网站首页默认的文件名为“index”或“default”。本书中所涉及的教学项目网站首页名称均为“index”。4．编辑首页文件的基本结构【课堂互动】✈【教师】提问在编辑基本结构时需要用到哪些标签？✈【学生】聆听、思考、回答（1）在“index.html”文件中输入<html>标签。代码如下：<html></html>（2）在<html>标签内部，输入<head>和<body>标签。代码如下：<html> <head></head> <body></body></html>【提示】在HTML中，标签包含和被包含的关系称为父子关系，如此处<html>标签有<head>和<body>两个子标签。为了使文档结构清晰，在开发过程中开发人员应养成子标签相对父标签缩进的书写习惯。但是，通常在网站发布前，开发人员会使用软件将文档中的空格和换行符消除。（3）测试首页文件的效果。保存“index.html”文件，然后在站点目录中找到“index.html”文件，选中该文件，并单击鼠标右键，选择打开方式为“GoogleChrome”。其中，首页的标题为index.html，内容空白。【提示】谷歌和火狐称为开发者浏览工具，对HTML5新标签和CSS3新样式有很高的兼容性，同时提供开发者工具。因此，为了使初学者不必考虑兼容性问题，学习本书的过程中建议使用谷歌浏览器。5．编辑文件<head>标签的内容（1）在<head>标签中输入单标签<meta>，设置字符编码方式为utf-8。代码如下：<metacharset="utf-8"/>（2）接着在<head>标签中输入标题标签<title>，<title>标签内容为“张丽的百度首页”。代码如下：<title>张丽的百度首页</title>此时，使用浏览器测试首页效果，首页标题变为“张丽的百度首页”。【提示】编写HTML文件的过程中要及时保存文件，并刷新网页，观察网页编辑效果。6．编辑文件<body>标签的内容（1）在<body>标签中输入段落标签<p>，并设置该标签的对齐方式属性align="right"。接着，输入标签内容“搜索设置  |  登录”。代码如下：<palign="right">搜索设置  |  登录</p>（2）在<p>标签后面再输入一个<p>标签，并设置该标签的对齐方式属性align="center"。接着，在该标签的内容部分输入图像标签<img>，图像地址属性src="img/logo.gif"，宽度属性width="270"，高度属性height="auto"。代码如下：<palign="center"> <imgsrc="i

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

温馨提示

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

最新文档

评论

0/150

提交评论