HTML图片标签和超链接标签

目录

图片标签

图片路径属性

图片替换文本属性

图片宽度和高度属性

图片边框属性

图片提示属性

超链接标签

链接属性

跳转方式属性

图片标签

在HTML中，可以使用<img>标签为网页添加图片

在HTML中，使用图片标签一般包含下面的四个属性

  1. 图片路径属性src
  2. 图片替换文本属性alt
  3. 图片高度和宽度属性width和height
  4. 图片边框属性border

📌

所有的图片属性一定放在<img>标签内部，每一个属性之间用空格或者代码中的换行（不是<br/>标签）隔开，同时每个属性的顺序没有固定要求，并且<img>标签为单标签

图片路径属性

在标签<img>中要添加图片，需要键入图片的路径，此时需要用到属性src，即<img src = " ">

在HTML中一般图片路径分为相对路径和绝对路径

  • 相对路径：相对于照片所在的文件夹的位置的路径，一般包括当前路径，上级路径和下级路径
    • 同级路径: 直接写文件名即可 (或者 ./)
    • 下一级路径: image/1.jpg
    • 上一级路径: ../image/1.jpg
  • 绝对路径：从根目录一直到照片所在的位置，一般包括本地绝对路径和网页绝对路径
    • 本地绝对路径：D:/rose.jpg
    • 网络路径：https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
<!-- 下面的代码已满足需要的路径要求 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签测试</title>
</head>
<body>
    <h1>下面是图片标签的测试</h1>
    <p>下面是相对路径中的下级路径</p>
    <!-- 相对路径中的下级路径，下面照片显示正常 -->
    <img src="images/image1.png">
    <p>下面是相对路径中的当前路径</p>
    <!-- 当前照片在同路径下，下面照片显示异常 -->
    <img src="image1.png">
    <p>下面是相对路径中的上级路径</p>
    <!-- 当前照片在同路径下，下面照片显示异常 -->
    <img src="../image1.png">
    <p>下面是绝对路径的本地路径</p>
    <!-- 注意如果使用绝对路径，在远程浏览器中无法被查看到 -->
    <img src="E:/_CSSLearningCodes/_-csslearning/image1.png">
    <p>下面是绝对路径的网络路径</p>
    <!-- 网络路径不论是本地还是远程都能看到 -->
    <img src="https://lh5.googleusercontent.com/7T0zO-ZTILZSxNOkiNtHPmPDHgPZKcovw3LWRbuN5h6_aOkzS9fQF0Q8zLu2pgw4TSIEH0Eb4_S8We-pK7Lhfn0s534T-Nt4BDQQ4ZqV7n1jej-pt0m6rB6rUA5eIi9lm1f-n7U">
</body>
</html>

效果如下：

图片替换文本属性

在HTML中，当图片因某种错误（一般是图片路径出错）导致无法被解析时，可以使用替换文本属性alt用文本代替于错误图片的位置显示在网页上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签及alt属性测试</title>
</head>
<body>
    <h1>下面是图片标签的测试</h1>
    <img src="image.png" alt="错误的照片路径导致照片无法显示">
    <!-- 正常的照片路径为image1.png -->
</body>
</html>

效果如下：

图片宽度和高度属性

在HTML中，当需要修改图片的宽度和高度时，可以使用到width和height属性对宽度和高度进行修改

📌

在HTML中，width和height属性单位为像素px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签及width和height属性测试</title>
</head>
<body>
    <h1>下面是图片标签的测试</h1>
    <img src="image1.png" alt="错误的照片路径导致照片无法显示" width="200px" height="360px">
    <!-- 修改图片的高度为360像素，宽度为200像素 -->
</body>
</html>

效果如下：

图片边框属性

在中，需要为图片添加边框时，可以使用border属性为所需要的图片添加边框，但是一般使用 CSS 来设定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签及border属性测试</title>
</head>
<body>
    <h1>下面是图片标签的测试</h1>
    <img src="image1.png" alt="错误的照片路径导致照片无法显示" border="7">
    <!-- border属性单位为像素px -->
</body>
</html>

📌

在HTML中，border属性的单位为像素px

效果如下：

图片提示属性

在中，可以使用title属性对图片显示提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签及title属性测试</title>
</head>
<body>
    <h1>下面是图片标签的测试</h1>
    <img src="image1.png" alt="错误的照片路径导致照片无法显示" title="这是一个提示信息">
    <!-- 提示信息会在鼠标悬停在图片上时显示 -->
</body>
</html>

效果如下：

超链接标签

在中，可以使用<a></a>标签生成具有超链接的内容

在中，使用href属性引用外部链接或者本地链接，使用target属性可以指定跳转的形式，包括在当前页面查看超链接和创建新页面查看超链接

📌

超链接默认提示文字有下划线，并且未点击的文字是蓝色，否则为紫色（可以通过清楚浏览记录使其变为蓝色）

链接属性

在HTML中，在两个超链接标签中可以使用文本作为显示超链接的载体（即点击文本跳转），也可以使用图片作为超链接的载体（即点击照片跳转），如果不加文本也不加其他内容，则不显示超链接

📌

注意，超链接标签为双标签

  • 使用文本作为显示超链接的载体
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签测试</title>
</head>
<body>
    <h1>下面是超链接标签和href属性测试</h1>
    <hr>
    <h2>引用外部链接</h2>
    <p><a href="https://blog.csdn.net/m0_73281594?spm=1010.2135.3001.5343"></a></p>
    <!-- 两个a标签中不加任何内容时，默认不显示超链接 -->
    <p><a href="https://blog.csdn.net/m0_73281594?spm=1010.2135.3001.5343">CSDN博客</a></p>
    <!-- 两个a标签中添加内容时，则显示对应的超链接 -->
    <h2>引用内部链接</h2>
    <p><a href="HelloWorld.">内部链接</a></p>
    <!-- 当前的网页为本地自建网页 -->
</body>
</html>

效果如下：

  • 使用图片作为超链接的载体
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签测试</title>
</head>
<body>
    <h1>下面是超链接标签和href属性测试</h1>
    <a href="https://blog.csdn.net/m0_73281594?spm=1010.2135.3001.5343">
        <img src="image1.png" alt="错误显示图片将显示此文字" title="跳转到EPSDA的博客">
    </a>
</body>
</html>

效果如下：

在HTML中，也可以使用#代表空链接（即点击该链接不会跳转到任何网页）

📌

一般可以用空链接作为不确定跳转位置时的占位，也可以用于返回页面顶部

<!DOCTYPE >
< lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签测试</title>
</head>
<body>
    <h1>下面是超链接标签和href属性测试</h1>
    <a href="#">这是一个空链接</a>
</body>
</>

在HTML中，可以使用文件位置作为链接内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签测试</title>
</head>
<body>
    <h1>下面是超链接标签和href属性测试</h1>
    <a href="image1.png">跳转图片链接</a>
    <!-- 如果链接的文件是可以直接使用浏览器查看的，那么则会实现跳转，否则就是下载文件 -->
</body>
</html>

跳转方式属性

在中，使用target属性可以指定网页跳转的方式，使用_self值指定在当前页面显示超链接内容，使用_blank值指定在新的页面中显示超链接内容

📌

默认是在当前页面显示超链接内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签测试</title>
</head>
<body>
    <h1>下面是超链接标签和target属性测试</h1>
    <hr>
    <h2>下面是在当前页面显示超链接</h2>
    <a href="https://blog.csdn.net/m0_73281594?spm=1010.2135.3001.5343 " target="_self">CSDN博客</a>
    <h2>下面是在新页面显示超链接</h2>
    <a href="https://blog.csdn.net/m0_73281594?spm=1010.2135.3001.5343 " target="_blank">CSDN博客</a>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/549700.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

雨云免费云服务器领取步骤详解

雨云免费云服务器领取步骤详解

随着云计算技术的日益普及&#xff0c;越来越多的用户开始选择使用云服务器来满足他们的数据存储和计算需求。雨云作为一家具有自主知识产权的国产云计算服务提供商&#xff0c;其免费云服务器服务备受关注。接下来&#xff0c;本文将为大家详细介绍雨云免费云服务器的领取步骤…
阅读更多...
供应链金融机器学习建模实战

供应链金融机器学习建模实战

随着全球贸易的不断发展和供应链的日益复杂化&#xff0c;供应链金融作为一种新型金融工具&#xff0c;正逐渐受到企业和金融机构的关注和重视。供应链金融是指通过金融手段来优化和改进供应链中的资金流动和货物流动&#xff0c;以实现企业间的合作共赢。 供应链金融的核心是将…
阅读更多...
STM32之HAL开发——CubeMX配置串行Flash文件系统

STM32之HAL开发——CubeMX配置串行Flash文件系统

配置流程 在开始配置FATFS前&#xff0c;需要提前配置好RCC的时钟&#xff0c;以及时钟的频率&#xff0c;另外还要配置好Debug选项&#xff08;选择串行&#xff09; 选项介绍 文件系统适用于SD卡&#xff0c;Disk磁盘等&#xff0c;需要我们将对应的驱动打开才可以使用。 …
阅读更多...
Sonatype Nexus 的使用参数

Sonatype Nexus 的使用参数

在最近安装的 Sonatype Nexus 版本中提供了一个使用参数情况界面。 这个使用情况的界面主要是针对当前 Sonatype Nexus 的安装实例出现的系统接入和调用情况。 上面提供了一个限制&#xff0c;这个限制不是说达到了限制后拒绝提供服务了&#xff0c;而是因为在默认的 Sonatype…
阅读更多...
java二维数组

java二维数组

一、二维数组的概述&#xff1a; 目录 二维数组的概述&#xff1a; 二维数组图解&#xff1a; 二维数组的四种创建方式&#xff1a; Java 用sort对二维数组进行排序 二维数组简单概述&#xff1a;Java中的二维数组一般应用在矩阵的一些运算、棋盘游戏中棋盘的实现、二维数据…
阅读更多...
vue3+vite+typescript+pinia+element_plus构建web项目

vue3+vite+typescript+pinia+element_plus构建web项目

1.vite搭建 yarn create vite 可能会提示node版本不支持&#xff0c;需要根据提示升级或降级node版本 使用nvm下载对应版本 nvm download 18.x.xnvm use 18.x.x// 需要安装yarn npm install -g yarn// 重新执行 yarn create vite 过程中会提供选择&#xff0c;分别选择vue、…
阅读更多...
三个晚上！给干废了！MINI2440 挂载 NFS

三个晚上！给干废了！MINI2440 挂载 NFS

虚拟机执行&#xff1a;sudo ifconfig tap0 10.10.10.1 up qemu 开发板&#xff1a; set bootargs noinitrd root/dev/nfs rw nfsroot10.10.10.1:/nfsroot ip10.10.10.10:10.10.10.1 ::255.255.255.0 consolettySAC0,115200 Hit any key to stop autoboot: 0 MINI2440 # set…
阅读更多...
VMware 虚拟机中的 Ubuntu 16.04 设置 USB 连接

VMware 虚拟机中的 Ubuntu 16.04 设置 USB 连接

VMware 虚拟机中的 Ubuntu 16.04 设置 USB 连接 1. VMware USB Arbitration Service2. 可移动设备 USB 口连接主机3. 虚拟机 -> 可移动设备 -> 连接 (断开与主机的连接)4. 状态栏 -> 断开连接 (连接主机)References 1. VMware USB Arbitration Service 计算机 -> …
阅读更多...
设计编程网站集：动物，昆虫，蚂蚁养殖笔记

设计编程网站集：动物，昆虫，蚂蚁养殖笔记

入门指南 区分白蚁与蚂蚁 日常生活中&#xff0c;人们常常会把白蚁与蚂蚁搞混淆&#xff0c;其实这两者是有很大区别的&#xff0c;养殖方式差别也很大。白蚁主要食用木质纤维&#xff0c;会给家庭房屋带来较大危害&#xff0c;而蚂蚁主要采食甜食和蛋白质类食物&#xff0c;不…
阅读更多...
word文件的创建时间和修改时间可以更改吗？答案是肯定的 文件属性修改的方法

word文件的创建时间和修改时间可以更改吗？答案是肯定的 文件属性修改的方法

一&#xff0c;引言 在日常生活和工作中&#xff0c;我们经常需要处理各种Word文件。有时&#xff0c;由于某些原因&#xff0c;我们可能需要更改Word文件的创建时间和修改时间。虽然这听起来可能有些复杂&#xff0c;但实际上&#xff0c;通过一些简单的方法和工具&#xff0…
阅读更多...
使用VLC无法播放安防监控EasyCVR平台分发出的FLV视频流，是什么原因？

使用VLC无法播放安防监控EasyCVR平台分发出的FLV视频流，是什么原因？

安防视频汇聚平台EasyCVR不仅可支持的接入协议非常多&#xff08;包括&#xff1a;国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等&#xff09;&#xff0…
阅读更多...
数据结构线性表篇-顺序表的实现

数据结构线性表篇-顺序表的实现

1.数据结构的介绍 ⚀基本概念 数据结构 数据 结构 数据&#xff1a; 数据就是所有描述客观事物的符号。比如&#xff1a;我们常见的文字&#xff0c;“你今天学习了吗&#xff1f;”&#xff1b;数字&#xff0c;“1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&a…
阅读更多...
基于RflySim平台的uORB消息读取与写入实验（一）

基于RflySim平台的uORB消息读取与写入实验（一）

uORB消息读取与写入实验框架总览 一. 总体说明 —文件目录 uORB消息读取与写入例程目录&#xff1a; [安装目录]\RflySimAPIs\5.RflySimFlyCtrl\0.ApiExps\6.uORB-Read-Write 自定义uORB消息例程目录&#xff1a; [安装目录]\5.RflySimFlyCtrl\0.ApiExps\7.uORB-Create 二…
阅读更多...
Linux三剑客之awk篇

Linux三剑客之awk篇

目录 1、awk 1.1、awk参数 1.2、awk变量 1.3、awk分割符 1.3.1、FS 1.3.2、OFS 1.3.3、RS 1.3.4、ORS 1.3.5、NF 1.3.6、NR 1.3.7、FNR 1.3.8、FILENAME 1.3.9、ARGC与ARGV 1.4、自定义变量 1.5、printf格式化输出 1、awk 作用&#xff1a;具有强大的文本格式化…
阅读更多...
【多线程】阻塞队列 | put()方法 | take()方法 | 生产者-消费者模式 |实现阻塞队列

【多线程】阻塞队列 | put()方法 | take()方法 | 生产者-消费者模式 |实现阻塞队列

文章目录 阻塞队列1.生产者-消费者模式生产者消费者模型的意义&#xff1a;1.解耦合2.削峰填谷&#xff1a; 2.阻塞队列的使用BlockingQueue 3.实现阻塞队列唤醒&#xff1a;使用阻塞队列实现生产者消费者模型 阻塞队列 阻塞队列是一种特殊的队列&#xff1a; 1.是线程安全的。…
阅读更多...
视频自定义字幕，中英文，彩色的，你也可以，不会不知道吧

视频自定义字幕，中英文，彩色的，你也可以，不会不知道吧

前言 关于【SSD系列】&#xff1a; 前端一些有意思的内容&#xff0c;旨在3-10分钟里&#xff0c;有所获&#xff0c;又不为所累。 字幕&#xff0c;大家见过吧&#xff0c;其实你也可以&#xff0c;真的可以&#xff0c;真的真的可以。不难&#xff0c;不难&#xff0c;真的…
阅读更多...
leetcode1448.统计二叉树中的好节点数目

leetcode1448.统计二叉树中的好节点数目

1. 题目描述 题目链接 2. 解题思路 首先看一下题目的“核心”&#xff0c;什么是好节点&#xff1a;从根到该节点 X 所经过的节点中&#xff0c;没有任何节点的值大于 X 的值。也就是说&#xff0c;我们只要知道了从根节点到该节点的所有的值&#xff0c;就可以判断该节点是…
阅读更多...
优斯特：防静电包装解决方案的巧妙运用

优斯特：防静电包装解决方案的巧妙运用

在现代电子产品生产与运输领域&#xff0c;防静电包装已成为保障产品安全的必备环节。优斯特凭借其创新的防静电包装解决方案&#xff0c;为客户提供了一种巧妙的方式来确保产品在存储和运输过程中不受静电影响&#xff0c;并且不会被刮花或损坏。 静电对产品的影响 静电对电子…
阅读更多...
数学建模--深入剖析线性规划（模型全方位解读+代码分析）

数学建模--深入剖析线性规划（模型全方位解读+代码分析）

1.简介 &#xff08;1&#xff09;线性规划三要素 &#xff08;2&#xff09;模型适用赛题 2.典例讲解 &#xff08;1&#xff09;问题分析 目标函数是净收益尽可能大&#xff0c;风险尽可能小&#xff1b; 约束条件是交易费的分段函数&#xff0c;以及每一笔投资都是非负数&am…
阅读更多...
java绘图在ubuntu报错

java绘图在ubuntu报错

把JRT网站部署到ubuntu桌面系统上&#xff0c;开始没测试绘图部分功能&#xff0c;只试了连PostGreSql部分正常。后面试了生成位图部分发现报错。 报下面错误&#xff1a; (ColorModel.java:220)\n\tat java.desktop/java.awt.image.BufferedImage.(BufferedImage.java:286)\n…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站