Detailed explanation of what html anchors are-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed explanation of what html anchors are

PHPz

Apr 02, 2017 am 09:24 AM

Detailed explanation of what html anchors are

The first step in learning web knowledge is definitely HTML. What is the purpose of the anchor point of html?

To put it simply, for example, if you want to read a very long article accurately by segment, you can use anchor points.

Code:

<a href="#001">跳到001</a>
…文字省略
<a name="001" id="001" ></a>
…文字省略

Copy after login

In fact, the anchor point only needs name. The id is added to make it more compatible.

The value of href must be the same as name \ i d Consistent, "#" must be added in front. The above code is compatible in ie6/7 and ff, but not in ie8.

Because the value of our anchor point is empty, we can just add a space so as not to affect the appearance.

The following code can be compatible with ie8

<a href="#001">跳到001</a>
…文字省略
<a name="001" id="001" > & n b s p  </a>
…文字省略

Copy after login

Another question, do you want to display an anchor content of a certain page (such as: 321.html)?

The code is as follows

<a href="123.html#001">跳到001</a>
…文字省略
<a name="001" id="001" > & n b s p </a>
…文字省略

Copy after login

All code display:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚点示例</title>
</head>
<body>
<a name="A0" id="A0"></a>
<a href="#A1">网页第一部分</a>
<a href="#A2">网页第二部分</a>
<div style="height:900px; background:#CCCCCC"></div>
<a name="A1" id="A1"></a>1<a href="#A0">返回顶部</a>
<div style="height:900px; background:#999999"></div>
<a name="A2" id="A2"></a>2<a href="#A0">返回顶部</a>
<div style="height:900px; background:#666666"></div>
</body>
</html>

Copy after login

The above is the detailed content of Detailed explanation of what html anchors are. 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