HTML中IMG标签总结
一、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标签总结的更多相关文章
- Html中<font>标签的使用
Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...
- jsp2.0+中的标签文件,JSP Fragment技术
刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...
- Html中<a>标签的样式的设置
html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...
- 禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
- JSP中<img>标签引用本地图片
问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- Jquery获取iframe子/父窗口中的标签
获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...
- 在php中,如何将一个页面中的标签,替换为用户想输出的内容
前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...
- JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门
2 JSP内置标签(美化+业务逻辑) 1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容 2)JSP内 ...
- Smarty中一些标签的使用
Smarty中的标签和php中的标签不一样 foreach标签{foreach from=$goods(变量名) key='键,不带$' item='值,不带$'}中间的显示内容{/foreach ...
随机推荐
- Luogu3403: 跳楼机
题面 传送门 Sol 有一个显然的想法 处理出\(y, z\)能凑出的高度 然后这些高度凑一些\(x\)就可以得到其它的高度 那么可以把这些\(y, z\)凑出的高度对\(x\)取模,其它的用\(x\ ...
- 本地存储localStroage的用法及示例
localStorage是HTML5在在客户端存储数据的新方法,存储的数据没有时间限制. localStorage的主要API: localStorage.setItem(key,value); ...
- 004声明式服务调用Feign & 断路器Hystrix
1.POM配置 和普通Spring Boot工程相比,添加了Eureka Client.Feign.Hystrix依赖和Spring Cloud依赖管理 <dependencies> &l ...
- Codeforces Round #414 A. Bank Robbery
A. Bank Robbery time limit per test 2 seconds memory limit per test 256 megabytes A robber has a ...
- 利用Grahics 进行图片裁剪
这两天做了一个图片对比工具,里面要处理两张大的图片,所以要对图片先进行裁剪最开始用了 /// <summary> /// 裁剪图片 /// </summa ...
- jquery mobile开发中常见的问题(转载)
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 处理方法: 在head标签内加入: <meta name="viewport" content="w ...
- python 匿名函数&装饰器
匿名函数 关键字lambda表示匿名函数,冒号前面的x表示函数参数匿名函数有个限制,就是只能有一个表达式,不用写return,返回值就是该表达式的结果. >>> list(map(l ...
- CentOS 系统新装每次必看,直到背下。。
1.CentOS7 mini 修改网卡信息: vi /etc/sysconfig/network-scripts/ifcfg-ens192 ONBOOT = yes vi /etc/resolv.co ...
- Linux下安装方法总结(源码安装)
很久之前安装过windows下以及Mac下的node,感觉还是很方便的,不成想今天安装Linux下的坑了老半天,特此记录. 首先去官网下载代码,这里一定要注意安装分两种,一种是Source Code源 ...
- Microsoft Visual C++ 2005 Redistributable 无法卸载问题解决办法
今日遇到一个问题,Microsoft Visual C++ 2005 Redistributable 无法卸载,弹出的对话框如下所示: 试了一些网上的方法,比如下载vcredist_x86.exe,解 ...