《web前端技术》课件-第三章.pptVIP

3.2.3 图像和图标标签 3.2 图像 1. 添加图像 img src=图像地址 alt=代替文本 / 超链接 【例3-5】在网页中添加图像（以下提供部分代码），页面效果如图所示。 img src=img/p1.jpg alt=清明上河图 / 3.2 图像 在网页中添加图像 的页面效果 超链接 TISHI 提示 超链接 3.2 图像 超链接 源远流长 3.2 图像 link rel=shortcut icon href=图标地址 / 3.2 图像 2.添加图标 超链接 【例3-6】为网站添加图标（以下提供部分代码），页面效果如图所示。 title名画赏析/title link rel=shortcut icon href=img/favicon.ico / 3.2 图像 为网站添加图标 的页面效果 3.2 图像 Tuozhanyuedu 拓展阅读 3.2.4 流标签 3.2 图像 超链接 【例3-7】在例 3-6 的页面中应用流标签（以下提供部分代码）。 figure figcaption清明上河园——张择端雕像/figcaption img src=img/p2.jpg alt=张择端 height=250px / p张择端，字正道，汉族，北宋绘画大师。宣和年间任翰林待诏，擅画楼观、屋宇、林木、人物。所作风俗画中市肆、桥梁、街道、城郭刻画细致，界画精确，豆人寸马，形象如生。他自幼好学，早年游学汴京(今河南开封)，后习绘画。/p /figure 3.2 图像 超链接 【例3-7】页面效果如图所示。 3.2 图像 应用流标签 的页面效果 超链接 ——制作“金企鹅教育”主页“精品图书”模块 实战演练 WEB 扫一扫 “精品图书”模块最终页面效果 超链接 ——制作“金企鹅教育”主页“精品图书”模块 实战演练 WEB 超链接 ——制作“金企鹅教育”主页“精品图书”模块 实战演练 WEB 添加“精品图书”标题的页面效果 div class=book_title h3JINGPINiTUSHU/i/h3 h4精品图书/h4 /div 超链接 ——制作“金企鹅教育”主页“精品图书”模块 实战演练 WEB 图书展示的页面效果 img src=img/book_1.png alt=图书封面/ h3机械制造技术（第 2 版）/h3 p主编：冯安平、刘时英、徐建敏/p strong￥49.80/strong del￥69.80/del XUEYIZHIYONG 学以致用 ——制作“金企鹅教育”主页“精品图书”模块 实战演练 WEB “精品图书”模块最终页面效果 ——制作“金企鹅教育”主页“精品图书”模块 实战演练 WEB “精品图书”模块最终页面效果 link href=index.css type=text/css rel=stylesheet / TISHI 提示 多媒体 3.3 3.3.1 音频标签 3.3 多媒体 audio src=音频地址 controls=controls说明文字/audio 超链接 【例3-8】在网页中嵌入音频（以下提供部分代码），页面效果如图所示。 audio src=media/a1.mp3 controls=controls打字音效/audio 3.3 多媒体 在网页中嵌入音频 的页面效果 超链接 超链接 tuozhanyuedu 拓展阅读 3.3 多媒体 超链接 【例3-9】使用“mp3”与“wav”两种格式在网页中嵌入音频（以下提供部分代码）。 audio controls=controls source src=media/a1.mp3 type=audio/mp3 / source src=media/a1.wav type=audio/wav / /audio 3.3 多媒体 tuozhanyuedu 拓展阅读 3.3.1 视频标签 3.3 多媒体 video src=视频地址 controls=controls说明文字/video 超链接 【例3-10】在网页中嵌入视频（以下提供部分代码），页面效果如图所示。 video src=media/v1.mp4 controls=controls风景视频/video 3.3 多媒体 tuozhanyuedu 拓展阅读 在网页中嵌入视频的页面效果 超链接 ——制作“金企鹅教育”主页“企业宣传”模块 实战演练 WEB 扫一扫 “精品图书”模块最终页面效果 超链接 ——制作“金企鹅教育”主页“企业宣传”模块 实战演练 WEB 超链接 ——制作“金企鹅教育”主页“企业宣传”模块 实战演练 WEB 嵌入视频的页面效果 video src=img/jinqie.mp4