HTML5超级链接、图片与多媒体

网页超级链接

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

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

基本语法格式：

说明

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

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

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

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

值	含义
_self	在当前窗口中打开目标文件，默认值
_blank	在新窗口中打开目标文件
_top	在整个浏览器窗口打开链接（忽略任何框架）
_parent	在当前窗口的上一级窗口打开，一般在框架中使用

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

例、

<!DOCTYPE html>

<html>

<head>

<title>网站链接测试</title>

</head>

<body>

<h3><center>中文门户网站</center></h3>

</body>

</html>

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>指向文档片段的链接（锚链接）的例子</title>
</head>
<body >
<h1>文学鉴赏</h1>
<h3><a href="#第一篇" >春江花月夜</a> <h3>
<h3><a href="#第二篇" >再别康桥</a> <h3>
<hr>
<h3><a name="第一篇" >春江花月夜</a></h3><br>
——张若虚 〔唐代〕<br>
春江潮水连海平，海上明月共潮生。<br>
滟滟随波千万里，何处春江无月明！<br>
江流宛转绕芳甸，月照花林皆似霰。<br>
空里流霜不觉飞，汀上白沙看不见。<br>
江天一色无纤尘，皎皎空中孤月轮。<br>
江畔何人初见月？江月何年初照人？<br>
人生代代无穷已，江月年年望相似。(望相似 一作：只相似)<br>
不知江月待何人，但见长江送流水。<br>
白云一片去悠悠，青枫浦上不胜愁。<br>
谁家今夜扁舟子？何处相思明月楼？<br>
可怜楼上月徘徊，应照离人妆镜台。(徘徊 一作：裴回)<br>
玉户帘中卷不去，捣衣砧上拂还来。<br>
此时相望不相闻，愿逐月华流照君。<br>
鸿雁长飞光不度，鱼龙潜跃水成文。<br>
昨夜闲潭梦落花，可怜春半不还家。<br>
江水流春去欲尽，江潭落月复西斜。<br>
斜月沉沉藏海雾，碣石潇湘无限路。<br>
不知乘月几人归，落月摇情满江树。(落月 一作：落花)
<br><br>
【简说】全诗共三十六句，每四句一换韵，通篇融诗情、画意、哲理为一体。全诗紧扣春、江、花、月、夜的背景来写，而又以月为主体。“月”是诗中情景兼融之物，它跳动着诗人的脉搏，在全诗中犹如一条生命纽带，通贯上下，触处生神，诗情随着月轮的生落而起伏曲折。<br>
在句式上，大量使用排比句、对偶句和流水对，起承转合皆妙，文章气韵无穷。诗中春、江、花、月、夜、人几个主题词错落重叠，伸缩变化，把读者引进了一个目眩五彩、浑然忘我的境界。
<br><br>
<h3><a name="第二篇" >再别康桥</a></h3><br>
——徐志摩<br>
轻轻的我走了，正如我轻轻的来； <br>
我轻轻的招手，作别西天的云彩。 <br>
那河畔的金柳，是夕阳中的新娘； <br>
波光里的艳影，在我的心头荡漾。 <br>
软泥上的青荇，油油的在水底招摇； <br>
在康河的柔波里，我甘心做一条水草！ <br>
那榆荫下的一潭，不是清泉，是天上虹； <br>
揉碎在浮藻间，沉淀着彩虹似的梦。 <br>
寻梦？撑一支长篙，向青草更青处漫溯； <br>
满载一船星辉，在星辉斑斓里放歌。 <br>
但我不能放歌，悄悄是别离的笙箫； <br>
夏虫也为我沉默，沉默是今晚的康桥！ <br>
悄悄的我走了，正如我悄悄的来； <br>
我挥一挥衣袖，不带走一片云彩。 <br>
【简说】“诗中有画，画中有诗”。全诗共七节，每节四行，每行两到三个节拍，节奏非常鲜明；每节二四行押韵，而目每节都自然换韵，读来抑场顿挫，朗朗上口；整齐中富于变化，使全诗充满了错落有致的美感！诗的每一节都可以称得上是一幅述人的图画<br><br>
</body>
</html>

保存文件名为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）<a href=" http://www.sohu.com">内容</a>

（2）<a href="http://www.imut.edu.cn/ies/index.html">内容</a>

（3）<a href="ftp://219.225.31.201 ">内容</a>

（4）<a href="mailto://[email protected]">内容</a>

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

3.书签链接

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

书签链接基本语法

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

第一步：建立书签。

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

语法说明

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

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

图片超级链接

基本语法

说明

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

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

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

完整示例代码如下：

<!DOCTYPE html>

<html >

<head>

</head>

<body>

</body>

</html>

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

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

文件超级链接

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

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

例如：

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

完整示例代码如下：

<!DOCTYPE html>

<html >

<head>

</head>

<body>

</body>

</html>

保存为文件名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>标记插入图片。基本语法格式：

说明

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

图片样式由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	将图片定义为客户端图片影视

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

基本语法

说明

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

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

基本语法

说明

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

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

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

基本语法

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

说明

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

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

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

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

网页多媒体

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

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

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

<audio> 标签属性：
src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
例
<audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>

<video> 标签属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
例
<video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video>

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，网页文件代码如下：

<!DOCTYPE html>

<html >

<head>

</head>

<body>

<h3><center>视频播放测试<center></h3>

</video>

</body>

</html>

保存为文件名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，网页文件代码如下：

<!DOCTYPE html>
<html >
     <head>
        <meta charset="utf-8"> 
        <title>视频测试</title>
     </head>
     <body>
          <h3><center>视频播放测试<center></h3>
          <hr color="#666666">
         <div style="text-align:center"> 
              <video id="video1" width="420">
                  <source src="movie.mp4" type="video/mp4">
              </video>
              <br> 
              <button onclick="playPause()">播放/暂停</button> 
              <button onclick="makeBig()">放大</button>
              <button onclick="makeSmall()">缩小</button>
              <button onclick="makeNormal()">普通</button>
              <br>
         </div> 
          <script> 
          var myVideo=document.getElementById("video1"); 
          function playPause()
          { 
	          if (myVideo.paused) 
	              myVideo.play(); 
	          else 
	              myVideo.pause(); 
          } 

          function makeBig()
          { 
	          myVideo.width=560; 
          } 

          function makeSmall()
          { 
	          myVideo.width=320; 
          } 

          function makeNormal()
          { 
	          myVideo.width=420; 
          } 
          </script>
     </body>
  </html>

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

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

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

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

<!DOCTYPE html>
<html >
<head>
       <meta charset="utf-8"> 
       <title>播放本地的视频文件</title>
</head>
<body>
<h3><center>视频播放测试<center></h3>
<hr color="#666666">
<input type="file" id="file" onchange="onInputFileChange()">
<br/>
<video id="video_id"  width="320" height="240" controls autoplay loop>你的浏览器不能支持HTML5视频</video>
<script>
function onInputFileChange() {
      var file = document.getElementById('file').files[0];
      var url = URL.createObjectURL(file);
      console.log(url);
      document.getElementById("video_id").src = url;
}
</script>
</body>
</html>

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

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

<!DOCTYPE html>
<html >
<head>
       <meta charset="utf-8"> 
       <title>播放本地的音频文件</title>
</head>
<body>
<h3><center>本地的音频播放测试<center></h3>
<hr color="#666666">
<input type="file" id="file" onchange="onInputFileChange()">
<br/>
<audio id="audio_id"  controls autoplay loop>你的浏览器不能支持HTML5音频 </audio>
<script>
function onInputFileChange() {
      var file = document.getElementById('file').files[0];
      var url = URL.createObjectURL(file);
      console.log(url);
      document.getElementById("audio_id").src = url;
}
</script>
</body>
</html>

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

HTML5超级链接、图片与多媒体

HTML5超级链接、图片与多媒体

猜你喜欢