新闻资讯

新闻资讯

新闻资讯News

当前位置: 首页 > 新闻资讯 > 网站制作百科

龙岗网站建设向您介绍什么是HTML超链接和锚点

2022-04-24 08:42:41

一、超链接

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

五、效果图

网页代码,网页链接,网页锚点

上一篇:没有了

近期浏览:

相关产品

相关新闻

联系方式

手机: 13544136526   李生

邮箱: sz@cecom.cn

客服电话: 0755-89232082

公司地址: 深圳市龙岗区龙岗路10号电子商务港硅谷动力12楼1208

版权所有 © 2012~2022 深圳市华企网络科技有限公司 粤ICP备12082682号 华企网络
主要从事于龙岗网站建设,龙岗网页制作,龙岗网络公司, 欢迎来电咨询!