Use of H5 links-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Use of H5 links

php中世界最好的语言

Apr 19, 2018 pm 05:12 PM

html5 use Link

This time I will bring you the use of H5 links. What are the precautions when using H5 links? The following is a practical case, let’s take a look.

HTML link can be regarded as a manifestation of the vitality of a HTML document. Only HTML links can make the entire HTML document more flexible. You can jump at will and find the content you like. .

HTML uses hyperlinks to connect to another document on the web. Links can be found on almost every web page. Click a link to jump from one page to another.

HTMLHyperlink:

HTML uses the tag 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 a certain part of the current document.

When you move your mouse pointer over a link on a web page, the arrow changes into a little hand.

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

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

An unvisited link appears in blue font and underlined.

Visited links appear purple and underlined.

When you click a link, it 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 link syntax:

<a href="url">链接文本</a>

Copy after login

The href attribute describes the target of the link.

Example:

<a href="/"></a>

Copy after login

Implement code display: Visit Yiju Tutorial

The link above can take users to the homepage of Yiju Tutorials.

What we should note here is that "link text" does not have to be text. Images or other HTML elements can become links.

HTML link - target attribute

Using the target attribute, you can define where the linked document should be displayed.

<a href="http://www.php.com/" target="_blank">访问</a>

Copy after login

Define the link as the link homepage, and the target attribute is blank, which means that the link will open the homepage in a new window.

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 special way and are not displayed in HTML documents, so they are hidden from readers.
Example:

Insert ID in HTML document:

<a id="tips">有用的提示部分</a>

Copy after login

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

<a href="#tips">访问有用的提示部分</a>

Copy after login

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">
访问有用的提示部分</a>

Copy after login

Things to note:

Note: Always add forward slashes to subfolders. If you write the link like this: href="http://www.runoob.com/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.111cn.com/html/"

Image link example:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>)</title> 
</head>
<body>
<p>创建图片链接:
<a href="/wy/148886.htm">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="/wy/148886.htm">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>

Copy after login

Out of the box example:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title> </title> 
</head>
<body>
<p>跳出框架?</p> 
<a href="http://www.php.com/" target="_top">点击这里!</a> 
</body>
</html>

Copy after login

The current specified page links to the specified location:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>

Copy after login

I believe you are very excited after seeing the examples. Quickly open the editor and take a look.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!