Web page creation for beginners: Learn to use HTML's hyperlink A tag

The hyperlink a tag represents a link point and is the abbreviation of the English word anchor. Its function is to connect the text or image at the current location to other pages, texts or images. This is well known, but its grammatical structure may be a little unknown. To use it effectively, you must understand its grammatical structure. The hyperlink <a> tag represents a link point, which is the abbreviation of the English anchor. Its function is to connect the current text or image to other pages, text or images. This is well known, but its grammatical structure may be a little unknown, and you must understand its grammatical structure to use it effectively. The basic syntax of the <a> tag is:
<a
class=type
id=value
href=reference
name＝value
rel=same|next|parent|previous
rev＝value
target=window
style=value
title=title
onclick＝function
onmouseout＝function
onMouseOver=function> </a>
From the grammatical structure of the tag, we can see that there are many parameters to choose from when setting a hyperlink to achieve different link effects. Is this a bit unexpected? !
The class and id options are used to set the type of link point and the assigned ID number, and are usually not set. The two most commonly used parameters are href and name. Among them, href is the abbreviation of hypertext reference, which is used to set the link address. The link address must be a URL address. If no specific path is given, the default path is the same as the path of the current page. The linked files are also divided into several situations: if it is an HTML file, it will be opened directly in the current browser; if it is an executable file (.exe file), it will be executed or downloaded directly. The files we provide for download are made with this feature; if it is a text file such as a word format file, it will be opened in the browser and can be edited.
rel: indicates the relationship of the set link: rel=same means the file to be linked is the same as this file, rel=next means the file to be linked is the next page, rel=parent means this file is the parent file of the file to be linked, and rel=previous means the file to be linked is the previous page.
rev: is used to set the reverse link.
target: is used to set which window to link to when using a frame window, and target="_bank" means opening a new window to open the web page.
title: Used to set the title displayed when the link point is selected.
onclick: corresponds to an event. When the link point is clicked, this event will be triggered and the corresponding subroutine will be executed.
onmouseover: Similar to onclick, the corresponding event is triggered when the mouse moves over the link point.
onmouseout: The corresponding event is triggered when the mouse moves out of the contact point.
Here are a few examples: <a href="index.htm">Back to Home Page</a>
<a href="sound.wav">Play audio file</a>
<a href="javascipt.open()">Execute the corresponding program</a>
<a herf="document.doc">Open the corresponding document for processing</a>
Application skills 1. Provide download files <br />Many netizens have written to ask how to provide download effects. In fact, it is still a hyperlink, but the file to be downloaded must be uploaded to the website. For example: there is a file package of "Web Page Skills" for download, the file name is "homepagejq.zip" and it has been uploaded to the website, then the code of this link can be written as follows: <a href="homepagejq.zip">Click here to download the "Web Page Skills" file package</a>.
2. Open the linked web page in a new window
Set the value of "target" to "_blank". Example: Open the webpage "aboutme.htm" in a new window. The code that produces this effect is: <a href="aboutme.htm" target="_blank">About me...</a>.
3. Move the mouse to the link to display a line of description text
You can achieve this effect by setting the "title" parameter value. Example: When the mouse moves to the link "123WORDPRESS.COM", the description "This is a professional website that introduces web page creation techniques" is displayed. The code of this link is as follows: <a href="hscf.htm" title="This is a professional website introducing web page production skills">123WORDPRESS.COM</a>.
4. When the mouse moves to a link, a window pops up .<br />This is the effect obtained by setting the onmouseover parameter. Example: When the mouse moves over a link, a window pops up and displays "Demo of mouse hover effect!". The code for this link is as follows: <a href="other web pages.htm" onmouseover="alert('Mouse hover effect demonstration!')">link</a>. A similar method can be used to create the effect of a pop-up prompt window when the mouse is pressed and a pop-up prompt window when the mouse is left.
5. Link to the specified content of this page <br />To link to a certain part of the content of this page (that is, "jump within the file"), you must use the parameter name to specify the name of the link point. Select a block of text and use the name parameter to name it for use in the link. The so-called jump within the same file means that when the reader is reading a very long file, if he is only interested in a certain part of the content, he can adopt a jump reading method. Its basic format is:
<a href="＃Link Point Name">Part 2</a>Part 1 Contents......
...........................................
<a name="Link point name"></a>The actual content of the second part......
...........................................
In this way, when you click on the hyperlink "Part 2", you will be automatically transferred to the "Actual content of Part 2". The link point name defined by the "name" parameter can be any, but the link point name in the link's "href" parameter must be consistent with it. Don't forget to add "#" in front.
6. Link to the specified content location of other pages <br />The method is similar to the above example, but the web page file name must be added before the link point name in the "href" parameter. For example: There are two web pages page1.htm and page2.htm, each page has two parts of content. Now you want to create a hyperlink in page1.htm, and when you click the link, you will be redirected to the second part of the content of page2.htm. Then we can do this, first write a code like this at the beginning of the second part of the content of page2.htm: <a name="link point name"></a>; write a link code like this in page1.htm: <a href="pagw2.htm#link point name">page2's second part of the content</a>.
7. Link to E-mail
After clicking a hyperlink, the email management software on the client computer will be launched to write a letter to you. For example, this line of code: <a href="mailto:[email protected]">Please write to me</a>. Once you click on the "Please write to me" link, the writing function of the email management software (such as OE) will be automatically started, and the email address will be added to the recipient's address bar.
Links can be carried not only by text but also by images, and even by part of an image, and can all achieve the above-mentioned effects. The methods are also the same, the only difference being the carrier, which is the part between the two pairs of square brackets of the link, so I will not give another example.

<<: Example of pre-rendering method for Vue single page application

>>: Implementation of MySQL master-slave status check