Introduction notes of Xiaobai front end (10), How to set the hyperlink inside the website ?

Hello everyone , Welcome to freecodecamp HTML Topic No 10 piece .

Today's challenge is still about a label .

Background knowledge
a In addition to pointing to an external website , It can also be used to jump to a certain area inside the website . Everyone should have realized this , When we look at a long blog , We often hyperlink to the specific position in the article by clicking on the subtitle .

Want to create an internal link , It also needs to be used href This attribute , We set it to '#' Add specific id In the form of . there id yes HTML One of the common properties , Any label can add id.id As an identifier , It can be used as CSS The setting goal of the style , It can also be used as a The jump target of the tag . It's important to note that each element is given id It should be the only .

Now we're going to show an example of passing id An example of completing an internal jump :

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

We give h2 The label gives a id attribute , When we click a When labeling , It will jump to this id Marked area .

The question
By modifying the href Attribute to change the external tag into the internal tag in the website '#footer', And take the corresponding text from "cat photos" Change to "Jump to Bottom".

remove a In the label target=_blank attribute , Because it allows users to open a new page when they click on a link .

After the <footer> Add one to the label for "footer" Of id attribute .

requirement

  • There can only be one website a label
  • There can only be one website footer label
  • a The tag needs to have a point to "#footer" Of href attribute
  • a The label can't have target attribute
  • a The text of the label should be "Jump to Bottom"
  • footer The label needs to have one for "footer" Of id attribute
    Editor
<h2>CatPhotoApp</h2>
<main>
<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
</main>
<footer>Copyright Cat Photo App</footer>

answer
The challenge today is simple , In fact, it is to modify it according to the way of setting internal jump html Code . There are three main steps , One step is in footer Add the target of our jump to the tag , That is to say id attribute . And then a Modify the target of the jump in the tag , From external links to internal id. Finally, let's change it a The text information of the label is enough .

<h2>CatPhotoApp</h2>
<main>
<a href="#footer">Jump to Bottom</a>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
</main>
<footer id="footer">Copyright Cat Photo App</footer>

If you want to try it yourself, don't forget to click the reading text at the end of the article to jump ~

This is the end of the article , Let's give it a triple before we go ~