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>
代码效果图如下：



6 HTML图片标签的更多相关文章

  1. DEDE建站之图片标签技巧指南

    做dede站的时候,曾经遇到很苦恼的事情,就是给图片集添加了一个网上下载下来的特效,需要给图片的链接上添加一个rel属性,供JS调用以达到那种特效.但是当时只知道dede的图片链接标签是[field: ...

  2. php正则获取html图片标签信息（采集图片）

    php获取html图片标签信息(采集图片),实现图片采集及其他功能,带代码如下: <?php $str="<img src='./a.jpg'/>111111<img ...

  3. cocos2d-x之 利用富文本控件解析xhml标签（文字标签，图片标签，换行标签，标签属性）

    执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...

  4. HTML学习笔记——块级标签、行级标签、图片标签

    1>块级标签.行级标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. html标签，格式控制标签，内容容器标签，超链接标签，图片标签，表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  6. html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格

    一.body的属性 <body  bgcolor  页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...

  7. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  8. __x__(11)0906第三天__图片标签

    图片标签  <img src="images/1.gif" alt="冰河世纪的大松鼠" width="80%" /> Hell ...

  9. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  10. 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

随机推荐

  1. 封装一些常用的 qt 控件

    在 qt 中需要做 toast 效果和图片 tip 效果,故开发了下面一个类 后续会继续添加一些常用的控件 tool_tip.h #include <qlabel.h> #include ...

  2. mysql数据库jar包下载

    1.mysql-connector-java-8.0.16.jar驱动包 链接:https://pan.baidu.com/s/1G1SfPP895wU6YvTOAcTxhA提取码:7r43 2.my ...

  3. 【Azure 容器应用】在中国区Azure上创建的容器服务默认应用域名不全

    问题描述 在中国区Azure上,创建Container App服务,发现默认的应用程序URL只有前半段,并不是一个完整的域名.这是什么情况呢? 正常的Container App的URL格式为:< ...

  4. 【Azure Redis 缓存】Redis的指标显示CPU为70%，而Service Load却达到了100%。这两个指标意义的解释及如何缓解呢？

    问题描述 为什么Redis的指标显示CPU为70%,而Service Load却达到了100%, 如何来解释这两个指标,以及如何来缓解这样的情况呢? 问题回答 CPU指标:该值表示的是用于 Redis ...

  5. 用 nebula_dart_gdbc 在移动设备玩图数据库，泰酷辣！

    nebula_dart_gdbc,是访问 NebulaGraph 的 Dart 语言客户端,在 dart_gdbc 的规范下进行开发. dart_gdbc 是一套使用 Dart 语言定义的图数据库标准 ...

  6. Nebula Graph 源码解读系列 ｜ Vol.00 序言

    本文首发于 Nebula Graph Community 公众号 Nebula Graph 是由杭州欧若数网科技有限公司(官网:https://www.vesoft.com/cn/)开源的一款分布式图 ...

  7. 一文讲明白Java中线程与进程、并发与与并行、同步与异步

    写在开头 ok,everybody,在过去的两周内,我们大体上讲完了Java的集合,在最后我们探讨了关于HashMap线程不安全的原因,又提出了ConcurrentHashMap这个线程安全的集合解决 ...

  8. Java对象引用和内存管理的细节

    在Java中,当局部变量(比如方法参数)的作用域结束时,这个局部变量的引用确实不再存在,但这并不意味着它引用的对象会被销毁.对象的销毁是由Java的垃圾回收器(Garbage Collector, G ...

  9. USB数据传输与手机授权:充电宝常规使用不需要授权

    概述 此篇为解答充电宝骗局问题,骗局概述:两个人做局,以充测试充电宝是否损坏为由,插到受骗者手机上,受骗者允许了手机弹出的授权请求后,偷偷将病毒注入手机. Q:什么情况下手机会弹出授权? A:手机用数 ...

  10. 摆脱鼠标系列 - 浏览器操作 - Vimium C 插件 f 显示链接字母 jk上下移动

    为什么 摆脱鼠标系列 - 浏览器操作 - Vimium C 插件 f 显示链接字母 jk上下移动 百度搜索资料的时候,争取少用鼠标 关闭当前页签 x 左边页签 J 右边页签 K 搜索 /关键字回车 n