HTML基础---认识标签（a,img,base）

最新推荐文章于 2025-03-15 00:27:53 发布

原创最新推荐文章于 2025-03-15 00:27:53 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #标签 #界面

WEB 同时被 2 个专栏收录

19 篇文章

订阅专栏

HTML

14 篇文章

订阅专栏

本文介绍了HTML中<a>标签的多种用法，包括创建超链接、在新窗口打开链接、邮件链接等，以及<img>标签的使用方法。

一：`<a>`标签，链接到另一个界面

使用`<a>`标签可实现超链接，语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

`title`属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

默认只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）

a标签不仅可以让文字可以点击, 图片也能够被点击
一个a标签必须有一个href属性
当a标签的href属性指定的是一个URL地址, 那么必须在地址前面加上http://或https://
a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址

<ul>
    <li><a href="http://www.baidu.com" title="百度">点击跳转百度</a> </li>
    <li><a href="http://blog.youkuaiyun.com/feng2qing?viewmode=list" title="Stevin三天三夜的专栏">Stevin三天三夜</a>
</ul>

显示效果：点击在当前页进行跳转

这里写图片描述

二：`<a>`标签，在新建浏览器中打开链接

`<a>`标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

<a href="目标网址" target="_blank">click here!</a>

<ul>
    <li><a href="http://www.baidu.com" target="_blank" title="百度">点击跳转百度</a> </li>
    <li><a href="http://blog.youkuaiyun.com/feng2qing?viewmode=list" title="Stevin三天三夜的专栏">Stevin三天三夜</a>
</ul>

显示效果：点击百度在新界面打开

这里写图片描述

三：使用mailto在网页中链接Email地址

这里写图片描述

注意：如果`mailto`后面同时有多个参数的话，第一个参数必须以“`?`”开头，后面的参数每一个都以“`&`”分隔。

<ul>
    <a href="mailto:shaofeng7998@foxmail.com?cc=1170197998@qq.com&bcc=1170197998@qq.com&subject=主题&body=邮件">点击发送</a>
</ul>

显示效果：点击会唤起本地邮箱软件

这里写图片描述

四：`<img>`标签，为网页插入图片

语法：`<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">`

src：标识图像的位置；可以是本地路径或者网络路径。
alt：alternate的缩写，指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
图像可以是GIF，PNG，JPEG格式的图像文件。
如果手动指定了图片的高度和宽度，那么可能会导致图片变形，此时可以这样做：高度和宽度只指定一个，指定宽度时，高度会自动算出，不会变形。反之指定高度的时候宽度也会自动算出。都没有指定的时候，会按照默认的宽高来显示

<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=235732466,99834328&fm=23&gp=0.jpg" alt="Imgae" title="GIF图">

显示效果：

这里写图片描述

五：base标签

base标签就是用来统一的当前网页中所有的超链接(a标签)如何打开，必须写在head标签的开始标签和结束标签之间

如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行

<base target="_blank">  //在新标签中打开
<base target="_self">   //在当前页中打开

<head>
    <meta charset="UTF-8">
    <title>11-base标签</title>
    <base target="_blank">
</head>
<body>
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="http://blog.youkuaiyun.com/feng2qing/article/list/2">Blog</a>
</body>

显示效果：

这里写图片描述
- 百度在当前页面打开，Blog在新标签打开

六：假链接

假链接点击之后不会发生界面的跳转，有两种格式`#`，`javascript`，前者点击会回到网页顶部，后者不会发生变化

<a href="#">点我调到顶部</a>
<a href="javascript:">点我不发生变化</a>

显示效果：

这里写图片描述

七：锚点

通过a标签跳转到网页指定位置

给目标位置设置id属性
把目标位置的id值告诉a标签
a标签进行位置跳转是没有动画的

<!--点击a标签的文字会跳转到下面p标签的位置-->
<a href="#center">跳转到中部</a>  
<p id="center">我是中部</p>

a标签除了可以跳转到当前界面的指定位置以外, 还可以跳转到其他界面的指定位置

<!--点击a标签的文字会跳转到DEMO界面id = bottom的位置，并且是在新标签中打开-->
<a href="DEMO2.html#bottom" target="_blank">跳转到DEMO2界面</a>
<h2 id="bottom">DEMO2界面</h2>

HTML基础---认识标签（a,img,base）

一：<a>标签，链接到另一个界面

使用<a>标签可实现超链接，语法：

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

默认只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）

显示效果：点击在当前页进行跳转

二：<a>标签，在新建浏览器中打开链接

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

显示效果：点击百度在新界面打开

三：使用mailto在网页中链接Email地址

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

显示效果：点击会唤起本地邮箱软件

四：<img>标签，为网页插入图片

语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

显示效果：

五：base标签

base标签就是用来统一的当前网页中所有的超链接(a标签)如何打开，必须写在head标签的开始标签和结束标签之间

显示效果：

六：假链接

假链接点击之后不会发生界面的跳转，有两种格式#，javascript，前者点击会回到网页顶部，后者不会发生变化

显示效果：

七：锚点

通过a标签跳转到网页指定位置

一：`<a>`标签，链接到另一个界面

使用`<a>`标签可实现超链接，语法：

`title`属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

二：`<a>`标签，在新建浏览器中打开链接

`<a>`标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

注意：如果`mailto`后面同时有多个参数的话，第一个参数必须以“`?`”开头，后面的参数每一个都以“`&`”分隔。

四：`<img>`标签，为网页插入图片

语法：`<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">`

假链接点击之后不会发生界面的跳转，有两种格式`#`，`javascript`，前者点击会回到网页顶部，后者不会发生变化