首页 > 其他分享 >6 图片标签

6 图片标签

时间:2023-08-18 11:22:05浏览次数:33  
标签:src 标签 指定 引入 图片 属性

6 图片标签

在HTML中,图像由标签定义的,它可以用来加载图片到html网页中显示。网页开发过程中,有三种图片格式被广泛应用到web里,分别是 jpg、png、gif。

img标签的属性:

/*
src属性:
    指定图像的URL地址,是英文source的简写,表示引入资源。
    src的值可以是本地计算机存储的图片的地址,也可以是网络上外部网站的图片的地址。
    如果src的值不正确,那么浏览器就无法正确的图片,而是显示一张裂图。
alt属性:指定图像无法显示时的替换文本。
width属性: 指定引入图片的显示宽度。
height属性:指定引入图片的显示高度。
border属性:指定引入图片的边框宽度,默认为0。
title属性:悬浮图片上的提示文字
*/

点击图片跳转可以配合a标签使用

<a><img src="" alt=""></a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<a href="https://www.hao123.com">
    <img src="https://img1.baidu.com/it/u=2953940086,3621245794&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" title="美女"
         alt="C:\Users\zczha\Pictures\Saved Pictures\Windows 10 logo 简约4k电脑壁纸_彼岸图网.jpg"></a>

<a href="https://www.baidu.com" target="_blank">
    <img src="https://img2.baidu.com/it/u=1624963289,2527746346&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" title="美女"
         alt="">
</a>
</body>
</html>
代码效果图如下:

image
image

标签:src,标签,指定,引入,图片,属性
From: https://www.cnblogs.com/zczhaod/p/17638261.html

相关文章

  • 【快应用】图片放大预览功能的实现
     【关键词】放大、image、background-position【问题背景】快应用中并没有直接的放大图片预览的功能,然而是可以利用现有的功能去实现图片的放大预览功能的。这样在快应用中浏览页面内容遇到图片时,遇到一些小图,觉得图片内容是不错的,就可以点击图片局部地方,放大查看图片的部分细节,提......
  • vue3项目,vie框架,相对路径图片,测试时正常显示,发布后不显示问题解决方案
    参考Vite官网的说明,修改图片的引用路径后,图片发布后可以正常显示constimgUrl=newURL('./img.png',import.meta.url).hrefdocument.getElementById('hero-img').src=imgUrl官网地址: https://cn.vitejs.dev/guide/assets.html ......
  • 5 表单标签
    5表单标签表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用......
  • 基于 Easysearch kNN 搭建即时图片搜索服务
    环境准备启动 Easysearch 服务:#Makesureyourvm.max_map_countmeetstherequirementsudosysctl-wvm.max_map_count=262144dockerrun-it--rm-p9200:9200\-e"discovery.type=single-node"\-eES_JAVA_OPTS="-Xms512m-Xmx512m"\......
  • 3 列表标签
    3列表标签html中的列表标签,该类标签是关于HTML文档中列表的,包含dl、dt、dd、ol、li、ul等标签。这里主要说的是ul和ol标签。(1)ol标签代表HTML的有序列表。ol成对出现,以开始,结束。列表中的每一列使用标签定义,这一点与无序列表相同。每列使用数字或字母开头。(2)ul标签代表HTML无序......
  • HTML图片元素
    1.<img>标签作用:给网页插入图片常用属性:src(必需):“source”,表示来源,即为图片地址。alt(必需):指定图像不能显示时候的替代文本。width,height:宽度和高度,单位:像素px或百分比%。摘录自:https://man.ilovefishc.com/pageHTML5/img.html......
  • UMEditor 复制word里面带图文的文章,图片可以直接显示
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复制。2、方案:用poi来提供word导入,思路是将word转换为html输出,再用UEditor提供的setContent()方法将html的内容......
  • 2 超链接标签
    2超链接标签超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的,用户通过点击......
  • 百度ueditor 复制word里面带图文的文章,图片可以直接显示
    ​ 1.编辑器修改(可选)1.1在 ueditor/config.json 中添加代码块    /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action名称 */    "wordFieldName":"upfile",/* 提交的视频表单名称 */    "wordPathFormat":"/p......
  • 百度ueditor编辑器 复制word里面带图文的文章,图片可以直接显示
    ​ 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪......