HTML小白入门学习3（超链接、锚点功能）

最新推荐文章于 2024-09-17 11:43:19 发布

苦中苦。

最新推荐文章于 2024-09-17 11:43:19 发布

阅读量1.1k

点赞数 3

文章标签：学习 html5 css3

本文链接：https://blog.csdn.net/Antoine__/article/details/127111990

版权

http://t.csdn.cn/EY5xE（入门学习1）

http://t.csdn.cn/zpRi9 （入门学习2）

前面学习文章的链接我给大家放在这里哦，大家可以巩固学习

一、超链接

超链接是什么？我们可以从3个功能，2个属性和1个补充来学习了解它，超链接是行内元素，特殊的行内元素，它里面什么都能放，能放块元素，行内元素，行内块元素，除了它自己。超链接可以是任何内容,可以是一个字，一段文字，图片，表格。

3个功能：

1、从一个页面跳到另一个页面

2、当前页面进行跳转

3、下载

2个属性：

1、href 属性指定超链接跳转的地址

绝对地址完整的网址无论你的超链接在哪里，只要点击，就可以跳到对应的网站

相对地址本地的页面跟你的超链接文件的位置有关系

./ 你在的文件跟你要去的文件在同一目录下 ./可以省略，默认是加了./

../ 跳出当前的文件夹，来到上一级目录下（前面说的 ./ 用法在这里补充了哈）

相对路径的跳转方式和很多标签标签的跳转都有关系，例如图片、音视频等等

2、target属性指定超链接新开页面的打开方式

可选值：

_self 在当前页面打开超链接

_blank 新开一个页面打开超链接

1个补充：

空链接的写法

注：空链接的意思就是点击超链接模块没有跳转，默认是在当前页面中，如果空链接设在底部，点击会回到顶部，但是href属性后面的属性值不可以不写，不写不符合规范，可以先用 # 号或者JavaScript:;代替写着，等到要插入链接是再更改。

代码及效果展示：

二、锚点功能

锚点功能就是在当前页面进行跳转

点击超链接实现去顶部去底部去中间去任意的位置

去顶部：href里写 #

去任意的位置：给你要去位置打个id属性，设置任意id属性值

href里：#id属性值

设置id属性值：

1、id属性值，是独一无二的，不能重复使用

2、id属性值，是自定义设置，但不能以数字开头

3、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="#dibu">去底部</a>
    <a href="#zj">去中间</a>
    <a href="#big">去2/3位置</a>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p id="zj">
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p id="big">
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p>
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <p id="dibu">
      如李畴白生孔曰书联怎掉案，临脱答负志贤只杨作今尚相尹事我后我三同，搏定主愚说魂母的尺氏，能国向褒览二薪，学打全三新无三有不家妙法法家场不了孔老，下哥使不，时松然会吾郭天后讨未人而，游性王挟，嗣说生作自，位才的安看罪在也策用策学谭对招之以尘，见变谢说应，让。
    </p>
    <a href="#">去顶部</a>
  </body>
</html>

（PS：到这里一些常用的标签就跟大家一起学习完了，后面我学习到了其他的会在这里给大家更新，后面我会为大家更新css选择器，感谢支持）