Home >Web Front-end >Front-end Q&A >How to set anchor point in html

How to set anchor point in html

藏色散人Original: 2021-05-25 10:56:1724932browse

htmlHow to set anchor points: 1. Set an anchor point link "0a9b0e264ddbf322cec2bf7d1441f351...5db79b134e9f6b82c0b36e0489ee08ed"; 2. Place it at the required position on the page Set the anchor point; 3. Append "# anchor name" after the path in href.

The operating environment of this article: Windows7 system, HTML5 version, DELL G3 computer

Anchor point in html

Anchor setting for jump within the page

Jump within the page requires two steps:

Method one:

①: Set an anchor link 0a9b0e264ddbf322cec2bf7d1441f351Go to find cats5db79b134e9f6b82c0b36e0489ee08ed; (Note: Add # at the beginning of the attribute value of the href attribute)

②: On the page Set the anchor point at the required position 90dde8fa6ab21c20f2955ffc174843c05db79b134e9f6b82c0b36e0489ee08ed (Note: A name attribute must be written in the a tag, and the attribute value must be the same as the href attribute value in ①. Do not add #) Fill in the necessary text as needed in the tag, generally do not write the content

Method 2:

①: Same as method 1 ①

②: Set the position of the anchor point 69448d96d5155946085bc042e89e96ceMeow Star Base39528cedfa926ea0c01e69ef5b2ea9b0; Add an id attribute to the label of the location you want to jump to. The attribute value is the same as the href attribute value in ①, without adding

# Method 2 does not need to add a separate a tag to specifically set the anchor point, just add an id to the tag at the required position.

Small case:

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>萌宠集结号</title>
</head>
<body>
    <ul>
        <li><a href="#miao">去找喵星人</a></li>
        <li><a href="#wang">去找汪星人</a></li>
        <li><a href="#meng">其他萌物</a></li>
    </ul>
    <a name="miao"></a><!--设置锚点方法1-->
    <h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    
    <a name="wang"></a>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <a name="meng"></a>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
</body>
</html>

Cross-page jump

①: Set anchor link , append after the path in href: # anchor name, you can

For example: cbdc8209c19d356e2680ead098d43b4cJump to Cute Pet Collection Page16ef26f8b7ea0fc89bdf90e275a93e5d

②: Set the anchor point in the page you want to jump to. For the method, see step ②. Choose one of the two methods.

Recommended study: "HTML Video Tutorial"

The above is the detailed content of How to set anchor point in html. For more information, please follow other related articles on the PHP Chinese website!

html5 html href

Statement：

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

Previous article：How to hyperlink html imagesNext article：How to hyperlink html images

See more

How to set anchor point in html

Related articles