网站制作百科

联系我们

相关推荐

网站制作百科

首页 > 新闻动态 > 网站制作百科 > >

HTML超链接和锚点

发布日期:2018-05-21来源:www.cecom.cn

 

一、超链接

< a>标签代表html里的链接

1.URL

讲到超链接,URL就不得不提了,URL神通广大,不过我这里只是浅谈一下URL,URL除了网页,还有其他文件(pdf,文本等),还可以是指向该html的某个位置,还可以是Email地址

什么是URL

既然是浅谈,其实我们就可以把URL简单的看成一个网址或者地址,它在< a>标签下的使用:< a href=”URL”>< /a>

定义URL

URL称为统一资源定位符,在html很多标签下都是需要URL这个定位符的,如图片,表单,还有js中

URL的组成

协议:http 
主机:baidu.com(这里以百度为例) 
端口:80(默认)(若是ftp服务器,则是21端口) 
资源:即路径:aaa/html/w_linux.html 
参数:?变量名=值&变量名=值……

URL绝对与相对路径

1.相对路径(周边文件):相对于你现在的位置,去找上一个路径或下一个及多个路径。例: 
< a href=”w_linux.html”>找当前目录下的w_linux.html 
< a href=”./w_linux.html”>./是默认的 .代表当前路径,与上面相同 
< a href=”./aaa/bbb/w_linux.html”>在当前路径下找下一级的html 
< a href=”../aaa/w_linux.html”>..代表上一级目录

2.绝对路径(从根开始找) 
http://www………..


 

二、a标签常用属性

1.href

代表一个URL的链接源(点击后链接到什么地方)

 

2.target

1.target=_blank:点击链接的时候,是新的浏览器窗口打开,而不是在本浏览器内打开 
2.target=_self:这是默认的,也就是在本浏览器中打开 
还有两个属性不常见,话不多说。

 

3.title

代表链接的附加提示消息 
< a href=”URL” title=”提示信息”>链接名字< a> 
例:这里写图片描述 
效果:这里写图片描述


 

三、锚点(定位作用)

锚点:定位网页内部的链接,简单的说就是你在这个网页里点击一个链接,会跳到该网页里的某个位置

 

1.使用

1.< a name=”one”>< /a>放在定位的位置处,用name属性是给该位置命名 
< a name=”two”>< /a> 
2.< a href=”#one”>链接名< /a>,”#”这个符号是区分是在本网页找位置,否则服务器会误认为找某个文件或其他网站 
< a href=”#two”>链接名< /a> 
3.< a href=”#”>< /a>或< a href=”“>< /a>都代表点击后回到顶部(但是,如果不写#会很危险,所以只要用第一个有#的就好) 
4.其实也可以从另一个html中找这里的位置,比如这里的叫w_linux.html,另一个叫text.html,那就在text.html中写< a href=”w_linux.html#one”>找到w_linux.html中的one位置< /a>


 

四、综述代码

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>阿水的阿里</title> </head> <body link="#8a2be2" bgcolor="#f0f8ff" alink="#8a2be2" vlink="blue" text="#8a2be2">     <h1><em><strong><u>阿水的阿里</u></strong></em></h1>     <a href="http://my.csdn.net/w_linux" ><h2>目录</h2></a>     <br>     <ol>         <li>             <a href="#one" title="这里是第一篇"> 第一篇</a>         </li>         <li>             <a href="#two" title="这里是第二篇">第二篇</a>         </li>         <li>             <a href="#three" title="这里是第三篇" >第三篇</a>         </li>     </ol> <hr>      <a name="one"></a>     <h3><strong><u>第一篇</u></strong></h3>     这里添加第一篇的内容信息      <a name="two"></a>     <h3>第二篇</h3>     这里添加第二篇的内容信息      <a name="three"></a>     <h3>第三篇</h3>     这里添加第三篇的内容信息     <hr>     <a href="">返回</a> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39


 

五、效果图

这里写图片描述

 

案例推荐: