一、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. java 用Graphics制作模糊验证码

    这篇随笔主要是java中制作验证码的效果,由于是在国庆前做的,现在也找不到原载了.我对自己整理的发表一份 生成的验证码效果如下: 一.建立一个工具类,用来生成验证码 package com.dkt.u ...

  2. Centos 7 系统安装(简单步骤)

    前面步骤忽略.进入安装步骤. 运行安装 到选择语言的时候最好选英文版,这里做模板,用的中文版 接着下一步到安装选项 在日期和时间里,选择上海时区 紧接着进行软件安装选择,如图安装就好 接着进行分区,也 ...

  3. 洛谷P3960 列队(动态开节点线段树)

    题意 题目链接 Sol 看不懂splay..,看不懂树状数组... 只会暴力动态开节点线段树 观察之后不难发现,我们对于行和列需要支持的操作都是相同的:找到第\(k\)大的元素并删除,在末尾插入一个元 ...

  4. js 两个小括号 ()() 的用法

    实现一个函数fn, 使fn(1)(2)的结果为两个参数的和,刚开始没反应过来,其实细细一想第二个括号就是函数再调用的问题,废话不多说,代码奉上: var fn = function(n) { func ...

  5. html+css模仿的锤子官方首页

    <div id="wrapper"> <header> <div class="container"> <h1> ...

  6. File中mkdir()和mkdirs()的区别

    mkdir() 创建此抽象路径名指定的目录.只能在已经存在的目录中创建文件夹 如: File folder = new File("d:\\test1\\test2"); fold ...

  7. arcMap 进度条

    private void kk() { IProgressDialogFactory progressDialogFactory = new ProgressDialogFactoryClass(); ...

  8. Sort函数的用法

    快速排序sort的用法:(适用于int float double char ...) 记得加头文件! 记得加头文件! 记得加头文件! 头文件: #include <algorithm>   ...

  9. SQL Server ->> 更改服务器时区对SQL Server Agent服务器的影响

    昨天在把服务器的时区从PST改成UTC后,发现Job都不跑了.因为SQL Server Agent记录Job的历史运行时间是不区分时区的,也就是意味着我改后出现了最后一条运行记录比倒数第二条时间还要早 ...

  10. 【Leetcode】【Medium】Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...