一、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)">

HTML中IMG标签总结的更多相关文章

  1. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  2. jsp2.0+中的标签文件,JSP Fragment技术

    刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...

  3. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  4. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  5. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  6. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  7. Jquery获取iframe子/父窗口中的标签

    获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...

  8. 在php中,如何将一个页面中的标签,替换为用户想输出的内容

    前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...

  9. JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门

    2 JSP内置标签(美化+业务逻辑)   1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容   2)JSP内 ...

  10. Smarty中一些标签的使用

    Smarty中的标签和php中的标签不一样 foreach标签{foreach   from=$goods(变量名) key='键,不带$' item='值,不带$'}中间的显示内容{/foreach ...

随机推荐

  1. MobileWeb 适配总结

    开门见山,本篇将总结一下 MobileWeb 的适配方法,即我们常说的H5页面.手机页面.WAP页.webview页面等等. 本篇讨论的页面指专门针对手机设备设计的页面,并非兼容全设备的响应式布局. ...

  2. COGS 有标号的二分图计数系列

    其实这三道题都是不错的……(虽然感觉第三题略套路了……) 分别写一下做法好了…… COGS2392 有标号的二分图计数 I 这个就很简单了,Noip难度. 显然可以直接认为黑点和白点分别位于二分图两侧 ...

  3. ArcGIS DataStore手册——管理篇

    第二章:ArcGIS DataStore管理维护 1.备份管理 备份的目的在于发生原始数据损坏或其他突发情况时,可避免数据丢失,并可快速的使用备份数据来恢复,以保证服务仍可使用. 单机模式下,可使用D ...

  4. VS2010环境开发Teamcenter ITK

    前言 这篇文章主要是用Teamcenter ITK开发的入门配置教程.几个月前学习ITK开发时,领导要求将配置过程整理成学习笔记.最近同事要做ITK开发,就发给他了.感觉这篇文章对别人还是有帮助的,决 ...

  5. Android Button事件处理

    一般只需要处理按钮的点击事件就可以,但想让一个按钮处理多个事件,就得同时监听多个方法. OnClickListener  点击事件 OnLongClickListener 长按事件 OnTouchLi ...

  6. qt MessageBOX 消息

    void MessageBox::slotQuestion() { switch(QMessageBox::question(this,"Question",tr("It ...

  7. SVN 代码托管

    1.安装服务 使用yum安装subversion,简单.不繁琐. 1 yum install -y subversion 2.创建版本库 1 2       mkidr /svn/obj        ...

  8. CSS中DIV只出现竖向滚动条且内容自动换行

    只需要设置如下的样式即可: <div id="testDiv" style="overflow-x: hidden; word-break:break-all;bo ...

  9. devexpress 中 XtraTabcontrol 改变BackColor 的方法

    装载自CSDN,原文地址  https://blog.csdn.net/zjzytnn/article/details/53699340 今天在实现CAD文件的读和显示操作的时候,需要将CAD文件显示 ...

  10. 如何避免在EF自动生成的model中的DataAnnotation被覆盖掉

    摘自ASP.NET MVC 5 网站开发之美 6.4 Metadata与数据验证 如果使用Database-First方式生成*.edms,那么所生成的类文件会在*.tt文件的层级之下,扩展名tt是一 ...