A tag for HTML (hyperlink tag)

Original

The original Book of Jane: https://www.jianshu.com/p/d6a2499db73b

Outline

1. What is <a> label
2. Several important attributes of <a> tags
3. The operating mechanism of a tag
4, a label commonly used protocols
5. Hyperlink label style problem--a label's pseudo class selector's writing order

1. What is <a> label

<a> tag defines a hyperlink that is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the target of the link.

2. Several important properties of <a> tags 2.1, href

Specifies the URL of the page to which the link is directed.

<a href= "http://www.w3school.com.cn" >W3School</a>

2.2. Target

Specifies where to open the linked document.
A: Custom open anchor Point

<frameset cols= "100,*" >  <frame src= "toc.html" >  <frame src= "pref.html" name= "View_frame" > </frameset> 
Special value for Target: There are 4 reserved target names used for special document redirection operations:
    _self: The value of this target is the default target for all <a> tags that do not have a target specified, which causes the target document to be loaded and displayed in the same frame or window as the source document. This goal is superfluous and unnecessary unless used with the target property in the document title <base> tag.    _parent: This goal causes the document to be loaded into the parent window or the frameset that contains the frame referenced by the hyperlink. If the reference is in a window or in a top-level frame, then it is equivalent to the target _self.    _top: This goal causes the document to load into the window containing the hyperlink, with the _top target clearing all the contained frames and loading the document into the entire browser window.    _blank: The browser always loads the target document in a newly opened, unnamed window.    tip: All 4 values of these target begin with an underscore. Any other window or target that starts with an underscore will be ignored by the browser, so do not underline the first character of any frame name or ID defined in the document.
2.3. Name
Specifies the name of the anchor. (HTML5 not supported)
2.4, DownloadHTML5 New
HTML5 new, only Firefox and Chrome support download properties.
The Download property specifies the hyperlink target to be downloaded.
The href attribute must be set in the <a> tab.
This property can also set a value to specify the name of the download file. The allowed values are not limited, and the browser will automatically detect the correct file name extension and add it to the file (. img,. pdf,. txt,. html, and so on).
<a href= "/images/myw3schoolimage.jpg" download= "W3logo" >
2.5. Media
The Media property specifies why the target URL is optimized for the type of media/device.
This attribute is used to specify that the destination URL is designed for special devices (such as the IPhone), voice, or print media.
This property can accept multiple values.
Can only be used when the href attribute is present.
<a href= "Att_a_media.asp?output=print" media= "Print and (resolution:300dpi)" > Open the Media Properties page for printing </a>
3. The operating mechanism of a tag
    1, the value of the href attribute of a tag if it starts with HTTP, then the browser will immediately start the HTTP interpreter to explain the URL, first in the local machine to find a Hosts file, if the host file does not have corresponding hosts, Then the browser goes to the corresponding DNS server to find the host number corresponding to the domain name. If a corresponding host is found, the request is sent to the corresponding host.    2. If the href attribute value of the A tag does not begin with any protocol, then browsing initiates the file protocol interpreter to interpret the resource path.    3. If the href attribute value of the A tag does not start with HTTP, and some other protocol, then the browser will go back to our local registry to find out if there are any applications that deal with this protocol, and if so, start the application to process the protocol immediately.
4, a label commonly used protocols
1. File: File protocol   (document Protocol) This Protocol is primarily used to search the local machine for resource files.  format: file:\\\f:\ beauty \1.jpg     2, the agreement of the Mail: MailTo 3, Thunderbolt Agreement: Thunder
5. Hyperlink label style problem--a label pseudo class selector write order 5.1, a label multiple states
For the <a> element, we can use "multiple personalities" to describe it. For this label, it has five states:: Link,: visited,: hover,: Focus,: Active.
": Link" can be used to declare the style of an inaccessible state link;
": Visited" can be used to declare the style of the link that has been visited;
": hover" can be used to declare the mouse hover over the link style;
": Focus" can be used to declare the style of the browser focus hover over the link (select the link via the keyboard);
": Active" can be used to declare the style of browser click links.
Note: Do not leave spaces around the colon
The status of the general A:hover and a:visited links (colors, underscores, etc.) should be the same.
Link, visited, and active correspond to the three attributes of the link, Vlink, ALink of the Body element respectively.
The four "states" of the sequence of the process is: A:link->a:hover->a:active->a:visited. In addition, a:active cannot be set with or without underscores (always there).
5.2. The order of links (status of a label) defined
No rules inadequate surrounding area, although the link definition is written, but it is also a regular, if the four items of the writing order slightly wrong, the effect of the link may not be, so every time you define the link style, be sure to confirm the definition of the order, link--visited--hover-active, That's the love hate principle we often talk about (capital letters are their initials).
The foreigner summed up a memorable "love and Hate Principle" (love/hate), that is, four kinds of pseudo-class initials: LVHA. Defines the correct order for a link style: A:link, a:visited, A:hover, a:active. If you do not follow this order, some of the style of the state will be placed in the back of the style to cover the same as no trigger, such as no effect, such as: if hover placed after visited, then even if I put on the color, but at the same time the label also has visited state and its effect, Will cover the effect of hover.
In order to conform to the browser to interpret the "nearest principle" CSS follows. In the definition of CSS, it is advisable to put the most general conditions on the top, and then down, the most special on the bottom.
In the specification, the declaration order of links is also specified:
In CSS definitions, a:hover must be placed after A:link and a:visited to be valid.
In the CSS definition, a:active must be placed after a:hover to be valid.
A:link, a:visited, A:hover, a:active
Reference URL
http://blog.csdn.net/linwh8/article/details/52491645
Http://www.jb51.net/css/182670.html
http://www.nowamagic.net/csszone/css_IntroduceToTagA.php
A tag for HTML (hyperlink tag)