Web前端开发（HTML5+CSS3+JavaScript） 课件 第3章 3.2-超链接 图片热点

Web前端基础技术CSSJSHTML第3章3.2超链接、图片热点和多媒体Contents目录超链接语法、路径、分类和应用嵌入式框架图片热点多媒体播放1.超链接概述按链接目标分：页面链接；锚点链接；空链接（“”和#指向当前页面）；下载链接；邮件链接语法格式

<ahref=“目标URL”target=“目标窗口”title=“提示文字”>

链接文本或图片</a>属性：href=“目标（文件URL

|锚点

|

邮件）位置”属性：target=“_self（默认值）|_blank|_top|_parent|框架名”通用属性title：鼠标悬停在标记时的提示文本，绝大多数标记都有该属性，例如标题、段落、图片等示例：链接到外部网站<h3>默认链接</h3><ahref="">百度(默认当前窗口)</a>

<h3>设置目标窗口</h3><ahref=""target="_blank">

百度(新窗口打开)</a>

<h3>title通用属性</h3><ahref=""target="_self"

title="百度">

百度(当前窗口,带提示)</a>2.页面链接-超链接路径

（href值）

2.1空链接：指向当前页面目标的完整路径，如：/index.html[协议：//域名/文件名]/study.zip2.3√相对URL：指向当前网站的页面，相对当前页面位置。相对当前页面的目标文件的位置，如：images/1.jpgback/admin.html可以使用相对路径描述符来定位其他文件位置，相对路径描述符有两个，如： ./

表示当前页面文件所在的目录，该描述符可以省略../

表示当前页面文件所在目录的上一级目录。2.2绝对URL：指向外部网站的页面href=””---空字符串，单击刷新当前页面

；href=”#”---单击回到当前页面顶部，不刷新页面。myweb例1：当前页面为index.html，创建链接，链接到login.html和main.html，每个页面创建返回链接网站目录结构示例:相对路径应用(a)myweb例2：当前页面为login.html，链接到main.html,并在main.html页面显示图片1.jpg。网站目录结构示例:相对路径应用(b)例3：当前页面login.html，在该页面显示图片1.jpg，并单击图片时，在新窗口打开图片网站目录结构示例:相对路径应用(c)myweb3.超链接的其他应用3.1使用链接下载文件<ahref=“down/1.zip”>下载</a>

txt/html/image/pdf(直接打开)|docx、xlsx、zip(下载提示)3.2图片链接<ahref=“images/1.jpg”target=“_blank”>

<imgsrc=“images/1.jpg”width=“100px”height=“100px”></a>3.3发送电子邮件(了解)<ahref=“mailto:191085153@qq.com?subject=问候！

&body=大家好!&cc=111@;222@

&bcc=333@”>

联系我们</a>练习:单击链接实现文件下载<ahref="1.rar">点击这里下载文件</a><br/><ahref="1.rar"><imgsrc=“images/1.jpg"title="点击这里下载文件"width="100px"height="100px"/></a>3.4创建页面锚点链接<

aname=“锚点名”>文本内容</a>步骤1:创建锚点，即要跳转到的位置(位置标识)步骤2:创建指向锚点的链接，单击时跳转到锚点位置<

ahref=“#锚点名”>文本内容</a>

其他：如果要跳转到其他页面的锚点位置，使用URL#锚点名<

ahref=“目标页面#锚点名”>文本内容</a>素材WEB前端基础目录HTML介绍CSS介绍JavaScript介绍HTML介绍HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等.返回目录

CSS介绍层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。返回目录

JavaScript介绍JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。返回目录示例:锚点链接的使用注意：只有页面内容超出浏览器可视范围时，锚点链接才起效

其他属性（了解）：frameborder=“数字”；scrolling=“yes|no”;width/height；marginwidth=“左右边距(像素)”；marginheight=“上下边距”嵌入式框架iframe(子窗口)基本语法<iframesrc=“初始页面”name=“框架名”其他可选属性>

你的浏览器不支持框架，无法看到内容</iframe>4.嵌入式框架iframe在一个页面包含其他的页面，实现当前页面局部更新-增强用户体验注意：使用name属性，使用id无效示例

假如有三个页面：index.html、login.html和reg.html，其中index.html页面中包含一个名称为“main”、无边框、宽度和高度为200*100且带滚动条的嵌入框架，默认显示login.html。请在index.html中创建两个链接，分别在浮动框架中打开login.html和reg.html。无边框示例（了解）：链接a属性target的其他取值的例子:_parent和_toptarget=“_self（默认值）|_blank|_top|_parent|框架名”5.图片热点

单击图片不同区域，能够跳转到不同的目标页面。用法，分两步：（1）显示图片，指定热点区域名称<imgsrc=”图片URL”usemap=”#热点区域名”/>（2）定义图片热点区域<mapname="热点区域名"><areashape="形状1"coords="坐标值"href="目标页面URL"/><areashape="形状2"coords="坐标值"href="目标页面URL"/>

<!--...以下可以继续创建多个区域，重复上述内容...--></map><mapname="热点区域名"><areashape="形状1"coords="坐标值"href="目标页面URL"/><areashape="形状2"coords="坐标值"href="目标页面URL"/>

<!--...以下可以继续创建多个区域，重复上述内容...--></map>说明：nmap标记：表示这是图片对应的热点区域，name为该区域唯一名称。narea标记：map的子标记，创建一个指定形状的热点区域。area标记包含以下属性：①shape属性：设置热点区域形状，取值为：rect（矩形）、circle（圆）和poly（多边形）。②coords：对应热点形状的坐标值，如果shape取值是rect，那么取左上角和右下角的坐标(x,y)，使用逗号连接起来作为coords值；如果是shape取值是circle，那么取值为圆心坐标和半径值；如果shape取值为poly，那么取多边形各个特征点的坐标值。注意coords每个取值都使用逗号分隔，且每个坐标值都是相对图片左上角为(0,0)距离。可以借助PS，或者Window中的画图程序来获取坐标点。③href属性：热点区域对应的目标页面位置。④title属性：鼠标悬停在热点区域时显示的提示信息。例6假如我们有一张划分了三个区域的图，如图所示。在单击矩形区域、圆形区域和多边形区域时，分别打开目标页面1.html、2.html和3.html。<imgsrc="hot.png"usemap="#mypic"/><mapname="mypic"><areashape="rect"

coords="29,46,79,83"href="1.html"/><areashape="circle"

coords="181,39,25"href="2.html"/><areashape="poly"

coords="147,95,157,120,177,119,165,144,107,130"href="3.html"/></map>6.音视频播放如果要在页面中播放视频或音频，可以使用HTML5中的新标记video和audio。<videosrc="视频文件"其他可选属性>

你的浏览器不支持video标记</video>（1）视频播放videonsrc属性：视频文件URL，可支持的视频格式类型有MP4、WebM和Ogg三种。目前主流浏览器均支持该三种视频格式文件的播放。n其他可选属性包括：①controls：单属性，表示是否显示播放器的控制面板（比如播放/暂停按钮）。如果要显示，则添加该属性，否则不要添加。所有的单属性用法都相同，即需要该功能时才加上。②autoplay：单属性，表示是否自动播放。③width：视频界面宽度。④height：视频界面高度。⑤preload：单属性，是否预加载视频。如果需要打开页面的同时加载视频，则加上该属性；但如果添加了autoplay属性，那么该属性无效。⑥muted：单属性，表示是否静音播放视频。⑦poster：视频封面图片的URL。⑧loop：单属性，是否循环播放。<videosrc="huwei_Mate_60.mp4"poster="huwei_Mate_60.png"width="400px"height="300px"controlsmutedloop>

你的浏览器不支持video</video>（2）音频播放audio<audiosrc="音频文件URL"其他可选属性>

你的浏览器不支持Audio标记</auido>nsrc属性：音频文件URL。n其他属性：①controls：单属性，是否显示播放器的控制面板，如果使用该属性，则向用户显示音频控件（比如播放/暂停按钮），如果不使用该属性，那么页面将隐藏播放界面，实现背景声音或背景音乐播放。②autoplay：单属性，如果使用该属性，则音频在就绪后马上播放。③muted：单属性，如果使用该属性，则音频静音播放。④loop：单属性，音频是否循环播放。⑤preload：网页加载时，视频是否同时加载。<audiosrc="./1.mp3"controlsautoplayloop>

你的浏览器不支持audio</audio>练一练练习：根据给出的素材，实现如下图所示的书签效果。目录<!--1.3号文字标题--><!--2.横线--><!--3.下面为无序列表链接-->

登鹳雀楼寻隐者不遇乐游原夜雨寄北赤壁

<!--4.每首诗名为锚点，目录链接到该锚点-->

登鹳雀楼

唐代王之涣<!--换行-->

白日依山尽，黄河入海流。<!--换行-->

欲穷千里目，更上一层楼。<!--换行-->

返回<!--5.返回顶端目录-->

<!--6.下面要求同要求4,5-->

寻隐者不遇唐代贾岛松下问童子，言师采药去。只在此山中，云深不知处。返回乐游原唐代李商隐向晚意不适，驱车登古原。夕阳无限好，只是近黄昏。返回

夜雨寄北唐代李商隐君问归期未有期，巴山夜雨涨秋池。何当共剪西窗烛，却话巴山夜雨时。返回

赤壁唐代杜牧折戟沉沙铁未销，自将磨洗认前朝。东风不与周郎便，铜雀春深锁二乔。返回练习：单击图片不同的位置，在新页面打开不同的页面。图片1：/100049728367.html图片2：/100024857649.html图片3：/100032253085.html图片4：/100047139640.html5.1超链接一、填空1.按目标类型分，超链接可以分为：_______、_______、________、_______和________。2.按链接内容分，超链接可以分为______和_______。3.超链接的target属性取值可以有_____、_____、______、______和______。4.超链接路径中的./表示____________，../表示__________________。

二、判断1.超链接的相对路径一般应用于指向本网站的其他页面（√）。2.超链接的绝对路径一般应用于指向外部网站的页面（√）3.空链接指向当前页面（√）。4.可以使用超链接实现文件下载功能（√）。5.邮件链接可以直接发送邮件（×）。6.锚点链接只能跳转到当前页面的锚点位置（×）。7.锚点链接可以跳转到外部网站页面的锚点位置（√）。8.当链接属性href取值为#时，可以实现跳转到页面顶部功能（√）。9.超链接路径中的./表示当前页面所在的目录，可以省略（√）。10.如果要在一个页面包含其他页面的内容，可以使用嵌入式iframe（√）。11.嵌入式框架iframe可以实现页面局部刷新的功能（√）。

5.2图片热点一、填空1.图片热点区域的形状可以有______、______和_______。2.假如shape=rectcoords=20,80,40,100，那么20,80表示______，40，100表示______。3.假如有shape=circlecoords=20,40,12，那么20,40表示______，12表示______