3.html5建立超链接
超链接就是鼠标点击一些文件、图片或者其他网页元素时，浏览器会根据指示载入新的网页或者跳转到页面的其他位置
超链接可以链接文本以外，还可以链接各自媒体，声音、图像、动画等。
1.URL的概念
URL为Uniform Resource Locator的缩写，翻译为“统一资源定位器”，即“网址”。互联网上的每个文件都有一个唯一的URL，包含的信息指出文件的位置以及浏览器应该怎样处理它
(1)URL的格式
由“协议”、“主机名”、“文件夹名”、“文件名”组成
http://www.web.con/pages/computer.html
a.协议：每种服务应用都有对应协议，一般通过浏览器浏览网页的协议都是HTTP协议，即“超文本传输协议”，通常以“http://”开头
b.主机名：表示文件存在于哪台服务器，可通过ip地址或者域名来表示
c.文件夹名：确定服务器主机后，需要说明文件存在于这台服务器的哪个文件夹中，可分为多个层级
d.文件名：指明显示哪个文件，以“html”或“htm”为扩展名
(2)URL的类型
a.绝对URL：一般访问不是同一台服务器上的资源
b.相对URL：访问同一台服务器上相同文件夹或不同文件夹中的资源。相同文件夹时只需写文件名即可；不同文件夹时，URL以服务器的根目录为起点，指明文档的相对关系，由文件夹名与文件名两部分构成
<!DOCTYPE html>
<html>
<head>
<title>绝对URL与相对URL</title>
</head>
<body>
单击<a href="http://www.baidu.com/index.html">绝对URL</a>链接到百度首页<br />
单击<a href="2.html">相对URL</a>链接到相同文件夹的第二个页面<br />
单击<a href=".../pages/3.html">相对URL</a>链接到不同文件夹的第三个页面<br />
</body>
</html>
2.超链接标记<a>
使用<a></a>设置超链接网页元素和超链接指向目标地址。
格式：<a href=URL>网页元素</a>
(1)设置文本和图片的超链接
<a href="a.html"><img src="1.jpg"></a>
<a href="b.html">学习方法</a>
默认条件下，文本会自动添加下划线并且文本颜色变为蓝色，单击后变为暗红色；浏览器会自动给图片添加一个粗边框
(2)创建指向不同目标类型的超链接
a.链接到各种类型文件
超链接<a>的href属性可以链接到目标可以是各种类型的文件。如果是浏览器可识别类型直接显示，如果不是则会弹出“文件下载”的对话框
<a href="a.html">链接html文件</a>
<a href="111.jpg">链接图片</a>
<a href="3.doc">链接word文档</a>
b.链接到其他网站或者ftp服务器
<a href="http://www.baidu.com">链接百度</a>
<a href="ftp://172.16.1.254">链接ftp服务器</a>
为保证代码正确运行使用ip地址，应填写实际有效ftp服务器地址
c.设置电子邮件链接
自动打开电子邮件客户端软件，如Outlook或Foxmail等，向某个特定E-mail地址发送邮件
<!DOCTYPE html>
<html>
<head>
<title>电子邮件链接</title>
</head>
<body>
<img src="222.jpg" width="119" height="49">[免费注册][登录]
<a href="mailto:[email protected]">站长信箱</a>
</body>
</html>
(3)设置以新的窗口显示超链接页面
需要使用<a>标签的target属性：_blank、_self、_top和_parent，后两者不常用，_blank值为在新窗口中显示超链接页面；_self代表在自身窗口中显示超链接页面，默认值为_self
<a href="a.html" target="_blank">新窗口</a>
(4)链接到同一页面的不同位置
对文字较多的网页，需要对同一页面的不同位置进行链接，需要建立同一网页内的链接
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">查看 第四章</a>
</p>
<h2>第一章</h2>
<p>了解图片</p>
<h2>第二章</h2>
<p>了解2333</p>
<h2>第三章</h2>
<p>了解333</p>
<h2><a name="C4">第四章</a></h2>
<p>了解444</p>
<h2>第五章</h2>
<p>了解555</p>
<h2>第六章</h2>
<p>了解666</p>
<h2>第七章</h2>
<p>7777</p>
<h2>第八章</h2>
<p>了解8888</p>
</body>
</html>
3.创建热点区域
将图片划分成若干个链接区域，当访问者单击不同区域，会链接到不同的目标页面。可为图片创建的热点区域：矩形、圆形和多边形。
创建热点区域使用<map><area>标记，创建时需要注意：
(1)要想建立图片热点区域，必须先插入图片。图片必须添加usemap属性，说明该为热点映射图像，属性值必须以”#“开头，加上名字
(2)<map>标识只有一个属性name，作用时为区域命名，设置值必须与<img>标记的usemap属性值相同
(3)<area>标记主要是定义热点区域的形状及超链接，有三个必须属性：
a.shape：控制划分区域的形状（rect矩形、circle圆形、poly多边形）
b.coords：控制区域划分的坐标（rect时，设置矩形左上角和右下角的x、y坐标点；circle时，设置圆形圆心x、y坐标点和半径值；
poly时，设置矩形各个点的x、y坐标，单位都是像素）
c.href：为区域设置超链接的目标，设置值为”#“时，表示空链接
<!DOCTYPE>
<html>
<head>
<title>创建热点区域</title>
</head>
<body>
<img src="11.jpg" width="596" height="275" border="5" usemap="#Map">
<map name="Map">
<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="#">
</body>
</html>
4.创建浮动框架
html5不支持frameset框架，但是仍然支持iframe浮动框架的使用，浮动窗口可以自由控制窗口大小，可配合表格随意在网页的任何位置插入窗口，即在窗口中再创建一个窗口
使用格式<iframe src="链接对象">
<!DOCTYPE html>
<html>
<head>
<title>浮动窗口</title>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>
默认情况下，浮动窗口的宽度和高度为220x120，若想修改浮动窗口尺寸需要使用css样式，在head标记部分添加：
<style>
iframe{
width:600px;//宽度
height:800px;//高度
border:none;//无边框
}
</style>
html5的iframe只支持src属性，再无其他属性
5.使用Dreamweaver工具精确定位热点区域
"属性"中点击左边的"矩形热区"，再用鼠标从左上角向右下方拖拽鼠标完成，若有误差使用"属性"中的"指针热点"工具编辑，选中之后在"属性"中"链接文本框"中输入需要跳转的页面。
在创建超链接时，如果要链接的是另外一个网站中的资源，需要使用完整的绝对URL；如果在网页中创建内部链接，一般使用相对于当前文档或站点根文件夹的相对URL。