HTML Links

HTML Links （HTML链接）

Websites contain different types of links that take you directly to other pages or allow to navigate to a particular part of the page. The links in HTML are called hyperlinks. They are defined using the <a> tag.

Hyperlinks are applied to a phrase, a word, an image or any HTML element. （超链接应用于短语、单词、图像或任何HTML元素。）

The default color of links in HTML is:

  • unvisited links: underlined and blue

  • visited links: underlined and purple

  • active links: underlined and red

This is default style of links, but you can can remove underline or change the color of the links using CSS styles. （这是链接的默认样式，但您可以使用CSS样式删除下划线或更改链接的颜色。）

Syntax

Syntax （语法）

The <a> tag comes in pairs, the opening <a> tells where the link should start and the closing </a> indicates where the link ends.

To create a hyperlink, you should use the <a> tag and href attribute, the value of which is the URL, or location, where the link is pointing to.

<a href="url">your text</a>.

Example of the HTML <a> tag with the href attribute: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>Link example</h2>
   <a href="https://www.w3cdoc.com/">w3cdoc.com</a>
 </body>
</html>

Result

In the example above, we used <h2> to define subheadings and the <a> tag to create links. Between <a> and </a> tags we have w3cdoc.com. Click on it and it will redirect you to the homepage of our website.

Target Attribute

Target Attribute （URL 目标属性）

To open a link in a new page, you need to add target="_blank" to your code. The target attribute specifies where exactly to open the linked page. With target="_blank" the linked page will open in a new window or in a new tab. （要在新页面中打开链接，您需要将target = “_blank"添加到代码中。目标属性指定链接页面的确切打开位置。当target = “_blank"时，链接页面将在新窗口或新选项卡中打开。）

<a href="https://www.w3cdoc.com/" target="_blank">w3cdoc.com</a>

ID Attribute

ID Attribute （ID属性）

To navigate to a specific part of the page, use the id attribute. （要导航到页面的特定部分，请使用id属性。）

Here is how you should do it:

Use id attribute to give a name to the part of the page, where a user should be redirected after clicking on the link. The value of the attribute can be a word or a phrase that describe that part (if you use a phrase, there should be no spaces - use underscores instead.)

Ex. <h2 id=“jump”> Link example with id attribute. We used attribute id called “jump”.</a>.

Create a hyperlink using the id of the link target, preceded by hash (# )

Ex. <a href="#jump”>When you click on this link, you will be redirected to the part of the page with “jump” id <a>.

Now let’s see how this will look like in HTML code. In the example below, scroll down to the link at the bottom, click the link, and you’ll return again to the top. （现在，让我们看看这在HTML代码中会是什么样子。在下面的示例中，向下滚动到底部的链接，点击链接，您将再次返回顶部。）

Example of the HTML <a> tag with the id attribute: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2 id="jump">Link example with id attribute</h2>
   <p>
     Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
（此处可以是您希望用户最终点击超链接的页面的任何部分。我们使用名为“JUMP”的属性ID。）
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
   </p>
   <p>
     Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
   </p>
   <p>
     Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
   </p>
   <p>
     Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
   </p>
   <p>
     Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
   </p>
   <p>
     Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
   </p>
   <p>
     Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
（Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt ， nulla sed sodales iaculis ， felis sem dapibus sem ， et viverra justo massa sed magna。Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.）
   </p>
   <a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
 </body>
</html>

How to Apply a Hyperlink to an Image （如何将超链接应用于图像）

To apply a hyperlink to an image, you just need to put the image in the <a> tag. This is done with the <img> tag, which should have some required attributes:

src - the source of the image alt - alternative text for the image width - width of the image height - height of the image （src -图像的来源 alt -图像的替代文本 width -图像的宽度 height -图像的高度）

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <a href="https://www.w3cdoc.com/">
   <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
   </a>
 </body>
</html>

HTML images will be covered in depth in the next chapter. （HTML图像将在下一章中深入介绍。）

Link titles （链接标题）

The title attribute is used for specifying additional information about an element. This information is often displayed as a tooltip text when you move the mouse over the element. （Title属性用于指定有关元素的其他信息。将鼠标移到元素上时，此信息通常显示为工具提示文本。）

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h1>Link Title Example</h1>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <p>The <span class="attribute">title</span>  attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
   <a href="https://www.w3cdoc.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
 </body>
</html>

External Paths

External Paths （外部路径）

You can reference external pages with URL or a path that is corresponding to the current web page. The example below shows how you can do this:

Example of the HTML <a> tag for referencing an external page with its URL: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h1>External paths</h1>
   <div>Example of referencing an external page with its URL</div>
   <p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a></p>
 </body>
</html>
← HTML Formatting
HTML Lists →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部