什么是链接?
它是从一个Web资源到另一个Web资源的连接。链接具有两端, 即锚点和方向。链接从"源"锚点开始, 指向"目标"锚点, 该锚点可以是任何Web资源, 例如图像, 视频剪辑, 声音片段, 程序, HTML文档或HTML文档中的元素。 。
HTML链接语法
链接使用" a"标签在HTML中指定。
语法说明:
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 >
输出:
内部连结
内部链接是一种超链接, 其目标或目的地是同一网站或域上的资源, 例如图像或文档。
输入如下:
<!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中的链接颜色
不同类型的链接以不同的格式显示, 例如:
- 未访问的链接默认显示为带下划线的蓝色。
- 默认情况下, 已访问链接显示为带下划线的紫色。
- 活动链接默认显示为带下划线的红色。
链接的外观可以使用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 >
输出如下:
链接中的目标属性
target属性用于指定打开链接文档的位置。下表中列出了target属性中可以使用的各种选项:
输入如下:
<!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中的链接
图像可用于创建指向指定网址的链接。
输入如下:
<!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 >
输出如下:
为网页创建书签链接
书签是一个链接, 可用于跳至网页的指定部分。如果网页很长, 则书签非常有用。
创建书签的步骤是:
1.使用id属性创建一个书签。
2.将网页的指定部分添加到书签。
输入:
<!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 >
输出: