HTML-6.1-超链接

最新推荐文章于 2024-10-22 15:17:33 发布

原创最新推荐文章于 2024-10-22 15:17:33 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #超链接 #锚连接

WEB前端同时被 2 个专栏收录

61 篇文章

订阅专栏

HTML

11 篇文章

订阅专栏

本文深入讲解HTML中的超链接使用，包括超链接的基本属性如href、title、name和target，以及如何创建外部链接、锚点链接、邮件链接。同时，文章还提供了关于超链接使用的注意事项，帮助读者更好地理解和运用HTML超链接。

HTML-6.1-超链接

一：超链接的属性
二：外部链接
三：锚连接
四：邮件连接
五：超链接的注意

一：超链接的属性

href
- 目标URL
title
- 悬停文本
name
- 主要用设置一个锚点的名称
target
- _self：在同一个页面中显示（默认值）
- _blank：在新的窗口中打开
- _parent：在父窗口中显示
- _top：在顶级窗口中显示

二：外部链接

连接到外部文件
target="_blank"
- 在新窗口打开跳转的页面

<!--
    a 是英语 anchor "锚"的意思
    就像这个页面往另外一个页面扔出了一个锚
    是一个文本级的的标签
     href 是英语 hypertext reference 超文本地址的缩写
-->
<a href="http://www.baidu.com" target="_blank">点击跳转页面</a>

三：锚连接

指给超链接起一个名字
- 作用是在本页面或者其他页面的不同位置进行跳转
- 网页底部有一个向上箭头，点击箭头后回到顶部
顶部的锚点叫做"top"，然后再底部设置超链接
- #号不能忘记，否则将跳转到top这个文件或文件夹中

<!-- 定义一个名称为top的锚点连接 -->
<a name="top"></a>

<! -- 网页的主题内容，省略>

<!-- 返回页面顶部top锚点的连接 -->
<a href="#top">返回顶部</a>

<!-- 
跳转到其他页面的顶部位置
试了下_blank在新窗口打开行不通 
-->
<a href="a.html#top">返回另一个页面的顶部</a>

四：邮件连接

<a href=“mailto:352475920@qq.com”>点击进入我的邮箱</a>
点击之后，会弹出outlook，作用不大

五：超链接的注意

分清楚img和a标签的各自属性
- <img src=“1.jpg” />
  - src：图片路径
  - alt：输入文本，当图片的路径错误时显示该文本内容
  - title：鼠标悬停时所显示的内容
- <a href=“1.html”></a>
  - href：目标URL
  - title：鼠标悬停时所显示的内容
  - name：主要用设置一个锚点的名称
  - target：打开方式
a 是一个文本级的标签
- 如果一个段落中的所有文字都能够被点击，那么应该是p包裹a

<body>
	<p>
    	<a href="">段落</a>
	</p>
</body>