The a element can use its href attribute to create hyperlinks to other web pages, files, locations within the same page, or other urls.

Its basic attributes and meanings are as follows.

  • href: of the link targetURL
  • hreflang: Specify the targetURLThe language of the
  • rel: Specifies the relationship between the current document and the linked document
  • target: Specifies the open targetURLThe way of
  • media: Specify the targetURLMedia types of
  • type: Specify the targetURLtheMIMEtype
  • download: instructs the browser to downloadURL

Link to the style

The default style of the A TAB in the browser is underlined, with the following status and color.

  • link: Is not accessed. The font color is blue
  • visited: Accessed. The font color is purple
  • hover: The mouse is hovering
  • active: Indicates the state when the mouse is clicked. The font color is red
  • focus: Focus state, can passTabKey focus element, border appears when focus (different browser styles differ)
<a href="https://www.baidu.com/"> baidu < / a >Copy the code

The styles of different states can be customized through pseudo classes. Note that Link and visited must be in the first place without order, while focus, hover and active must be in the second place, and must be in the order of focus, hover and active.

Firstly, when the element is static (the element is not focused, mouse clicked or suspended), a tag can only be one of the unvisited and visited states, and then only one of the pseudo-classes of Link and Visited will be matched, and the other one will not take effect. Therefore, link and Visited have no order.

While in dynamic (such as mouse hover), the style of tag A should present the suspended style at this time. Since the weight of pseudo class is the same, the style of hover pseudo class must be located behind Link and Visited to cover its style.

A label can be focused by Tab key. After focusing, if the mouse hover over the label, the hover style needs to be presented, so the hover is located after Focus.

When a tag is suspended, if the mouse is clicked and not released at this time, the click style needs to be presented at this time, so active is located after hover.

Therefore, the pseudo-class order can only be Link, visited, focus, hover, active or visited, Link, focus, hover, active.

a:link {
    color: pink;
}

a:visited {
    color: orange;
}

a:focus {
    color: blue;
}

a:hover {
    color: red;
}

a:active {
    color: green;
}
Copy the code

Specifies how links are opened

Target specifies the opening mode of the link. The options are as follows:

  • _self: Opens the link on the current page
  • _blank: New window open link
  • _parent: Opens the page in the parent frame of the current frame
  • _top: Opens the page in the top frame of the current frame

HTML, top. HTML, center. HTML, left. Center.html also introduces left.html and right.html via iframe.

Part of the page code is as follows.

// main.html
<head>
    <style>
        body {
            width: 1500px;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
        }

        iframe {
            width: 100%;
        }
    </style>
</head>

<body>
    <iframe src="top.html" frameborder="0" height="300px"></iframe>
    <iframe src="center.html" frameborder="0" height="600px"></iframe>
</body>

// top.html
<head>
    <style>
        body {
            width: 100%;
            height: 300px;
            margin: 0;
            background-color: #FF952C;
        }
    </style>
</head>

<body></body>

// center.html
<head>
    <style>
        body {
            height: 600px;
            background-color: #FFCC00;
            display: flex;
            margin: 0;
        }

        iframe {
            height: 500px;
        }
    </style>
</head>

<body>
    <iframe src="left.html" frameborder="0" style="width: 200px;"></iframe>
    <iframe src="right.html" frameborder="0" style="width: 1300px"></iframe>
</body>

// left.html
<head>
    <style>
        body {
            margin: 0;
            width: 100%;
            height: 500px;
            background-color: #02BF0F;
        }
    </style>
</head>

<body></body>

// right.html
<head>
    <style>
        body {
            margin: 0;
            width: 100%;
            height: 500px;
            background-color: #2196F3;
        }
    </style>
</head>

<body>
    <a href="http://www.baidu.com" target="_self"  style="color: #fff; text-decoration: none;">baidu</a>
</body>
Copy the code

_self

Change the target of the a tag in right.html to _self, and click the A tag.

It can be seen that Baidu is opened in the right.html frame, that is, click the link with the _self attribute target in the page itself, and the target page will be opened in this page frame.

_parant

Change the target of the a tag in right.html to _parent, and click the A tag.

You can see in thecenter.htmlBaidu is opened in the framework, that is, click on its own pagetargetfor_parentProperty opens the target page in the parent frame of the page.

_top

Change the target of the a tag in right. HTML to _TOP, and click the A tag.

It can be seen that Baidu is opened in the main. HTML framework, that is, click the link with the _TOP attribute in its own page, and the target page will be opened in the top frame of the page.

_blank

_blank opens a new TAB to show the target page.

The anchor

Within the page, the h1 anchor point on the page is redirected as follows.

<a href="#h1">a</a>
<h1 id="h1">h1<h1>
Copy the code

Go to the specified position on another page. The following shows the position of the P anchor point on the other. HTML page.

<a href="other.html#p">a</a>
Copy the code

The phone

Call 10086.

<a href="tel:10086">10086</a>
Copy the code

Call the customer service number 400.

<a href="tel:400-888-8888">400-888-8888</a>
Copy the code

SMS

Send an SMS message to a single phone number.

<a href="sms:10086">10086</a>
Copy the code

Send SMS messages to multiple phone numbers.

<a href="SMS: 10086100 00">10086.10000</a>
Copy the code

Send SMS DX to 10086, pay attention to android? Connect to send content, IOS uses & connect to send content.

Since the standard is supported differently by different phone or browser vendors, it is best not to include body.

<a href="sms:10086? body=DX">DX</a>
Copy the code

email

Send a single mailbox.

<a href="mailto:[email protected]">email</a>
Copy the code

Send multiple mailboxes.

<a href="mailto:[email protected]; [email protected]">email</a>
Copy the code

The mailTO parameters are as follows:

  • mailto: Recipient email address. If multiple recipient email addresses exist, use semicolons (;);separated
  • cc: Cc personnel email address, use semicolon for more than one;separated
  • bcc: Email address of encrypted sender. Semicolons (;) are used for multiple users;separated
  • subject: Email subject
  • body: Email content
<a href="mailto:[email protected][email protected]&[email protected]&subject=subject&body=body">email</a>
Copy the code

The download file

Download the image, where href is the image path.

<a href="./image.png" download>image</a>
Copy the code

Download the image and specify a download name.

<a href="./image.png" download="name.png">image</a>
Copy the code

Note the following for the Download attribute.

  • Files that cannot be opened directly by the browser (e.gtxt,zipEtc.), do not specifydownloadProperties are also downloaded directly
  • The browser can open files directly (e.gpng,css,js,htmlEtc.), need to be specifieddownloadProperties to download
  • downloadAttribute values may not specify a suffix, which will be automatically added by the browser when downloading
  • downloadProperty value specified wrong suffix, file will not open preview after download

The same-origin policy

Due to the same origin policy of the browser, if the downloaded file is from a different source from the page, the browser does not download the file but opens it directly.

If the following page address is http://127.0.0.1:3000, clicking a TAB will not download but open in the browser.

<a href="https://www.baidu.com/logo.png" download>baidu</a>
Copy the code

Data: URLs

Download the image using data: URLs as follows: first draw the image through canvas, then use Canvas. toDataURL to obtain the base64 encoding of the image, and finally download the image through a tag.

<a href="javascript:void(0);" onclick="downloadFile(event)" src='https://www.baidu.com/logo.png'>download</a>
<script>
    function downloadFile(e) {
        var url = e.target.getAttribute('src')
        var image = new Image()
        image.setAttribute('crossOrigin'.'anonymous')
        image.src = url
        image.onload = () = > {
            var canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            var ctx = canvas.getContext('2d')
            ctx.drawImage(image, 0.0, image.width, image.height)
            var ext = image.src.substring(image.src.lastIndexOf('. ') + 1).toLowerCase()
            var name = image.src.substring(image.src.lastIndexOf('/') + 1)
            var dataURL = canvas.toDataURL('image/' + ext)
            
            var a = document.createElement('a')
            a.href = dataURL
            a.download = name
            a.click()
        }
    }
</script>
Copy the code

Note that if crossOrigin is not set, the browser will throw the following error.

Because of the same origin policy of the browser, the browser does not know whether the target image address is safe or not. Setting crossOrigin to anonymous is equivalent to telling the image server that it does not need to carry any non-anonymous information (such as cookies), so the target image address is safe for the current browser.

Blob: URLs

Use blob as follows: Download the image as a URL, get the blob object using Canvas. toBlob, then get an in-memory URL for the blob object using url.createObjecturl and store it in memory. Until the Document fires the Unload event or revokeObjectURL is released.

<a href="javascript:void(0);" onclick="downloadFile(event)" src='https://www.baidu.com/logo.png'>download</a>
<script>
    function downloadFile(e) {
        var url = e.target.getAttribute('src')
        var image = new Image()
        image.setAttribute('crossOrigin'.'anonymous')
        image.src = url
        image.onload = () = > {
            var canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            var ctx = canvas.getContext('2d')
            ctx.drawImage(image, 0.0, image.width, image.height)
            var name = image.src.substring(image.src.lastIndexOf('/') + 1)

            canvas.toBlob((blob) = > {
                var url = window.URL.createObjectURL(blob)
                var a = document.createElement('a')
                a.href = url
                a.download = name
                a.click()
                a.remove()
                
                window.URL.revokeObjectURL(url)
            })
        }
    }
</script>
Copy the code

ajax

The above two methods only apply to images, not to PDF or TXT, etc.

Blob data can be requested to a file via Ajax and downloaded as BLOb: URLs.

Note that Ajax requests have cross-domain issues that require server support.

<a href="javascript:void(0);" onclick="downloadFile(event)" src='http://www.baidu.com/txt.txt'>download</a>
<script>
    function downloadFile(e) {
        var url = e.target.getAttribute('src')
        var name = url.substring(url.lastIndexOf('/') + 1)

        axios.get(url, { responseType: 'blob' }).then(res= > {
            var blob = res.data
            var url = URL.createObjectURL(blob)
            var a = document.createElement('a')
            a.href = url
            a.download = name
            a.click()
            a.remove()
            
            window.URL.revokeObjectURL(url)
        })
    }
</script>
Copy the code