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

img标签的属性:

/*
src属性:
指定图像的URL地址,是英文source的简写,表示引入资源。
src的值可以是本地计算机存储的图片的地址,也可以是网络上外部网站的图片的地址。
如果src的值不正确,那么浏览器就无法正确的图片,而是显示一张裂图。 alt属性:指定图像无法显示时的替换文本。当图像显示错误时,在图像位置上显示alt的值。如上所示,就是谷歌浏览器中,引入图像失败后,显示了替换文本。alt属性一般 作为SEO优化的手段之一,所以,使用了img标签就需要加上alt属性。
width属性: 指定引入图片的显示宽度。
height属性:指定引入图片的显示高度。
border属性:指定引入图片的边框宽度,默认为0。
title属性:悬浮图片上的提示文字
*/

  

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

<a><img src="" alt=""></a>

  

HTML——img标签的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. k8s之存储卷OpenEBS

    一.OpenEBS简介 OpenEBS 是一种开源云原生存储解决方案,托管于 CNCF 基金会,目前该项目处于沙箱阶段. OpenEBS能够将Kubernetes工作节点上可用的住何存储转换为术卷或分 ...

  2. Vim 安装与基础操作指南

    0x00 链接 Vim 官网 Vim GitHub Vim 中文文档 0x01 准备 (1)下载与安装 在官网地址找到 Download 标签,在其中根据操作系统选择相应的版本,以下以 Windows ...

  3. FPGA技术助手,notepad++ 两个插件

    DS的时间很珍贵的 ,尤其是过了32岁以后,一身的病,扛不住996的制度.为了增加速度,只能想办法怎么在fpga工作上面降低时间.你有心思点来点去的GUI的界面.还不如用一个脚本完全做完.notepa ...

  4. C++ 构造函数实战指南:默认构造、带参数构造、拷贝构造与移动构造

    C++ 构造函数 构造函数是 C++ 中一种特殊的成员函数,当创建类对象时自动调用.它用于初始化对象的状态,例如为属性分配初始值.构造函数与类同名,且没有返回值类型. 构造函数类型 C++ 支持多种类 ...

  5. 力扣48(java)-旋转图像(中等)

    题目: 给定一个 n × n 的二维矩阵 matrix 表示一个图像.请你将图像顺时针旋转 90 度. 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要 使用另一个矩阵来旋转图像 ...

  6. 9.prometheus监控--监控springboot2.x(Java)

    一.环境部署 yum search java | grep jdk yum install -y java-11-openjdk-devel 二.监控java应用(tomcat/jar) JMX ex ...

  7. Data LakeHouse_理解湖仓一体

    Data Lakehouse(湖仓一体)是数据管理领域中的一种新架构范例,结合了Data Warehouse和Data Lakes的最佳特性.数据分析师和数据科学家可以在同一个数据存储中对数据进行操作 ...

  8. 03. go-zero简介及如何学go-zero

    目录 一.go-zero简介及如何学go-zero 1.go-zero官方文档 2.go-zero微服务框架入门教程 3.go-zero最佳实践 4.学习资料 二.go-zero环境搭建 1.GO环境 ...

  9. 命令行创建vue项目

    vue -h vue create learn-vue ❯ Manually select features 选择下面的组件(空格为选中/取消)回车确认 使用 history mode 使用node ...

  10. Golang 开发常用代码片段

    Struct to JsonString type BaseRequest struct { httpMethod string domain string path string params ma ...