了解超文本

199 阅读2分钟

今天学习了利用<a>标签从一个页面链接到另一个页面。<a>元素的内容会成为web页面中可单击的文本。

超链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

<a>标签实现后,在页面内只需要点击相应的文字或图像就会跳转到新的页面。

  • href属性
用于指定链接目标的url地址。是必须属性,当标签应用href属性时就有了超链接的功能。
  • target属性
用于指定链接页面的打开方式,其中_self为默认值(在当前页面跳转至新页面),_blank为在新窗口中打开页面。

链接的分类

  • 外部链接
在页面内放外部链接是有语法要求的。

<a href="http://www.baidu.com">百度知道</a>

我在使用edge浏览器运行该页面时没有出现错误,但是尝试点入外部链接时会弹出找不到文件的提示。在尝试打开内部链接时没有问题。在论坛上也找不到类似的问题解决方案,等我找到解决方法后再更新。

用谷歌浏览器运行时一切正常。

  • 内部链接

网站内部页面之间的相互链接,直接链接内部页面名称即可。

<a href="index.html">首页</a>

  • 空链接
如果当前没有确定的链接目标,链接用#号代替。

<a href="#">简介</a>

  • 下载链接
如果href里面的地址是一个文件或者压缩包,会下载这个文件。

如果文件或压缩包与html文件处于同一级,只需要在href内写上名字即可。

<a href="html.zip">下载链接</a>

  • 网页元素链接
在网页内的各种元素,比如文本、图像、表格、音频、视频等都可以添加超链接。

下面用图片链接作为代码示例:

<a href="index.html"><img src="images.jpg"/></a>

  • 锚点链接

点击该链接可以快速定位到页面中的某个位置。

第一步:在链接文本的href属性中,设置属性值为#名字的形式,比如:

<a href="#two">第二部分</a>

#号后面带得名字可以自己决定,但是必须跟在#号后面。

第二步:找到目标位置标签,里面添加一个id属性 = 第一步中所命名的名字,比如:

<h2 id="two">第二部分内容</h2>