anchors in html

1. Anchor point settings for jumping within the page

Jumping within a page requires two steps:

method one:

①: Set an anchor link <a href="#miao"> to find the cat </a>; (Note: the attribute value of the href attribute should be preceded by #)

②: Set the anchor point <a name="miao"></a> at the required position in the page; (Note: a name attribute should be written in the a tag, and the attribute value should be the same as the attribute value of the href in ①. Add #) in the label to fill in the necessary text as needed, generally do not write the content

Method Two:

①: Same as ① in Method 1

②: Set the position of the anchor point <h3 id="miao">Meow star base</h3>; add an id attribute to the label of the position to be jumped to. The attribute value is the same as the attribute value of the href in ①. add#

Method 2 does not need to add a separate a tag to specifically set the anchor point, just add an id to the tag in 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"> Go to Cats </ a ></ li > 
        < li >< a href ="#wang" > Go to Cats </ a ></ li > 
        < li >< a href ="#meng" > Others Cute thing </ a ></ li > 
    </ ul >

    < a name ="miao" ></ a > <!-- Set anchor method 1 --> 
    < h3 id ="miao" > Meow star base </ h3 > <!-- Set anchor method 2 -- > 
    < p > Meow Meow ~ </ p > 
    < p > Meow Meow ~ </ p > 
    < p > Meow Meow ~ </ p > 
    < p > Meow Meow ~ </ p > 
    < p >Meow Meow Meow~ </ p> 
    < p > Meow Meow Meow ~ </ p >
    
    < a name ="wang" ></ a > 
    < p > Wang Wang Wang ~ </ p > 
    < p > Wang Wang Wang ~ </ p > 
    < p > Wang Wang Wang ~ < / p > 
    < p > Wang Wang Wang ~ < / p > p > 
    < p > Wang Wang Wang ~ </ p > 
    < p > Wang Wang Wang ~ </ p >

    < a name ="meng" ></ a > 
    < p > Meng Meng Meng ~ </ p > 
    < p > Meng Meng Meng ~ </ p > 
    < p > Meng Meng Meng ~ </ p > 
    < p > Meng Meng Moe~ </ p > 
    < p > Moe Moe Moe~ </ p > 
    < p > Moe Moe Moe~ </ p > 
</ body > 
</ html >

2. Jump across pages

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

Such as: <a href="Celebrity pet assembly number.html#miao">Jump to the cute pet assembly number page</a>

②: An anchor point should be set in the page to be jumped to. See step ② of one method, and choose one of the two methods.

Guess you like