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

Detailed explanation of what html anchors are

PHPz

Release： 2017-04-02 09:24:30

Original

2628 people have browsed it

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!