第4章⽤HTML5建⽴超链接
HTML ⽂件中最重要的应⽤之⼀就是超链接。—— 当⿏标单击⼀些⽂字、图⽚或其他⽹页元素时，浏览器会根据其指⽰载⼊⼀个新的页⾯或跳转到页⾯的其他位置。
超链接除了可链接⽂本外，也可链接各种媒体，如声⾳、图像、动画，通过它们，可享受丰富多彩的多媒体世界。
4.1 URL 的概念
4.1.2 URL 的类型
超链接的 URL 可以分为两种类型 —— “绝对 URL” 和 “相对 URL”
（1）绝对 URL：⼀般⽤于访问不是同⼀台服务器上的资源。
（2）相对 URL：是指访问同⼀台服务器上相同⽂件夹或不同⽂件夹中的资源。（如果访问相同⽂件夹中的⽂件，只需要写⽂件名即可；如果访问不同⽂件夹中的资源，URL 以服务器的根⽬录为起点，指明⽂档的相对关系，由⽂件夹名和⽂件名两部分构成）
实例：
<a href="www.webDesign/index.html">绝对URL</a>
<a href="02.html">相同⽂件夹的 URL</a>
<a href="../pages/03.html">不同⽂件夹的 URL</a>
4.2 超链接标记 <a>
超链接最重要的有两个要素：设置为超链接的“⽹页元素”和超链接指向的“⽬标地址”。
<a href=URL>⽹页元素</a>
4.2.1 设置⽂本和图⽚的超链接
设置超链接的⽹页元素通常使⽤⽂本和图⽚。
⽂本超链接和图⽚超链接是通过 <a></a> 标记来实现的，将⽂本或图⽚放在 <a>标记和 </a>标记之间，即可建⽴超链接。
4.2.2 建⽴指向不同⽬标类型的超链接
除了 .html 类型的⽂件外，超链接所指向的⽬标类型还可以上其他各种类型，包括图⽚⽂件、声⾳⽂件、视频⽂件、Word、其他⽹站、FTP服务器等。
（1）链接到各种类型的⽂件
超链接 <a>标记的 href 属性指向链接的⽬标，⽬标可以是各种类型的⽂件。
如果是浏览器能够识别的类型，会直接在浏览器中显⽰；如果是浏览器不能识别的类型，在 IE 浏览器中会弹出“⽂件下载”对话框。
（2）链接到其他⽹站或 FTP 服务器
4.2.3 设置以新窗⼝显⽰超链接页⾯
如果要在单击某个链接以后，打开⼀个新的浏览器窗⼝，在这个新窗⼝中显⽰⽬标页⾯，需要使⽤ <a>标签的 target 属性。（属性值要设置为 _blank）
4.2.4 链接到同⼀个页⾯的不同位置
<a href="#C4">查看第 4 章。</a>
<h2><a name="C4">第 4 章</a></h2>
4.3 创建热点区域
在浏览⽹页时，读者会发现，有时，当单击⼀张图⽚的不同区域时，会显⽰不同的链接内容，这就是图⽚的热点区域。
所谓图⽚的热点区域，就是将⼀个图⽚划分成若⼲个链接区域，当访问者单击不同的区域，会链接到不同的⽬标页⾯。
在 HTML5 中，可以为图⽚创建3种类型的热点区域：矩形、圆形和多边形。创建热点区域使⽤ <map> 和 <area> 标记，语法格式如下：
<img src="图⽚地址" usemap="#名称">
<map name="名称">
<area shape="rect" coords="10,10,100,100" href="#">
<area shape="circle" coords="120,120,50" href="#">
<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">
</map>
在上⾯的语法格式中，需要注意以下⼏点：
……
4.4 创建浮动框架
HTML5 中已经不⽀持 frameset 框架，但是它仍然⽀持 iframe 浮动框架的使⽤。
浮动框架可以⾃由控制窗⼝⼤⼩，可以配合表格随意地在⽹页中的任何位置插⼊窗⼝，—— 实际上就是在窗⼝中再创建⼀个窗⼝。
使⽤ iframe 创建浮动框架的格式如下：
<iframe src="链接对象">
实例：
<iframe src="www.baidu"></iframe>
默认情况下，浮动框架的宽度和⾼度为 220*120。如果需要调整浮动框架的尺⼨，应该使⽤ CSS样式（在 head 标记部分增加如下代码）：
<style>
iframe{
width:600px; //宽度
height:800px; //⾼度
border:none; //⽆边框
</style>
在 HTML5 中，iframe 仅⽀持 src 属性，再⽆其他属性。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论