Home > Web Front-end > HTML Tutorial > Introduction to several uses of the a tag href='' in html

Introduction to several uses of the a tag href='' in html

黄舟
Release: 2017-07-27 13:32:12
Original
6983 people have browsed it

As we all know, the most important function of the a tag is to implement hyperlinks and anchors. Moreover, most people think that the most important role of the a tag is to implement hyperlinks. Today I happened to come across a way of writing the a tag , so I will sort it out Below are several uses of href in the a tag.

1. Several calling methods of Js (refer to the summary)

1.

a href="javascript:j
s_method();"
Copy after login

This is a commonly used method, but this method is prone to problems when passing parameters such as this, and the javascript: protocol is used as The href attribute of a will not only cause the window.onbeforeunload event to be triggered unnecessarily, but also cause the gif animated image to stop playing in IE. W3C standards do not recommend executing javascript statements in href
2.

 a href="javascript:void(0);" onclick="js_method()"
Copy after login

This method is the most commonly used method for many websites and is also the most comprehensive method. , the onclick method is responsible for executing the js function, and void is an operator. void(0) returns undefined, and the address does not jump. And this method does not directly expose the js method to the status bar of the browser like the first method.
3.

a href="javascript:;" onclick="js_method()"
Copy after login

This method is similar to the 2 methods, the only difference is that an empty js code is executed.
4.

a href="#" onclick="js_method()"
Copy after login

This method is also a very common code on the Internet. # is a method built into the tag, representing the role of top. So using this method to click on the web page returns to the top of the page.

5.

a href="#" onclick="js_method();return false;"
Copy after login

This method returns false after clicking to execute the js function. The page will not jump and the page will still be on the page after execution. 's current location.
Based on the above, the most appropriate method to call js functions in a is recommended:



Copy after login

2. href="# The function of "

href="#" in a means to return to the top. If you need to scroll on the current page, you can go back to the top directly in this way. For example, some websites will create an icon button in the lower right corner to return to the top. At this time, you can consider using this simplest way to implement it.

##

<span style="font-size:14px;"><a href="#">回到最顶端</a></span>
Copy after login

##3. The role of href="URL"## 1. The URL is an absolute URL

At this time it points to another site, such as

href="http://write.blog.csdn.net"
Copy after login
, then when clicked, it will jump directly to the page of this link.


2. The URL is a relative URL

At this time, it points to a file in the site, such as href="/test. doc", then the file will be downloaded directly when clicked.

3. Anchor URL

At this time, it points to the anchor in the page, such as href="#top", then it will arrive when clicked The anchor point with id="top" in the current page realizes the so-called jump of the current page. The most common use is to add a menu to a scrollable page to directly return to a certain part of the page.

That is, all three code samples:

##
<a href="http://baidu.com">超链接</a>
<a href="#">回到最顶端</a>
<a href="css/css1.css">文件链接</a>
Copy after login

The above is the detailed content of Introduction to several uses of the a tag href='' in html. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template