1. What is a hyperlink?
Hyperlinks are part of a web page and are the elements that connect web pages to other web pages. Only when multiple web pages are connected through hyperlinks can it be considered a website. A hyperlink refers to a connection relationship from one web page to another target. The target can be a web page, a location (different locations on the same web page), a picture, etc. The objects used for hyperlinks in web pages can be text, pictures, etc.
2. Hyperlink code a tag
The a tag is the html code that implements hyperlinks. It is used to define hyperlinks. Next, let's take a look at how to use the a tag.
Syntax format: hyperlink object
Note: href is the most important attribute in the a tag, which specifies the target of the connection. Without this attribute, hreflang, media, rel, target and type attributes cannot be used.
3. Common attributes of a tag
Note: In addition to the two common attributes of href attribute and target attribute, the a tag also has many attributes, such as: download, name, rel and other attributes. I won’t introduce it if it is not commonly used. Friends who are interested can research it by themselves.
1. Syntax specifications for hyperlinks
<ahref=https://www.dotcpp.com/target=_blank>C Language Network Link</a>
Among them, a is the abbreviation of anchor, and the Chinese meaning is: anchor.
Among them, href is used to specify the URL address of the target page **(cannot be omitted)**. Only when the tag has the href attribute does it have the hyperlink function.
Target is used to specify how to open the target page. You can enter _self in quotation marks to open it in the current page, enter _blank to open it in a new window. Target can be omitted. If not written, the default value is _self, which is Opens in the default window.
2. Hyperlink classification
(1) External links, links outside the current project:
<ahref=https://www.dotcpp.com/target=_blank>C language network link</a>
(2) Internal links, links within the current directory can also be said to be links between different pages of this project:
<aherf=index.htmltarget=_blank>Homepage</a><br/>
(3) Empty link, that is, the page of the current project that has not yet been completed. Use # instead and you can replace it after the development is completed. After clicking, the current page will be opened again:
<ahref=#target=_blank>Unfinished page</a><br/>
(4) Download link: When the address of the internal link is a file or compressed file:
<ahref=New MicrosoftExcel worksheet.xlsx>Download file</a><br/><ahref=New MicrosoftExcel worksheet.zip>Download file</a><br/>
(5) Web page element links: Various elements in web pages, such as text, images, tables, audio, videos, etc., can be used as hyperlinks:
(6) Anchor link: Click this link to quickly navigate to a certain location on the page (similar to a directory link):
In the href attribute in the link text, set the attribute value to the form of #+text, such as: <ahref=#anchor>This is an anchor</a> Find the target location tag and add an ID attribute = just now Attribute value, such as: <h3id=anchor>anchor</h3>
3. Default style of <a> tag
Browsers set some default styles for the <a> tag.
(1) Mouse style
When the mouse moves into the link area, it will turn into a small hand; when the mouse moves out of the link area, it will change back to an arrow shape.
(2) Color and underline
The hyperlink is blue before it is clicked, and turns purple after the hyperlink is clicked. Hyperlinks are underlined by default, and the underline color is consistent with the text color.
The browser determines whether the hyperlink has been clicked based on the history record. If the href attribute coincides with a URL in the history record, it means that the link has been clicked. Clearing your browser's history will turn the hyperlink color back to blue again.
[Example] Various forms of HTML hyperlinks:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>HTML<a>tag demonstration</title></head><body><p><ahref=https://www.dotcpp .com/course/html/target=_blank>HTML tutorial (new window opens)</a><br><ahref=https://www.dotcpp.com/course/css/>CSS tutorial (current window opens) </a><br><ahref=https://www.dotcpp.com/course/algorithm/>Algorithm competition tutorial (clicked)</a></p></body></html>
The effect is shown as follows:
