How to set anchor point in html-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to set anchor point in html

藏色散人

May 25, 2021 am 10:56 AM

html

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

How to set anchor point in html

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 Go to find cats; (Note: Add # at the beginning of the attribute value of the href attribute)

②: On the page Set the anchor point at the required position (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

Meow Star Base

; 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>

Copy after login

Cross-page jump

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

For example: Jump to Cute Pet Collection Page< /a>

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

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!

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