HTML链接介绍和代码示例解释

2021年3月17日17:05:38 发表评论 571 次浏览

什么是链接?

它是从一个Web资源到另一个Web资源的连接。链接具有两端, 即锚点和方向。链接从"源"锚点开始, 指向"目标"锚点, 该锚点可以是任何Web资源, 例如图像, 视频剪辑, 声音片段, 程序, HTML文档或HTML文档中的元素。 。

HTML链接语法

链接使用" a"标签在HTML中指定。

HTML |链接1

语法说明:

href : The href attribute is used to specify 
the destination address of the link used.
Text link : The text link 
is the visible part of the link.

输入:

<!DOCTYPE html>
< html >
  < h3 >Example Of Adding a link</ h3 >
    < body >
       < p >Click on the following link</ p >
       < a href = "https://www.lsbin.org" >lsbin</ a >
    </ body >
      
</ html >

输出:

HTML |链接2

内部连结

内部链接是一种超链接, 其目标或目的地是同一网站或域上的资源, 例如图像或文档。

输入如下:

<!DOCTYPE html>
< html >
< h3 >Internal Link And External Link Example</ h3 >
< body >
< p >< a href = "html_contribute.asp/" >lsbin Contribute
</ a > It is a link to the contribute page on lsbin' website.</ p >
  
< p >< a href = "https://www.lsbin.org" >lsbin
</ a > It is a link to the lsbin website on the World Wide Web.</ p >
  
</ body >
</ html >

输出:

HTML |链接3

更改HTML中的链接颜色

不同类型的链接以不同的格式显示, 例如:

  1. 未访问的链接默认显示为带下划线的蓝色。
  2. 默认情况下, 已访问链接显示为带下划线的紫色。
  3. 活动链接默认显示为带下划线的红色。

链接的外观可以使用CSS进行更改。

输入:

<!DOCTYPE html>
< html >
< head >
< style >
a:link {
     color: red;
     background-color: transparent;
}
a:visited {
     color: green;
     background-color: transparent;
}
a:hover {
     color: blue;
     background-color: transparent;
}
a:active {
     color: yellow;
     background-color: transparent;
}
</ style >
</ head >
< body >
  
< p >Changing the default colors of links</ p >
  
< p >Visited Link</ p >
< a href = "https://www.lsbin.org" >lsbin</ a > 
  
< p >Link</ p >
  
< a href = "https://facebook.com" >facebook</ a >
  
< p >hovering effect</ p >
  
< a href = "https://www.lsbin.org" >lsbin</ a >
  
</ body >
</ html >

输出如下:

HTML |链接4

链接中的目标属性

target属性用于指定打开链接文档的位置。下表中列出了target属性中可以使用的各种选项:

HTML |链接5

输入如下:

<!DOCTYPE html>
< html >
< body >
  
< h3 >Various options available in the Target Attribute</ h3 >
  
< p >If you set the target attribute to "_blank", the link will open in a new browser window or tab.</ p >
< a href = "https://www.lsbin.org" target = "_blank" >lsbin</ a > 
  
< p >If you set the target attribute to "_self", the link will open in the same window or tab.</ p >
< a href = "https://www.lsbin.org" target = "_self" >lsbin</ a > 
  
< p >If you set the target attribute to "_top", the link will open in the full body of the window.</ p >
< a href = "https://www.lsbin.org" target = "_blank" >lsbin</ a > 
  
< p >If you set the target attribute to "_parent", the link will open in the parent frame.</ p >
< a href = "https://www.lsbin.org" target = "_blank" >lsbin</ a > 
  
</ body >
</ html >

输出如下:

HTML |链接6

使用图像作为HTML中的链接

图像可用于创建指向指定网址的链接。

输入如下:

<!DOCTYPE html>
< html >
< body >
  
< h3 >Using Image as a link</ h3 >
  
< p >Click on the image to visit lsbin homepage.</ p >
  
< a href = "https://www.lsbin.org" >
   < img src = "gfg_200X200.jpeg" alt = "lsbin" 
style = "width:80px;height:80px;border:0" >
</ a >
  
</ body >
</ html >

输出如下:

HTML |链接7

为网页创建书签链接

书签是一个链接, 可用于跳至网页的指定部分。如果网页很长, 则书签非常有用。

创建书签的步骤是:

1.使用id属性创建一个书签。

HTML |链接8

2.将网页的指定部分添加到书签。

HTML |链接9

输入:

<!DOCTYPE html>
< html >
< body >
  
< p >< a href = "#T11" >Jump to Topic 11</ a ></ p >
< p >< a href = "#T17" >Jump to Topic 17</ a ></ p >
< p >< a href = "#T20" >Jump to Topic 20</ a ></ p >
< h2 >Topic 1</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 2</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 3</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 4</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 5</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 6</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 7</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 8</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 9</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 10</ h2 >
< p >paragraph 1
.....</ p >
< h2 id = "T11" >Topic 11</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 12</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 13</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 14</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 15</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 16</ h2 >
< p >paragraph 1
.....</ p >
< h2 id = "T17" >Topic 17</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 18</ h2 >
< p >paragraph 1
.....</ p >
< h2 >Topic 19</ h2 >
< p >paragraph 1
.....</ p >
< h2 id = "T20" >Topic 20</ h2 >
< p >paragraph 1
.....</ p >
  
</ body >
</ html >

输出如下:

在HTML中创建下载链接

可以创建pdf, doc或zip文件的文本链接以使其可下载。

输入:

<!DOCTYPE html>
< html >
      
< h3 >Creating a download link</ h3 >
  
    < body >
       < a href = "lsbin | A computer science portal for geeks.pdf" >Download PDF File</ a >
    </ body >
      
</ html >

输出:


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: