首页 前端知识 HTML小白入门学习3(超链接、锚点功能)

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

2024-05-20 14:05:33 前端知识 前端哥 881 937 我要收藏

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个补充:

空链接的写法

        <a href="#">空链接</a>

        <a href="JavaScript:;">空链接2</a>

注:空链接的意思就是点击超链接模块没有跳转,默认是在当前页面中,如果空链接设在底部,点击会回到顶部,但是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选择器,感谢支持)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8945.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!