《Web 前端开发》教案.docx
教如备课教案课程名称：Web前端开发教学单位:工程科技学院教研室:计算机应用教研室HTML5的DOCTYPE声明下使用了 HTML的过期元素，网页可能无法正常显示预期的 效果。2 .根标签html是IITML5文档的根元素标签,除顶部VDOCTYPE html文档类型声明以外,所有的 HTML5文档都是以标签开始，以标签结束。在htnil和标签内包含了两个重 要的元素标签：head首部标签和body主体标签，分别用于标记文档的首部和主体局部。3 .首部标签headHTML5文档的首部以head标签开始，以/head标签结束。head标签中的内容不会显示 在网页的页面中。head标签中可包含和等标签，用于声明页面标题、字符集和关 键词等。标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，假设省略title标签 那么网页标题会显示为“无标题文档二标签用于提供当前HTML文档的元数据，这些数据不会直接显示在网页上，但是对 于机器是可读的，适用于搜索引擎索引。通常nieta标签可用于定义网页的字符集、关键词、描 述、作者等信息。4 .主体标签bodyHTML5文档的主体局部以body标签开始，以/body标签结束。body标签中的内容将全 部显示在网页的页面中。body标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成 多样化的显示效果。5 .HTML5文档注释为增加HTML5文档的可读性，可为其添加注释局部。注释是文档中的说明文字，不会被浏览 器执行。HTML5使用。一一标签为文档进行注释，注释标签以“! 一”开头，以“一”结束, 中间的”替换为注释文字内容即可。标签支持单行和多行注释。三、HTML5保存的常用标签10HTML5保存的常用标签标签HTML5新增标mi文本格式标签si列表标签2广1我用槌vp>2 .标题标签<hl>- <h6>3 .水平线标筌<hr>4 .换行标签<br>5.ff5<style>6.<htmlxhead><titlexbody>7. <div> 标签8. <span> 标筌“.醵标 vimg>)L科体学标签V2.粗体字标筌<b>和<strong>3-上演签<5up>和下标标签<5ub>4 .小号字体文本5 . 5tlq<bdo>6 .哪格式标箜vpre>1 .有序5"表标签<。1>2 .无序表标签Vul>3 列表工程Vli>4 .定义列表标签Vdl>5 .定义标题歹俵项Vdt>6 ,定义列表工程Vdd>超德接标签Vd>表格标签C表格标签;table、'2 .行标签Vtr>3 .单元格标签Vtd>4 .表格页眉标签Vth>5 .表题Vcaption>6 .表格主体Vtbody>7 .表格表头Vthead>8 .表格页脚Vtfoot>9 .歹够且合Vcolgroup>Qcl列属性定义<cob>y页眉标签header)导航标签vnav>节标签section文章标签article侧栏标签vaside>页脚标签footer页眉标签header)导航标签vnav>节标签section文章标签article侧栏标签vaside>页脚标签footerHTML5新增文档结构标签HTML5新增格式标签记号标签v markA日期时间标签vtime>进度标签progress度量标签vmeter>音频标签vaudi。视频标签vvideo>1、HTML5新增标签-新增文档结构标签1 .header标签>header标签定义文档的页眉，通常是一些引导和导航信息。例如：<header><hl>网站标题</hl>h2网站副标题</h2></header>11>header标签不局限于写在网页头部，也可以写在网页内容里面。2 . <nav>标签> <nav标签代表页面的一个局部，是一个可以作为页面导航的链接组，是navigator的缩 写。例如：<nav><ul>< li><ahref=>首页</aX/li>li><ahref=学院简介/aX/li< li><ahref=>学院新闻</aX/li>li><ahref=>院系设置/aX/li</ul></nav>>nav>标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。3. <section>标签.section标签用于对网页的内容进行分区、分块，定义文档中的节。比方章节、页眉、页脚 或文档中的其他局部。一般情况下，section标签通常由标题和内容组成。例如：<section>hl>section 是什么？ </hl>p>用于对网页的内容进行分区、分块/p</section>> section标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用 section标签定义。> 根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要 使用section标签。> 当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非 sectiorio<article>标签>article标签是一个特殊的section标签，它比section具有更明确的语义，它代表12 一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如：一篇文章、一篇博客、一个用户评价等。<article>这是一篇新闻稿件</article>5 .aside>标签aside标签用来装载非正文的内容，被视为页面里面一个单独的局部。例如：<article><hl>文章标题</hl<P文章内容/p<a$1（附属信息局部</51加></article>Aside标签可以被包含在article标签内作为主要内容的附属信息。> 也可以在article标签之外使用，作为页面或站点全局的附属信息局部。例如广告、友 情链接、侧边栏、导航条等等。6 .footer标签> footer标签定义section或document的页脚，包含了与页面、文章或是局部内容有关 的信息，比方文章的作者或者日期。例如：footer版权所有阜阳职业技术学院/footer作为页面的页脚时，一般包含了版权、相关文件和链接。> Footer标签和header标签使用基本一样，可以在一个页面中屡次使用，也可以在 article标签或者section标签中添加footer标签，那么它就相当于该区段的页脚了。下面来看一个HTML5新增文档结构标签的综合应用：<style>header width: lOOOpx;height: 300px;margin: 0 auto;border: solid Ipx blue;）13navwidth: lOOOpx;height: 30px;margin: 0 auto;border: solid Ipx blue;)#containerwidth: lOOOpx;height: 500px;margin: 0 auto;border: solid Ipx blue;)aside width:30%;height:98%;border: dashed Ipx red; float: left;)section(width: 39%;height: 98%;border: dashed Ipx green;float: left;margin-left: 2px;margin-right: 2px;article width:99%;height: 49%;border: solid Ipx black;float: left;margin-top: 2px;footer width: lOOOpx;height: lOOpx;margin: 0 auto;border: solid Ipx blue;)</style><body>header页眉标签/header<nav>导航标签v/nav><div id="container”>14aside,侧边栏 v/aside><section><article> 文章标签/articlearticle文章标签/article</section><aside> 侧边栏 v/aside></div>footer,页脚标签/footer</body></html>2、HTML5新增标签.新增格式标签L <mark>标签>记号标签mark用于突出显示指定区域的文本内容，通常在指定的文本前后分别加上mark和/mark标签标记，可以为文字添加黄色底色例如：<mark><P>这是一段<mark>文字/mark内容</p></mark>2. progress）标签A进度标签（progress用于显示任务的进度状态，可配合Javascript使用以显示任务进度 的动态进行效果。例如：文件正在下载中：<progress value= “35” max= “100" ></progress>3. <meter>标签>度量标签meter用于显示标量测量结果，通常用于显示磁盘使用量、投票数据统计等。例如：<p>C 盘空间剩余大小:<meter min= "0" max= “1000” value= “300” low= “300 heigh=“900” optimum- “1000" ></meter>300/1000GB </p>4. <audio>标签>audio元素用于播放音频。src>例如：<audio src=,img/aria. mp3n controls=,controls!,></audio>>audio元素的常用属性如下：15 Src：设置音频的路径。 Controls：设置是否使用播放控制，如果在标签中编写controls="controls”,那么网页会显示audio自带的播放控件。5. <video>标签<video>元素用于播放视频。> 例如：<video src= Mimg/2019 暑期双师培训第五组作品. mp4" controls=,rcontrolsHX/video>video元素的常用属性如下： Src：设置视频的路径。 Controls：设置是否使用播放控制，如果在标签中编写controls="controls”,那么网页会显示video自带的播放控件。三：CSS基础【教学目的与要求】1 .知识目标：使学生了解css的历史，精通css的语法和两个特性，精通css的选择器 和属性。2 .能力目标：使学生掌握CSS的基础知识，并能够运用CSS进行页面美化。【重点与难点】重点：CSS的语法和两个特性难点：CSS的选择器和属性。【教学方法及手段】媒体演示法、案例教学法【教学时数】20课时【教学内容与教学过程】一、CSS入门a) CSS基础语法16展性 值屋性hl color:red; font-size: 14px;1千/J一叶-1'选择器声明声明选择器属性：值；属性：值；选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成，每个属性有一个值。属性和值用冒号分开，分号结束b)CSS基础选择器分类标签名选择器、类选择器、ID选择器、子代选择器、结构选择器c)标签名选择器语法优先级与ID选择器与class选择器相比最低P ( border:lpx black solid;<div>d) <p>cssAn</p><span>CSS 选择第 V/span><p>CSS 优先级 v/p>优先级奴的类名，.后跟类名<style> text |border:lpx red solid;</style><body><p ulass=""text"CSS入 |'"J</p><p ulass="text”>CSS选择器</p> </body>e) ID选择器语法TD选择器的优先级最高，页面中不能有同名的ID#后跟ID名<body><p id=fftextn>CSSAn</p><p id="text”>CSS选择器</p> </body>17f）后代选择器语法使用多个选择器的组合来找到具体要控制的标签。.<style>#warp p（border:lpx red solid;</style><p>CSSAf J</p>g）使F<span>CSS选择器</span>、 </div>准确L/b°dy>推码量代码美观，易读、利用样式优先级的区别实现样式的覆盖二、盒模型百度链接间的距离怎么实现？百度一下a）盒模型概念新同 网页 贴里 虬道 MP3 图LK.视频/地图百科文虎hao123 |鸣这里的距离怎么实现？两百成诗为自贡慵入百成椎广食案风云椁关千百唐 A8ut fiaiflu©2012 Baidu使用百席前必谈京0030173芸 9盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看 作一个盒子，拥有盒子一样的外形和平面空间。b）盒模型组成元素I8超市中两个月饼盒子之间的距离就是咱们要介绍的>margin （外边距）,每个月饼都要有最外层的包装盒，而这个包装盒的厚 度,就是咱们的一> border （边框）.月饼不可能都是直接挨在一起的，对吧，那每个月饼 之间的间距,咱们就叫做-> padding （内边距）.那咱们介绍了月饼盒，咱们的月饼总应该有吧。对的，咱们月饼的宽度就是-> width.（1） margin：高度就是 一height.语法：margin-top / right /取）混偏的第1健就叼做1箕过element （兀素），每个块元素有上、右、下、左四个方位的外边距，可以分别用四种属性来声明。margin - top： 10px；/* 设置上边距 10px*/margin-right ： 10px；/*设置右边距 10px*/margin-bottom： 10px；/*设置底边距 10px*/marginTeft： 10px；/* 设置左边距 10px*/margin的几种不同写法：.main margin： lOpx 20px lOpx 20px；这四个值分别设置类名为main的模块上、 右、下、左四个方位外边距的值。2） . mainniargin： lOpx 20px；这两个值分别设定类名为main的模块的上下、左右 的外边距3） . main margin： lOpx 20px lOpx；第一个值设定上外边距，第二个值设定左右外 边距，第三个值设定下外边距4） . mainmargin： lOpx；如果就一个值的话，就设定了四个方向的外边距都lOpx5） .main margin： 20px auto；这样设值的意思是上下两个方位的外边距为20px, 左右两个方位的外边距自动适应居中竖向竖向margin的叠加margin横向上是加法，但在竖向上却会产生叠加的现象，并会取上下间 距的其大者生效。19课程教学基本信息课程名称Web前端开发胃90理论9。学时45实践 4545学时45任课教师职称讲师授课对象授课时间主要 参考 书目Web前端开发初级上、下册 工业和信息化部教育与考试中心编著中国工信出 版集团学标求 教目要目的：为积极响应国家职业教育改革实施方案，本课程以web前端开发职业 技能等级标准中的职业素养和岗位技术技能为重点培养目标，以专业技能为模块， 以工作任务为驱动进行课程教学。使学生对Web前端开发的技术体系有更系统、更清 晰的认识，能够顺利通过1+X认证Web前端开发的职业技能等级认证考试。要求：掌握当前主流的HTML5网站前端设计技术，在课程的学习中，培养学生的 前台网页设计制作能力，培养学生实际岗位的职业技能，提高学生的职业素质。通过 工程化教学使学生到达“会、熟、专、美”的网站前台制作的岗位要求，具备从事网 站前台开发所必须的专业知识、专业技能和相关职业能力。为计算机技术专业学生将 来职场的前台网页制作能力打下良好基础。课程内容学时分配主要内容学时数-HTML基础知识HTML5基础CSS基础四CSS3基础-：HTML基础知识【教学目的与要求】1 .知识目标：使学生了解HTML历史，精通HTML结构、精通HTML的元素和属性2 .能力目标：使学生掌握HTML基础知识【重点与难点】(3) padding相对于外边距而言，元素也应该具有内边距。padding-top / left / bottom / right ： length； padding属性定义元素边框与元素内容之间的空白区域。padding的几种写法和margin是一样的。(4) border元素的边框是围绕元素内容和内边距的一条线或多条线 语法：border-top / right / bottom / left： border-widthborder-styleborder-colorborder简写属性，用于把边框的所有属性设置到一个声明中。(5)盒模型的主要属性：marginpadding、 border 标准模式的计算方式：margin + padding+ border+ content盒模型的使用规那么：父子关系用padding,兄弟关系用margin!10px 5px70px5 Px lOpx411<1>IImargin: lOpxLpadding:5pxI |IIwidth :70pxlOOpx20(6) displaydisplay属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。语法：display：block / none / inline / inline-block ；*none*inline ：行标签，占一小块区域*block ：块标签，独占一行，可以设置宽高*inline-block ：块标签，但是具有一些行标签的属性display： inline-block是行内的块级元素，它拥有块级元素的特点，可以设置长宽，可以设置margin和padding值，但它却不是独占一行的，它的宽带并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身。三、CSS样式表内部样式表通常位于<head>和/head标签内部，通过使用style和 /style)标签标记各类样式规那么，其作用范围为当前整个文档。<style>选择器属性名称1：属性值1;属性名称2：属性值2；.属性名称N：属性值N </style>这里的选择器可用于指定样式的元素标签，例如body、p、hh6等均可。如果属性内容较多，也可以分行写：例如：<style>选择器属性名称1：属性值1;属性名称2：属性值2；21属性名称N：属性值N</style>其中最后一个属性值后面是否添加分号为可选内容。一般来说属性之间的分号用于 间隔不同的属性声明，因此最后一个属性值无需添加分号。但是为了方便后续添加新的 属性，也可以为最后一个属性值添加分号，这种做法不影响CSS样式表的正常使用。四、CSS常用样式1.CSS背景表3-9 CSS背景与颜色属性属性名称解释background-color设置背景颜色background-image设置背景图像background-repeat设置背景图像是否重复平铺background-attachment背景图像是否随页面滚动background-position放置背景图像的位置background上述所有属性的综合简写方式2、CSS文本表3-19 CSS文本属性一览表属性名称解释text-indent设置文本缩进text-align设置文本对齐方式（左对齐、居中、右对齐）text-decoration设置文本装饰（下划线、删除线、上划线）text-transform设置文本大小与的转换letter-spacing设置字符间距3. CSS字体22表3-23 CSS字体属性一览表属性名称解释font-family设置字体系列font-style设置字体风格(正常、斜体、倾斜三种)font-variant设置字体变化(小型尺寸的大写字母等)font-weight设置字体的粗细font-size设置字体尺寸font上述所有属性的综合简写方式4、CSS列表CSS对于HTML列表元素的样式设置主要在于规定各项列表前面的标志(marker) 类型：有序列表、无序列表和定义列表。其中有序列表默认的标记样式为标准阿拉伯数 字(1, 2, 3, 4,)；而无序列表默认的标记样式是实心圆点。属性名称解释list-style-type设置列表标志类型list-style-image设置列表标志图标list-style-position设置列表标志位置list-style-type上述所有属性的综合简写方式5、CSS表格属性名称解释border-collapse用于设置表格的边框样式为双线或单线。border-spacing用于设置表格中双线边框的分割距离。caption-side用于设置表格中的标题位置。empty-cells用于定义表格中空单元格边框和背景的显示方式。table-layout用于规定表格的布局方式，包括固定表格布局和根据内容调整布局。除以上5种属性设置外，在CSS中一些通用属性设置同样也可以用于表格元素。例 如字体颜色(color)> 背景(background)、文本对齐(text-align)、边框(border)、 内边距(padding)、宽度(width)和高度(height)等。23四：CSS3基础【教学目的与要求】1 .知识目标：学生应了解CSS3的历史及现状2 .能力目标：熟练掌握CSS3新增的选择器【重点与难点】重点：掌握CSS3新增的选择器难点：CSS3边框与背景、变形与动画【教学方法及手段】媒体演示法、案例教学法、【教学时数】20课时【教学内容与教学过程】一、CSS3边框与背景CSS3是最新的CSS标准。我们现在所说的CSS3,指的是CSS2. 1之后发布的所有 东西，CSS3的优势是能够使网站变得非常炫酷。CSS3. 0能够代替之前需要用 Javascript JQuery才能实现的交互效果，可以为用户带来更好的体验，特别是针对 移动端界面。另外，使用CSS3还能减少开发和维护本钱。CSS3新增了三种边框效果，分别是：圆角边框：自定义圆角数量和弧度的边框矩形阴影：带阴影效果的边框图片边框：用自定义图片素材做边框表11-1 CSS3新增边框效果属性一览属性名称解释border-radius为元素设置圆角边框。box-shadow为元素设置带阴影效果的边框。border-image为元素设置带有背景图片的边框。1. ) CSS3圆角边框在CSS3中，border-radius属性可用于直接创立带有圆角的边框样式，该属性 值表示圆角边框的圆角半径长度，数值越大那么圆的弧度越明显。24它的语法规那么如下：border-radius： <length> | <percentage>；border-radius属性的取值有以下两种形式：<length>：使用长度值规定圆角半径的长度，该值不可为负数。<percentage>：使用百分比规定圆角半径的长度，该值不可为负数。表11-3 CSS3圆角边框属性值一览表以上4种border-*-radius属性均与border-radius属性取值方式相同，可以使用长度值或属性值解释border-radius用于定义边框四个角的弧度border-top-left-radius用于定义边框左上角的弧度border-top-right-radius用于定义边框右上角的弧度border-bottom-left-radius用于定义边框左下角的弧度border-bottom-right-radius用于定义边框右下角的弧度百分比的形式表示。下面来看实例：<!DOCTYPE html><html><head><meta charset=nUTF-8n><title></title><style>divwidth: 600px;height: 50px;border: solid Ipx red;margin: 20px auto;padding: 20px; )div . aborder-radius: 20px;div tlborder-top-left-radius: 20px;)div tr border-top-right-radius: 20px; )div , bl border-bottom-left-radius: 20px;)div.brborder-bottom-right-radius: 20px;25</style></head><body><div class=Han> </div><div class=HtlH> </div><div class=ntrH> </div><div class=HblH> </div><div class=nbrn> </div></body></html>2. CSS3矩形阴影：在CSS3中，box-shadow属性可以为边框添加阴影，该属性适用于所有元素。box-shadow的默认属性值为none,表示无阴影效果。它的语法规那么如下：box-shadow： xoffset yoffset width color参数解释如下：xoffset：表示阴影在水平方向（x轴）上的偏移距离，取值为CSS 长度值length）。.yoffset：表示阴影在垂直方向（y轴）上的偏移距离，取值为,CSS 长度值length。.width：表示阴影的宽度，取值为CSS长度值length>。color：表示阴影的颜色效果，取值为CSS颜色值color）。下面来看实例：由于时间关系，本例就在上个实例下面继续添加.<!DOCTYPE html><html><head><meta charset=nUTF-8n><title></title><style>divwidth: 600px;height: 50px;border: solid Ipx red;margin: 20px auto;padding: 20px;div . abordr一工adius: 20px;box-shadow:lOpx lOpx lOpx black;）div tlborder-top-left-radius: 20px;26div tr border-top-right-radius: 20px; )div , bl border-bottom-left-radius: 20px;)div.brborder-bottom-right-radius: 20px;</style></had><body><div class=HaH> </div><div class=ntln> </div><div class=ntrn> </div><div class=nbln> </div><div class=nbrH> </div></body></html>3. CSS3背景效果CSS3新增了三种背景效果，可用于自定义背景图片或颜色的绘制区域、位置和尺寸。属性含义属性值background-clip设置背景覆盖范围Border-box/padding-box/content-boxbackground-origin设置背景覆盖的起点Border-box/padding-box/content-boxbackground-size设置背景的大小长度/百分比F面来看实例：由于时间关系，本例就在上个实例下面继续添加.27CSS3自定义背景图片绘制区域background-c lip属性裁剪背景图片，包含borderbackground-c 1 ip属性裁剪背景图片，包含paddingbackground-c li p属性裁剪背景图片，包含content(1) background- cl ip 属性： !DOCTYPE html><html><head><meta charset=HUTF-8n><title></title><style>divwidth: 200px;height: lOOpx;border: dashed lOpx blue;margin: 20px;padding: 20px; background-color: slategray;).borderbox background-clip: border-box;) paddingbox background-clip: padding-box;) contentbox background-clip: content-box;)</style></had>28<body><div class=HborderboxH> </div><div class=npaddingboxn> </div><div class=Hcontentboxn> </div></body></html>(2) background-origin<!DOCTYPE html><html><head><meta charset=nUTF-8n><title></title><style>divwidth: 200px;height: lOOpx;border: dashed lOpx blue;margin: 20px auto;padding: 20px;background: url(img/pattern.png) no-repeat; )borderboxbackground-origin: border-box;) paddingboxbackground-origin: padding-box;)contentbox background-origin: content-box;)</style></head><body><div class=nborderboxH> </div><div class=npaddingboxn> </div><div class="contntbox" </div></body></html>(3) backgroundsize29重点：HTML结构、HTML的元素和属性难点：HTML的元素和属性【教学方法及手段】媒体演示法、案例教学法【教学时数】20课时【教学内容与教学过程】随着因特网的高速开展，网络已飞进寻常百姓家。据统计，我国宽带用户总数居世界首位。人 们在工作、学习和生活中越来越多地使用因特网，社会车轮的转动已经离不开因特网这个润滑油。而 说到因特网，网民们会对各种网站侃侃而谈。那么究竟什么是网站？什么是网页？它们和因特网之间 存在什么关系？在这种高速开展的信息时代，拥有网站，是企业宣传的需要，是商务交易的渠道，是 个性张扬的途径。那么我们该如何创立网站呢？让我们带着这一系列的疑问进入本讲内容的学习！. 一、网页与网站，1 .网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关网页的集合就构成了一个网站。 举例：网站的种类很多，根据不同的分类方法可以分为不同的类型。新华网曾对网站按主体性质进 行分类，分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构 网站以及其它类型等。2 .浏览网页的工具浏览器浏览器：用于翻开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐Firefox、 360平安浏览器等。1） 用于定位某个网站、某个页面的一串字符。通常格式为：2）主页：主页、首页和网页是几个容易混淆的概念。网页泛指WWW上所有的页面；而主页那么是网站的“指 挥所”，通过主页中的超链接可以到达网站中的其他页面，它是站点中所有网页的链接中心；首页特指 用户进入网站后看到的第一个页面，通过这个页面可以进入网站的主页，此时的首页只是起到欢迎访 问者的作用。因此主页和首页的本质区别就在于是否设有网站的导航栏。但很多网站的首页和主页是合为一体的，是同一个网页。用户浏览网站时，在浏览器的地址栏里 输入网站的URL地址后，浏览器就会翻开“主页”或“首页”。<!DOCTYPE html><html><head><meta charset=HUTF-8H><title></title><style>divwidth: 200px;height: lOOpx;bo工clr: solid Ipx blu；margin: 20px auto;padding: 20px;background: url(img/bg.jpg);background-repeat: no-repeat;) small background-size: 80px 80px;)large background-size: 240px 140px;)</st
