一、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. 文字编辑器FCKeditor 简介以及基本配置和使用方法

    什么是FCKeditor FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器.它志于轻量化,不需要太复杂的安装步骤即可使用.它可和PHP.JavaScript.ASP.ASP ...

  2. font-size 基准

    浏览器的缺省字体为16px: 你可以先将基准字体大小设置为10px; body  { font-size: 62.5%; } 然后统一使用 em作为单位 div { font-size: 2.4em; ...

  3. Github上600多个iOS开源项目地址

    将Github上600多个iOS开源项目进行分类并且有相应介绍,小伙伴们快来看呀 地址:http://github.ibireme.com/github/list/ios/

  4. 基于bootstrap的手机界面tab样式调整

    这是调整后手机页面的样子(pc端的样式还是bootstrap原来的样式,没有改变的): html结构为: <div class="tab" role="tabpan ...

  5. Angular2 备忘

    ng serve --port 80 --disable-host-check  启动80端口,禁用host检查 要在 component 内绑定全局事件的话,可以使用 @HostListener, ...

  6. Python学习---递归函数的学习

    定义:在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 递归特性: 1. 必须有一个明确的结束条件 2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少 ...

  7. yii2.0里别名的定义

    别名用来表示文件路径和URL,为了避免在代码中硬编码一些绝对路径和URL,一个别名必须以‘@’符开头. 用Yii::setAlias()的方法来设置: //文件别名 Yii::setAlias('@f ...

  8. python 爬虫网络图片中遇到的问题总结

    1.只导入了import urllib,读取网页的时候page =urllib.urlopen(url),提示 “module’ object has no attribute ’urlopen’”, ...

  9. 【深入理解JAVA虚拟机】第三部分.虚拟机执行子系统.1.类文件结构

    无关性 无关性的体现有两个方面: 1.平台无关性:可在不同的操作系统和机器指令集上执行,可在不同厂商的虚拟机平台上执行. 2.语言无关性:用不同编程语言写出的代码编译生成的文件都可以运行. 实现思想: ...

  10. ZT 绿茶和枸杞绝不可以同饮

    绿茶和枸杞绝不可以同饮 正文 我来说两句(人参与) 速腾试驾招募 预约得iPad Air! 2012年06月28日10:38 来源:中国网 打印 字号 大|中|小 绿茶含有儿茶素与β-胡萝卜素.维生素 ...