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中，大多数元素都被定义为块级元素或内联元素。

块级元素通常会独立成行，而内联元素会并排显示。

在我们学过的元素中，

块级元素如：<h> <p> <table>这些。

内联元素如<td><a><img>

下面我们通过练习来直观看看他们的区别。

块级元素展示，代码如下：

<body>
  <h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
  <p>块级元素与内联元素</p>
  <p>零基础自学网页制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如图：

内联元素展示如下

示例代码：这段代码被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>

效果如图：

其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。

HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

<div>与<span>标签

为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。

<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。

比如这个！

笔者第一个漫画作品

如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样

<div></div>元素的作用就是对页面进行了这样的分割。

实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：

强制为其添加边框分割：

大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。

通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？

html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：

通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

avaScript奇淫技巧：20行代码，实现屏幕录像

本文展示一个技巧，可以给任何网站、网页实现屏幕录像功能。

即使你不是网站的管理者，也可以给它添加录制功能。

方法如下：

第一步：

复制一段JS代码，这段代码是实现录像功能的：

var body = document.body;
body.addEventListener("click",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});

var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});

//录制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})

//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手动启动
mediaRecorder.start()
});

第二步：

打开任意网站，比如JShaman官网：

然后调出“Web开发者工具”，并切换到“控制台”。

第三步：

粘贴上面复制的JS代码，并按下回车。

回车后会显示出“undefined”：

第四步：

在网页任意地方点击鼠标，即可进行录屏操作。

这时会弹出一个窗口，供选择录制范围。

之后便开始录制了。

当需要停止录像时，点击”停止共享”就可以了。

停止录制后，刚刚录制的内容会自动保存成一个视频文件：

打开便可播放：

在这整个过程中，最重要的是第一步中的JS代码。

代码可自行阅读理解，大意是给document.body添加点击事件，当点击时，进行屏幕录像。

所以，只要保存那段代码，便可给任意网站添加录像功能。

如果想要修改触发条件，比如把鼠标点击改为鼠标双击，只需修改addEventListener中的事件名称即可。

例：改为双击：

var body = document.body;
body.addEventListener("dblclick",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});

var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});

//录制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})

//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手动启动
mediaRecorder.start()
});

如果在复制粘贴代码时，不想让别人看出你的代码是什么意思，还可以对以上代码进行混淆加密。

用JShaman对代码进行加密：

得到加密代码：

复制并使用这段代码，使用跟之前一样，但别人是无法理解代码功能的。

使用：

最后，给出加密后的代码，复制即可用，可用于任何网页。

(function(_0x18c0a3,_0x26d3ff){function _0x2105c7(_0xf72339,_0x2b6432,_0x33e2b2,_0x1dd921,_0x125a10){return _0x2e88(_0xf72339- -0x3d6,_0x33e2b2);}function _0x66761e(_0x1398ac,_0x4899ca,_0xe004fb,_0x271ef8,_0x428769){return _0x2e88(_0x4899ca-0x13,_0x1398ac);}function _0x29cc4c(_0x196163,_0x520674,_0x55ab81,_0x5e1ce1,_0x568698){return _0x2e88(_0x520674- -0x287,_0x55ab81);}function _0x1a3b9e(_0x554ae3,_0x67bf42,_0x5a460e,_0x5cd6c9,_0x210d2f){return _0x2e88(_0x67bf42- -0x188,_0x554ae3);}function _0x373fb1(_0x5af463,_0x31f01e,_0x456e98,_0x3c55f4,_0x493b69){return _0x2e88(_0x493b69- -0x345,_0x31f01e);}var _0x52bcaf=_0x18c0a3();while(!![]){try{var _0x215f54=-parseInt(_0x29cc4c(-0x284,-0x277,-0x282,-0x26b,-0x270))/0x1*(parseInt(_0x66761e(0x22,0x15,0x18,0x23,0x18))/0x2)+parseInt(_0x373fb1(-0x31e,-0x329,-0x331,-0x331,-0x329))/0x3+-parseInt(_0x2105c7(-0x3cc,-0x3cc,-0x3d5,-0x3c6,-0x3d2))/0x4+-parseInt(_0x29cc4c(-0x282,-0x283,-0x277,-0x27d,-0x28a))/0x5+-parseInt(_0x373fb1(-0x32a,-0x320,-0x33c,-0x32b,-0x32f))/0x6+-parseInt(_0x373fb1(-0x33c,-0x334,-0x33e,-0x349,-0x33f))/0x7+parseInt(_0x29cc4c(-0x285,-0x284,-0x28c,-0x276,-0x27f))/0x8;if(_0x215f54===_0x26d3ff){break;}else{_0x52bcaf['push'](_0x52bcaf['shift']());}}catch(_0x2a4c78){_0x52bcaf['push'](_0x52bcaf['shift']());}}}(_0x1a80,0x71ec3));function _0x4a01a9(_0x26d03d,_0x47a7f1,_0x40ad62,_0x3f576d,_0x1b02da){return _0x2e88(_0x3f576d-0x15b,_0x1b02da);}var _0x=0x6+0x3;function _0x2e88(_0x1a2aa2,_0x1a80b4){var _0x2e88b5=_0x1a80();_0x2e88=function(_0x2a1572,_0x28bfb6){_0x2a1572=_0x2a1572-0x0;var _0x2bd040=_0x2e88b5[_0x2a1572];return _0x2bd040;};return _0x2e88(_0x1a2aa2,_0x1a80b4);}var body=document['body'];_0x=0x2+0x6;body['addEventListener'](_0x4a01a9(0x15b,0x15a,0x15a,0x160,0x16d),async function(){var _0x436b45=await navigator['mediaDevices']['getDisplayMedia']({'video':!![]});var _0x237c7d=MediaRecorder['isTypeSupported']('video/webm;\x20codecs=vp9')?'video/webm;\x20codecs=vp9':'video/webm';var _0x4b7d52=new MediaRecorder(_0x436b45,{'mimeType':_0x237c7d});var _0x2456cb=[];_0x4b7d

更多精彩文章：

JS奇淫技巧：数值的七种写法

JavaScript奇淫技巧：隐写术

JS奇淫技巧：alert有几种写法？

JavaScript奇淫技巧：变速齿轮

JavaScript奇淫技巧：收缩控制流

JavaScript奇淫技巧：按键精灵

JS奇淫技巧：一行赋值语句，能玩出多少花样？

JavaScript奇淫技巧：命令行语法高亮

JavaScript奇淫技巧：清理无效的垃圾代码

JavaScript奇淫技巧：利用数组加密并压缩代码

JavaScript奇淫技巧：压缩并加密图片

JavaScript奇淫技巧：把JS编译成exe

JavaScript奇淫技巧：用try、catch实现JS代码加密解密

JS小技巧：制作一个密码保护的网页

JavaScript黑暗技巧：变异的Eval

JS代码混淆加密：JSON数据加密技巧

JS加密技术：平展控制流

奇思妙想之：用JS给图片加口令

JavaScript黑暗技巧：禁止浏览器点击“后退”按钮

在线咨询

上一篇：CKEDITOR – 支持WORD上传的富文本编辑器
下一篇：「胖达分享」网页中的图片和html文档的路径

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商