3.html5建立超链接

来源：互联网发布：改手机号码软件编辑：程序博客网时间：2024/05/29 08:22

超链接就是鼠标点击一些文件、图片或者其他网页元素时，浏览器会根据指示载入新的网页或者跳转到页面的其他位置

超链接可以链接文本以外，还可以链接各自媒体，声音、图像、动画等。

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)设置文本和图片的超链接

默认条件下，文本会自动添加下划线并且文本颜色变为蓝色，单击后变为暗红色；浏览器会自动给图片添加一个粗边框

(2)创建指向不同目标类型的超链接

a.链接到各种类型文件

超链接<a>的href属性可以链接到目标可以是各种类型的文件。如果是浏览器可识别类型直接显示，如果不是则会弹出“文件下载”的对话框

<a href="a.html">链接html文件</a>

<a href="3.doc">链接word文档</a>

b.链接到其他网站或者ftp服务器

<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:kfdzsj@126.com">站长信箱</a>
   </body>
</html>

(3)设置以新的窗口显示超链接页面

需要使用<a>标签的target属性：_blank、_self、_top和_parent，后两者不常用，_blank值为在新窗口中显示超链接页面；_self代表在自身窗口中显示超链接页面，默认值为_self

(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>

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。

阅读全文

0 0