《网站前端技术》教案第2课HTML与HTML5（一）.docx
课题第2课HTML与HTML5(一)课时2课时(90min)教学目标知识技能目标：(1)了解HTML的主要功能、标签的语法、结构、标签分类及常用编辑工具(2)了解HTML5的优势及语法变化(3)掌握HTML的头部标签素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML的功能、标签的语法、结构、标签分类和常用编辑工具，HTML5的语法变化教学难点：HTML头部标签教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)一传授新知(33min)一头脑风暴(5min)第2节课：问题导入(3min)一传授新知(27min)一上机操作(IOmin)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML的概念、功能、标签的语法、结构、分类等相关内容，以及HTML常用的编辑工具。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入(5min)【教师】提出以下问题什么是HTML?它由哪些元素组成？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知(33min)2.1 HTML基础2.1.1 什么是HTML【教师】讲解HTML的概念HTML指的是超文本标记语言(hypertextmarkuplanguage),是用于编写网页的主要语言。它基于标准通用标记语言(standardgeneralizedmarkuplanguage,SGML)定义，也是一通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML的概念、功能、HTML标签的>»语法、结构、分类的相关内容，以及熟种规范，一种标准。HTML主要用于定义网页结构，它决定网页上显示的内容，即解决"网页上有什么"的问题，是网页文件制作的基础。悉HTML常用的编 辑工具，为后边的 学习打好基础HTML是一种用标记标签（简称标签）描述网页的标记语言。网页中的文本、图像、表格、超链接等内容，都是由HTML中的标签定义和组织的。用HTML编写的超文本文档称为HTML文档，扩展名为.Mml或hm,也就是网页。【课堂互动】十【教师】提问HTML与文本文件有何不同？十【学生】聆听、思考、回答网页文件本身是一种文本文件，它本质上是通过在文本文件中添加标签，来告诉浏览器如何显示其中的内容，如文字如何处理、画面如何安排、图像如何显示等。浏览器按JI顶序阅读网页文件,并根据标签解释和显示内容。对书写有误的标签，浏览器不报错,且不停止解释执行过程,用户只能通过显示效果来分析出错原因和出错位置。【高手点拨】对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。【学生】聆听、记录、理解2.1.2HTML的主要功能【教师】讲解HTML的主要功能【课堂互动】十【教师】提问HTML的主要功能有哪些?十【学生】聆听、思考、回答定义（或设置）文本：定义文本的标题、段落等。此外，还可以设置文字的字体、字号、颜色等样式。但是现在一般不用HTML设置样式，而是用CSSe插入图像：在网页中插入图像，使网页图文并茂.建立超链接：通过超链接实现不同网站的学桀。创建列表：彳各信息用一种易读的方式表现出来。创建表单：通过表单实现人机交互,使网站的功能更加完善。建立表格：以表格的形式显示页面信息,为浏览者查找信息提供便利。插入多媒体：通过网页共享音频、视频、动画等，并设置播放的时间和次数。【学生】聆听、记录、理解【教师】讲解HTML标金的基本诺法÷【多媒体】组织学生扫码播放"HTML标签的基本语法”视频（详见教材），让学生对这部分内容有一介大致地了解HTML标签是由尖括号""括起来的关键词，每个标签都有名称、可选择的属性和标签内容。HTML中，成对出现的标签称为双标签，单独出现的标签称为单标签。1 .双标签格式】：标签名标签内容（文本或超文本）/标签名例如，定义一个标题的标签，代码如下：h1这是一号标题小1格式2：标签名属性名1="属性值1"属性名2二"属性值2"标签内容文本或超文本）/标签名属性都是可选择的，如果标签中有属性，则标签名和属性名之间要用空格隔开，各属性值用双引号括起来。例如，实现超链接的代码如下：ahref="webindex.html"Iarget="_blank"点击我吧a其中，a为超链接标签名称；href="webindexhm和Iarget="_blank"两个属性，分别定义了超链接目标文档的路径和打开方式；"点击我吧"为标签内容（超链接文本）【提示】代码中的标点符号均为英文标点符号。2 .单标签格式】：标签名A此种标签称为单标签,如恻亍标签br/,它仅仅通知浏览器在此处换行，因而不需要界定作用范围，所以它没有尾标签。【提示】从长远来看，应该养成正确关闭单标签的习惯，因此，在右尖括号前须加上一个空格和斜杠。格式2：V标签名属性名1="属性值1"属性名2="属性值2"/例如，控制图像的代码如下：imgsrc="imgjpO2.jpg"width="400"height="3OO"/其中jmg是标签名表示图像MC是标签属性名用于将指定图像引入网页jmgjpO2.jpg是属性值，表示图像的地址；Width、height也是标签属性名称，分别用于定义图像的宽度和高度，单位为px（像素，可省略）。当一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签称为一元素。由于在HTML语法中，每个由HTML标签与文字形成的元素内，还可以包含另7三,因此，整个HTML文件就像一个大元素，其中包含了许多小元素。HTML文档中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。【教师】PPt展示”标签的正确用法和错误用法”的表格（详见教材），让学生通过对比了解标签的正确用法【高手点拨】上述列表中，Vld>vtd>标签包含在<lr><lr>标签中，<tr><lr>标签又包含在<iablextable>标签中，形成父子关系，后面章节会详细讲解。【课堂互动】十【教师】提问简述单标签与双标签的区别.中【学生】思考、讨论、回答【学生】聆听、记录、理解2.1.4HTML的基本结构【教师】讲解HTML的基本结构÷【多媒体】组织学生扫码播放“HTML的基本结构“视频（详见教材），让学生对这部分内容有一个大致地了解HTML文档由起始标签<html>、头部标签<head>和主体标签<body>三部分组成。下面这段代码展示了一个基本的HTML文档结构。<himl><head>文档头部<head><body>文档主体<7body><html>【课堂互动】十【教师】提问以上三个标签各有什么作用？【学生】聆听、思考、回答<html>.<html>：表示HTML文档的开始标签和结束标签，用于告诉浏览器HTML文档的开始和结束位置。<head>.<head>:表示HTML文档的头部开始标签和结束标签，一般用于存放网页的元信息，如网页描述、关键字、作者信息等。头部标签和文件标题标签都成对使用。<body>.<body>：表示HTML文档的主体开始标签和结束标签，网页中要显示的所有内容均嵌套在这一对标签内，也可理解为该标签中的内容在浏览器中是可见的。【示例2-1-1】打开应用程序"记事本"，创建文件并以"index.himl"命名，注意".html”为该文件的扩展名，然后在该文档中输入以下代码，并保存在合理的位置。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解【学生】聆听、上机操作、演示<html><head><titlc>我的第一个网页<tile><head><body><p>我的段落<p><body><html>【教师】PPt展示“记事本创建网页的效果”图片（详见教材），并讲解效果：在浏览器中打开网页，网页标题显示"我的第一个网页"，网页内容显示"我的段落"。【提示】标签<tiUe><i加>之间的部分是HTML文件的标题，在后面的章节中会详细讲解。【学生】聆听、记录、理解2.1.5HTML标签的分类【教师】讲解HTML标签的分类根据是否独占一行，可以将HTML标签分为块标签和行标签。块标签：独占一行，可以设置宽度和高度属性，而且元素在页面中遵循从上到下的顺序排列，如段落标签<p><p>=行标签：也称内联标签、行内标签等，不能独自占据一行，设置宽度和高度属性无效，而且元素在页面中遵循从左到右的顺序排列，如超链接标签<a><a>°【课堂互动】十【教师】提问块元素和行元素有哪些区别？）【学生】聆听、思考、回答【示例2-1-2编辑HTML文档<body>标签的内容，代码如下：<p>美文赞赏<p><p>动画欣赏<p><ahref="http:">百度一_F<a><ahref="http:”>新浪<a>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“块元素和行元素的区别”图片（详见教材），并讲解效果：网页中两个段落从上到下各占一行排列，两个超链接从左到右在同一行排列。【学生】聆听、记录、理解2.1.6 HTML注释【教师】讲解HTML注释为增强代码可读性，开发者常使用注释解释HTML文档中的代码。在HTML文档中，注释由“<!，开始，由结束，使用方法如下：这里是HTML文档的注释-><!-注释内容不在浏览器中显示哦->HTML注释一般放在要注释内容的上面，不能显示在浏览器中，仅显示在文档中。【学生】聆听、记录、理解2.1.7 HTML的常用编辑工具【教师】讲解HTML的常用编辑工具1 .记事本在WindoWS操作系统中，记事本是一个小的应用程序，采用一个简单的文本编辑器进行文字信息的记录和存储。同样，它也是一个代码编辑工具，可用于编写网页文件。2 .AdobeDreamwcavcrAdobeDreamweaver是一款集网页制作和网站管理于一身的所见即所得网页代码编辑器。它不仅能够编辑网页，还可以有效地创建、管理网站，同时提供上传网站的便捷方法。3 .SublimeTextSUblimeTeXl是文本编辑器，同时也是先进的、轻量级的网页编辑器，能够编辑网页中涉及的各种类型的文件，如html、css、js、asp、jsp等。该编辑器对于不同的文件类型会提供相应的便利，同时提供便捷的联想输入。4 .VisualStudioCodeViSUaIStUdiOCode是一款用于编写现代Web和云应用的跨平台源代码编辑器，可以在桌面上运行，并且可用于多种操作系统（如Windows,macOS和Linux）。此外，它还拥有众多插件，为开发者提供了丰富的扩展库，因此受到许多前端工程师的青睐。5 .HBuiiderHBuilder是一款由DCloud（数字天堂）推出的国产前端开发工具，是Web前端开发1÷X证书考试专用编辑器。它支持HTML5,有完整的语法提示和代码输入法，能够极大地提升HTML、CSS和JS的开发效率.【示例2-1-3使用HBuilderX编辑器创建THTML文件。步骤3步骤5在弹出的对话框中输入文件名"index".选择模板"default"。单击“创建"按钮，便可创建Edexhml文件，文件中默认含有以下代码：<!DOCTYPEhtml><html><head><metacharset="ulf-8"><title><title><head><body><body><html>【高手点拨】上述代码中，DOCTYPE代表一个声明，用于向浏览器说明当前文档使用的标准规范。标签为<!DOCTYPEhtml>,表示当前文档使用HTML5标准，它不属于文档的结构部分。如果省略DOCTYPE声明，大多数浏览器也能够正确显示文档内容，但是编写网页代码时不应依赖浏览器的处理，需要保持良好的编写习惯，正确声明文档所使用的标准规范。<metaCharSet="utfW>用于设置网页文件展示时使用的字符集，后面的章节中会详细讲解。隗IM在标签<title><tiile>中输入文本"我的第二个网页"<tilc>我的第二个网页vlille>,如下所示：在标签VbOdy><body>中输入以下代码：<ahref="http:WWW">百度一下<a>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码的效果【学生】聆听、上机操作、演示【教师】PPt展示“HBuiIderX创建的网页效果”图片(详见教材)，并讲解效果：使用浏览器打开文件便可看到如图所示的效果，单击文字“百度一下"，可打开百度首页。【学生】聆听、记录、理解头脑风暴(5min)【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论具体使用HTML的哪种编辑工具、基本结构，以及需要哪些标签。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入(3min)【教师】提出以下问题通过提问引导学生思考本节课内容2.2HTML52.2.1 HTML5概述【教师】讲解HTML5的由来HTML5是最新的UTML标准，在2008年正式发布，并于2012年形成了稳定版本。它结合HTMIAol的相关标准进行革新，符合现代网络发展要求。HTML5是专门为承载丰富的Web内容而设计的，并且无须额外插件。它拥有新的语义图形，以及多媒体元素。而且，它提供的新元素和新的API简化了Web应用程序的搭建。此外，HTML5是跨平台的，可以在不同类型的硬件（如PC、平板、手机、电视机等）上运行。本教材以HTML4.01为基础讲解HTML技术，同时介绍HTML5新增加的重要功能标签。【学生】聆听、记录、理解2.2.2 HTML5的优势【教师】讲解HTML5的优势通过教师讲解、 课堂互动等方式， 让学生熟悉 HTML5的优势与 语法，以及HTML 头部相关标签的内 容，为后续的学习 提供知识基础1 .跨浏览器、跨平台HTML5纳入了所有合理的扩展功能，具备良好的跨浏览器性能。目前，95%的浏览器都支持HTML5传授新知（27 min）另外，用HTML5开发的页面或/濯序，可以轻松地从Y平台移植到另Y平台，具有良好的跨平台性能。2 .增强Wcb应用对于HTML无法实现的一些功能，用户通常会寻求其他方法实现。例如，对于绘图、多媒体、地理位置和实时获取信息等应用，用户通常会开发相应的插件间接地实现。于是，HTML5的设计者们研究了这些需求，开发了一系列用于Web应用的接口。而且，HTML5规范的制定是开放的，所有人都可以获取草案的内容，也可以参与进来，提出宝贵的意见。3 .化繁为简html5简化了某些烦琐的代码表示，如简化的文档声明Vdoctypehtm>x简化的字符集声明<metaCharSet="utf-8">等。4 .新增多个新特性HTML5中新增了多个新的特性如结构化语义标签如header、<footer>x<article>x<sec（ion>x<nav>等）、功能型表单控件（calendar、date、monthxtimeemaikcolorxnumber,range、searchnUrl等）、用于绘画的标签（如<canvas>）、多媒体标签（如<video、<audio>）,以及某些功能（如文件拖放、本地存储、地理信息等）等。5 .用户优先在遇到无法解决的冲突时,HTML5规范会将用户的诉求放在第一位。此外,HTML5规范了一套错误处理机制，以便当Web开发者写了不够严谨的代码时，HTML文档可以接纳这种不严谨的写法。HTML5比以前版本的HTML更加友好.2.2.3HTML5的语法变化为了兼容各种不规范的HTML文档，HTML5允许存在不严谨的写法，具体包括以下几点。(1)标签的属性值没有使用英文引号括起来，如<imgsrc=ljpg>(2)标签不区分大小写，如"<P>标签名用了大写字母<P>"。(3)标签没有闭合，如“<div><p>段落文本<div>"。(4)某些属性可以省略属性值，如<inutype="checkbox"checked>【课堂互动】十【教师】提问对于Web开发者开发者而言，是否应该遵循代码编写规范？十【学生】聆听、思考、回答对于Web开发者开发者而言，建议遵循严谨的代码编写规范，以保证代码的可读性，且便于后期的扩展和修改。对于HTML5的一些新特性，如果旧的浏览器不支持，也不会影响页面的显示。例如，对于<input>标签,HTML5中新增了很多关于属性type(规定input元素的类型)的值，若浏览器遇到不支持的type属性值，则浏览器会将属性值默认为text处理。由此可见，HTML5规范充分考虑了各方面的内容。【学生】聆听、记录、理解2.3HTML头部1.1.1 解HTML5头部相关标签【课堂互动】+【教师】提问HTML头部有什么作用？1.1.2 聆听、思考、回答网页头部标签<head><head>,是网页的第一个组成部分，是双标签，通常用于放置网页的元信息，如网页描述、关键字、作者信息等。但是，大多数内容在浏览器中不可见。<head><head>标签内通常包含<meta><style>s<link>x<script>等标签。【高手点拨】元信息是关于信息的信息，用于描述信息的结构、语义、用途和用法等.元信息允许服务器提供所发送数据的信息0HTML的元信息其实就是meia标签，该标签的详细信息见后面的章节.2.3.1 签网页标题是对一个网页的高度概括，它显示在浏览器选项卡标题处。浏览用户通过网页标题能快速了解一个网页的基本功能，并快速判断网页是否被需要。【知识柘展】一般来说，网站首页的标题就是网站的正式名称，而网站中文章内容页面的标题是文章的题目，栏目首页的标题通常是栏目名称。当然这种一般原则并不是固定不变的，在实际工作中可能会有一定的变化，但无论如何变化，总体上仍然会遵照这种规律。在HTML文档中，网页标题要写在<title>与<title>之间，并且<tile>标签总是嵌套在标签<head><head>之间，代码如下：<head><title>网页<head>2.3.2 <meta>标签<mela>标签一般用于定义网页的关键字、网页说明和作者信息等。简单地说,<meta>标签是单标签，用来告诉搜索引擎这个页面是做什么的。<meta>标签嵌套在标签<headxhead>之间，标签Chead><head>之间可以有多个<meta>标签。一个<meta>标签定义一个网页的相关内容。<meta>标签有两个重要的属性name和http-equiv1 .name属性name属性主要用于描述网页，与之对应的属性是content,即当name属性规定好网页信息后，后面还需紧跟COntent属性设置具体的内容，这样设置才可以生效。这样做便于搜索引擎机器人直找、分类。【课堂互动】【教师】提问常用的name属性值有哪几种？今【学生】聆听、思考、回答(1)关键字(keywords)是描述网页产品珈艮务的词语。关键字可以是多个,中间用英文逗号隔开。使用方法如下：<metaname="keywords"content="HTML,CSS,JS,jQuery',/>【高手点拨】选择关键字的重要技巧是从用户角度出发，选取在搜索时可能经常用到的字词。(2)网页说明(description)是向搜索引擎提供的关于网页的概括性描述。网页的说明是由一两个词语或段落组成的，内容一定要有相关性，描述不能太短、太长或过分重复。使用方法如下：<metaname="description"content="web前端技术，I+X证书制度"/>(3)作者信息(author)用来标注网页的作者姓名，后面通常会跟邮箱地址。使用方法如下：<metaname="author"Content=nWangZRY,wzry"/>(4)版权信息(copyright)用来标注网站的版权信息。使用方法如下：<metaname="copyright"content="版权所有/>>»【课堂互动】中【教师】提问常用的http-equiv属性值有哪几种?+【学生】聆听、思考、回答【提示】上述代码表示当前页面在2秒后自动刷新,并跳转到w3school官网。【学生】聆听、记录、理解【教师】组织学生分组讨论，上机完成以下任务（】）刷新（refresh ）是指自动刷新网页并指向新页面。使用方法如下: <meta http-equiv="refresh" contenl="2;URL=" />(5)编辑网页所用软件(generator)用来说明网站采用什么编辑器制作。使用方法如下：<metaname="generator"Content=ltHBuilderDCloud"/>(6)重访时间(revisit-after)是指如果页面不经常更新，可以设置一个爬虫的重访时间，以减轻搜索引擎爬虫为服务器带来的压力。使用方法如下：<metaname="revisit-after"content="sevendays"/>2 .http-equiv属性hltp-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助浏览器正确、精确地显示网页内容.与之对应的属性同样为content,其值是对http-equiv属性内容的具体描述。(2)网页编码格式(Content-Type)是指设定页面使用的编码格式。网页编码格式在网站中起着很重要的作用，因为每种编码格式的兼容性都有差异，如果设置不合理，页面容易出现乱码现象.在日益国际化的网站开发领域，为了统一字符集,建议编码格式设置为Utf-8。使用方法如下：<metaht(p-equiv="content-Type"content="texthtmkcharsei=utf-8"/>此功能在HTML5中已简化为：<metacharset="utf-8"/>上机操作(10min)创建一个名为bk.html的文件，在标签<title><title>中输入文本"我最爱的一本书”，利用标签<body>vbody>或者<meia>输入书名、关键字、作者等信息。通过上机操作巩固所学知识【学生】讨论上机操作课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了HTML的概念、功能、标签的语法、结构、分类和常用编辑工具等内容，了解了HTML5的优势和语法变化，以及HTML头部的相关标签，希望通过本总结知识点，巩固学生对HTML和HTML5基础知识的印象>»【学生】总结回顾知识点作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：根据上节课制定的主题项目，介绍项目中使用的编辑工具、框架，并使用(title、meta标签等,并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思通过本节课的学习，让学生了解HTML与HTML5,HTML标签的语法、结构、分类，以及HTML头部等相关知识，学生对课程的学习兴致都较高，取得了不错的教学效果。
