Front-end development: html-Links

HTML Hyperlinks (links)

HTML uses tags <a> to set up hypertext links.

A hyperlink can be a word, a word, or a group of words, or an image that you can click to jump to a new document or to a section of the current document.

When you move the mouse pointer over a link in a webpage, the arrow changes to a small hand.

The href attribute is used in label <a> to describe the address of the link.

By default, the link will appear in the browser in the following form:

• A link that has not been visited is displayed in a blue font with an underscore.
• The visited links appear purple with underscores.
• When you click the link, the link appears in red with an underscore.

Note: If you set CSS styles for these hyperlinks, the presentation style is displayed according to the CSS settings.

　　

HTML link syntax

The HTML code of the link is simple, it's like this

<a href= "url" > link text </a>

The href attribute describes the target of the link

Instance

<a href= "www.baidu.com/" > Baidu </a>

The above line of code shows: Baidu

Tips: the link text must not necessarily be text. A picture or other HTML element can be a link

HTML Link-target property

Using the target property, you can define where the linked document is displayed.

The following row opens the document in a new window:

Instance

<a href= "www.baidu.com/" target= "_blank" > Baidu </a>

　　

HTML link-id attribute

The id attribute can be used to create bookmark tags in an HTML document.

tip: bookmarks are not displayed in any particular way, and are not displayed in HTML documents, so they are hidden from the reader.

Example

To insert an ID in an HTML document:

<a id= "Tips" > Useful tips Section </a>

Create a link to the Useful Tips section (id= tips) in an HTML document:

<a id= "Tips" > Useful tips Section </a>

Alternatively, create a link from another page to the "Helpful Tips section (id=" Tips ")":

<a href= "Www.baidu.com#tips" > Access useful Tips section </a>

　　

Create a picture link

<!--picture Link-    <p> create image link:    <a href= "www.baidu.com/" >            </a> </p>    <p> borderless picture link:    <a href= "www.baidu.com/" >            </a>    </p>

Link to a specified location on the current page

<p>        <a href= "#C4" > View chapters 2</a>    </p>    
　
Jump out of frame
    <p> Jump Frame </p>    <a href= "www.baidu.com/" target= "_top" > click here </a>
　　
To create an e-mail link:
<p>        This is an email link:        <a href= "Mailto:[email protected]? Subject=hello%20again "target=" _top ">            send mail        </a>    </p>
　　
HTML Link Tags
Front-end development: html-Links