Web前端开发任务式教程（HTML5+CSS3）（微课版） 课件模块2 常用HTML元素.pptx

《Web开发任务式教程》 模块2常用HTML元素

《Web开发任务式教程》常用HTML元素本模块介绍网页开发常用HTML元素，包括图像、视频、音频、超链接和列表元素的定义及用法。任务2.1设计一个海报任务2.2设计海报导航任务2.3设计网页底部导航

《Web开发任务式教程》常用HTML元素学习目标【知识目标】1）掌握img、video、audio、object、a、ol、ul、li、area、map元素的属性及用法。2）掌握图像映射的步骤。【能力目标】1）能够基于应用场景灵活使用video、audio、object和a元素播放音频和视频。2）能够基于应用场景灵活使用img、object和a元素显示图像。3）能够灵活应用a元素加载页面、下载文件、发送邮件和导航链接。4）能够使用图像映射高效设计网页导航。5）能够使用列表元素列表呈现网页内容。

《Web开发任务式教程》本任务给出的范例海报如图2-1所示，显示电影的海报图像、获奖情况、剧情介绍，以及影像资料。要求如下。1）海报图像左对齐。2）文字显示首行缩进，两端对齐。3）影像资料自适应浏览器宽度放映。常用HTML元素任务2.1设计一个海报图2-1电影海报

《Web开发任务式教程》常用HTML元素2.1.1img元素img元素定义显示在网页中的图像，是单标签空元素，也即其只包含属性，不包含元素内容，没有标签结尾。使用img元素能够显示各种格式和大小的图像，图像与文字能够按各种方式对齐。表2-1img元素的属性属性名说明alt设置图像的替换文本，当浏览器无法载入图像时，显示替换文本的信息，有助于更好的显示信息，增加网页的友好性和易读性src设置待显示图像的URL地址，可以是项目中的图像，也可以是网络图像，项目中的图像用相对地址，网络图像用网址，该属性必须设置height设置图像的高度，取值为pixels或%width设置图像的宽度，取值为pixels或%align?设置图像的对齐方式，取值说明如下。top：顶部对齐bottom：底部对齐，默认对齐方式middle：居中对齐left：左对齐right：右对齐usemap将图像定义为客户端图像映射时，使用该属性与map元素的name或id属性相关联，能够建立img与map元素之间的关系，取值为“#”+map元素的name或id属性值，例如“#img_id”

《Web开发任务式教程》常用HTML元素【例2-1】使用img元素显示如图2-2所示的3张大小不同和1张来源不同的图像。【例2-2】设置img元素的对齐属性，实现文字与图像的不同对齐方式，使显示效果如图2-3所示。图2-2图像显示图2-3图像与文字对齐显示

《Web开发任务式教程》常用HTML元素【例2-3】使用img元素显示如图2-4所示的路由器介绍，其中“了解更多”和“立即购买”也是图像。图2-4图像与文字混排显示

《Web开发任务式教程》常用HTML元素2.1.2video元素video元素定义网页中的视频，可以在标签开头和标签结尾之间放置文字内容，以便在不支持该元素的浏览器中给出提示信息。表2-2video元素的属性属性名说明src设置待播放的视频URLautoplay设置视频在就绪后马上播放controls设置显示播放控制控件height设置视频播放器的高度，取值为pixels或%width 设置视频播放器的宽度，取值为pixels或%loop设置视频循环播放功能muted设置视频静音poster设置视频播放前显示的图像preload设置在网页加载时加载视频，并预备播放。如果使用了autoplay，该属性会被忽略

《Web开发任务式教程》常用HTML元素【例2-4】使用video元素播放一段视频，网页显示效果如图2-5所示。图2-5video元素视频播放效果

《Web开发任务式教程》常用HTML元素2.1.3audio元素audio元素定义网页中的声音。可以在标签开头和标签结尾之间放置文字内容，以便在不支持该元素的浏览器中给出提示信息。常用属性及属性含义与video元素类似。

《Web开发任务式教程》常用HTML元素2.1.4object元素object元素定义网页中的嵌入式对象，能够将多媒体（例如图像、音频、视频、Javaapplets、ActiveX、PDF以及Flash）和HTML网页添加到HTML文件中。属性名说明align定义围绕该对象的文字对齐方式，取值说明如下。left：左对齐right：右对齐top：顶部对齐bottom：底部