HTML Learning Document-7, HTML link

Source: Internet
Author: User

HTML uses hyperlinks to connect to another document on the network. Links can be found in almost all web pages. Click the link to jump from one page to another.

7.1 HTML Hyperlinks (links)

① hyperlinks 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.

③ we create links in HTML by using <a> tags.

④ has two ways to use <a> tags:

Create a link to another document by using the HREF attribute-

Create a bookmark within a document by using the Name property

7.2 HTML Link syntax

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

The ①href property specifies the target of the link.

② the text between the start and end tags is displayed as a hyperlink.

7.3 HTML Link-target property

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

① instances:

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

② target value:

_blank: Open in new window

_parent: Open in parent form

_self: Open in current form

_top: Opens in the current form and replaces the current entire form

If not with a value, similar to _self

7.4 HTML Link-Name property

The Name property specifies the names of anchors (anchor).

You can use the Name property to create bookmarks in an HTML page.

Bookmarks are not displayed in any special way and are not visible to the reader.

When using a named anchor (named anchors), we can create a link that jumps directly to the named anchor, such as a section in the page, so that the user doesn't have to scroll the page constantly to find the information they need.

① The syntax of a named anchor:

<a name= "Label" > anchor (Text displayed on the page) </a>

Tip: The name of the anchor can be any name you like.

Tip: You can use the id attribute to override the Name property, and the named anchor is also valid.

② Common Example:

First, we name the anchor in the HTML document (Create a bookmark):

<a name= "Tips" >5</a>

We then create a link to the anchor in the same document:

<a href= "#tips" > Back to 5</a>

You can also create a link to the anchor in another page:

<a href= "Http://www.w3school.com.cn/html/html_links.asp#tips" > Back to 5</a>

Tip: In the code above, we add the # symbol and the anchor name to the end of the URL, and we can link directly to the tips of the named anchor.

③ back to the top of the instance

<span id= "Top" name= "Top" ></span>

......

<a href= "#top" > Back to Top </a>

Hint: ID and name have the same value and are named the same as a

7.5 Creating hyperlinks

<a href= "/index.html" > This text </a> is a link to a page in this website. </p>

<p><a href= "http://www.microsoft.com/" > This text </a> is a link to a page on the World Wide Web. </p>

7.6 Image as a link

<a href= "http://www.baidu.com" >

</a>

7.7 links to different locations on the same page

<a name= "Tips" >5</a>

<a href= "#tips" > Back to 5</a>

7.8 Jump out of frame

This example shows how to jump out of the frame if your page is pinned within the frame.

Is <p> locked in the frame? </p>

<a href= "/index.html"

target= "_top" > click here! </a>

7.9 Creating an email link

This example shows how to link to a message. (This example does not work until you install the Mail client program.) )

<a href= "Mailto:[email protected]?subject=hello%20again" > Send mail </a>

Tip: You should use%20 to replace spaces between words so that the browser can display the text correctly

7.10 Creating an e-mail link 2

This example demonstrates a more complex mail link.

<a href= "Mailto:[email protected][email protected]&[email protected]&subject=summer%20party&body= you%20are%20invited%20to%20a%20big%20summer%20party! " > Send mail! </a>

HTML Learning Document-7, HTML link

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.