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

什么是链接？
它是从一个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 = "https://www.lsbin.com/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属性中可以使用的各种选项：

文章图片
【HTML链接介绍和代码示例解释】输入如下：

< !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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/#T11" > Jump to Topic 11< / a > < / p > < p > < a href = "https://www.lsbin.com/#T17" > Jump to Topic 17< / a > < / p > < p > < a href = "https://www.lsbin.com/#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 = "https://www.lsbin.com/lsbin | A computer science portal for geeks.pdf" > Download PDF File< / a > < / body > < / html >

输出：