HTML link

HTML uses a hyperlink to connect to another document on the web.

Links can be found in almost all web pages. Click a link to jump from one page to another.

Let us first look at a link example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<p><a href="/">PHP中文网</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.baidu.com/">百度</a>这是一个指向百度的链接</p>
</body>
</html>

Code running results:

HTML Hyperlink (Link)

HTML uses the tag <a> to set up hypertext links.

A hyperlink can be a word, a word, a group of words, or an image. You can click on these contents to jump to a new document or the current document. a certain part of.

When you move the mouse pointer over a link on the web page, the arrow will change into a small hand.

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

For example, if you link to the home page of the php.cn site, you can express it like this:

##<a href="http://www.php.cn">PHP Chinese website</a>

By default, the link will appear in the browser as:

A link that has not been visited is displayed in blue font and underlined.

Links visited by are colored purple and underlined.

When you click a link, the link appears red and underlined.

Note: If CSS styles are set for these hyperlinks, the display style will be displayed according to the CSS settings.

HTML Connection - id Attribute

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

Tip: Bookmarks are not displayed in any special way and are not displayed in HTML documents, so they are hidden from readers.

Insert ID in HTML document:

##<a id="tips">Useful tips section</a>

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

<a href="#tips"> ;Visit the Helpful Tips Section</a>

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

<a href="http://www.php.cn/html/html-links.html#tips">Visit the helpful tips section< /a>

Basic Notes

Note: Always add forward slashes to subfolders. If you write the link like this: href="http://www.php.cn/html", two HTTP requests will be generated to the server. This is because the server will add a forward slash to the address and then create a new request, like this: href="http://www.php.cn/html/".

Example

How to use image links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>创建图片链接:
    <a href="http://www.php.cn/">
        <img src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p>
<p>无边框的图片链接:
    <a href="http://www.php.cn/html/">
        <img border="0" src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p>
</body>
</html>

Use the <img> tag for pictures, and we will talk about

code running results later:

Clicking on the image above will jump to http://www.php.cn/

Continuing Learning

new file

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <p><a href="/">PHP中文网</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.baidu.com/">百度</a>这是一个指向百度的链接</p> </body> </html>

submit Reset Code

Automatic operation

HTML link

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]