网页超级链接

超级链接（hyperlink）也简称为链接（link），是网站的重要组成部分，HTML正是因为有了超级链接才显得与众不同。超级链接使得浏览者可以在众多网页之间跳转和返回。可以使用标签的name 或 id 属性，创建一个文档内部的书签，也就是说，可以创建指向文档片段的链接。超链接的目标对象类型有很多，不但可以链接到各种类型（如图片文件、声音文件、视频文件、word等）的文件，还可以链接到网页内的特定内容、其他网站、ftp服务器等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。

在HTML文件中，超级链接使用…标签（标签也称为标记、元素）组来实现，语法结构及相关说明如下所示。

基本语法格式：

链接内容

说明

（1）标签是双标签，链接的内容放在和之间。链接内容可以是文字、图片、音频或视频文件等。

（2）href属性是标记的必要属性，不可缺省，用于设置链接所指向的目标地址，目标地址通过href属性的值“url”来表示。

（3）url：资源地址，指的是链接所指向的文件的地址，其取值可以是本地地址或远程地址。

（4）target属性用于指定打开链接时的目标窗口，默认值是在原窗口中打开。其属性值及代表含义如下表所示：

值

含义

_self

在当前窗口中打开目标文件，默认值

_blank

在新窗口中打开目标文件

_top

在整个浏览器窗口打开链接（忽略任何框架）

_parent

在当前窗口的上一级窗口打开，一般在框架中使用

（5）title属性对超级链接起到提示或说明作用。浏览器打开网页后，当鼠标悬停在链接上方时会出现提示性文字，文字内容由title属性值指定，往往用来提示该链接指向的内容是什么。

例、

由于指定了target="_self"，所以每一个网站被打开时都是在原窗口中打开，同时原窗口中之前的网页数据将会从内存中卸载，被目标网页所取代。

保存为文件名LinkDemoA.html，用浏览器打开显示如下：

使用标签的name 或 id 属性，可以创建一个文档内部的书签——创建指向文档片段的链接——锚链接。

下面是创建指向文档片段的链接（锚链接）的例子，源码如下：

保存文件名为LinkDemoB.html，用浏览器打开显示如下：

Windows中的目录（也称为文件夹）

一个典型的文件系统可以达到有组织的存储文件的目的。一个“目录”或“文件夹”就是一个装有数字文件系统的虚拟“容器”。在它里面保存着多个文件和其它一些目录（文件夹）。在一个目录（文件夹）中的另一个目录（文件夹）被称作它的子目录（子文件夹）。类似如下图：

Windows中的路径

用户在磁盘上寻找文件时，所历经的文件夹线路叫路径。路径分为绝对路径和相对路径。

绝对路径：是从盘符开始的路径，形如d:\AA\BB\my.html

相对路径：是从当前目录（即用户正在使用的目录）开始的路径，如当前目录为C:\AA

要描述上述路径，只需输入BB\my.html。

实际上，严格的相对路径写法应为.\BB\my.html其中，.(点)表示当前路径，在通常情况下可以省略，只有在特殊的情况下不能省略。

. 表示当前目录

.. 表示当前目录的上一级目录。

与Windows中的路径类似，HTML中也有两种形式的路径，绝对路径和相对路径，不同的路径用在不同的链接中。如果要链接站外的文件，则需要使用绝对路径；如果要链接站内的文件，一般在实现超级链接功能时，必须要指定href属性的值，也就是目标文件的路径。网站中（或站外）每一个文件都有一个独一无二的地址，称之为URL（Uniform Resource Locator），即统一资源定位符，通过URL建立当前文件到目标文件的链接。

1.绝对路径

绝对路径是指目标文件的完整路径，路径中需包含完整的传输协议名称、主机名称、目录名称以及文件名称，一般用于对站外的文件的链接。常见的绝对路径形式如下所示。

内容

注意：如果对站内的文件做链接，一般不使用绝对路径，这样做有很大弊端，当网站发生移植时（比如站点文件夹从D盘移植到E盘），访问该链接时就会出错。因此，在设置超级链接路径时，只要当链接的目标文件在站外时，才可以使用绝对路径；当目标文件在站内时，不要使用绝对路径描述超级链接。

2.相对路径

相对路径是指从当前文件为起点到目标文件的路径，相对路径中省略掉了当前文件和目标文件的共同路径部分。

在HTML中，超级链接分为内部链接、外部链接和书签链接（也称锚点链接）三种。

1.内部链接

内部链接是指当前文件与目标文件都在同一网站内，在建立超级链接时要使用相对路径。

（1）如果当前文件（例如source.html）与目标文件（例如targ.html）在同一个目录下，设置超级链接时按照如下格式进行：

     内容

（2）如果当前文件（例如source.html）要链接到站点下一级目录中的目标文件（例如targ.html），设置超级链接时按照如下格式进行：

     内容

（3）如果当前文件（例如source.html）要链接到站点中上一级目录中的目标文件（例如targ.html），设置超级链接时按照如下格式进行：

     内容

2.外部链接

外部链接是指由网站内的文件链接到站外的目标文件，这种链接一般都采用绝对路径，常用的外部链接格式有：

（1）内容

（2）内容

（3）内容

（4）内容

其中，（3）用来链接外部的文件服务器；（4）用来实现E-mail链接。

3.书签链接

书签链接可以理解为点到点的链接，可以实现从同一个文件的某个点到另一个目标点，也可以实现从一个文件的某个点到另一个文件的目标点，这个目标点叫做书签（也称为锚点），因此书签链接也叫做锚点链接。

书签链接基本语法

书签链接是从文件中的某个点到书签的链接，设置步骤分为两步：

第一步：建立书签。

    内容

第二步：为书签制作链接。

内容

语法说明

name属性用来指定书签名，该书签名会在书签链接处进行引用，引用时需在书签名前面加“#”。

注意：如果要在不同页面间建立书签链接，则书签链接的链接应设置为：

内容

图片超级链接

基本语法

说明

（1）href属性用来指定超级链接目标文件的URL。

（2）src属性用来指定图像URL。

（3）标签要嵌套在标签内部，图片的大小可以通过CSS来设置。

完整示例代码如下：

保存为文件名DemoA.html（在此，我将该网页文件和test1.png图片文件放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

点击其中的图标，将打开百度一下链接。

文件超级链接

灵活使超级链接可以实现文件下载

下载是指将网站所在的服务器上的文件复制到本地机器上来。在HTML超级链接中，如果链接的目标文件是浏览器解释不了的文件（如word文档、excel文档、zip文档等），那么该目标文件不会被打开显示，而是变成文件下载。

例如：

最新通知

上述链接其实就是一个普通的内部链接，只不过链接的文件是.docx类型的word文件，浏览器打不开该文件所以单击该链接时启动下载对话框。

完整示例代码如下：

保存为文件名DemoB.html（在此，我将该网页文件和“通知.docx”文件放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

点击其中的“最新通知”链接，将下载“通知.docx”文件。

网页图片

常见图片格式简介

☆PNG(Portable Network Graphic Format)：即可移植的网络图像文件格式。是Web图像中最通用的格式。采用无损压缩技术。PNG格式最多可以支持32位颜色，不支持动画图。

☆JPEG(Joint Photo Graphic Experts Group): 联合图片专家组格式，最大可支持32位彩色。采用有损图片压缩技术。有两种文件扩展名：“.jpg”和“.jpeg” 。

☆GIF(Graphics Interchange Format)：即图片交换格式，最高支持8位彩色，分为GIF87a和GIF89a两种类型，其中GIF89a支持“透明”、“交错”、“动画”三个特性。

☆BMP(Windows Bitmap)：即位图文件格式。BMP格式使用的是索引色彩，可以使用16M色彩渲染图像。此格式一般用在多媒体演示和视频输出等情况下。

在HTML网页中可使用标记插入图片。基本语法格式：

说明

标签是单个标记，作用是在网页中插入图片。

图片样式由img标记的属性决定。

src和alt是必选属性，其它属性为可选属性

img标记属性名、值及说明

属性

值

说明

alt

text

规定图片的替代文本

src

URL

规定显示图片的URL

name

text

规定图片的名称

height

pixels, %

定义图片的高度

width

pixels, %

设置图片的宽度

align

top | middle | bottom | left | center | right

设置文本中的图片的对齐方式

border

pixels

定义图片周围的边框

hspace

pixels

定义图片左侧和右侧的空白

vspace

pixels

定义图片顶部和底部的空白

usemap

URL

将图片定义为客户端图片影视

当图片无法正确显示，可以使用标记的alt属性设置图片的替代文本。

基本语法

说明

alt属性的替代文本可以是中文的，也可以是英文的。

img标记的width和height属性是用来设置图片的宽度和高度的。默认情况下，网页中的图片大小就是由图片原来的宽度和高度决定的。

基本语法

说明

图片宽度和高度值可以是像素，也可以是百分比

可以只设置宽度和高度中的其中之一，另一个属性将按原图片宽高等比例显示。

img标记的border属性可以为图片设置边框。

基本语法

< img src="图片地址"border="value">

说明

value为边框线的宽度，用数字表示，单位为像素

边框的颜色不可以调整的。

例、预先准备一张名为test1.png图片，网页代码如下：

保存为文件名ImgDemoA.html（在此，我将该网页文件和test1.png图片文件放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

网页多媒体

音频、视频文件的使用的标签（标签也称为标记、元素）：

audio：HTML5提供的标签作用是播放音频。

video：HTML5提供的标签作用是播放视频。

标签属性： src：音乐的URL preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 例  

标签属性： src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 例  

vedio和audio的使用技巧基本相同，在此主要以vedio来示例。

【常用的音频、视频文件格式

在HTML5中嵌入的音频格式主要包括ogg、mp3、wav等，具体介绍如下：

ogg:当ogg文件只封装音频编码时，它就会变成为一个音频文件。ogg音频文件扩展名为ogg。ogg音频格式类似于mp3音频格式，不同的是，ogg格式完全免费并且没有专利限制。同等条件下，ogg格式音频文件的音质、体积大小优于mp3音频格式。

mp3:目前主流的音频格式，其音频文件扩展名为mp3。同mpeg4视频格式一样，mp3音频格式也存在专利、版权等诸多的限制，但因为各大硬件提供商的支持使得mp3依靠其丰富的资源、良好的兼容性仍旧保持较高的使用率。

wav:微软公司( Microsoft)开发的一种声音文件格式，其扩展名为wav。作为无损压缩的音频格式，wav的音质是三种音频格式文件中最好的，但其体积也是最大的。wav音频格式最大的优势是被 Windows平台及其应用程序广泛支持，是标准的Windows文件。

在HTML5中嵌入的视频格式主要包括ogg、mpeg4、wehm等，具体介绍如下：

ogg:一种开源的视频封装容器，其视频文件扩展名为ogg，里面可以封装vobris音频编码或者 theora视频编码，同时ogg文件也能将音频编码和视频编码进行混合封装。

mpeg4：目前最流行的视频格式，其视频文件扩展名为mp4。同等条件下，mpeg4格式的视频质量较好，但它的专利被MPEG-LA公司控制，任何支持播放mpeg4视频的设备，都必须有一张MPEG-LA颁发的许可证。目前MPEG-LA规定，只要是互联网上免费播放的视频，均可以无偿获得使用许可证。

Webm：由Google发布的一个开放、免费的媒体文件格式，其视频文件扩展名为webm。由于webm格式的视频质量和mpeg4较为接近，并且没有专利限制等问题，webm已经被越来越多的人所使用。】

例、预先准备一个视频文件movie.mp4，网页文件代码如下：

保存为文件名DemoD.html（在此，我将该网页文件和视频文件movie.mp4放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

下面介绍使用脚本 JavaScript 控制媒体

HTML5为我们提供了3种比较常用的方法

方法

描述

media.paly()

媒体文件播放

media.pause()

暂停

media.load()

重新加载媒体文件

多媒体常用事件

video 元素的一些常用事件

　　- progress：用于更新媒体的下载进度，会周期性触发。

　　- canplaythrough：当整个媒体顺利播放时会触发的事件。

　　- canplay：不考虑整体状态，只要下载了一定的可放帧就会触发的事件。

　　- ended：媒体到达末尾时触发。

　　- pause：媒体暂停时触发。

　　- play：媒体开始播放时触发。

       - error：媒体播放出现错误时触发。

在利用video元素或audio元素读取或播放媒体数据时，会触发一系列的事件。如果使用javascript脚本捕获事件，就可以对这些事件处理，常常需要利用 addEventListener 方法，其格式为：

VideoElement.addEventListener(type,listener,useCaptrue)

其中，VideoElement表示页面的video或audio元素;type表示事件名称,listener表示绑定的函数，useCaptrue是一个布尔值，表示事件的响应顺序,该值如果是true，浏览器采用captrue响应方式,如果为false，浏览器采用budding响应方式，默认情况为false。

使用脚本 JavaScript 控制 audio的例子，预先准备一个视频文件movie.mp4，网页文件代码如下：

保存为文件名DemoE.html（在此，我将该网页文件和视频文件movie.mp4放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

最后，介绍如何用打开窗口播放本地的媒体文件

首先提示，处于安全的需要JavaScript不能直接用打开窗口访问本地资源文件，那怎么办呢？下面介绍一种方法。在页面中插入一个input节点并指定type为file，如果需要播放多个文件，可以添加属性multiple。注册文件节点被更新时的回调函数，在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url，然后把该url设置为audio或video的src值即可。

下面给出网页用打开窗口播放本地视频文件的示例，源码如下：

保存为文件名DemoF.html（在此，我将该网页文件放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

上面对网页多媒体介绍是以视频为例介绍，下面给出播放音频文件的示例——一个网页用打开窗口播放本地音频文件的示例，源码如下：

保存为文件名DemoG.html（在此，我将该网页文件放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：