HTML(5)

网页链接
一、概述
链接是指从一个页面指向一个目标的链接关系，这个目标可以是一个网页，也可以是相同网页的不同位置，甚至可以是一张图片、一个邮件地址、一个应用程序。当用户单击已经链接的页面内容时，链接目标将显示在浏览器上，并根据目标的类型来运行

 <a href="链接对象路径">链接锚点对象</a>

a表示锚点(anchor),href属性值指定了链接的目标，一个完整的链接应包括两个部分，链接锚点对象和链接地址
you.html文件

<html>
    <head>
         <title>链接</title>
    </head>
    <body>
          <p>跳转到下一个页面</p>
          <a href="my.html">跳转喽</a>
    </body>
 
   </html>

my.html
   <html>
     <head>
          <title>页面2</title>
     </head>
     <body>
           <p>跳过来了吧，哈哈,要不要再跳回去呢</p>
           <a href="you.html">跳回去</a>
     </body>
   </html>

在you.html文件中会出现蓝色的"跳转喽"，点击会跳转到my.html页面,出现蓝色的"跳回去"，单击会跳转到you.html页面
链接地址指的是链接到锚点对象的路径，这个路径所指的不仅是一个页面地址，也可能是一个文件地址、一个邮箱地址

下面展示的是跳转到一个图片（单击蓝色的"跳转喽"后会转到一个图片,而图片则显示在新的页面中）

 <html>
    <head>
         <title>通过链接地址跳转到另一个页面</title>
    </head>
    <body>
          <p>跳转到下一个页面</p>
          <a href="file:///C|/Users/NIIT/Desktop/图片/108067_5438809_18.gif">跳转喽</a>
    </body> 
</html>

二、不同的链接
1.基本的文本链接(页面中最常用的链接形式)
一般的文本链接中，最初文字上的超链接呈蓝色，文字下面有下划线，如果超链接被浏览过了文本颜色就会发生改变，默认是紫色

<html>
       <head>
         <title>蝙蝠侠之黑暗骑士</title>
       </head>
       <body>
          <h3>影片《蝙蝠侠之黑暗骑士》</h3>
          可怕的黑暗渐渐散去的哥谭市，逐渐恢复了往日的平静。犯罪率呈直线下降...凶残的
          <a href="小丑.html">小丑</a>
          带着他
       </body>
    </html>

小丑.html

<html>
       <head>
         <title>希斯 莱杰</title>
       </head>
       <body>
          致希斯 莱杰
          实验混蛋角色很过瘾，我一直沉溺于此，但莱杰用自己的方法将混蛋
          的表达方式提高到了哲学的高度
       </body>
    </html>

点击第一个页面中出现的蓝色的"小丑"后，页面跳转到小丑.html中

2.基本的图像链接
图像链接的使用频率和文本链接一样相当高，设置连接的方法和文本无异，在引用图片的代码前先放入<a>标签
<a href="...">
<img src="...">
</a>

<html>
     <head>
          <title>图像链接</title>
     </head>
     <body>
           <p>尝试图像链接</p>
           <a href="小丑.html">
           <img  src="file:///C|/Users/NIIT/Desktop/图片/link.gif">
           </a>
     </body>
 </html>

页面中出现指定路径中的图片，单击图片后页面跳转到href中指定的地方

3.链接邮箱地址
<a href="mailto:邮箱地址">链接锚点对象</a>
mailto 即"把邮件发送到",还可以给新邮件填好邮件的主题和正文，这样打开电子邮件程序就填好了收信人，这通过属性subject和 body来实现，使用时有些特别之处
4.在同一页面快速查找信息
页面除了和页面之外的文件或程序链接外也可以和同一页面中的内容进行链接，由于在同一页面内实现链接，所以在HTML语言中使用<a>标签中的id属性来确定路径位置。
(1)确定链接的锚点对象，，链接的路径在同一页面内，这里需要使用"#"来引用同一页面中的内容
<a href=#...></a>
(2)需要在页面中设定出链接的目标，使用id属性
<a id=...></a>

<id>中放入的内容就是在href属性下设定好的内容，这样前呼后应，很容易找到位置

<html>
       <head>
           <title>同一页面内实现链接</title>
       </head>
       <body>
           <p>尝试在同一页面内实现跳转
           <a href=#教师>教师</a>
           <a href=#学生>学生</a>
           <a href=#教室>教室</a>
                <!--以上为设置页面锚点-->
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <!--设置锚点位置-->
           <a id=教师></a><h3><strong>教师</h3></strong>          
           <br>教师是世界上最伟大的职业,哈哈哈
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <!--设置锚点位置-->
           <a id=学生></a><h3><strong>学生</strong></h3>
           <p>小红是个三号学生
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <!--设置锚点位置-->
           <a id=教室></a><h3><strong>教室</strong></h3>
           <p>我们的教室是最漂亮的
   </body>
   </html>

由于页面太长，在开始位置会给出<a href=#...>中给出的目录栏（教师、学生、教室），当单击目录栏时，页面会跳到相应的目标位置，以方便浏览者阅读页面信息，要注意<a href=#...>和<a id=...>之间的呼应
如，当单击“学生”时页面自动跳转到“学生”版块

三、提高页面链接的友好度
设置了超链接的文本中，链接的内容带有下划线，浏览过的字体都是特定的颜色，但有新颖的方法来改变链接的状态

1.改变链接的状态
链接状态:未被访问、被选中、鼠标滑过链接、链接被访问后
改变链接状态方法：
a.使用HTML标签通过添加link（修改链接未被访问的颜色）,alink（修改链接被选中时的颜色）和vlink（修改链接被访问过的颜色）来修改链接文本的颜色

<html>
   <head>
        <title>修改链接状态</title>
   </head>
   <body link=Red alink=Blue vlink=Silver>
        <p>我要修改链接颜色了,哈哈哈哈哈</p>
        <a href="my.html">想跳不？</a>
   </body>
</html>

结果是链接未被访问时文字是红色的，鼠标点击不松手时是蓝色的，访问完返回原始页面链接文字颜色变为银色

b.修改链接状态更好的方法是使用CSS
a:link{...} 链接还未被访问
a:active{...} 链接被选中时
a:hover{...} 鼠标滑过链接
a:visited{...} 链接被访问后
在{...}中通常添加两个属性：color属性（修改文本颜色），text-decoration属性(选择是否显示下划线)

<html>
   <head>
        <title>使用CSS修改链接状态</title>
        <style type=text/css>
            a:link{
               color:Red;
               text-decoration:none
            }
            a:hover{
               color:Blue;
               text-decoration:none
            }
            a:visited{
               color:Silver;
               text-decoration:underline
            }
        </style>
   </head>
   <body>
        <h3>使用CSS修改链接状态</h3>
        <a href="my.html">想跳不？</a>
   </body>
</html>

结果：原始页面中链接文字为红色，鼠标滑过文字变为蓝色，单击后返回原始页面文字变为银色
2.奇妙特殊的链接方式
通过CSS方法可以去除链接默认的下划线，还有两种方法可以改变下划线的样式,了解属性border-bottom(底部边界)和
padding-bottom(底部内边),即要用边框属性来替换原来的下划线
使用border-bottom属性替换链接下划线

 <html>
   <head>
        <title>使用CSS修改链接状态</title>
        <style type=text/css>
            a{
               color:Red;
               text-decoration:none;
               border-bottom:1px dotted red
            }
            a:hover{
               color:Blue;
               text-decoration:none
            }
            a:visited{
               color:Silver;
               text-decoration:underline
            }
        </style>
   </head>
   <body>
        <h3>使用CSS修改链接状态</h3>
        <a href="my.html">想跳不？</a>
   </body>
</html>

结果：此处链接下没有下划线，改为小点，这里dotted为点状的意思，除此之外CSS还允许其他形状的下划线，包括dashed(虚线)、double(双线)、groove(槽线)、ridge(脊线)、inset(内陷)、outset(外陷)
用padding-bottom属性替换链接下划线

 <html>
   <head>
        <title>使用CSS修改链接状态</title>
        <style type=text/css>
            a{
               color:Red;
               text-decoration:none;
                    
               padding-bottom: 4px;   //有点没搞明白这里是设置了什么(控制了自定义的下划线和文本的距离,这个距离需要仔细控制若控制不当就可能导致显示不完整图像或显示不出自定义下划线)
                   
               background:url(file:///C|/Users/NIIT/Desktop/图片/link2.jpg)bottom repeat-x;
            }
            a:hover{
               color:Blue;
               text-decoration:none
            }
            a:visited{
               color:Silver;
               text-decoration:underline
            }
        </style>
   </head>
   <body>
        <h3>使用CSS修改链接状态</h3>
        <a href="my.html">想跳不？</a>
   </body>
</html>

3.热点图像区域的链接
热点区域即一个图像中的某一区域，热点区域链接就是使用这个区域作为超链接，要用到<map>标签，<map>标签下嵌入使用<area>标签表明某一区域，其中有三个属性值来确定这个区域，分别是shape属性、coords属性和href属性

shape属性:确定选选区形状，rect(矩形)、circle(圆形)、poly(多边形)
coords属性:用来控制形状的位置(坐标),
href属性:超链接
<map id=...>
<area shape="..." coords="..." href="...">
</map>

使用DW在页面中放入图片后,左下角单击线框中的图形按钮，在预览页面的图像上绘制需要的形状，设置好后代码区域自动生成<map>标签

 <img src="file:///C|/Users/NIIT/Desktop/图片/link.jpg"  usemap="#Map" border="0" />
          <map name="Map" id="Map">
             <area shape="rect" coords="168,140,193,167" href="#" />
             <area shape="circle" coords="166,102,10" href="#" />
          </map>

以上为自动生成的代码，其中id属性下默认为Map,这个名字可以自行定义，href属性中给出链接地址(即点击图片上该区域时页面跳转到哪里)

<html>
     <head> 
         <title>热点图像区域的链接</title>
     </head>
     <body>
          <img src="file:///C|/Users/NIIT/Desktop/图片/link.jpg" width="270" height="255" usemap="#Map" border="0" />
          <map name="Map" id="Map">
             <area shape="rect" coords="168,140,193,167" href="1.html" />
             <area shape="circle" coords="166,102,10" href="2.html" />
          </map>
     </body>
</html>

结果，点击图片上一个特定位置后页面跳转到1.html，点击另一个位置页面跳转到2.html

四、在新窗口中打开链接窗口
之前的页面跳转都是在同一页面进行跳转，有事需要链接在新的窗口打开，仅需在<a>标签中添加"target=_blank"即可

<html>
    <head>
         <title>两只老虎</title>
    </head>
    <body>
          <h3>两只老虎</h3>
          <a href="my.html" target=_blank>跳转</a>
    </body>
</html>

实例五制作普通链接的主页
要求第一个页面首先有目录，根据目录跳转到同一页面的某个版块（同一页面内实现链接)，从该页面的某个锚点对象可以跳转到另一个页面，从跳转后的页面可以根据图像链接返回上一个页面

实现功能：首先展示书名目录，接下来是各个书本简介，点击开始的目录后页面会跳转到相应的版块，其中两个书的简介点击相应版块的书名会跳转到其他页面（morning.html和whokillher页面），使用的是在新窗口中显示链接窗口，在跳转后的页面中有“小房子”图片，点击会返回上一层页面
首页面东野圭吾.html

<html>
    <head>
         <title>链接综合练习</title>
         <style type="text/css">
             a:link{
                 color:Red;
                 text-decoration:none;
             }
             a:hover{
                 color:Green;
                 text-decoration:underline;
             }
             a:visited{
                 color:Silver;
                 text-decoration:none;
             }
         </style>
    </head>
    <body>
         <p align="center"><h1><strong>东野圭吾书本目录</strong></h1></p>
         <br><a href="#放学后">放学后</a>
         <br><a href="#秘密">秘密</a>
         <br><a href="#圣女的救济">圣女的救济</a>
         <br><a href="#红手指">红手指</a>
         <br><a href="#黎明之街">黎明之街</a>
         <br><a href="#谁杀了她">谁杀了她</a>

         <ul>
             <li>
                 <h2><strong><a id=放学后></a>放学后</strong></h2>
                 <br><br><br>
                 <p>&nbsp;&nbsp;&nbsp;放学后是东野圭吾推理小说之一，全书讲述了青少年......忘了
                 <br><br><br>
                 <p>哈哈
                 <br><br><br>
                 <p>原谅你不厚道 的一笑,呵，女人
                 <br><br><br>  
             </li>
             <li>
                 <h2><strong><a id=秘密></a>秘密</strong></h2>
                 <br><br><br>
                 <p>&nbsp;&nbsp;&nbsp;秘密如果没记混的话讲的是母女二人坐车回娘家的途中发生车祸后
                 <br><br><br>
                 <p>女儿虽然抢救成功，但神奇的事发生了，女儿的身体，里面却是妈妈的灵魂
                 <br><br><br>
                 <p>之后，父女二人对外隐瞒事实（因为此事毕竟很离奇）......
                 <br><br><br>  
                 <p>这是一个看了以后特别有感觉的书，哈哈
             </li>
             <li>
                 <h2><strong><a id=圣女的救济></a>圣女的救济</strong></h2>
                 <br><br><br>
                 <p>&nbsp;&nbsp;&nbsp;圣女的救济是我最喜欢的书之一，对书中女主人的聪明实在佩服，
                 <br><br><br>
                 <p>书中描述的犯罪过程令人惊讶，全文构思实在巧妙啊
                 <br><br><br>
                 
                 <br><br><br>  
             </li>
             <li>
                 <h2><strong><a id=红手指></a>红手指</strong></h2>
                 <br><br><br>
                 <p>&nbsp;&nbsp;&nbsp;红手指讲述了一个青少年犯罪后，其父母对其宠溺过度，
                 <br><br><br>
                 <p>不希望唯一的儿子受到法律惩罚，居然想出了让老年痴呆的母亲去顶罪的念头
                 <br><br><br>
                 <p>最终被刑警看穿并承认错误(老母亲并非老年痴呆，不过是为了过的清净些罢了)
                 <br><br><br>  
             </li>
             <li>
                 <a id=黎明之街><a href="morning.html" target=_blank><h2><strong>黎明之街</strong></h2></a></a>
                 <br><br><br>
                 <p>&nbsp;&nbsp;&nbsp;黎明之街看了半天没多大感触
                 <br><br><br>
                 <p>呵呵
                 <br><br><br>
                 <p>呵呵
                 <br><br><br>  
             </li>
             <li>
                 <a id=谁杀了她><a href="whokillher.html" target=_blank><h2><strong>谁杀了她</strong></h2></a></a>
                 <br><br><br>
                 <p>&nbsp;&nbsp;&nbsp;看了半天没多大感触,没搞懂到底是谁杀了她
                 <br><br><br>
                 <p>呵呵
                 <br><br><br>
                 <p>呵呵
                 <br><br><br>
                 <p>还看，谁还没个底线，把你脸给打歪了信不信  
             </li>
         </ul>
    </body>
</html>

点击“黎明之街”后跳转的页面morning.html

<html>
     <head>
          <title>黎明之街</title>
     </head>
     <body>
           <p><h2>黎明之街</h2></p>
           <p align="center"> <img src="file:///C|/Users/NIIT/Desktop/图片/morning.jpg" />
                   <!--图片链接-->
           <a href="东野圭吾.html">
           <img src="file:///C|/Users/NIIT/Desktop/图片/house.jpg"/>
           </a>
     </body>
</html>

点击“谁杀了她”后跳转的页面whokillher.html

<html>
     <head>
          <title>谁杀了她</title>
     </head>
     <body>
           <p><h2>谁杀了她</h2></p>
           <p align="center"> <img src="file:///C|/Users/NIIT/Desktop/图片/link.jpg"/>
                   <!--图片链接-->
           <a href="东野圭吾.html">
           <img src="file:///C|/Users/NIIT/Desktop/图片/house.jpg"/>
           </a>
     </body>
</html>

猜你喜欢