HTML超链接

html链接简介

由于疫情影响,学校的期末考试都提前了,每天的时间都很紧张,好多都要复习,所以学习这种课外的知识的时间也就会很难安排了,但是我一定会坚持的,加油啊。
现在开始写知识点,很多页面网页都由很多超链接,是一个非常基本的元素,轻轻一点就可以跳转到其他页面。
超链接(hyperlink),它可以让我们在各个独立的页面间方便的跳转

html标签

语法:

链接文本

超链接有两种形式:图片超链接、文本超链接;
图片超链接:




    
    html图片超链接


    

实现效果:
HTML超链接_第1张图片
点击图片之后将跳转到百度首页。
HTML超链接_第2张图片
文本超链接:




    
    html图片超链接


    百度首页

实现效果:
image.png

target属性

默认的时候,链接都是在本窗口打开。通过target属性,可以去修改打开的方式,

target属性的取值有四种:

属性值 说明
_self 默认值,在原来窗口打开链接
_blank 在新窗口打开链接
_parent 在父窗口打开链接
_top 在顶层窗口打开超链接

示例:




    
    html图片超链接


    百度首页
    
默认值,在原来窗口打开链接
在新窗口打开链接
在父窗口打开链接
在顶层窗口打开超链接

在这里四个属性中,我们掌握_blank就可以了。

html内部链接

在HTML中,超链接有两种:一种是外部链接;另外一种是内部链接。外部链接指向的是“外部网站的页面”,而内部链接指向的是“自身网站的页面”,就是自己写的网站的链接。




    
    html图片超链接


    百度首页
    
默认值,在原来窗口打开链接
在新窗口打开链接
在父窗口打开链接
在顶层窗口打开超链接
页面一



    
    页面1


    

这里是页面1

意思就是跳转到自己文件夹下面的html网页

锚点链接

这种链接是在当前页面的滚动的一种一种链接,在当前页面过长时,点击该链接就可以跳转到自己想要看的部分,而不需要慢慢滑动。
示例一、使用div的id属性定位,可以对任何标签来定位。




    
    


    
    ……
……
……
……
……
……
……
……

推荐语言

  • c++
  • Java
  • Python
……
……
……
……
……
……
……
……

推荐好的书籍

  • 鲁迅-阿Q正传
  • 平凡的世界
  • 明朝那些事
……
……
……
……
……
……
……
……

推荐的好的电影

  • 蜘蛛侠系列
  • 钢铁侠系统
  • 复仇者联盟
回到顶部

实现效果:
HTML超链接_第3张图片
我这里说明几点要注意的地方,写锚点链接的时候,href后面的链接,在前面要加上“#”,表示它是锚点链接。每次点击锚点链接,注意看浏览器上方的地址,会发生改变。
当我点击“好看的推荐的好看的电影”标签时,地址变化为:
image.png
原来的地址是:
image.png

你可能感兴趣的:(html5链接)