HTML中IMG标签总结

vspiders 发布于2019-04-23 13:29 / 1899人阅读

摘要：一标签有两个重要的属性属性图片的地址属性图片不显示是现实的文字二标签是行级元素属于行内替换元素。三标签进行居中第一种方式这种方式我不是很喜欢，标签有事不能设置为。四标签事件使用对象的事件可以对显示异常的图片进行处理。

一、Img标签有两个重要的属性：

　　1.src 属性：图片的地址

　　2.alt 属性：图片不显示是现实的文字

二、Img标签是行级元素：

　　img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。行内非替换元素，例如, height/width/padding top、bottom/margin top/bottom均无效果.只

　　能用padding left/right和margin left/right改变宽度。

三、Img标签进行居中：

　　1.第一种方式:这种方式我不是很喜欢，Img标签有事不能设置为table-cell。容易产生错误。

img_div{
        display: table-cell;vertical-align: middle;  /*控制图片垂直居中*/
        text-align: center;  /*控制图片水平居中*/      
}

　　2.第二种方式:这种方式Img标签最好不要带有margin属性，否则不会居中。

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}

四、Img标签事件：

　　1.使用HTML DOM Event 对象的 onerror事件可以对显示异常的图片进行处理。

<img src="img/1.jpg" alt="这是一张图片" onerror="alert(this.alt)">

GPU服务器私有云获得html中img标签 img标签 img标签调用 html标签中分行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1947.html

前端基础入门一（HTML）

摘要：所谓超文本，因为它可以加入图片声音动画多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。意思是超文本引用用于指定链接页面的打开方式，其取值有和两种，其中为默认值，为在新窗口中打开方式。学习目标了解常用浏览器掌握WEB标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌...

张宪坤 2019-08-02 14:08 评论0 收藏0
img标签设置display:block，宽度无法100%

摘要：替换元素浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素是其内容不受视觉格式化模型控制的元素，例如标签，嵌入的文档之类或者，这些叫做替换元素。 img标签设置display:block，宽度无法100% 一些个人总结，第一次发文章，有什么不足的地方，还请各位多提意见现象如下代码，img标签设置了display：block，尺寸宽度无法设定为100% ...

MorePainMoreGain 2019-08-29 16:24 评论0 收藏0
读后总结--精通css高级web标准解决方案（第二版）

摘要：无论是否移动，元素仍然占据原来的空间。绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。为啥读这本书现在前端圈子过于浮躁，掌握基础无疑比掌握一个js框架重要 css怎么都能写出来，但是要写的好写得快还得多读书 css魔法推荐的，读完这个读读css揭秘当然，根本原因还是觉得自己掌握不好开始总结吧~ 一. 基础知识经过上世纪没有 css的痛苦时的混沌时期，人们开始了进...

leone 2019-08-30 13:05 评论0 收藏0
使用vue开发pc前端及后台的项目总结(陆续更新)

摘要：所以只有写完整，才是正确的。具体可查看这里愿你成为终身学习者 showImg(https://segmentfault.com/img/bVbfNh2?w=1920&h=600); 1.让img标签适应比例缩放项目中做图片预览，如下图，效果要随着屏幕的大小来做自适应比例缩放，一开始用background-size:cover来做是可行的，但这里有包括上传图片的操作，而上传图片的文件流...

Baoyuan 2019-08-23 11:26 评论0 收藏0
异步、DOM、事件、页面加载和优化面试题及知识点简单总结

摘要：异步编程，不同于同步编程的请求响应模式，其是一种事件驱动编程，请求调用函数或方法后，无需立即等待响应，可以继续执行其他任务，而之前任务响应返回后可以通过状态通知和回调来通知调用者。异步与单线程知识点：什么是异步(对比同步) 同步：一行一行按顺序依次执行代码，当前代码任务耗时执行会阻塞后续代码的执行。这是一种典型的请求-响应模型，当请求调用一个函数或方法后，需等待其响应返回，然后执...

jasperyang 2019-08-21 16:57 评论0 收藏0