超链接a标签

超链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。将文档链接到其他文档或资源,链接到文档的特定部分。

(1)语法

```html

<a href="">文字或图片</a>

```

(2)语义

超链接

(3)默认样式

- 不独占一行

- 默认当前窗口打开

- 默认带有下划线、文字颜色

![](D:/web/2021/2021一阶段资料/day02/笔记/media/day02_04.png)

(4)超链接属性

- href属性

- 作用:指定链接跳转的地址

```html

<a href="http://www.jd.com">京东商城(文字链接)</a>

<a href="4.例-导航.html" target="_blank"><img src="pic.png" alt="">(图片链接)</a>

```

- target属性

- 作用:指定目标地址的打开方式

- 取值

- `_blank`新窗口打开

- `_self`当前窗口打开(默认值 )

```html

<a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>

```

![day02_05](images/day02_05.png)

- title属性

- 作用:定义提示文本,将鼠标悬停在链接上会显示标题作为工具提示

![day02_06](images/day02_06.png)

**(5)链接的类型**

- 空链接

- 描述:如果当时没有确定链接的目标时使用空链

```html

<a href="#">商品</a>

```

- 外部链接

- 描述:链接到站外其他 网站的链接 (绝对地址)

```html

<a href="https://www.baidu.com"> 百度 </a>

```

- 内部链接 (相对地址)

- 描述:网站内部页面之间的相互链接。直接链接内部页面的名称

```html

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

```

- 下载链接

- 描述:如果href里面的地址是一个文件或压缩包,会下载这个文件。

- 代码演示

```html

<a href="1.txt">下载文本文件</a>

```

**(6)锚点链接**

描述:当我们点击锚点链接时,可以快速定位到页面中的某个位置。

- 跳转至当前页面指定位置的锚点

- 语法:

```html

定义目标:<p id="box"></p>

定义跳转:<a href="#box"></a>

```

- 跳转至其它页面的锚点

- 语法:

```html

定义目标:a.html页面的 <div id="box"></div>

定义跳转:<a href="a.html#test"></a>

```

**总结:**重点掌握内部链接,外部链接,锚点链接。

猜你喜欢

转载自blog.csdn.net/pbaiking/article/details/129228405
今日推荐