Home  >  Article  >  Web Front-end  >  Novices learn old knowledge (3) HTML tutorial to make good use of hyperlink tags

Novices learn old knowledge (3) HTML tutorial to make good use of hyperlink tags

黄舟
黄舟Original
2016-12-26 15:12:191441browse

The hyperlink mark represents a link point and is the abbreviation of English anchor. Its function is to connect the text or pictures at the current location to other pages, texts or images. This is well known, but its grammatical structure may be a little unknown, and to use it you must understand its grammatical structure. . The basic syntax structure of the tag is:

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>Connection

From tag syntax It can be seen from the structure that there are many parameters to choose from when setting a hyperlink to achieve different link effects. Is this a bit unexpected? !

Among them, the class and id options: used to set the type of the link point and the assigned ID number, which are usually not set. The two most commonly used parameters are href and name. 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 will be the same as the path of the current page. The files linked to 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 directly executed or downloaded. The file we provide for download is used. This feature is used; if it is a text file such as a word format file, the file can be opened in the browser and can be edited and processed.

rel: Indicates setting the link relationship: rel=same indicates that the file to be linked is the same as this file, rel=next indicates that the file to be linked is the next page, rel=parent indicates that this file is to be linked The parent file of the file, rel=previous means that the file to be linked is the previous page.

rev: used to set reverse links.

Target: Sets 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 after the mouse moves out of the town contact.

A few examples:

Return to the homepage
Play the voice file
Execute the corresponding program
Open the corresponding document for processing

Application skills

1. Provide download files

Many netizens have written to ask how to provide the download effect. In fact, it is still a hyperlink, but the file for download must be uploaded to the website. For example: There is a "Web Page Skills" file package for download. The file name is "homepagejq.zip" and has been uploaded to the website. The code for this link can be written as follows: Click here to download the "Web Page Skills" file package.

 2. Open the linked web page in a new window

Set the value of "target" to "_blank". Example: Open the web page "aboutme.htm" in a new window. The code that produces this effect is: About Me….

3. Move the mouse to the link and display a line of description text

Set the "title" parameter value to obtain this effect. Example: When the mouse moves over the link "Huangshan Villager", the description "This is a professional website introducing skills" is displayed. The code of this link is like this: Huangshan Villager.

4. Move the mouse to a link and a window will pop up

This is the effect obtained by setting the onmouseover parameter. Example: When the mouse moves over a link, a window pops up and displays "Mouse hover effect demonstration!" in the window. The code for this link is this: link. A similar method can be used to create the effect of a prompt window popping up when the mouse is pressed and a prompt window popping up when the mouse is left.

5. Link to the specified content of this page

To achieve a 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 link point. The name. Select a piece of text and name it with the name parameter for linking. The so-called jump within the same file means that when a reader is reading a very long file, if he is only interested in a certain part of the content, he can use a jumping reading method. The basic format is:

The content of the first part of the second part...
........................ .............
The actual content of the second part......
............ ........................

In this way, when you click on the hyperlink "Part 2", It will automatically be transferred to the "Second Part Actual Content" place. The link point name defined by the "name" parameter can be chosen arbitrarily, but the link point name in the "href" parameter of the link must be consistent with it. Don't forget to add "#" in front.

 6. Link to the designated content location of other pages

The method is similar to the above example, but the file name of the web page must be added before the link point name in the "href" parameter. Example: There are two web pages, page1.htm and page2.htm. Each page has two parts of content. Now we need to create a hyperlink in page1.htm. When the link is clicked, it will go to the second part of page2.htm. superior. Then we can do this. First, write this code at the beginning of the second part of page2.htm; write such a link code in page1.htm: the second part of page2.

7. Link to E_mail

After clicking a hyperlink, the email management software on the client computer will be launched to write you a letter. Take this line of code: Please write to me. Once you click on the link "Please write to me", the writing function of the email management software (such as OE) will be automatically launched, and the email address will be added to the address bar of the recipient.

Links can not only use text as a carrier, but also images as a carrier, and can also use a certain part of the picture as a carrier, and can achieve the above effects. The method is also the same, the only difference is the carrier, and It’s the part between the two square brackets of the link, so I won’t give another example.

The above is the content of novices learning old knowledge (3) HTML tutorial on making good use of hyperlink tags. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn