一、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. 比较全的css重设

    一.最简化的CSS Reset(重设) : * { padding:; margin:; } 这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解 ...

  2. html+css 布局篇

    float 做了float后有一些不好的影响. 1.背景不能显示 由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景 ...

  3. mac下打开hosts文件

    1打开控制台 输入vi(空格)/etc/hosts 进入hosts文件,输入i更改为编辑状态,更改完esc然后shift+:在输入wq保存退出 2打开Finder然后选择上面前往,到前往文件夹,输入/ ...

  4. Apache服务器运维笔记(3)----容器部分

    1.<IfModule>容器 <IfModule>容器作用于模块,它会首先判断模块是否载入,然后再决定是否进行处理,也就是说只有当判断结果为真时才会执行容器内的指令,相反如果为 ...

  5. Java数字和字符串的相互转换(BigDecimal的使用)

    String s = "100."; double d1 = "1.23"; double d = Double.parseDouble(s); s = Str ...

  6. maven升级遇到的疑惑

    今天在解决一个问题的时候,由于需要修改maven的client包,按照之前的办法,修改完之后,没有修改版本号,而是直接修改client的代码,之后直接 mvn deploy -e 打包上去了,然后奇怪 ...

  7. 音乐播放插件Aplayer+WebAPI的使用【附下载】

    本次介绍的是音乐播放器APlayer结合WebAPI的使用,先给各位看下效果:   上面就是APlayer的效果,然后这插件的地址是 https://github.com/DIYgod/APlayer ...

  8. 三、安装远程工具xshell,使用SFTP传输文件——Linux学习笔记

    A)远程工具 学Linux没有远程工具怎么行,百度了下,发现了xshell这个东西,重点是可以免费. 链接是多简单啊 输入地址,账号就搞定了. 打命令什么的都搞定了,真的感谢这个时代,求学有路啊! 到 ...

  9. Python学习---内置函数的学习

    内置函数 [Py3.5官方文档]https://docs.python.org/3.5/library/functions.html#abs Built-in Functions abs() dict ...

  10. Spring学习之-各注解的含义总结

    注解配置 @ComponentScan("spittr.web"):/在加载Spring上下文时,会扫描spittr.web包查找组件 @ComponentScan注解扫描的组件有 ...