整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML常用基础标签:图片与超链接标签全解!

这里是云端源想IT,帮你轻松学IT”

嗨~ 今天的你过得还好吗?

无论种子散落在何处

都会长出一棵树

向着天空,挣扎生长

- 2024.03.15 -

HTML图片标签和超链接标签是网页开发中常用的两种标签,它们分别用于在网页中插入图片和创建超链接。

我们每天都在互联网世界中与各种形式的信息打交道。你是否好奇过,当你点击一篇文章中的图片或链接时,是什么神奇的力量让你瞬间跳转到另一个页面?



今天,就让我们一起揭开HTML图片标签和超链接标签的神秘面纱。


一、HTML图片标签

HTML图片标签是一种特殊的标记,它可以让网页显示图像。通过使用图片标签,我们可以在网页上展示各种图片,从而让网页更加生动有趣。

1、语法结构

HTML图片标签的语法结构非常简单,只需要使用<img>标签,并在其中添加src属性,指定图片的路径即可。

例如:

<img src="image.jpg" alt="描述图片的文字">


2、图片格式

HTML支持多种图片格式,包括JPEG、PNG、GIF等。不同的图片格式具有不同的特点,可以根据需要选择合适的格式。


3、图片属性

除了src属性外,HTML图片标签还有其他一些常用的属性,如:

  • alt属性用于描述图片的内容,当图片无法显示时,会显示该属性的值;
  • width和height属性用于设置图片的宽度和高度;
  • title属性用于设置鼠标悬停在图片上时显示的提示信息。



4、网络图片的插入

当需要插入网络上的图片时,可以将图片的URL地址作为src属性的值。例如:

<img src="https://www.example.com/images/pic.jpg" alt="示例图片">


5、本地图片的插入

当需要插入本地图片时,可以将图片的相对路径或绝对路径作为src属性的值。


6、相对路径与绝对路径

在这里再给大家介绍两个概念,相对路径与绝对路径,搞懂它们,我们在插入本地图片时也能得心应手。

相对路径:

相对于当前HTML文件所在目录的路径,包含Web的相对路径(HTML中的相对目录)。例如,如果图片文件位于与HTML文件相同的目录中,可以直接使用文件名作为路径:

<img src="pic.jpg" alt="本地图片">


绝对路径:

图片文件在计算机上的完整路径(URL和物理路径)。例如:

<img src="C:/Users/username/Pictures/pic.jpg" alt="本地图片">


二、HTML超链接标签

超链接标签是HTML中另一个重要的元素,它可以实现网页之间的跳转。通过使用超链接标签,我们可以将文本、图片等内容设置为可点击的链接,方便用户在不同页面之间自由切换。

1、语法结构

超链接标签使用<a>标签表示,需要在href属性中指定链接的目标地址。

<a href="目标地址" title="标题">文本内容</a>

例如:

<a href="https://www.ydcode.cn/">点击访问示例网站</a>


示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例网站</title>
</head>
<body>
<h1>欢迎来到云端源想!</h1>
<p>这是一个简单的HTML页面,用于展示一个网站的结构和内容。</p>
<a href="https://www.ydcode.cn/">点击访问示例网站</a>
</body>
</html>

2、链接目标

超链接可以链接到不同的目标,包括其他网页、电子邮件地址、文件下载等。通过设置href属性的值,可以实现不同的链接目标。



3、链接属性

超链接标签还有一些其他常用的属性,如:

  • target属性用于设置链接打开的方式,可以选择在新窗口或当前窗口打开链接;
  • title属性用于设置鼠标悬停在链接上时显示的提示信息;
  • rel属性用于设置链接的关系,例如设置nofollow值可以告诉搜索引擎不要跟踪该链接。

想要快速入门前端开发吗?推荐一个前端开发基础课程,这个老师讲的特别好,零基础学习无压力,知识点结合代码,边学边练,可以免费试看试学,还有各种辅助工具和资料,非常适合新手!点这里前往学习哦!云端源想

4、锚点链接标签

锚点标签用于在网页中创建一个可以点击的锚点,以便用户可以通过点击锚点跳转到页面中的其他部分。

锚点标签的语法为:

<a name="锚点名称"></a>


例如,可以在页面中的一个段落前添加一个锚点:

<a name="section1"></a>
<p>这是一个段落。</p>


然后,可以在页面的其他位置创建一个指向该锚点的超链接:

<a href="#section1">跳转到第一节</a>

当用户点击“跳转到第一节”链接时,页面将滚动到名为“section1”的锚点所在的位置。



示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例网站</title>
</head>
<body>
<h1>欢迎来到云端源想!</h1>
<p><a href="#section1">跳转到第一节</a></p>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>这是第三个段落。</p>
<a name="section1"></a>
<p>这是第一节的内容。</p>
</body>
</html>

三、总结

HTML图片标签和超链接标签是构建网页的两个重要元素,它们不仅丰富了网页的内容,还为网页添加了动态和互动性。


通过学习和掌握这两个标签的使用方法,我们可以创建更加丰富和互动的网页,为用户提供更好的浏览体验。无论是展示精美的图片,还是实现页面之间的跳转,HTML图片标签和超链接标签都能帮助我们实现更多的创意和功能。


让我们一起探索HTML的奇妙世界,创造出更加精彩的网页吧!


我们下期再见!

END

文案编辑|云端学长

文案配图|云端学长

内容由:云端源想分享

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 链接

如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。

  • 访问过的链接显示为紫色并带有下划线。

  • 点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样::

<a href="url">链接文本</a>

href 属性描述了链接的目标。.

实例

<a href="http://www.runoob.com/">访问菜鸟教程</a>

上面这行代码显示为:: 访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

实例

<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

<a href="http://www.runoob.com/html/html-links.html#tips">

访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.runoob.com/html/"。

图片链接

如何使用图片链接。

在当前页面链接到指定位置

如何使用书签

跳出框架

本例演示如何跳出框架,假如你的页面被固定在框架之内。

创建电子邮件链接

本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

建电子邮件链接 2

本例演示更加复杂的邮件链接。

HTML 链接标签

标签描述
<a>定义一个超级链接

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

1)定义n初始值0,

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>

(2)定义自加按钮,展示n的值,和判断结果

<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>

1、v-show

<h1 style="color: red">使用v-show进行条件渲染</h1>
<h3 v-show="n == 1">使用v-show进行条件渲染</h3>

2、v-if

<h1 style="color: red">使用v-if进行条件渲染</h1>
<h3 v-if="n == 1">使用v-if进行条件渲染</h3>

3、v-if v-else-if v-else

<h1 style="color: red">使用if else-if else进行条件渲染 </h1>
<h3 v-if="n === 1">使用v-if进行条件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if进行条件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if进行条件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if进行条件渲染 if else-if - v-else</h3>

4、template

<h1 style="color: red">使用template v-if进行条件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
</template>

执行结果

笔记分享

<pre v-show="true">
    条件渲染:
    1、v-if
        写法:
            (1)v-if = "表达式"
            (2)v-else-if = "表达式"
            (3)v-else = "表达式"
        适用于:切换频率较低的场景
        特点:不展示的DOM元素将被直接删除
        注意:v-if和v-else-if、v-else一起使用的时候,要求结构不可以被打断
    2、v-show
        写法:v-show = "表达式"
        适用于:切换频率较高的场景
        特点:不展示的DOM元素未被移除,使用样式进行隐藏
    3、备注
        使用v-if时,元素可能无法获取到,使用v-show是可获取到的
    4、使用template v-if
        写的时候template对内容进行了包裹,
        等最终页面渲染的时候,将把template标签删掉,
        这也就是说不破坏原来的样式。
        但是template只能配合v-if进行使用。
</pre>

源码截图