Web前端开发案例教程（HTML5+CSS3）教学教案.docx
教案名称任务1创建第一个HTML5网页计划学时2学时知识目标了解Web前端开发技术及相关概念熟悉常用的浏览器熟悉前端开发常用的工具软件掌握使用HBilderX软件创建简单的网页素质目标引导学生做好职业规划，在课程学习中树立职业理想。激发学生爱国热情、为科技强国而努力学习教学重点URL、HTTP、HTML、网站、网页、主页等概念HBUiIdCrX工具操作教学难点使用HBuilderX创建HTML5网页教学模式教学做一体化线上+线下混合教学教学活动及主要环节思政元素切入点第1学时（认识Web前端开发、Web相关概念）1 .导入新课：（5分钟）2 .有无制作过网页？3 .以前学过网页课程吗？（学生回答，参与互动）IL课程前导：（15分钟）1.为什么学习这门课？该门课程对应的职业岗位是WEB前端开发工程师。4 .这门课学什么内容？HTML5、CSS3、HTML5+CSS布局网页、制作小型静态网站。5 .怎么学习这门课？多实践、多利用拓展资源进行学习、从模仿项目或案例中学习逐渐过渡到自己设计网站。IIL考试方法：（5分钟）过程性考核+终结性考核过程性考核：出勤+课堂表现+作业+网站作品（60分）终结性考核：期末网上题库抽题考试（40分）随着互联网的飞速发展，各种智能终端的普及，前端开发越来越受到重视，人才需求量巨大。激发学生学好该门课，成为未来的优秀Web前端开发工程师。IV.新课内容：（20分钟）一、任务描述启动HBilderX,创建一个空项目，项目名称为：ChaPter01,在该项目中新建一个html文件，文件名称为：examplel.html,在网页上显示：“这是我的第一个网页哦。网页浏览效果如图IT所示。一口XMR!5X+1C127DO.18848gpCtr0m2"HMrWa：燃触hit区是我的第f网页应图1-1第一个网页浏览效果二、认识Web前端开发Web前端开发:主要包括HTML、CSS和JaVaSCriPt等技术。Web后端开发：通过编写程序代码与后台服务器交互，来动态更新网站的内容。包括PHP、JSP和ASP.NET等技术。三、相关概念1、IP地址和域名2、URL：统一资源定位符3、HTTP与HTTPS：超文本传输协议，提供一种发布和接收HTML页面的方法。4、网站、网页与主页：主页通常用index.htm或index,html表示。5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。（学生动手操作，任意打开一个网页，查看网页源代码）6.Web标准：为了使网页在使用不同浏览器浏览时显示相同的效果，在开发应用程序时，浏览器开发商和Web开发商都必须共同遵守W3C与其他标准化组织共同制定的一系列Web标准。Web标准包括结构标准（HTML）、表现标准（CSS）和行为标准（JavaScript）。第2学时（创建第一个HTML5页面）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.新课内容：（35分钟）介绍万维网的发明者，蒂姆伯纳斯李，互联网之父，改变了人类的生活。引导学生立大志，科技报国，实现人生价值。一、HTML5概述 ：HTML5主要优势： 良好的移植性 更直观的结构 内容和样式分离新的表单元素更方便地嵌入音频和视频矢量图绘制。二、常用的浏览器三大浏览器：IE浏览器（美国微软公司）、火狐FireFoX（开源基金组织moziUa研发的产品是一家美国公司）、谷歌Chronle（推荐使用，美国公司）。我国的浏览器：百度浏览器、360浏览器、UC浏览器、QQ浏览器三、常用的网页编辑软件HBilderX:本课程使用该软件。HBilderX是VisualStudioCode由DcloudAdobeDremweaver即数字天堂SublimeText（北京）网四、任务实现：创建第一个网页络技术有限公司推出的VTW)MC-MSIa*MMl5KJVeM*V(7)MMd«XZMJ71C5QO9一款支持HTML5的Web开发编MtttHXD辑器，是一11三B*AfW*款优秀的国产免费软1.创建项目件，在前端执行菜单栏的“文件”I“新建”命令，选择“项目”，出现新建项目对开发、移动话框，输入项目名称，选择模板类型为“空项目”，单击“创建”按钮。开发方面提2.新建文件供了丰富的在左侧视图中，右击项目名称，执行“新建”命令，选择"html文件”，功能和贴心出现“新建html文件”对话框，输入文件名，单击“创建”按钮。的用户体在网页文件代码的litle与vtitle之间，输入HTML文档的标题，这里输入：“第一个htm15网页”然后在body与body标记之间写入验。<p>helloworld!<p>3 .保存文件Ctrl+S4 .浏览网页Ctrl+R（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）IL课堂小结：（10分钟）重点理解IP地址、域名、URLHTTP、HTTPS、HTML、Web标准等概念，会使用HBuiIder软件创建项目及简单的网页。作业1：课本实训1作业2：使用学习通平台的教学视频自学任务2中的HTML5常用文本标记教案名称任务2搭建简单学院网站计划学时12学时学习目标掌握HTML5的基本结构熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记会熟练使用HTML标记创建简单网页素质目标在编写代码中养成精益求精的工匠精神通过案例融入价值观塑造教学重点HTML5文档基本结构HTML文本标记、列表标记、超链接标记、图像标记教学难点使用HTML标记创建简单网页教学模式任务驱动教学法线上+线下混合教学模式教学活动及主要环节思政元素切入点第1、2学时（HTML文本标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。1.学生讨论：（10分钟）使用HBuilder新建HTML5默认文档时HTML5文档的基本格式包括哪些标记？每个标记的作用是什么？通过学习通平台拓展阅读使学生了解HTML5标准规范的制订，激发同<!doctypehtml><html><head><metacharset=,utf-8,><title>无标题文档<title><head><body><body><html>学们科技报国的雄心，增强使命担当意识。II.重难点内容讲授：一、HTML文本标记（40分钟）1.标题标记（实现example02.html）通过编写 HTML5 代 码，让学生 了解代码书 写要遵循规 范，小错误 可能会导致 页面崩溃， 要养成严谨 细致的工匠 精神。2 .段落标记（实现example03.html）3 .水平线标记（实现example04.html）单标记4 .换行标记重点强调单标记（实现example05.html）5 .字体样式标记（实现example06.html）6 .特殊字符（实现example07.html）（教师多媒体演示、学生一起操作，实现教学做一体化）二、【任务实现】学院简介页面制作（15分钟）效果图如下：.口X.D恃彼K×+C127MA:8848chpte<02e4mpl<07.htmlQa：未来信息学院筒介条柿电学发修人3*t设文.恢公丹吉学岐.W跨*m.三M*w的O学方的.以人板、nw产wttnn的办W.fi*><Kl*VWW为日标.47开演Mw式.K帕了叫电射势9.影速7包牙的。人球TW三三*.假不序.办代/加，分界界断法0市Hlt&位.皿士人力足定衣发K.>2I?口就通合修母IlAM/生SR冷.盲示急UK依I6M试京展BS«MItQ*t产+tm人才培iM三r餐Qe劣力似人力堵UiMiTSW用苗处JMKMttS*±SUHM>.M金BKt国产Ky他。-tf三>aWH三胃工作优Jt”M.收Mfc*aM代码如下：<body><H>未来18息学院蠲介<e2><p>*3R<a«TR«ISARiWHRtiS2.效Il部断案的公办修Hi蜃哥学校学校曼格“以艇务及IB为宗旨，以促龙觎业为号网”的办学，计.，以人为本.一技双.产收台.K9tt*w>9a.以*通育特色*瞒*为目愫，立了开故创制般慢式素枳了优0的Kaa.影成了艮哂育人坏墟.学校的管理水平.收学段IL办学特色搏到社会营界的广泛窿定.<p><P>学校是我白部批港rr国岁示'住收件E业技术竽除“自IMiifl位.8H队士官人才培养走as；忸"3”对口货IS分段场科本H招生试id战校，省示范性曷取"壁招生试点穴收；是国簟白RtF召B息产业高技IC人才培训Mb皆堪收务外包人才培训MbiS吸劳务钎知av工地修信息S全Ia训中心"荣获“全BMB总产业系皖先送体Iii联业«先遇体图声工作优先际号.<P><body>三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑11I.课堂小结：（5分钟）本次课介绍了HTML文本标记及利用HTML文本标记创建简单的学院简介页面。课后作业：1 .课后实训22 .超星学习通平台作业<body><h2>本学期所学课程<h2><hr><ul>< li信息技术基础<li>一< li>Web 前端基础<li>1W<li>Python语言程序设计<li>< li>大学英语<li><ul><body>-OX0 /国X +G J C 12700.1 z884fiSaPtefa2/exampl. ： 览 M TrimUte本学期所学课程 <8息技术础 Web的二础 PythOn语由程序设计 大学英i0 9尹停X +÷ 4 C 127QQJ8848WefQ2exampL 。本学期所学课程1.<sZ Web刖Cu也3 . PythOcffi日程序设计4 .大学英济列表是一种 有秩序的信 息表现形 式，在我们 今天高度发 达的文明社 会中，讲文 明，懂礼貌, 识大局，懂 规矩，遵守 社会公共秩 序。第3、4学时（HTML列表标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.学生讨论：（10分钟）问题：为什么要学习各种列表标记？各种列表标记之间又有什么区别？II.讲授重难点内容：一、无序列表（10分钟）对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“无序列表”时需要注意的问题。二、有序列表（10分钟）对“有序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。<body><h2>本学期所学课程h2><hr><ol><11>信息技术基础</久><li>Web前端基础<li><li>Python语言程序设计<li><li>大学英语<li><ol><body>（学生同步操作，教师巡视，答疑）强调：定义“有序列表”时需要注意的问题。三、列表的嵌套应用（15分钟）打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果进行展示，进行讲解。代码演示嵌套应用。<body>0 2 SffiWX +6 > C 127QQ. 1:88WChdPIefOZZexampL. ： 那应用，TrsihU今天的课程表上午课程。信息技术JHSO Web前K础下午画程1 . Python诰2程序没计2 .大学英语<h2>今天的课程表h2><hr><ul>CC上午课程<ul>CD信息技术屋础<li><li>Web前端基任ID<ul><li>下午课程<ol><li>Python语自程序设计<li><1i>大学英iS<li><ol><li><ul><body>强调：定义“列表嵌套”时需要注意的问题(学生一起操作，教师巡视，答疑)四、【任务实现】学院新闻页面制作(35分钟)【实现步骤】1、新建网页打开HBUilder创建项目,在项目名称上右击，选择“新建”“html文件"，在"新建html文件”对话框中输入文件名称：news.html,单击“创建”按钮，创建文件。2、分析页面效果，该页面主要由标题和列表文字组成。标题文字使用<h2>,列表文字使用VUI>,编写源码如下。3、保存文件Ctrl+S4、浏览网页Ctrl+R<body><h2>学院新闻<h2><hr><ul><li><ahref三,newsl.html-target=")IankD学校联合发起成立软件行业产教联盥<li><href-'M-targetL.blank">率校"四个推进“孜起党史学习教育热潮(2e21-04-08)<a><U><li><ahref-#"targetJ>lank”>学校召开2321年度体育工布会议(2021-4e2)<a><li><li><ahref=-#-target="_blank”>我校举行“珞记历史缅怀先烈”清明节祭扫先烈活动(2e21-04-01)<a><li><li><href三,t-target="的Iank>中国工业互联网研究院来我校交流访问(2e21-e3-3e)<a><H><li><ahref."#"target_b】ank->学校召开党务干部业务培训会议(2021-e33e)<a><li><li><ahref="#-target="_blank”>我校举行课程思政示惫课建设专题湃座(2021-e3-3e)<a><li><ul><hr><P>版权所有©未来信息学院<p><p><ahref="index.html->返回<a><p><body>引导学生热 爱家乡、增 加文化自信同步练习：使用列表标记列出你的家乡特产。III.课堂小结：（10分钟）掌握有序列表、无序列表、列表嵌套以及自定义列表标记的使用，最常用的是无序列表和无序列表嵌套。课后作业：超星学习通平台作业。预习：HTML超链接标签、图像标签第5、6学时（创建超链接、锚点链接）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .导入新课：（10分钟）创建超链接的学习中，你遇到了哪些问题？如何解决的？II .重难点内容讲授：一、超链接标签（45分钟）1、超链接标签的语法格式：<ahref=目标地址target=目标窗口title=提示文字>热点文字<a>（操作演示讲解超链接标签的各个属性，学生同步练习）2、超链接的几种形式：页面间的超链接：该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。实例讲解（学生同步操作，教师巡视，答疑）锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。（师生互动：列举网页浏览需求，引入特殊链接一锚点链接，用户能够快速定位到目标内容）锚点链接创建步骤：第一步：定义锚点；第二步：创建指向锚点的链接。（针对“锚点链接”的作用及创建步骤进行讲解，代码演示说明）（学生一起操作，教师巡视，答疑）对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。空链接：单击该链接时不进行任何跳转。<ahref=#>热点文字<a>二、练习：完成专业介绍页面。（30分钟）O切MVMkWHMWM)MNitnnfim*itaKxmif2-KWS1100A.XGttAUOQWHmB2atWttrs三*gf%z渲”人才BR<>2WtKMl&W.WMMfltaff.M11U<ttA÷HBVWMMMt7<rABWetAAffV.Bt”.开HBIlMBTImWW力-X>liB"*:.W½ff三xV««HU?皿工(HOEMwa1FWSg人彳.Wft：WVMimaRKVHte变sm*3BMsttneAm*>三awR,*j¼iW三>r。*MdgM“asuasCWft7fltMM*!tMMCmKIVSttMCM79<tAncniXKfiB!n07lt4aF4TMIWt三G，Itf3BE方4。僮JErV.O>U»M.a三«tr»««*»Wfln三K-*E8-3W*>惠。MW主M«M.IMaflke3。苏皿SUHMf0*V«i£S)0*SKffIUMiitW-SfflIn.课堂小结：（5分钟）本次课介绍了超链接的语法格式、形式、利用超链接实现页面间、页面内的跳转。课后作业：超星学习通平台作业第7、8学时（图像标签及学院首页、新闻详情页制作）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.导入新课：（10分钟）学习图像标记的过程中，你遇到了哪些问题？让学生讨论怎么解决？II.重难点讲授：一、图像标签（20分钟）1 .语法格式：<imgSrC="图像路径"alt="替换文本title="提示文本"Width="图像宽度height=图像高度>对“图像标记”及其属性进行讲解，代码演示说明。（学生一起操作，教师巡视，答疑）2 .绝对路径和相对路径通过文件夹的层级关系对“路径”进行讲解。：展示PPT对“绝对路径”进行讲解，并举例说明。展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的不同位置进行演示。(学生提问，教师答疑)二、图像标签应用(15分钟)蒂姆伯纳斯李互联网之父用蒂姆伯 纳斯.李的 故事激发学 习兴趣，引 导学生立大 志，实现人 生价值。欢迎来到来来值息学SiUEjmenU«>Bl(1955<4rt÷B三>QMZV»(OMIMWftmm(0MjttM.MMrrM9*M*WTF*MABMm*mtt.IESeFR出力IeXmSlVmIZAUmientmHnwmtwx±sR±RUi.nMaWMM三MKBBCm.HWWIR>BHW*W.STHMK.VMOZittMrraiHrwJ乃网IUI攸m三m7Am三a.<body><hl>蒂姆伯纳斯李一互联网之父<hl><hr><imgsrc="imagesli.png"alt="蒂姆伯纳斯李”width三"30"><p>蒂姆伯纳斯李(TimBerners-Lee)爵士(1955年出生于英国)是万维网的发明者，互联网之父，英国功绩助黄(OM)获得者，大英帝国官佐勋章(OBE)获得者，英国皇家学会会员，英国皇家工程师学会会员.美国国家工程院外籍院士。1989年3月他正式提出万维网的设想，1990年12月25日，他在日内瓦的欧洲粒子物理实验室里开发出了世界上第一个网煲浏览器.他是关注万维网发展的W3C的创始人，并薇得世界多国授予的各个荣誉。他最杰出的成就，是把免费万维网的构想推广到全世界，让万维网科技获得迅速的发展，深深改变了人类的生活面貌.<p><body>学生同步练习。三、【任务实现】学院首页制作(20分钟)分析页面效果，该页面主要由标题和列表文字组成。标题文字使用<h2>,列表文字使用<ul>,编写代码如下。<body><h2>武迎来到未来信息学院h2><hr><P>< a学RSg介xbr)< href专业/H“xbr< a"“”一招生就。<p><p><in>gsrcnifMges/schooll.jpgwwidth-M4ee-lt”学院登好王"tftl的为贴图-/p<p>友情适接：<hzMtPS:MWWbSdu.co>S8"AMbSp; <hrfc"O学院官网<xp)<hr><p>版权所Stcopy;未来16息学院<body>（教师与学生同步操作，实现教学做一体化）本任务学习了HTML5常用标记，要熟知每个标记的使用场合及常用属性，会使用这些标记搭建网页结构。课后作业：1.课后实训22.学习通平台作业教案名称任务2搭建简单学院网站计划学时12学时学习目标掌握HTML5的基本结构熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记会熟练使用HTML标记创建简单网页素质目标在编写代码中养成精益求精的工匠精神通过案例融入价值观塑造教学重点HTML5文档基本结构HTML文本标记、列表标记、超链接标记、图像标记教学难点使用HTML标记创建简单网页教学模式任务驱动教学法线上+线下混合教学模式教学活动及主要环节思政元素切入点第1、2学时（HTML文本标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。1.学生讨论：（10分钟）使用HBuilder新建HTML5默认文档时HTML5文档的基本格式包括哪些标记？每个标记的作用是什么？通过学习通平台拓展阅读使学生了解HTML5标准规范的制定，激发同<!doctypehtml><html><head><metacharset=,utf-8,><title>无标题文档<title><head><body><body><html>学们科技报国的雄心，增强使命担当意识。II.重难点内容讲授：一、HTML文本标记（40分钟）1.标题标记（实现example02.html）通过编写 HTML5 代 码，让学生 了解代码书 写要遵循规 范，小错误 可能会导致 页面崩溃， 要养成严谨 细致的工匠 精神。7 .段落标记（实现example03.html）8 .水平线标记（实现example04.html）单标记9 .换行标记重点强调单标记（实现example05.html）10 .字体样式标记（实现example06.html）11 .特殊字符（实现example07.html）（教师多媒体演示、学生一起操作，实现教学做一体化）二、【任务实现】学院简介页面制作（15分钟）效果图如下：.口X.D恃彼K×+C127MA:8848chpte<02e4mpl<07.htmlQa：未来信息学院筒介条柿电学发修人3*t设文.恢公丹吉学岐.W跨*m.三M*w的O学方的.以人板、nw产wttnn的办W.fi*><Kl*VWW为日标.47开演Mw式.K帕了叫电射势9.影速7包牙的。人球TW三三*.假不序.办代/加，分界界断法0市Hlt&位.皿士人力足定衣发K.>2I?口就通合修母IlAM/生SR冷.盲示急UK依I6M试京展BS«MItQ*t产+tm人才培iM三r餐Qe劣力似人力堵UiMiTSW用苗处JMKMttS*±SUHM>.M金BKt国产Ky他。-tf三>aWH三胃工作优Jt”M.收Mfc*aM代码如下：<body><H>未来18息学院蠲介<e2><p>*3R<a«TR«ISARiWHRtiS2.效Il部断案的公办修Hi蜃哥学校学校曼格“以艇务及IB为宗旨，以促龙觎业为号网”的办学，计.，以人为本.一技双.产收台.K9tt*w>9a.以*通育特色*瞒*为目愫，立了开故创制般慢式素枳了优0的Kaa.影成了艮哂育人坏墟.学校的管理水平.收学段IL办学特色搏到社会营界的广泛窿定.<p><P>学校是我白部批港rr国岁示'住收件E业技术竽除“自IMiifl位.8H队士官人才培养走as；忸"3”对口货IS分段场科本H招生试id战校，省示范性曷取"壁招生试点穴收；是国簟白RtF召B息产业高技IC人才培训Mb皆堪收务外包人才培训MbiS吸劳务钎知av工地修信息S全Ia训中心"荣获“全BMB总产业系皖先送体Iii联业«先遇体图声工作优先际号.<P><body>三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑11I.课堂小结：（5分钟）本次课介绍了HTML文本标记及利用HTML文本标记创建简单的学院简介页面。课后作业：1 .课后实训22 .超星学习通平台作业<body><h2>本学期所学课程<h2><hr><ul>< li信息技术基础<li>一< li>Web 前端基础<li>1W<li>Python语言程序设计<li>< li>大学英语<li><ul><body>-OX0 /国X +G J C 12700.1 z884fiSaPtefa2/exampl. ： 览 M TrimUte本学期所学课程 <8息技术础 Web的二础 PythOn语由程序设计 大学英i0 9尹停X +÷ 4 C 127QQJ8848WefQ2exampL 。本学期所学课程1.<sZ Web刖Cu也3 . PythOcffi日程序设计4 .大学英济列表是一种 有秩序的信 息表现形 式，在我们 今天高度发 达的文明社 会中，讲文 明，懂礼貌, 识大局，懂 规矩，遵守 社会公共秩 序。第3、4学时（HTML列表标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I.学生讨论：（10分钟）问题：为什么要学习各种列表标记？各种列表标记之间又有什么区别？II.讲授重难点内容：一、无序列表（10分钟）对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“无序列表”时需要注意的问题。二、有序列表（10分钟）对“有序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。<body><h2>本学期所学课程h2><hr><ol><11>信息技术基础</久><li>Web前端基础<li><li>Python语言程序设计<li><li>大学英语<li><ol><body>（学生同步操作，教师巡视，答疑）强调：定义“有序列表”时需要注意的问题。三、列表的嵌套应用（15分钟）打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果进行展示，进行讲解。代码演示嵌套应用。<body>0 2 SffiWX +6 > C 127QQ. 1:88WChdPIefOZZexampL. ： 那应用，TrsihU今天的课程表上午课程。信息技术JHSO Web前K础下午画程1 . Python诰2程序没计2 .大学英语<h2>今天的课程表h2><hr><ul>CC上午课程<ul>CD信息技术屋础<li><li>Web前端基任ID<ul><li>下午课程<ol><li>Python语自程序设计<li><1i>大学英iS<li><ol><li><ul><body>强调：定义“列表嵌套”时需要注意的问题(学生一起操作，教师巡视，答疑)四、【任务实现】学院新闻页面制作(35分钟)【实现步骤】1、新建网页打开HBUilder创建项目,在项目名称上右击，选择“新建”“html文件"，在"新建html文件”对话框中输入文件名称：news.html,单击“创建”按钮，创建文件。2、分析页面效果，该页面主要由标题和列表文字组成。标题文字使用<h2>,列表文字使用VUI>,编写源码如下。3、保存文件Ctrl+S4、浏览网页Ctrl+R<body><h2>学院新闻<h2><hr><ul><li><ahref三,newsl.html-target=")IankD学校联合发起成立软件行业产教联盥<li><href-'M-targetL.blank">率校"四个推进“孜起党史学习教育热潮(2e21-04-08)<a><U><li><ahref-#"targetJ>lank”>学校召开2321年度体育工布会议(2021-4e2)<a><li><li><ahref=-#-target="_blank”>我校举行“珞记历史缅怀先烈”清明节祭扫先烈活动(2e21-04-01)<a><li><li><href三,t-target="的Iank>中国工业互联网研究院来我校交流访问(2e21-e3-3e)<a><H><li><ahref."#"target_b】ank->学校召开党务干部业务培训会议(2021-e33e)<a><li><li><ahref="#-target="_blank”>我校举行课程思政示惫课建设专题湃座(2021-e3-3e)<a><li><ul><hr><P>版权所有©未来信息学院<p><p><ahref="index.html->返回<a><p><body>引导学生热 爱家乡、增 加文化自信同步练习：使用列表标记列出你的家乡特产。III.课堂小结：（10分钟）掌握有序列表、无序列表、列表嵌套以及自定义列表标记的使用，最常用的是无序列表和无序列表嵌套。课后作业：超星学习通平台作业。预习：HTML超链接标签、图像标签第5、6学时（创建超链接、锚点链接）课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .导入新课：（10分钟）创建超链接的学习中，你遇到了哪些问题？如何解决的？II .重难点内容讲授：一、超链接标签（45分钟）1、超链接标签的语法格式：<ahref=目标地址target=目标窗口title=提示文字>热点文字<a>（操作演示讲解超链接标签的各个属性，学生同步练习）2、超链接的几种形式： 页面间的超链接：该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。实例讲解（学生同步操作，教师巡视，答疑） 锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。（师生互动：列举网页浏览需求，引入特殊链接一锚点链接，用户能够快速定位到目标内容）锚点链接创建步骤：第一步：定义锚点；第二步：创建指向锚点的链接。（针对“锚点链接”的作用及创建步骤进行讲解，代码演示说明）（学生一起操作，教师巡视，答疑）对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。 空链接：单击该链接时不进行任何跳转。<ahref=#>热点文字<a>二、练习：完成专业介绍页面。（30分钟）O切MVMkWHMWM)MNitnnfim*itaKxmif2-KWS1100A.XGttAUOQWHmB2atWttrs三*gf%z渲”人才BR<>2WtKMl&W.WMMfltaff.M11U<ttA÷HBVWMMMt7<rABWetAAffV.Bt”.开HBIlMBTImWW力-X>liB"*:.W½ff三xV««HU?皿工(HOEMwa1FWSg人彳.Wft：WVMimaRKVHte变sm*3BMsttneAm*>三awR,*j¼iW三>r。*MdgM“asuasCWft7fltMM*!tMMCmKIVSttMCM79<tAncniXKfiB!n07lt4aF4TMIWt三G，Itf3BE方4。僮JErV.O>U»M.a三«tr»««*»Wfln三K-*E8-3W*>惠。MW主M«M.IMaflke3。苏皿SUHMf0*V«i£S)0*SKffIUMiitW-SfflIn.课堂小结：（5分钟）本次课介绍了超链接的语法格式、形式、利用超链接实现页面间、页面内的跳转。课后作业：超星学习通平台作业第7、8学时图像标签、绝对路径课前发布任务：观看学习通平台相关学习视频。做课前测试题。I .讨论：（10分钟）在学习图像标记的过程中，你遇到了哪些问题？同学们讨论解决方法。II .重难点讲授：一、图像标签（20分钟）1 .语法格式：<imgSrC="图像路径"alt="替换文本title="提示文本"Width="图像宽度height=图像高度>对“图像标记”及其属性进行讲解，代码演示说明。（学生一起操作，教师巡视，答疑）2 .绝对路径和相对路径通过文件夹的层级关系对“路径”进行讲解。：展示PPT对“绝对路径”进行讲解，并举例说明。展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的不同位置进行演示。（学生提问，教师答疑）三、图像标签应用（15分钟）蒂姆伯纳斯李互联网之父用蒂姆伯 纳斯.李的 故事激发学 习兴趣，引 导学生立大 志，实现人 生价值。«KEJnenImiBt（lMt±÷B三>万QMZV»（0MmmXimmm（om><me.Miurrx同m容NEIrMMlIEeJA«2式出力xm9i*oiz
