Web basic HTML tags six ways to use hyperlink tags

Hyperlink tags (emphasis)

1. Link syntax:

<a href="跳转目标链接" target="目标窗口的弹出方式"> 文本或图像 </a>

The a in the <a> tag is the abbreviation of the word anchor, which means: anchor.

The two properties work as follows:

Attributes effect
href Used to specify the url address of the link target, (required attribute) When the href attribute is applied to the tag, it has the function of a hyperlink
target It is used to specify the opening method of the linked page and, where _self (the current page is opened) is the default value, and _blank is the opening method in a new window.

href: the link to open

target: The way to open the window. The default value is _self the current window opens the page, and _blank the new window opens the page.

Write the attributes in the start tag <a>, for example: <a various attributes>

Put the text describing the link between the opening and closing tags, for example: <a> description </a>

Link Category:

1. External links : such as <a href="http://www.baidu.com"> Baidu</a>.

The href attribute of external links should start with: http://

2. Internal link: the mutual link between the internal pages of the website, just link the name of the internal page directly.

The href attribute of internal links does not need to start  with: http://

3. Empty link: If the link target is not determined, you can use an empty link, <a href="#"> Homepage</a>

4. Download link: If the address in href is a file or a compressed package, the file will be downloaded.

5. Links to web page elements: Hyperlinks can be added to various web page elements in web pages, such as text, images, tables, audio, video, etc.

6. Anchor link: Click the set link to quickly locate a certain position on the page

external link:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<>
    <h4>以下标签为超链接标签</h4>
    <a href="http://CSDN.com" target="_self" > CSDN官网 </a> <br />
    <a href="http://www.bilibili.com/" target="_blank"> 哔哩哔哩官网 </a>
</body>
</html>

 This is the hyperlink tag <a>, href is the attribute that must be written in the <a> tag, and this attribute is the hyperlink tag.

Internal link:

E.g:

<a href="index.html"> 首页 </a>

直接href="html文件名即可",内部链接就是访问自己创建的html文件,用于文件夹中的html文件相互跳转

 

The html file in the same directory can directly enter the file name, and the relative address can be entered in different directories. 

Empty link:

<a href="#"> 首页 </a>

空链接就是用 # 代替链接的位置,可以把 # 当成占位符。
在开发时,没有想好放什么链接时,就用 # 代替链接,这样代码就不会报错

Some addresses do not consider which page to go to, you can use # instead, and then replace # with a link after you think about which page to use

Download link:

The link address is generally in the form of a file.exe or a compressed package such as zip

If the download link is in this format, it will not jump to the page, but directly download

<a href="../图片存放/派大星 .zip">下载链接</a>

Web element links:

Web page element hyperlinks are to use these elements to replace the description text, click on these images, audio, video, you can go to other linked pages.

<a href="各种链接"> 各种元素 </a>

网页元素链接就是把元素放入<a> </a>里,让这个元素有超链接的属性
比如放置一个图片,就可以让这个图片有超链接的属性
点击图片,就可以前往另一个链接。

 

 This picture is given a hyperlink attribute, and clicking on this picture will go to the CSDN official website.

Anchor link:

1. In the href attribute of the link text, set the attribute value  to the form of #name, such as: <a href=" #two"> Episode 2 </a> 

2. Find the target location label and add an attribute id= the name just now, such as: <h3 id="two"> Introduction to the second episode <h3>

 Click on the blue text to jump to the corresponding position of the article, which is the main function of the anchor link.

 

 When the article is very long, it is recommended to use anchor tags, which are easy to read and can quickly jump to the specified position of the article.

To quickly return to the top of the article, you can add an anchor link at the end to return to the top, and set an id="" at the beginning tag at the top of the article, so that you can jump to the top of the article.

将文章的开头标签设置id:
<h4 id="kaitou"> 文章开头 </h4>

在文章的某个位置设置能快速跳转到开头的标签:
<a href="#kaitou"> 跳到文章顶部 </a>

This will get you back to the top of the article quickly.

These are the six ways to use hyperlinks .

Guess you like

Origin blog.csdn.net/weixin_53466908/article/details/123830160