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. vs 工程中替换 Qt 静态库

    上篇介绍了如何编译 Qt 静态库 编译 windows 上的 qt 静态库 这篇介绍如何替换已有的 Qt 静态库,比如 Qt5.15.0 有很多 bug,我们不得不提升 Qt 版本来避免 bug 导致 ...

  2. 2021-07-21 vue插槽

    说明 为什么要有插槽? 是为了方便优雅地在父组件中向子组件传递向子组件传递dom结构. 代码处理 子组件 该子组件的组件名为ChildComponent: <template> <d ...

  3. c# 4.8 实现Windows 定时任务计划（Task Scheduler）

    分享一个我自己写的 Windows 定时任务计划(Task Scheduler) 动态创建代码,没做太多封装,留个实现笔记 首先封装一个简单配置项的类 1 public class TaskSched ...

  4. 旅游景点 Tourist Attractions （壮压 DP）题解

    简化题意 题目链接--不卡内存班 题目链接--卡内存版 给定 \(n\) 个点和 \(m\) 条边组成的无向图,按照一定限制要求停留 \(2\sim k+1\) 共 \(k\) 个点(可以经过但不停留 ...

  5. 【Azure 事件中心】适用Mirror Maker生产数据发送到Azure Event Hub出现发送一段时间后Timeout Exception: Expiring 18 record(s) for xxxxxxx: 79823 ms has passed since last append

    问题描述 根据"将 Apache Kafka MirrorMaker 与事件中心配合使用"一文,成功配置了Mirror Maker来发送数据到Event Hub中.为什么只能成功运 ...

  6. PostgreSQL、KingBase 数据库 ORDER BY LIMIT 查询缓慢案例

    好久没写博客了,最近从人大金仓离职了,新公司入职了蚂蚁集团,正在全力学习 OcenaBase 数据库的体系结构中. 以后分享的案例知识基本上都是以 OcenaBase 分布式数据库为主了,呦西. 昨天 ...

  7. 关于Cortex-M3报错解决方法总结：Flash Download failed错误

    事情原因:在一次使用ST-LINK v2下载程序时,突然出现 Error:Flash Download Failed-"Cortex-M3"这个错误,显示没有错误,没有警告.芯片型 ...

  8. 为什么Sync.Pool不需要加锁却能保证线程安全

    1. 简介 我们在 Sync.Pool: 提高go语言程序性能的关键一步 一文中,已经了解了使用sync.Pool来实现对象的复用以减少对象的频繁创建和销毁,以及使用sync.Pool的一些常见注意事 ...

  9. 【刷题】LeetCode 239 滑动窗口最大值- Python手撕最大堆

    手撕版 最大堆的完全实现, 堆中元素为二元组(num, idx),比较时用数值,赋值或交换时用整个元组. class Heap: def __init__(self, arr, capacity): ...

  10. Android匿名共享内存(Anonymous Shared Memory) --- 瞎折腾记录 (驱动程序篇)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...