Home Web Front-end HTML Tutorial Detailed explanation of examples of hyperlinks in XHTML

Detailed explanation of examples of hyperlinks in XHTML

May 22, 2017 am 10:39 AM
xhtml Hyperlink

This article mainly introduces the tutorial on using hyperlink tags in XHTML, including an introduction to the usage of anchor links and link relative addresses. Friends in need can refer to


Hyperlinks, also called " Link". Hyperlinks can be said to be everywhere on the web pages we browse. When we click on a link address on a web page, it links to another web page. This is how hyperlinks work.
Use the tag to define a hyperlink, syntax:
Displayed text or image
Example:

XML/HTML CodeCopy content to clipboard

<a href="http://www.baidu.com/">链接至百度</a>
Copy after login
  1. Browser display effect:

  2. Link to Baidu

  3. When we click on the words "Link to Baidu" above, the browser will redirect to the Baidu homepage.

Hyperlink attribute
Hyperlink attribute:
href link address. It can be an absolute web address or a relative address.
target Link target. A value of _blank will open the link address in a new window. By default, the current window will be used to open the link address.
name Anchor link, we will talk about this separately below.

Relative web link address:

XML/HTML CodeCopy content to clipboard

<a href="/css" target="_blank">p+CSS教程</a>
Copy after login
  1. This example uses a relative address, while the example linking to Baidu above uses an absolute address.

Example of added target attribute:

XML/HTML CodeCopy content to clipboard

<a href="http://www.baidu.com/" target="_blank">链接至百度</a>
Copy after login
  1. When you click the link again, the browser will enable a new page to open the link address, while the original page window will be retained.

  2. Tip

  3. When a link address is not very closely related to the current topic or process, the target="_blank" attribute is usually enabled. Otherwise, try not to open new windows in order to provide viewers with a friendly browsing experience.

  4. If the page is composed of several page frames, the target attribute can also have other values

Email hyperlink
Email link example:

XML/HTML CodeCopy content to clipboard

<a href="mailto:admin@xyz.com">联系xyz站的站长</a>
Copy after login
  1. Clicking this link will enable your default email client to compose your email.

Anchor link
Anchor link refers to the link within the page, but now many people also call text hyperlinks anchor links.
Let’s take an example to explain the role of anchors:
For example, we have a well-written article, and many people have commented after the article, and the window for commenting is usually at the bottom of the comment. Location. The website will set an anchor link where the comment is posted, and design a link to the anchor link where the comment is displayed, such as: "Post a comment." If someone does not want to view the comments left by others and wants to jump to the comment input window immediately, then click "Post a Comment" to quickly jump to the comment input window within the industry. This design undoubtedly improves the user experience for viewers.
Example of using anchor links
Create anchor:

XML/HTML CodeCopy content to clipboard

<p><a name="comment"></a></p>
Copy after login
  1. Create a hyperlink address linking to the anchor:

XML/HTML CodeCopy content to clipboard

<p><a href="#comment">链接至comment锚</a></p>
Copy after login
  1. As you can see from the example, to access an anchor, just add the "#" sign and the name of the anchor after the link address. In the above example, since it is an anchor linking to this page, the previous link address is ignored (note: the relative address is actually ignored, and will not be discussed here).

  2. Tip

  3. If you want to experiment with the use of this anchor tag, be careful to combine the hyperlink that links to the anchor with the anchor tag. Only by maintaining enough web page space can you see the effect. You can use the line break tags we learned above to create enough white space above and below to test.

  4. You can also create an anchor tag that links to other pages, for example:

XML/HTML CodeCopy content to clipboard

<p><a href="http://www.abc.com/#test">链接至锚</a></p>
Copy after login

Of course, the page www.abc.com needs to have this test anchor tag, otherwise it will only link to the www.abc.com page and ignore this anchor Tag

【Related Recommendations】

1. HTML Free Video Tutorial

2. Picture and text explanation of HTTP Headers knowledge points

3. Introduction to how to display JSON data in html

4. htmlDetailed explanation of the example of implementing the quantity subscript on the message button

5. HtmlJquery code example to complete asynchronous upload of files

The above is the detailed content of Detailed explanation of examples of hyperlinks in XHTML. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Solve the problem that hyperlinks cannot be opened Solve the problem that hyperlinks cannot be opened Feb 18, 2024 am 09:57 AM

How to solve the problem that hyperlinks cannot be opened. With the rapid development of the Internet, hyperlinks have become an indispensable part of our daily lives. We often see and use hyperlinks on various platforms such as web pages, emails, and social media. However, sometimes we may encounter problems with hyperlinks not opening, which makes us confused and frustrated. In this article, we will discuss the reasons why hyperlinks cannot be opened and their solutions, hoping to help you solve this problem. First, let us understand the possible reasons why hyperlinks cannot be opened. The following are some common

Can't open hyperlink in word document Can't open hyperlink in word document Feb 18, 2024 pm 06:10 PM

In recent years, with the continuous development of network technology, our lives are inseparable from various digital tools and the Internet. When processing documents, especially in writing, we often use word documents. However, sometimes we may encounter a difficult problem, that is, the hyperlink in the word document cannot be opened. This issue will be discussed below. First of all, we need to make it clear that hyperlinks refer to links added in word documents to other documents, web pages, directories, bookmarks, etc. When we click on these links, I

What should I do if WPS cannot open a hyperlink? Solution to WPS hyperlink not opening What should I do if WPS cannot open a hyperlink? Solution to WPS hyperlink not opening Mar 13, 2024 pm 08:40 PM

When many of our friends use WPS to edit content, they sometimes add hyperlinks to specific text. Recently, some friends have reported that WPS hyperlinks cannot be opened and cannot be clicked to access after using many methods. About this How to solve the problem? In this software tutorial, the editor will share the specific solutions, hoping to help the majority of users. Solution to WPS hyperlink not opening: Method 1: Move the mouse over the hyperlink to see if it becomes clickable. 1. Open the software, click "File" in the upper left corner of the page, and select "Options" in the menu below. 2. After entering the new interface, click "Edit&rdq" on the left

Why can't the hyperlink be opened? Why can't the hyperlink be opened? Feb 22, 2024 pm 03:33 PM

As one of the common elements in web pages, hyperlinks are often used to point to other web pages, files or specific locations. However, sometimes we encounter a situation where a hyperlink cannot be opened, which can be caused by a number of reasons. First, the failure to open a hyperlink may be caused by an incorrect link address. When creating a hyperlink, we need to make sure that the link's address is correct. If the address contains special characters or spaces, the link may not open. In addition, if the link address changes or the target file has been moved or deleted, the link will not be opened.

Outlook freezes when inserting hyperlink Outlook freezes when inserting hyperlink Feb 19, 2024 pm 03:00 PM

If you encounter freezing issues when inserting hyperlinks into Outlook, it may be due to unstable network connections, old Outlook versions, interference from antivirus software, or add-in conflicts. These factors may cause Outlook to fail to handle hyperlink operations properly. Fix Outlook freezes when inserting hyperlinks Use the following fixes to fix Outlook freezes when inserting hyperlinks: Check installed add-ins Update Outlook Temporarily disable your antivirus software and then try creating a new user profile Fix Office apps Program Uninstall and reinstall Office Let’s get started. 1] Check the installed add-ins. It may be that an add-in installed in Outlook is causing the problem.

How to replace a URL address in a string with a hyperlink in PHP using regular expressions How to replace a URL address in a string with a hyperlink in PHP using regular expressions Jun 22, 2023 pm 02:22 PM

With the popularity of the Internet, people are increasingly inseparable from the Internet in their daily lives, and they increasingly need the support of web pages. In web pages, a very common operation is to convert the URL address into a hyperlink. In PHP, we can use regular expressions to achieve this operation. Next, let us take a look at the specific implementation method. 1. Use regular expressions to match URLs. Before using regular expressions to replace URLs with hyperlinks, we need to use regular expressions to match URLs. The specific matching rules are as follows: $patter

Tutorial on how to insert hyperlinks into PPT slides to achieve skipping playback Tutorial on how to insert hyperlinks into PPT slides to achieve skipping playback Mar 26, 2024 pm 02:51 PM

1. Open a PPT, or make a PPT that requires hyperlinks. 2. Select the content that needs to be inserted into a hyperlink. For example, we select the word &quot;flower&quot; and insert a hyperlink into it. 3. Click Insert in the menu bar, find the Hyperlink in the Link column, and click the hyperlink. 4. A window will appear, with the link on the left to select the location in this document, and then each slide in the PPT will appear. 5. You can select the slide you want to link, click once, and the preview mode of this slide will appear on the right. 6. With the hyperlink, the font color will change. We only need to click on the hyperlinked word when playing the slide, and the slide will automatically play to the slide we linked to.

Do you know how to set up ppt hyperlinks? Do you know how to set up ppt hyperlinks? Mar 20, 2024 am 11:40 AM

PPT hyperlinks can quickly go to a specified website or open a specified file, or jump directly to a certain page, improving efficiency and making playback more flexible. So, how do we set up hyperlinks? Here I will share with you how to set up hyperlinks in ppt. Next, learning is about to begin. Are you ready, students? The steps are as follows: 1. First, we need to open the Microsoft PowerPoint slide on the computer; then, we enter the text content we want to set a hyperlink in the slide. (As shown in the picture) 2. Next, we use the mouse to select the text content we want to set a hyperlink; then, we click the [right button] of the mouse and select the [Hyperlink] option in the [drop-down menu].

See all articles