Create a hyperlink label in XHTML using tutorial _ HTML/Xhtml _ webpage

Source: Internet
Author: User
This article describes how to use the hyperlink label in XHTML, including the usage of the anchor link and the relative address of the link. For more information, see the hyperlink ". Hyperlinks are everywhere on the web pages we browse. We click a link address on the Web page to link to another web page. This means that the hyperlink is working.
Use tags to define hyperlinks. Syntax:
Displayed text or image
Example:

Copy XML/HTML Code to clipboard

  1. Link to Baidu

Browser display:
Link to Baidu
When we click "link to Baidu" above, the browser will switch to the Baidu homepage.


Hyperlink Properties
Hyperlink property:
Href URL. It can be an absolute webpage address or relative address.
Target. If the value is _ blank, the link address is opened in the new window. By default, the link address is opened in the current window.
Name anchor link, which we will discuss separately below.

Relative webpage URL:

Copy XML/HTML Code to clipboard

  1. DIV + CSS tutorial

In this example, relative addresses are used, while in the example linked to Baidu above, absolute addresses are used.

Example of adding the target attribute:

Copy XML/HTML Code to clipboard

  1. Link to Baidu

When you click the link again, the browser enables the new page to open the link address, and the original page window is retained.
Prompt
When a link address is not very close to the current topic or process, the target = "_ blank" attribute is usually enabled. Otherwise, try not to enable a new window, in this way, visitors can enjoy a friendly browsing experience.
If the page consists of several page frame frames, the target attribute can have other values.

Email hyperlink
Email link example:

Copy XML/HTML Code to clipboard

  1. Contact the webmaster of xyz

Click this link to enable the default email client to write emails.

Anchor
A text hyperlink is a link in a page, but many people now call it a text hyperlink.
Here is an example to explain the role of the anchor:
For example, we have an article that is well written. Many people comment on the post, and the comment window is generally at the bottom of the comment. The website will set an anchor link at the place where the comments are posted, and design a link to an anchor link at the location where the comments are displayed, for example, "post comments ". If someone does not want to view comments left by others and wants to jump to the comment input window immediately, click "post comments" to quickly jump to the comment input window in the industry. This design will undoubtedly improve the user experience of viewers.
Example of using an anchor Link
Create an anchor:

Copy XML/HTML Code to clipboard

Create a hyperlink from the link to the anchor:

Copy XML/HTML Code to clipboard

  1. Link to comment anchor

From the example, we can see that accessing an anchor is simply adding the "#" And anchor name after the link address. In the above example, the previous link address is ignored because it is an anchor linked to this page (Note: The relative address is ignored, so we will not discuss it here ).
Prompt
If you want to experiment with the usage of this anchor tag, pay attention to the fact that you can see the effect by keeping enough space between the link-to-anchor Hyperlink and the anchor. We can use the line feed label we learned above to create enough space for testing.
You can also create an anchor tag that links to other pages, for example:

Copy XML/HTML Code to clipboard

  1. Link to anchor

Of course, you must have the test anchor mark on the page www.abc.com. Otherwise, the test anchor mark will only be linked to the page www.abc.com and ignored.

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.