Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）第2版全套教学课件..pptx

1、Web前端前端开开发发全套可编辑PPT课件What？Why？How？成成绩绩构构成成线上成绩50%线下成绩50%过程性考核30%终结性考核20%过程性考核25%终结性考核25%视频观看占5%线上考试课堂考勤占5%期末作品作业成绩占10%作业及课堂表现占5%测验成绩占10%阶段性考核占15%发帖讨论成绩占5%第一第一单单元元Web基基础础知知识识任任务务1 搭建开搭建开发环发环境境Web的工作原理网页开发环境的搭建站点的创建和管理网页文件的创建和保存掌握学学习习目目标标了解了解:Web的类型学学习习目目标标实战演练搭建开发环境强化训练创建第一个HTML5页面任任务务目目标标1.什么是什么是Int

2、ernet？什么是？什么是Web？Internet：是一个全球性的计算机互联网络，又称“因特网”、“互联网”，它是世界上规模最大的计算机网络。Web：是用户登录Internet后最常用的功能。Web页又称网页，一般都包含图像、文字和超链接等元素。知知识识准准备备2.Web的工作原理的工作原理浏览浏览器（器（Browser）：）：客户端用于访问网页的主要软件服服务务器器（Server）：）：监听客户端连接请求、接收请求，返回响应内容通信通信协议协议（Http）：）：超文本传输协议，定义Web服务器和客户端的通讯细节工作模式：工作模式：浏览器/服务器（B/S）知知识识准准备备2.Web的工作原理的

3、工作原理Web服务器知知识识准准备备知知识识准准备备3.Web的的类类型型按技术分：静静态态网网页页：标准的HTML文件，采用采用HTML（超本文（超本文标记语标记语言）言）编写，通过HTTP（超文本传输协议）在服务器端和客户端之间传输的纯文本文件，扩展名为.html或或.htm。3.Web的的类类型型按技术分：动动态态网网页页：指网页文件里包含了程序代码，通过后台数数据据库库与Web服务器的信息交互，由后台数据库提供实实时时数数据据更更新新和和数数据据查查询询服务。动态网页能够根据不同时间和不同访问者而显示不同内容，可由ASP、PHP、JSP等技术编写。知知识识准准备备3.Web的的类类型型

4、按网页在网站中的位置分：主主页页（Home Page）：）：访问网站时看到的第一页，即首页。主页的名称是特定的，一般为index.html、default.html、default.aspx或index.aspx等。内内页页（Web Page）：）：指与主页相链接的其他页面，即网站内部的页面。知知识识准准备备HTML5：超文本标记语言（HyperText Markup Language）的第5代版本优势优势：标准化，解决了跨浏览器问题，具备良好的跨平台性能4.HTML5概述概述知知识识准准备备案例描述：1.安装网页编辑软件2.安装浏览器搭建开搭建开发环发环境境实战实战演演练练案例描述：1.创建

5、和管理站点2.创建和保存HTML5文档创创建第一个建第一个HTML5页页面面强强化化训训练练01Web的工作原理02网页开发环境的搭建03站点的创建和管理04网页文件的创建和保存任任务务小小结结用记事本软件编写并保存以下代码，将其后缀名“.txt”改为“.html”，用谷歌浏览器浏览网页效果。课课后后实实训训谢谢观谢谢观看看任任务务2 文字与段落排版文字与段落排版第二第二单单元元HTML5 语语言基言基础础学学习习目目标标标签标签属性文本标签掌握分隔标签序列标签了解了解:文字段落排版的基本规则学学习习目目标标实战演练制作科技馆参观须知页面强化训练制作“我家菜馆”点菜单页面任任务务目目标标1.H

6、TML5文档格式文档格式我的网页我的第一张网页。向向浏览浏览器声明当前文档使器声明当前文档使用哪种用哪种HTML标标准准规规范范标标志志HTML文档的开始文档的开始头头部部标签标签一般用于描述一般用于描述浏览浏览器所需的信息器所需的信息定定义义HTML文档的文档的标题标题定定义义网网页显页显示的内容示的内容标标志志HTML文档的文档的结结束束知知识识准准备备2.标签标签的属性的属性语语法格式：法格式：内容标签标签的常用属性：的常用属性：属属性性描描述述属属性性描描述述alink鼠标点击超链接时的颜色bgcolor网页的背景颜色link未访问过的超链接颜色background网页的背景图像vli

7、nk已访问过的超链接颜色leftmargin网页的左边距text所有文本的颜色topmargin网页的上边距知知识识准准备备示例：利用示例：利用body的属性的属性设设置网置网页页效果效果利用body的属性设置网页效果利用body的属性设置网页效果：页面左边距为80像素，上边距为50像素，文本颜色为绿色，背景颜色值为“#CCCCFF”。知知识识准准备备3.文本文本标签标签标题标签标题标签：网页内的文字标题，在页面中可以使用到标签设置各级标题。从1级到6级，标题字体大小依次递减，同时文字加粗。align（对齐对齐）属性：属性：属性属性描述描述属性属性描述描述left左对齐（默认值）right右对

8、齐center水平居中justify两端对齐知知识识准准备备示例：示例：标题标签标题标签的使用的使用设置各级标题标签标题文字二字级题文字a三lig级n=标ri题gh文t字三 题文字四级标题文字五级标题文字六级标题文字知知识识准准备备3.文本文本标签标签文字修文字修饰标签饰标签：为文字添加修饰，使得文字的格式能有多种样式的变化。如为文字设置粗体，就可以使用B标签，语法格式为：被修饰文字常用的文字修常用的文字修饰标签饰标签：标标签签呈呈现结现结果果标标签签呈呈现结现结果果粗体强调文本下画线斜体上标下标删除线知知识识准准备备示例：文字修示例：文字修饰综饰综合范例合范例文字修饰综合范例默认的格式 !-

9、标签表示段落标签-此行文字显示为粗体此行文字为强调文本此行文字有下划线此行文字显示为斜体此处2为上标：32此处2为下标：S2此行文字有删除线注注释释标标记记。用用于于标标注注一一些些便便于于阅阅读读和和理理解解但但又又不不需需要要显显示示在在页页面中的注面中的注释释文字。文字。知知识识准准备备3.文本文本标签标签特殊字符：特殊字符：在代码中有特殊用途的符号，如需在网页中显示该类符号，是需要在代码中通过特殊编码来实现的。常用的特殊字符：常用的特殊字符：标签标签呈呈现结现结果果标签标签呈呈现结现结果果 代表一个不断行空白<"知知识识准准备备4.分隔分隔标签标签段落段落标签

10、标签：在段落前后加上额外的空行。基本格式：基本格式：文字属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）、right（右对齐）和justify（两端对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。知知识识准准备备示例：段落示例：段落标签应标签应用案例用案例段落标签应用案例文字如需分段，可使用段落标签。段落标签中可设置左对齐的属性。段落标签中可设置居中对齐的属性。段落标签中可设置右对齐的属性。段落标签中可设置两端对齐的属性。知知识识准准备备4.分隔分隔标签标签换换行行标签标签：强制文本换行（但不会在行与行之间留下空行）。一个换行使用一个

11、，多个换行可以连续使用多个标签。基本格式：基本格式：文字提示：提示：HTML标签分为两大类，一类是双双标签标签，由开始和结束两个标签符组成的标签，如；另一类是单标签单标签，是指用一个标签符号即可完整的描述某个功能的标签，如。在HTML5中，单标签不再要求自闭合。知知识识准准备备示例：示例：换换行行标签应标签应用案例用案例换行标签应用案例静夜思作者：李白床前明月光，疑是地上霜。举头望明月，低头思故乡。知知识识准准备备4.分隔分隔标签标签水平水平线标签线标签：可以作为段落与段落之间的分隔线。基本格式：基本格式：属性属性size设定分隔线的粗细，默认值为2像素。属性属性width设定水平线的长度，可

12、以是绝对值（以像素为单位）或相对值（相对于窗口的百分比）。属属性性color设定水平线的颜色，以“#”引导的十六进制代码，或色彩的英文名称。知知识识准准备备示例：水平示例：水平线标签应线标签应用案例用案例水平线标签应用案例静夜思作者：李白床前明月光，疑是地上霜。举头望明月，低头思故乡。提示：提示：水平线的颜色效果需要在浏览器中浏览才能显示，在Dreamweaver编辑器的设计视图中无法显示。知知识识准准备备5.序列序列标签标签无序列表：无序列表：各个列表项之间没有顺序级别之分，通常是并列的。基本格式：基本格式：列表项1列表项2列表项3知知识识准准备备示例：无序列表示例：无序列表应应用案例用案例

13、无序列表应用案例进口食品美容洗护家具家电母婴用品提示：提示：在HTML5中不再支持的type属性。知知识识准准备备5.序列序列标签标签有序列表：有序列表：有排序顺序的列表，其各个列表项按照一定的顺序排列。基本格式：基本格式：列表项1列表项2列表项3属性：属性：start属性用于更改列表编号的起始值，reversed属性表示是否对列表进行反向排序。知知识识准准备备示例：有序列表示例：有序列表应应用案例用案例有序列表应用案例 sstatartr=t=25 reversed第一章第二章第三章第四章知知识识准准备备制作科技制作科技馆馆参参观须观须知知页页面面案例描述：设计并制作科技馆参观须知页面，网页

14、效果如下。实战实战演演练练案例描述：设计并制作“我家菜馆”点菜单页面，网页效果如下。制作制作“我家菜我家菜馆馆”点菜点菜单页单页面面强强化化训训练练01HTML5文档格式02标签的属性03文本标签04分隔标签05序列标签任任务务小小结结设计并制作古诗欣赏网页，效果如图所示。课课后后实实训训谢谢观谢谢观看看任任务务3 图图像和超像和超链链接接第二第二单单元元HTML5 语语言基言基础础图像标签绝对路径和相对路径超链接标签锚点标签掌握学学习习目目标标了解了解:网页中常用的图片格式学学习习目目标标实战演练制作网页技术介绍页面任任务务目目标标强化训练制作“文章故事网”页面任任务务目目标标1.图图像像标

15、签标签语语法格式：法格式：图图像像标签标签的属性：的属性：属属性性描描述述属属性性描描述述src规定显示图像的URL。alt图像不能显示时的替换文本。align规定如何根据周围的文本来排列图像。（不推荐使用）border定义图像周围的边框。（不推荐使用）height定义图像的高度。width设置图像的宽度。hspace定义图像左侧和右侧的空白。（不推荐使用）vspace定义图像顶部和底部的空白。（不推荐使用）title光标停留在图像上时，显示提示文字。知知识识准准备备示例：在网示例：在网页页中插入中插入图图像像无标题文档知知识识准准备备2.绝对绝对路径和相路径和相对对路径路径绝对绝对路径：路径

16、：指文件或目录在硬盘上真正的路径。比如，图像top.jpg存放在c盘的images文件夹下，那么该图像的绝对路径表示方法为c:imagestop.jpg。相相对对路径：路径：相对于当前文件的路径。网页中的图片、超链接等一般都使用相对路径来表示。知知识识准准备备2.绝对绝对路径和相路径和相对对路径路径相相对对路径常路径常见见的表示方法的表示方法Html文档的位文档的位置置图图像的位像的位置置相相对对路路径径情形情形说说明明c:democ:demo图文均在同一目录c:democ:demoimages图在网页下一层目录c:democ:图在网页上一层c:democ:images图文在同一层但不同目录提

17、示：提示：“./”指回到上一层目录，“images/”指进入下一层目录images，“./images/”指回到上一层目录，然后再进入目录images中。知知识识准准备备示例：示例：绝对绝对路径和相路径和相对对路径路径无标题文档知知识识准准备备3.超超链链接接标签标签语语法格式：法格式：链接文本href属性：属性：描述链接的地址target属性：属性：描述链接页面的打开方式_self：默认值，表示在原网页窗口中打开链接_blank：在新窗口中打开链接知知识识准准备备示例：在网示例：在网页页中插入超中插入超链链接接无标题文档百度主页，原窗口打开新浪主页，新窗口打开提示：提示：href属性的内容可

18、以是站点内网页文件的相对路径，也可以是网页的网址等。知知识识准准备备4.锚锚点点标签标签锚锚点点链链接：接：可以帮助浏览者快速定位网页内的目标内容，实现网页内的链接跳转。创创建方法：建方法：第一步：第一步：使用创建目标位置的锚点名称第二步：第二步：使用链接文本创建锚点链接这样，鼠标点击链接文本，网页窗口即可定位到目标位置。知知识识准准备备示例：在网示例：在网页页中插入中插入锚锚点点链链接接（因篇幅有限，仅列出部分代码和效果截图）节气谣谚诗歌节气分类节气的安排及含义二十四番花信风各地有关节气的谚语节气谣谚诗歌回到菜单创创建目建目标标位置的位置的锚锚点名称点名称创创建目建目标标位置的位置的锚锚点名

19、称点名称创创建建锚锚点点链链接接创创建建锚锚点点链链接接知知识识准准备备制作网制作网页页技技术术介介绍页绍页面面案例描述：设计并制作网页技术介绍页面，单击index.html页面中的图片时，跳转显示page1.html页面，网页效果如下。index.htmlpage1.htmlpage2.html实战实战演演练练案例描述：设计并制作“文章故事网”页面，网页效果如下。制作制作“文章故事网文章故事网”页页面面强强化化训训练练01图像标签02绝对路径和相对路径03超链接标签04锚点标签任任务务小小结结设计并制作旅游景点网页面，效果如图所示。课课后后实实训训谢谢观谢谢观看看任任务务4 结结构构标签标签

20、和分和分组标签组标签第三第三单单元元HTML5 新增新增标签标签及属性及属性结构标签分组标签掌握学学习习目目标标了解了解:HTML5网页结构的定义方法学学习习目目标标任任务务目目标标实战演练制作唐诗欣赏页面强化训练制作“温州地标性建筑”网页知知识识准准备备1.结结构构标签标签标签标签：定义文档或者文档一部分区域的页页眉眉，它可以作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个标签，也可以为每一个独立内容块添加标签。知知识识准准备备示例：示例：标签标签的使用的使用标签的使用我院通过教育部第二批国家现代学徒制试点单位评审认定发表时间：2017-09-09 来源：信息工程系&n

21、bsp; 编辑：党院办  浏览量：483次知知识识准准备备1.结结构构标签标签标签标签：定义导导航航链链接接的部分。并不是所有的HTML文档都要使用到元素。元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。知知识识准准备备示例：示例：标签标签的使用的使用标签的使用学院首页学院概况新闻中心招生就业知知识识准准备备1.结结构构标签标签标标签签：用于定义独独立立的的内内容容，标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。其内可以用多个进行内容划分。标签的潜在来源：论坛帖子、博客文章、新闻故事、

22、评论等。知知识识准准备备示例：示例：标签标签的使用的使用知知识识准准备备1.结结构构标签标签标签标签：定义标签外的内容。aside的内容应该与附近的内容相关，用于定义页面或者文章的附属信息部分，如页面内容相关的引用、侧边栏、广告等有别于主要内容的部分。知知识识准准备备示例：示例：标签标签的使用的使用知知识识准准备备1.结结构构标签标签标签标签：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。如果article标签、aside标签、nav标签更符合使用条件，那不要使用section标签。没有标题的内容区块不要使用section定义。知知识识准准备备1.结结构构标签

23、标签标签标签：定义文档或者文档的一部分区域的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个元素。知知识识准准备备示例：示例：标签标签的使用的使用知知识识准准备备2.分分组标签组标签标签标签：规定独立的流内容（图像、图表、照片、代码等）。标签标签：定义figure元素的标题（caption）。标签应该被置于figure元素的第一个或最后一个子元素的位置。知知识识准准备备示例：示例：标签标签和和标签标签的使用的使用浙江安防职业技术学院是经教育部批准建立的公办全日制高等职业技术学院，由温州市人民政府联合浙江省公安厅和公安部第一研究所举办。学院是浙江省内唯

24、一一所重点培养具有安防科技应用与推广能力，能够从事公共安全管理、安防工程建设、民航安全管理等高素质技术技能人才的高职院校。校园规划图知知识识准准备备2.分分组标签组标签标签标签：将多个标题（主标题、副标题或者子标题）组成一个标题组。该标签被用来对标题元素进行分组，通常与标签、标签配合使用。知知识识准准备备示例：示例：标签标签的使用的使用实战实战演演练练案例描述：设计并制作唐诗欣赏页面，网页效果如下。制作唐制作唐诗诗欣欣赏页赏页面面强强化化训训练练案例描述：设计并制作“温州地标性建筑”页面，网页效果如下。制作制作“温州地温州地标标性建筑性建筑”网网页页任任务务小小结结01结构标签02分组标签03

25、HTML5网页结构的定义方法课课后后实实训训定义教育网站的主页结构，效果如图所示。谢谢观谢谢观看看任任务务5 页页面交互面交互标签标签、层层次次语义标签语义标签和全局属和全局属性性第三第三单单元元HTML5 新增新增标签标签及属性及属性页面交互标签层次语义标签掌握学学习习目目标标了解了解:全局属性学学习习目目标标任任务务目目标标实战演练制作书评网任任务务目目标标强化训练制作“面试应答技巧”网页知知识识准准备备1.页页面交互面交互标签标签标签标签：标签用于描述文档或文档某个部分的细节。标标签签：与标签配合使用，作为的第一个子元素，用于定义标题。标题是可见的，当用户单击标题时，会显示或隐藏标签中的

26、其他内容。知知识识准准备备示例：示例：标签标签和和标签标签的使用的使用<details;标签和<summary;标签details标签和summary标签 details标签用于描述文档或文档某个部分的细节。summary标签作为details的第一个子元素，用于定义details标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。知知识识准准备备1.页页面交互面交互标签标签标签标签：用于定义运行中的任务进度（进程）。标签标签的属性：的属性：属性属性描述描述属性属性描述描述max规定需要完成的值value规定进程的当前值知知识识准准备备示例：示例：标签标签

27、的使用的使用<progress;标签的使用progress标签用法一：表示任务正在进行 工作进行中：progress标签用法二：表示已完成任务量 已修满学分：知知识识准准备备1.页页面交互面交互标签标签标签标签：定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。标签标签的属性：的属性：属属性性描描述述属属性性描描述述high定义被界定为高的值的范围low定义被界定为低的值的范围max定义最大值，默认值是1min定义最小值，默认值是0title光标移到进度条上的提示文字value定义度量的值optimum定义什么样的度量值是最佳的值。如果该值高于high属性

28、，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好知知识识准准备备示例：示例：标签标签的使用的使用<meter;标签的使用手机电量显示：充足模式：80%省电模式：15%低电模式：5%知知识识准准备备2.层层次次语义标签语义标签标标签签：用于定义时间或日期，它不会在浏览器中呈现任何效果，但是该元素能以机器可读的方式对日期和时间进行编码，主要给机器识别，这样用户可以将事件提醒添加到日程表中，搜索引擎也能够生成更智能的搜索结果。标签标签的属性：的属性：属属性性描描述述属属性性描描述述datetime定义具体时间（15：00）或日期（2010-10-10），否则，由元素的内容给

29、定日期/时间pubdate用于定义time元素中的日期/时间的发布日期，一般值为pubdate知知识识准准备备示例：示例：标签标签的使用的使用<time;标签的使用我们每天早上9:00 开始营业。我在情人节 有个约会。丫丫记录于2017-10-27知知识识准准备备2.层层次次语义标签语义标签标签标签：定义带有记号的文本，它可实现高亮显示某些字符，以引起用户的注意。知知识识准准备备示例：示例：标签标签的使用的使用一去不复返呢？是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了：现在又到了哪里呢？从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆

30、了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身边垮过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。一去不复返呢？知知识识准准备备2.层层次次语义标签语义标签标签标签：用于定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。人名不属于作品的标题。标签定义的文本将以斜体显示。知知识识准准备备示例：示例：标签标签的使用的使用<cite;标签的使用山不在高，有仙则名。水不在深，有龙则灵。陋室铭知知识识准准备备3.全局属性全局属性draggable属性：属性：规定元素是否可拖动。f

31、alse：默认值，表示该元素选中之后不不可以进行拖动操作。true：表示该元素选中之后可以进行拖动操作。知知识识准准备备示例：示例：draggable属性的使用属性的使用draggable属性的使用元素拖动属性：在网页中无法显示拖动效果，必须与JavaScript结合才能实现拖动功能知知识识准准备备3.全局属性全局属性hidden属性：属性：规定元素是否可见。不不设设置：置：表示该元素显示。设设置：置：表示该元素被隐藏。知知识识准准备备示例：示例：hidden属性的使用属性的使用hidden属性的使用设置图片隐藏，不显示知知识识准准备备3.全局属性全局属性spellcheck属性：属性：规定是

32、否对元素的输入内容进行拼写和语法检查。false：不不检测拼写和语法。true：默认值，检测拼写和语法。知知识识准准备备示例：示例：spellcheck属性的使用属性的使用spellcheck属性的使用spellcheck属性值为true：spellcheck属性值为false：知知识识准准备备3.全局属性全局属性contenteditable属性：属性：规定是否可以编辑元素的内容，前提是该元素必须是可获得鼠标焦点且不是只读的。false：默认值，表示内容不不可编辑。true：表示内容可编辑。知知识识准准备备示例：示例：contenteditable属性的使用属性的使用不可编辑的菜单菜单1菜单

33、2菜单3菜单4可编辑的菜单菜单1菜单2菜单3菜单4实战实战演演练练制作制作书评书评网网案例描述：设计并制作书评网页面，网页效果如下，网页中间的热门书籍图片呈现滚动显示效果。实战实战演演练练鼠标点击“新书速递”栏目，网页效果如图所示。书籍内容介绍文字允许用户编辑。制作制作书评书评网网实战实战演演练练制作制作书评书评网网鼠标点击“销售榜单”栏目，网页效果如图所示。书籍内容介绍文字允许用户编辑。强强化化训训练练制作制作“面面试应试应答技巧答技巧”网网页页案例描述：设计并制作“面试应答技巧”页面，网页效果如下。强强化化训训练练制作制作“面面试应试应答技巧答技巧”网网页页当鼠标点击页面中的分标题文字时，网页效果如图所示。任任务务小小结结01页面交互标签02层次语义标签03页面的全局属性课课后后实实训训设计并制作“北京必玩景点推荐”页面，效果如图所示。谢谢观谢谢观看看任任务务6 标记选标记选择择器和器