Use of H5 links

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>

The href attribute describes the target of the link.

Example:

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

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>

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>

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

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

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:

nbsp;html>

 
<meta> 
<title>)</title> 


<p>创建图片链接:
<a>
<img  src="/static/imghwm/default1.png" data-src="smiley.gif" class="lazy" alt="Use of H5 links" ></a></p>
<p>无边框的图片链接:
<a>
<img  src="/static/imghwm/default1.png" data-src="smiley.gif" class="lazy" alt="Use of H5 links" ></a></p>

Out of the box example:

nbsp;html>

 
<meta> 
<title> </title> 


<p>跳出框架?</p> 
<a>点击这里!</a> 

The current specified page links to the specified location:

nbsp;html>


<meta>
<title></title>


<p>
<a>查看章节 4</a>
</p>
<h2 id="章节">章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2 id="章节">章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2 id="章节">章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2 id="a-章节-a"><a>章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<h2 id="章节">章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2 id="章节">章节 6</h2>
<p>这边显示该章节的内容……</p>

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!

Recommended reading:

jquery implements select all and inverts single selection

jQuery operates background color gradient animation effect

jQuery plug-in FusionCharts draws pie chart

The above is the detailed content of Use of H5 links. For more information, please follow other related articles on the PHP Chinese website!