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 ...
随机推荐
- Microsoft Windows Scripting Self-Paced Learning Guide
http://www.mums.ac.ir/shares/hit/eduhit/book/windowsscripting.pdfhttp://support.microsoft.com/kb/926 ...
- kotlin语法
https://try.kotlinlang.org/#/Examples/Hello,%20world!/Simplest%20version/Simplest%20version.kt /** * ...
- Java设计模式—原型模式
原型设计模式是一种比较简单的设计模式,在项目中使用的场景非常多. 个人理解: 原型模式实现了对Java中某个对象的克隆功能,即该对象的类必须implements实现Cloneable接口来标识为可被克 ...
- PHP中empty、isset和is_null的使用区别
关于PHP中empty().isset() 和 is_null() 这三个函数的区别,之前记得专门总结过,上次又被问到,网上已经很多,就用几个例子来说明: 测试用例选取: <?php $a;$b ...
- 【Udacity】数据的集中程度:众数、平均数和中位数
重视Code Review 极致--目标是成为优秀的开发者 Data tells a story!(数据会讲故事) 分析过程对于建模非常的重要,可以帮助我们减少实际上不相关的特征被错误的加入到模型中, ...
- 设计模式:装饰器(Decorator)模式
设计模式:装饰器(Decorator)模式 一.前言 装饰器模式也是一种非常重要的模式,在Java以及程序设计中占据着重要的地位.比如Java的数据流处理,我们可能看到数据流经过不同的类的包装和 ...
- Intellij idea用快捷键自动生成序列化id
ntellij idea用快捷键自动生成序列化id 类继承了Serializable接口之后,使用alt+enter快捷键自动创建序列化id 进入setting→inspections→seriali ...
- SAP CRM One Order跟踪和日志工具CRMD_TRACE_SET
事务码CRMD_TRACE_SET激活跟踪模式: 在跟踪模式下运行One Order场景.运行完毕后,使用事务码CRMD_TRACE_EVAL: 双击参数,就能看到参数明细: 点Callstack也能 ...
- 前端面试题总结(一)HTML篇
前端面试题总结(一)HTML篇 一.iframe的优缺点? 缺点: 1.会阻塞主页面的onload事件(iframe和主页面共享链接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载). 解决 ...
- aop的概念以及 cglib-nodep-2.1_3.jar第三方jia包动态代理使用
引入 cglib-nodep-2.1_3.ja包 cglib产生的代理类是目标类的子类 定义接口,让切面都继承它,方便加入到动态代理方法 的那个类中使用 在SalaryInterceptor类中使用 ...