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

Web前端基础技术;;1.超链接概述;示例：链接到外部网站;2.页面链接-超链接路径（href值）;myweb;myweb;例3：当前页面login.html，在该页面显示图片1.jpg，并单击图片时，在新窗口打开图片;3.超链接的其他应用;练习:单击链接实现文件下载;3.4创建页面锚点链接;素材

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=“上下边距”;注意：使用name属性，使用id无效;示例（了解）：链接a属性target的其他取值的例子:_parent和_top;5.图片热点;mapname=热点区域名

areashape=形状1coords=坐标值href=目标页面URL/

areashape=形状2coords=坐标值href=目标页面URL/

!--...以下可以继续创建多个区域，重复上述内容...--

/map;例6假如我们有一张划分了三个区域的图，如图所示。在单击矩形区域、圆形区域和多边形区域时，分别打开目标页面1.html、2.html和3.html。;6.音视频播放;videosrc=huwei_Mate_60.mp4

poster=huwei_Mate_60.png

width=400px

height=300px

controls

muted

loop

你的浏览器不支持video

/video;（2）音频播放audio;audiosrc=./1.mp3controlsautoplayloop

你的浏览器不支持audio

/audio;练一练;练习：单击图片不同的位置，在新页面打开不同的页面。

图片1：/100049728367.html

图片2：/100024857649.html

图片3：/100032253085.html

图片4：/100047139640.html

;5.1超链接

一、填空

1.按目标类型分，超链接可以分为：_______、_______、________、_______和________。

2.按链接内容分，超链接可以分为______和_______。

3.超链接的target属性取值可以有_____、_____、______、______和______。

4.超链接路径中的./表示____________，../表示__________________。

二、判断

1.超链接的相对路径一般应用于指向本网站的其他页面（√）。

2.超链接的绝对路径一般应用于指向外部网站的页面（√）

3.空链接指向当前页面（√）。

4.可以使用超链接实现文件下载功能（√）。

5.邮件链接可以直接发送邮件（×）。

6.锚点链接只能跳转到当前页面的锚点位置（×）。

7.锚点链接可以跳转到外部网站页面的锚点位置（√）。

8.当链接属性href取值为#时，可以实现跳转到页面顶部功能（√）。

9.超链接路径中的./表示当前页面所在的目录，可以省略（√）。

10.如果要在一个页面包含其他页面的内容，可以使用嵌入式iframe（√）。

11.嵌入式框架ifram