HTML<img>标签

例子

如何插入图片:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

下面有更多“自己尝试”的示例。

定义和用法

该<img>标签用于在 HTML 页面中嵌入图像。

从技术上讲,图像并非插入网页;图像链接到网页。标签<img>为引用的图像创建了一个保存空间。

该<img>标签具有两个必需属性:

src——指定图像的路径

alt - 如果图像由于某种原因无法显示,则指定图像的替代文本
注意:另外,请务必指定图像的宽度和高度。如果未指定宽度和高度,则图像加载时页面可能会闪烁。

提示:要将图像链接到另一个文档,只需将标签嵌套在<a><img>标签内(参见下面的示例)。

支持的浏览器

属性

全局属性

<img>标签支持HTML中的全局属性。

事件属性

<img>标签支持HTML中的事件属性。

更多示例

例子

对齐图像(使用CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">

例子

添加图像边框(使用CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">

例子

为图像添加左右边距(使用CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">

例子

为图像添加顶部和底部边距(使用CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">

例子

如何从另一个文件夹或其他网站插入图像:

<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">

例子

如何向图像添加超链接:

<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>

例子

如何创建带有可点击区域的图像地图。每个区域都是一个超链接:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux--运维

Mysql主从同步 通过将MySQL的某一台主机&#xff08;master&#xff09;的数据复制到其他主机&#xff08;slaves&#xff09;上&#xff0c;并重新执行一遍来执行 复制过程中一台服务器充当主服务器&#xff0c;而其他一个或多个其他服务器充当从服务器 为什么要做主从复制 …

浅谈计算机网络03 | 现代网络组成

现代网络组成 一 、网络生态体系1.1网络生态系统的多元主体1.2 网络接入设施的多样类型 二、现代网络的典型体系结构解析三、高速网络技术3.1 以太网技术3.2 Wi-Fi技术的深度剖析3.2.1 应用场景的多元覆盖3.2.2 标准升级与性能提升 3.3 4G/5G蜂窝网的技术演进3.3.1 蜂窝技术的代…

[gpu驱动] H200 nvidia-fabricmanager-550升级到nvidia-fabricmanager-565报错,升级步骤

报错日志: root@h1-12-gpu:/home/canopy# apt install nvidia-fabricmanager-565 Reading package lists... Done Building dependency tree... Done Reading state information... Done Some packages could not be installed. This may mean that you have requested an imp…

LeetCode 110.平衡二叉树

题目描述 给定一个二叉树&#xff0c;判断它是否是平衡二叉树。 示例 1&#xff1a; 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&#xff1a;false 示例 3&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;true 提示&#xff1a; …

如何在前端给视频进行去除绿幕并替换背景?-----Vue3!!

最近在做这个这项目奇店桶装水小程序V1.3.9安装包骑手端V2.0.1小程序前端 最近&#xff0c;我在进行前端开发时&#xff0c;遇到了一个难题“如何给前端的视频进行去除绿幕并替换背景”。这是一个“数字人项目”所需&#xff0c;我一直在冥思苦想。终于有了一个解决方法…

【Java 数据导出到 Word实现方案】使用EasyPOI 工具包进行简易的word操作

文章目录 前言工具包调研实现方案主要步骤&#xff1a;1. 导入 EasyPOI 依赖2. 创建 Word 文件3. 添加数据到 Word 文件4. 保存文件到本地 使用过程中可能遇到的问题总结 前言 最近业务方说周报、月报让他们很头疼&#xff0c;每次都要统计数据后&#xff0c;手动录入到word文…

华为HuaweiCloudStack(一)介绍与架构

本文简单介绍了华为HCS私有云解决方案&#xff0c;并从下至上介绍HCS的整体架构&#xff0c;部署架构、部署方式等内容。 目录 HCS简介 HCS架构 纵向结构 ?管理平台类型 HCS节点类型 FusionSphere OpenStack CPS ServiceOM SC 运营面 OC 运维面 HCS部署架构 regi…

(一)相机标定——四大坐标系的介绍、对应转换、畸变原理以及OpenCV完整代码实战(C++版)

一、四大坐标系介绍 1&#xff0c;世界坐标系 从这个世界&#xff08;world&#xff09;的视角来看物体 世界坐标系是3D空间坐标&#xff0c;每个点的位置用 ( X w , Y w , Z w ) (X_w,Y_w,Z_w) (Xw​,Yw​,Zw​)表示 2&#xff0c;相机坐标系 相机本身具有一个坐标系&…

openwrt下oaf插件编译安装,实现上网行为监控

文章目录 入门级APP青少年模式设备屏幕使用时间电脑浏览器使用时间限制Surpal 介绍安装使用进阶级专业级旁路由方案openwrt路由器固件编译OAF(Open App Filter)安装编译带有oaf的固件固件烧写设备上电启动应用特征库设置黑白名单及应用访问限制骨灰级ref守护孩子视力,用科技“…

目标检测新视野 | YOLO、SSD与Faster R-CNN三大目标检测模型深度对比分析

目录 引言 YOLO系列 网络结构 多尺度检测 损失函数 关键特性 SSD 锚框设计 损失函数 关键特性 Faster R-CNN 区域建议网络&#xff08;RPN&#xff09; 两阶段检测器 损失函数 差异分析 共同特点 基于深度学习 目标框预测 损失函数优化 支持多类别检测 应…

Linux之网络套接字

Linux之网络套接字 一.IP地址和端口号二.TCP和UDP协议2.1网络字节序 三.socket编程的常见API四.模拟实现UDP服务器和客户端五.模拟实现TCP服务器和客户端 一.IP地址和端口号 在了解了网络相关的基础知识之后我们知道了数据在计算机中传输的流程并且发现IP地址在其中占据了确定…

Mysql常见问题处理集锦

Mysql常见问题处理集锦 root用户密码忘记&#xff0c;重置的操作(windows上的操作)MySQL报错&#xff1a;ERROR 1118 (42000): Row size too large. 或者 Row size too large (&#xff1e; 8126).场景&#xff1a;报错原因解决办法 详解行大小限制示例&#xff1a;内容来源于网…

ReactiveSwift 简单使用

记录 ReactiveSwift 简单使用 导入 ReactiveSwift 库创建 TestViewModel 文件 enum JKTypeType: Int {case cloudcase devicecase weater }// 通过监听属性变化 class TestViewModel: NSObject {lazy var recordType: Property<JKTypeType> {return Property(recordTy…

分类问题(二元,多元逻辑回归,费歇尔判别分析)spss实操

分类模型&#xff1a; 二分类和多分类&#xff1a; 对于二分类模型 &#xff0c;我们将介绍逻辑回归和Fisher线性判别分析两种分类算法; 对于多分类模型&#xff0c;我们将简单介绍Spss中的多分类线性判别分析和多分类逻辑回归的操作步骤 二分类: 基于广义线性模型&#x…

Ubuntu/centOS 如何安装 OpenGL

OpenGL安装与入门教程 什么是OpenGL? OpenGL是一个图形渲染API&#xff0c;它具有操作系统独立、窗口系统独立的特点&#xff0c;能够生成由几何图元和图像基元组成的高质量彩色图像。 OpenGL APIs可以使用以下几个库: Gl OpenGL API实现 (http://www.opengl.org)Glu Open…

在 Vue 3 项目中集成和使用 vue3-video-play

前言 随着视频内容的普及&#xff0c;视频播放功能在现代 Web 应用中变得越来越重要。如果你正在开发一个 Vue 3 项目&#xff0c;并且需要快速集成视频播放功能&#xff0c;vue3-video-play 是一个轻量级且易于使用的 Vue 3 组件。本文将介绍如何在 Vue 3 项目中使用 vue3-vi…

合并两个有序数组(88)合并两个有序链表(21)

88. 合并两个有序数组 - 力扣&#xff08;LeetCode&#xff09; 21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff08;88&#xff09;&#xff1a; class Solution { public:void merge(vector<int>& nums1, int m, vector<int>&…

NPC与AI深度融合结合雷鸟X3Pro AR智能眼镜:引领游戏行业沉浸式与增强现实新纪元的畅想

if… NPC&#xff08;非玩家角色&#xff09;与AI&#xff08;人工智能&#xff09;的深度融合&#xff0c;正引领游戏行业迈向一个全新的沉浸式与增强现实&#xff08;AR&#xff09;相结合的新时代。这一创新不仅预示着游戏体验的质变&#xff0c;更可能全面革新游戏设计与叙…

Dom的学习

DOM&#xff08;文档对象模型&#xff0c;Document Object Model&#xff09;是一个编程接口&#xff0c;用于HTML和XML文档。它将文档表示为一个树形结构&#xff0c;其中每个节点都是文档的一部分&#xff0c;例如元素、属性和文本内容。通过DOM&#xff0c;开发者可以使用编…

游戏行业销售数据分析可视化

完整源码项目包获取→点击文章末尾名片&#xff01; &#x1f31f;分析&#xff1a; 可看出最近五年用户最喜爱的游戏类型依然还是Action-动作类&#xff08;当然市场发行的也很多&#xff09; Sports-运动类和Shooter-射击类顺序互换,但我估计现在大环境局势紧张可以会推动射击…