Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the knowledge points of a tag in html". The editor shows you the operation process through actual cases, the method of operation is simple and fast, and it is practical. I hope that this article "what are the knowledge points of a tag in html" can help you solve the problem.

A tag definition and usage

The a tag defines a hyperlink (used to link from one page to another) or an anchor (used to jump from the current position of the page to a specified anchor), and its most important attribute is the href attribute, which indicates the target of the link. All browsers support the a tag.

Here are a few relatively commonly used attributes

Attribute value description downloadfileName specified hyperlink target name hrefURL specified URLnamesection_name anchor name of the page to which the link points [not supported in HTML5] target_blank [jump to new page] / _ parent [open link in parent form] / _ self [default, current page jump] / _ top [open link in current form And replace the current entire form (frame page) / framename [open the linked document in the specified frame and treat frame as a built-in browser] specify where to open the linked document title description specifies the display description of the mouse over the label

Specific usage:

Empty link, current page jump, refresh page opens a new window, jump to Baidu does not jump, the page is often used for button a tag setting click event, prevent jump to send mail [mailto: will automatically detect whether the local system installs mailbox, if there is, it will automatically open the mailbox If not, the user will be prompted to select a mailbox or no prompt] one click to dial the phone, one button to send a text message empty anchor, return to the top, do not refresh the page jump anchor

Jump jump [this method takes effect only with the name attribute definition of the a tag]

It seems that before HTML5, the a tag was mainly used to do anchor jump, link jump and button click event. After the emergence of HTML5, a tag is more used for file download function.

/ / download, href indicates the destination address, and download renames the download file

Pseudo-class state

There are four pseudo classes in the a tag, which are:

Link: sets the stylesheet properties of an objects before they are accessed

Visited: sets stylesheet properties that have been accessed by the an object at its link address

Hover: sets the stylesheet properties of an object when it hovers over

Active: sets the stylesheet properties of an object when it is activated by the user (an event that occurs between mouse click and release)

By writing the pseudo-class stylesheet, you can modify the display form of a tag in various states. In order to produce the desired effect, in the CSS definition, a:hover must be after a:link and a:visited, and a:active must be after a:hover, so the order of a tag pseudo-class style rewriting should be: a:link, a:visited, a:hover, a:active

So why does it have to be in this order for the pseudo-class style to take effect as we have in mind? This involves the priority of the CSS style. Sadly, the particularity of pseudo-classes (application priority) is the same, so later pseudo-classes will override those that appear first (and activate at the same time).

Suppose we don't write styles in this order, what happens if we write in LHAV order?

Give me a simple example.

/ / style a:link {color: red; text-decoration: none;} a:hover {color: green; text-decoration: dashed;} a:visited {color: yellow;} a:active {color: black; text-decoration: dotted } / / html test1 blog Park

When I click on test1, a clicked button on the page, an unclicked button, as expected, [test1] render: visited will turn yellow, while [blog Garden] render: link shows red, well, that's right.

But there is a problem, when the mouse is on the button, it will render: the hover pseudo-class turns the text green, and when you click the button test1, it actually triggers the active state, but it does not render: the active pseudo-class turns the text black, and, after clicking, no matter how hover, it will not turn green again. In fact, when the page is initialized, the current state of the two a tags is: link, so both show red. When the mouse is placed on [test1], the button is in the state of hover and shows green. When the button is clicked, it triggers: active, shows black, and when released, the button changes to: visited state, shows yellow, at this time, no matter you want to trigger: hover or: active All will be overridden by the last: visited style, and once the: visited is triggered, it will always exist unless the history is deleted.

This is why, if the a tag pseudo-class custom style needs to be written in this order, it is obvious that: link and: visited are long-term states, while: active and: hover are short-term states, described in terms of switches, that is: link itself is an open switch, and can not be turned on again after closing: visited itself is a closed switch, and can no longer be closed after opening. : active and: hover itself is an off switch, and the switch status is determined by the mouse. In addition, the application priority of pseudo classes in the priority of CSS style is the same, it must be the long-term state before the short-term state, so although people have been nurtured for a long time to write styles in LVHA order, I guess it's just for ease of memory: LoVe,HAte. After all, as long as we follow the principle that the long-term state comes first and the short-term state comes later, it is not a big problem that who is in front of link or: visited, and it is impossible for their states to appear at the same time. Who is in front of active and: hover does not affect their respective style rendering effects. You can also pretend that LV is expensive and HA doesn't know what it is.

But one thing to keep in mind:

When a tag href= "", the default state is visited state; when a tag has no href attribute, the default state is active state, neither of these cases affects: active and: hover trigger, but never trigger: link

This is the end of the content about "what are the knowledge points of the a tag in html". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.