HTML中链接图片、网站和电子邮件地址的区别
在本文中,我们将讨论在HTML中链接图片、网站和电子邮件地址的区别。
要在网站中链接或嵌入图片,可以使用<img>标签。
要链接网站,我们使用<a>锚点标签以及href(超文本引用)属性。
要链接电子邮件地址,我们在<a>锚点标签的href属性中使用mailto。
链接图片
在HTML中,我们使用<img>标签将图片嵌入或链接到网站。此标签需要“src”属性来指定要链接的图片路径,以及“alt”属性来指定图片的文本描述。“alt”文本将在图片由于某种原因无法加载时显示在页面上。
语法
以下是HTML <img> 标签的语法:
<img src = "path of the image" alt = "text description">
示例
在下面的示例中,我们使用HTML <img> 标签将图片链接到网页:
<!DOCTYPE html>
<html>
<head>
<title>Linking an image</title>
</head>
<body style="background-color: lightgrey; text-align: center;">
<h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
<!--Linking an image-->
<img src="https://tutorialspoint.com/images/logo.png?v2" alt="TP logo">
</body>
</html>
输出
正如我们在输出中看到的,我们提供的图片已链接到网页上。
链接网站
带有href属性的HTML <a>锚点标签用于创建到任何网页、文件、电子邮件或同一网页中特定部分的超链接。
语法
以下是使用HTML <a>锚点标签链接网站的语法:
<a href = "website address"> Name of the link </a>
示例
在下面的示例中,我们使用带有href属性的HTML <a>锚点标签来链接一个网站:
<!DOCTYPE html>
<html>
<head>
<title>Linking an website</title>
</head>
<body style="background-color: lightgrey; text-align: center;">
<h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
<!--Linking a website-->
<a href="https://tutorialspoint.com/index.htm"> Click here for Tutorialspoint</a>
</body>
</html>
输出
执行上述程序后,如果点击“点击此处访问Tutorialspoint”,它将跳转到目标网页。
链接邮件地址
要在HTML中链接电子邮件地址,我们使用<a>锚点标签以及在href属性中的mailto。
语法
以下是HTML中链接邮件地址的语法:
<a href = "mailto: example@mail.com"> name of the mail </a>
示例
在下面的示例中,我们使用HTML中<a>锚点标签的href属性中的mailto链接来链接一个电子邮件地址。
<!DOCTYPE html>
<html>
<head>
<title>Linking an image</title>
</head>
<body style="background-color: lightgrey; text-align: center;">
<h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
<!--Linking an email-->
<a href="mailto:support@tutorialspoint.org">Contact for support</a>
</body>
</html>
输出
执行后,如果点击“联系以获取支持”,它将跳转到您的邮件应用程序。
广告
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP