一、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. sqlserver2008数据库文件降级为sqlserver2005文件

    直接分离附加是不行的. 操作步骤如下: 在sqlserver2008企业管理器中 右键xx数据库->任务->生成脚本 弹出框中勾选 为所选数据库中的所有对象编写脚本 下一步  修改如下图片 ...

  2. 关于webstorm启动后闪退

    总是提示内存不足,就把内容该成了2048 在启动时候就闪退,无法进去编辑器 找到安装目录下的bin文件夹打开找到WebStorm.exe.vmoptions文件打开 把下面选项设置为 -Xmx1024 ...

  3. 线程间协作:wait、notify、notifyAll

    线程间协作:wait.notify.notifyAll 在 Java 中,可以通过配合调用 Object 对象的 wait() 方法和 notify()方法或 notifyAll() 方法来实现线程间 ...

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

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

  5. cocos2d在CCScrollView中嵌套CCMenu列表

    在cocos2d中,CCMenuItem经常被当做按钮使用.在有许多条目需要逐行显示,并且点击每个条目都触发对应的事件的需求下,最容易想到的是用CCScrollView嵌套CCMenu. 但默认情况下 ...

  6. Linux下SVN安装配置及应用

    一.安装篇 centos下yum安装 yum install subversion 查看安装是否成功: svnserve --version 二.配置篇 创建svn版本库目录 mkdir /home/ ...

  7. postgraSql支持View可以修改的两种方法。

    http://www.postgresqltutorial.com/postgresql-views/ Creating PostgreSQL updatable views – gives you ...

  8. PTA练习题之7-1 出租车计价(15 分)

    7-1 出租车计价(15 分) 本题要求根据某城市普通出租车收费标准编写程序进行车费计算.具体标准如下: 起步里程为3公里,起步费10元: 超起步里程后10公里内,每公里2元: 超过10公里以上的部分 ...

  9. UEditor 中配置可以跨域访问的图片路径

    文档里很清楚:http://fex.baidu.com/ueditor/#server-path 进入配置文件 当域名不是直接配置到项目根目录时,例:http://a.com/b/c  域名下有两文件 ...

  10. ClipboardJS 实现JS复制到剪切板

    根据官方文档的说法这个支持IE9+以及大部分主流浏览器,地址:https://clipboardjs.com/ 下面写个简单的例子:HTML:注意,这里最好是button,并非所有的元素都支持该JS ...