《网站前端技术》教案第9课HTML与HTML5（八）.docx
课题第9课HTML与HTML5（八）课时2课时(90min)教学目标知识技能目标：掌握HTML5新增的表单控件属性素质目标：（1）加强理论基础，提升专业技能（2）制作百度首页，锻炼实践能力，从而达到学以致用的目的教学重难点教学重点：HTML5表单控件的新增属性教学难点：HTML5表单控件的新增属性、制作百度首页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（IOmin）第2节课：问题导入（3min）一传授新知（17min）T综合案例（20min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML5新增表单控件属性的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP迸行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题HTML5表单控件有哪些新增属性？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）2.14.3HTML5表单控件的新增属性【教师】讲解HTML5表单控件新增属性的使用与示例1.placeholder属性P山CehOlder属性一般用于提示用户可输入的预期信息。当用户输入时，提示文本消失。【示例2-14-3编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction="">账号:<inuttype=',text"PIaCeholder="请输入您的账号"><br/>通过教师讲解、课堂互动、演示操作等方式，使学生了解HTML5表单控件新增属性的语法及使用密码：<inputtype="password"PlaCehOlder="请输入您的密码"/><fbrm><body>【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“placeh。Ider属性的应用效果”“输入内容后”图片（详见教材），并讲解效果：用户输入账号和密码时，提示内容立即消失，刷新页面，页面变回初始状态。2. form属性form属性用于设置控件属于哪个表单，可以将表单控件置于<form>标签之外。它的值为某个表单的id值。【课堂互动】十【教师】提问HTML中的form属性如何应用？十【学生】聆听、思考、回答【示例2-14-14编辑HTML文档VbO<ly>标签的内容，代码如下：<body><fbnaction=""id="login">5：<inpuitype="iex（"name=，SejaCCOUnr,placeholder="请输入您的账号"><br>密码：<inputIyPe="password"name="user_password"placeholder=”请输入您的密码“><fbrm><inputtype="submit"fbrm="login"><body>【教师】PPt展示“form属性的应用效果”图片（详见教材），并讲解效果：HTML文件中"提交"按钮位于表单之外，但是页面中，"提交"按钮仍然可以提交数据，且提交后的数据作为参数跟在页面URL后面。3. formaction属性formaction属性用5领定提交表单雌的目标地址。它可以覆盖<Mrm漏签的action属性,还可以为不同的submil按钮设置不同的表单数醴交地此该属性的取值为发送表单数据的地址。【示例2-14-15编辑HTML文档<body>标签的内容，代码如下：<body><formaction=',',>账号：<inputtype="text"name="user_account"PlaCehoIder="请输入您的账号',><br>密码：<inputtype="password"name=',user-password"placeholder=请输入您的密码”><br/><inpulIype=nSubmil"formaclion="login"value="登录"/><inputtype=',submit"fbrmaction="regist"value="iflB"><form><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“formaction属性的应用效果”“表单数据提交到不同的目标地址“图片（详见教材），并讲解效果：输入信息并单击"登录"按钮后，地址栏中的"?"参数前面是login；单击“注册"按钮后，地址栏中的"？”参数前面是regist4. formmethod属性formme（hoci属性用于规定将表单发送到action属性规定的地址中的方法。【课堂互动】十【教师】提问formmethod属性的作用是什么？÷【学生】聆听、思考、回答它可以覆盖<form>标签的method属性，还可以为不同的submit按钮设置不同的表单数据发送方法。该属性的取值有get（默认值）和post.【示例2-14-16编辑HTML文档<body>标签的内容,代码如下：<body><fbrmaction="">账号：<inputtype="text"name="user_account"PIaCehoIder="请输入您的账号"Zxbr/>密码：<inputtype="password"name="user_password"placeholder=”请输入您的密码"><br/><inputtype="submit"founmethod="get"value="登录"/><inputtype="submit"formmethod="post"value="iiflH"><fbrm><body>【教师】PPt展示“不同的formmethod属性值的不同效果”图片（详见教材），并讲解效果：页面初始状态与form属性应用效果相同，当输入信息并单击"登录"按钮后，地址栏中会显示提交的表单触。但是，单击"注册"按钮后，地址栏不会显示提交的表单蝇5. formenctype属性formenctype属性用于规定表单数据提交到服务器时的编码方式。它可以覆盖<fon>标签的enctype属性,还可以为不同的submit按钮设置不同的表单数据编码方式.该属性的值有aplica（ionx-www-form-urlencoded（默认值）、mullipartform-da（axIeXUPlaino【示例2-14-17编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction="',>【教师】PPt展示“formenctype属性的应用效果”图片（详见教材），并讲解【课堂互动】十【教师】提问HTML中的formtarget属性怎么应用？十【学生】聆听、思考、回答【课堂互动】十【教师】提问autocomplete属性有什么作用?÷【学生】聆听、思考、回答效果：填写账号与密码，无论选择那种提交方式，地址栏中都会显示提交的表单数据。6. formtarget 属性formtarget属性用于规定提交表单数据后页面地址的打开方式。它可以覆盖Ibrm标签 的target属性，还可以为不同的submit按钮设置不同的页面地址打开方式.该属性的值有 .self （默认值）和-blank【示例2-14-18编辑HTML文档<body>标签的内容，代码如下：<body><frm><body>贝长号：<inputIyPe="text"name="usejaccount"placeholder="请输入您的J!K"><br>密码：<inputtype="password"name=',user-password"placeholde-“请输入您的密码"><br/><inpu(Iype="submiT'value="提交"/><inputtype="submit"formenctype="multipart/fbrm-data"value="以mullipart/form-data编码方式提交"/><form><formaelion="">账号：<inputtype="lext"name=',usejaccounr,PIaCehoIder="请输入您的账号,<><br>密码：<inputtype="password"name=',user-password"placeholder=”请输入您的密码"><br><inputtype="submit"VaIUe="提交"/><inputiype="submit"formtarget="_blank"value="JJ5T一个新窗口"/><body>效果：填写账号与密码，单击"提交"按钮会在当前窗口打开页面；单击"打开一个新窗口”按钮会在新窗口打开页面。7. autocomplete属性4autocomplete属性用于规定输入字段是否开启自动完成功能，其取值有on（默认值）和off.当属性值为on时，启动自动完成功能；属性值为Off时，禁用自动完成功能。【示例2-14-19编辑HTML文档<body>标签的内容,代码如下：<body><formaction="',>账号：<inputtype="text"name="usejaccount"placeholder="请输入您的账号"autocomplete="on"><br/>密码：<inputtype="password"name="user_password"placeholder=”请输入您的密码"><inputtype="submit"/><fbrm><body>效果：提交过信息后，再次输入时，输入框下方就会出现最近的历史输入信息。若属性autocomplete="off'z则输入框下方不会出现历史输入信息。8. autofocus属性auiof。CuS属性用于规定页面加载后表单控件自动获得焦点，其取值为autofocus.【示例2-14-20编辑HTML文档<body>标签的内容,代码如下：<body><fbrmaction="">账号：<inputtype="text"PIaCehoIder="请输入您的账号"autofocus="on'7><br>密码：<inputtype="password"PlaCeholder='请输入您的密码"><br/><inutIyPe=飞Ubmit"value="登录"/><fbrm><body>【教师】PPt展示“autof。CUS属性的应用效果”图片（详见教材），并讲解效果：页面加载后，”请输入您的账号"文本框边框凸起，且光标在该文本框内闪烁，该文本框获得焦点。9. required属性required属性用于规定必须在提交之前填写输入字段.如果使用该属性，则字段是必填（或必选）的。此外，在提交表单时，若字段中没有输入数据，浏览器会显示提示内容"请填写此字段”。该属性的取值为required。【示例2-14-21】编辑HTML文档<body>标签的内容，代码如下：<body><formaction=,",>5!K：<inputIyPe="texl"placeholder="请输入您的账号"required="required"><br>密码：<inputtype="password"PIaCehOlder=入您的密码"><br><inputtype="submit"/><fbrm><body>【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“required属性的应用效果”图片（详见教材），并讲解效果：如果账号还没有输入，直接单击“提交"按钮,页面中会显示"请填写此字段"的提示。10. list属性IiSl属性可以为输入类型的表单控件指定一个可用的选项列表，用户可以直接输入信息，也可以从列表中选择。该属性的取值为与之关联的datalist标签的id值。【示例2-14-22编辑HTML文档<bo<ly>标签的内容，代码如下：<body><fbrmaction="">行业选择：<inputlye="ext"name="mypro,list="profession"placeholder="可从列表中选择”/><inputtype="submit"value="提交"/><form><datalisiid="profession"><optionVaIUe="education”>教育<oPliOn><optionValUe="manufacture”>制造<oPtion><optionValUe="consiruction”>建筑vopiion><optionvalue="IT">IT<option><optionValUe="food"食品voiion><datalist><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“list属性的应用效果”图片(详见教材)，并讲解效果：当文本框获得焦点时，显示列表内容。【提示】代码中VdalaIis标签可以置于任I可地方，建议将其与关联的inpui放在一起。若用户输入了列表中原来没有的内容点，并单击"提交"按钮，则该内容会出现在列表底部。头脑风暴(10 min)【学生】聆听、记录、理解【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用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地址：<inputIype="email"placeholder="请输入您的邮箱地址"required="required"/><inpullype="submit"/><fbrm><body>效果：为<fo11n>标签设置novalidate属性，单击"提交"按钮后，对于输入的非邮件地址格式不进行验证，没有提示缺少。12. pattern属性pattern属性用于验证表单输入的内容,可配合使用title属性定义验证规则提示，其取值为正则表达式。【示例2-14-24编辑HTML文档<body>标签的内容，代码如下：<body><formaction=',">姓名：inputtype="text"placeholder="请输入您的姓名"required="required"pauem=',(u00-u9fa512.4S"title="2-4个中文字符"><br>手机号：<i11puttype="tel"PIaCehoIder="请输入您的手机号l'pattern="(130-9|1401456879|150-35-9|162567|170-8|180-9|190-35-9)d8$"/><inputtype="submit"/><fbrm><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“姓名正则验证效果"“手机号码正则验证效果”图片(详见教材),并讲解效果：因设置title属性，所以在姓名输入框中输入5个中文，单击"提交"按钮后，提示中附加格式要求。因未设置IiUe属性，所以在手机号输入框中输入数字，并单击"提交"按钮后，提示中只要求保持格式一致，没有具体要求.13. maxlengtl属性和wrap属性maxlength和wrap属性都是<lexlarea>标签新增的属性。maxlengm属性用于规定文本区域中的最大字符数，其取值为数值。wrap属性用于规定文本区域中的文本在提交表单时是否包含换行，其取值为soft（默认值）和hard其中，soft表示不包含换行；hard表示包含恻亍（如果有换行1）.【示例2-14-25编辑HTML文档<body>标签的内容，代码如下：<body><formaction="index.himl"id="login">请留下您的建议：<br><textareaname="somesuggestions"rows="2"cols="10"maxlength="25"wrap="hard"><textarea><br/><inputIyPe="submil"value="提交"><fbrm><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示"maxlength,wrap属性的应用效果”图片（详见教材），并讲解效果：在文本区域输入"Wodehaizifeichangpiaoliang",由于maxlength="25",所以文本框未接收最后一个字母ge由于COls="10",所以在字母f和字母a（指Piao中的a）后面会有换行。当wrap='hard'W,单击"提交"按钮后，地址栏的参数中有换行"0D%0A"；当wrap="soft"B,单击"提交"按钮后，地址栏中的参数中则只有输入的字符，没有换行"%0D%0A”。【学生】聆听、记录、理解2.15综合案例百度首页【教师】讲解编辑百度首页的具体操作【课堂互动】+【教师】提问百度首页有什么功能与模块？）【学生】聆听、思考、回答通过教师讲解、课综合案例【教师】PPt展示图片“百度首页最终效果”（详见教材），辅助并讲解堂互动等方式,让学(20min)该项目实现的网页最终显示效果如图所示。网页中含有图片、文本、超链接、文本框控生了解制作网页的件和按钮等内容。1.搭建网站在C盘上新建文件夹，并命名为"baidu”,以此文件夹作为项目站点。【提示】流程与具体操作在网站中的所有文件或文件夹名称都只能包含英文、下划线、数字，不能包含汉字，且首字母不能为数字。网站根目录中通常有各种功能目录，如用来存放图像资源的img目录，用来存放网站样式文件的CSS目录等。3 .创建网站首页“index.htnil”(1)使用快捷方式在站点根目录下创建文本文档，并将文件名设置为"index.html",其中.html为文件后缀名。(2)使用“记事本"工具打开"index.html"文件。【提示】一个网站首页默认的文件名为“index"或"defaull"。本书中所涉及的教学项目网站首页名称均为"index".4 .编辑首页文件的基本结构【课堂互动】+【教师】提问在编辑基本结构时需要用到哪些标签？【学生】聆听、思考、回答(】)在"index.html”文件中输入<html>标签。代码如下：<html><html>(2)在<hlml>标签内部，输入<head>和<body>标签。代码如下：<html><head><head><body><body><html>【提示】在HTML中，标签包含和被包含的关系称为父子关系，如此处VhIm1>标签有Vhead>和<body>两个子标签.为了使文档结构清晰，在开发过程中开发人员应养成子标签相对父标签缩进的书写习惯。但是，通常在网站发布前，开发人员会使用软件将文档中的空格和换行符消除。(3加U试首页文件的效果。保存"index.html"文件,然后在站点目录中找到"index.himl"文件，选中该文件，并单击鼠标右键，选择打开方式为"GoogleChrome"。其中，首页的标题为index.html,内容空白。【提示】谷歌和火狐称为开发者浏览工具，对HTML5新标签和CSS3新样式有很高的兼容性，同时提供开发者工具。因此，为了使初学者不必考虑兼容性问题，学习本书的过程中建议使用谷歌浏览器。*5.编辑文件hcad标签的内容(1)在head标签中输入单标签meta,设置字符编码方式为Utf-8。代码如下：metacharset="utf-8"/(2)接着在head标签中输入标题标签tiUe,title标签内容为"张丽的百度首页"o代码如下：itle张丽的百度首页itle此时，使用浏览器测试首页效果，首页标题变为“张丽的百度首页"。【提示】编写HTML文件的过程中要及时保存文件，并刷新网页，观察网页编辑效果。6.编辑文件body标签的内容(1)在body标签中输入段落标签p,并设置该标签的对齐方式属性align="right"接着，输入标签内容"搜索设置 |  :登录"。代码如下：palign="righT'搜索设置 | 登录p(2)在p标签后面再输入一个p标签，并设置该标签的对齐方式属性align="cen(er"接着,在该标签的内容部分输入图像标签img,图像地址属性src="imglogo.gif,宽度属性widlh="270",高度属性heighl=',auto"代码如下：palign="center"imgsrc="imglogo.gif'width="270"height="auto'p【提示】width属性的值默认以像素PX为单位，可省略不写。通常网页习惯仅设置图像宽度或高度属性中的一个，而另一个属性为auto,从而确保图像按比例缩放，避免变形。(3)输入第三个p标签，并设置该标签的对齐方式属性align="center".接着，输入标签内容"新闻贴吧b网页b图像视频"。其中，"网页"又是加粗标签b的内容。代码如下：palign="cenier"新闻贴吧b网页b图像视频(4)将第三个p标签中的文字"贴吧"设置为超链接，即使用超链接标签a,并设置链接地址属性href="http"代码如下：ahref="ht(pz"5½flEa此时，若本地计算机与外网相通，使用浏览器测试网页时，单击"贴吧"链接可跳转到“百度贴吧"页面。(5)在body标签前输入表单标签form,并设置该标签的对齐方式属性align="center,接着，在表单内部输入一个输入框控件inpuiiype="iexT'value="百度一下，你就知道”.最后，输入标签按钮bu11on,以及标签内容“百度一下".代码如下：formalign="cenier"inputIyPe="lext"value="百度一下,你就知道"/button百度一下buttonfbrm参考代码详见教材【学生】聆听、记录、理解课堂小结(3min)【教师】简要总结本节课的要点总结知识点,巩固学生对HTML5单控件新增属性、制作百*J-I1L'厂wwmB8二二一-霹本节课主要学习了HTML5表单控件新增属性的相关内容，讲解了如何制作百度首页，希望通过本节课的讲解，大家可以掌握表单控件新增属性的语法与使用方法，以及制作网站首页的具体操作，锻炼自己的实践能力，从而达到学以致用的目的。【学生】总结回顾知识点度首页相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：利用"实训I作业素材()2-HTML”文件夹中的图像素材，制作如图2-16-1所示的页面(详见教材)，并形成文档上传至APPo【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果较好，在课堂上教师应大胆地让学生进行自由讨论、交流，赞扬学生一些独特看法，让学生真切地感受到学习是快乐的，这样自主学习的劲头就更足了.
