非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.7 a元素本页面的锚点链接

小灰灰 2024-03-26 19:34 29阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  2 HTML常见的元素
         *   *  2.7 a元素本页面的锚点链接
             *   *  2.7.1 a元素 - 锚点链接

![在这里插入图片描述][154450c1cbb7484a9e5ac3c9ca519b37.png_pic_center]

#### 一 HTML+CSS ####

#### 2 HTML常见的元素 ####

##### 2.7 a元素本页面的锚点链接 #####

###### 2.7.1 a元素 - 锚点链接 ######

锚点链接可以实现：跳转到网页中的具体位置

锚点链接有两个重要步骤：

*  在要跳到的元素上定义一个id属性；
 *  定义a元素，并且a元素的href指向对应的id；

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 
 <a href="#one">跳到主题1</a>
 <a href="#two">跳到主题2</a>
 <a href="#three">跳到主题3</a>
 
 主题1
 
 
 
 
 
 
 主题2
 
 
 
 
 
 
 主题3
 
 
 
 
 
 
 </body>
 </html>

![在这里插入图片描述][130811b460ff41208c56c7411e336ae7.png_pic_center]

[154450c1cbb7484a9e5ac3c9ca519b37.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6fc5759736154fdb9008de829d346d98.png
[130811b460ff41208c56c7411e336ae7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9b5c5a78d4964a60aa9f56110c84ec22.png