Html之img标签

摘要:
一.img必须有src和alt属性src属性规定了显示图像的URL,浏览器会对该URL发起HttpGet请求。于是我果断把第一个img标签前面加了一些空格" ",现在是第三幅效果,就是我博文右侧边栏了。三.标签在HTML和XHTML中有什么区别?因此,笔者建议使用的height和width属性来指定图像的尺寸。五.标签的onload/onerror/onabort事件,在什么情况下会被触发?

我发现了为什么我不会开发,或者不愿意,我感觉是因为我不会前端,自认为写出来完美的后台显示不好也没人用,为了解决这一问题,笔者新增html栏目,和大家一起交流分享。

一.img必须有src和alt属性

src属性规定了显示图像的URL,浏览器会对该URL发起Http Get请求。

alt属性则规定了图像的替代文本,在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。

但是我发现,其实你不加上alt属性也不会报错,不过笔者认为加上的话这样即使图像无法显示,用户还是可以看到的一些相关信息,从而大大提高了页面的用户友好性。

二.我发现用两个img的话图片是上下存在的,没有在左右方向,如何解决呢

Html之img标签第1张Html之img标签第2张Html之img标签第3张

我先把两个地址用逗号隔开放在一个src,发现完全无法显示;后来我发现是因为显示问题,两个img写在一起,默认就是左右并排;

width值太大 导致你的页面只能承载那么多属性多余的属性会在你下一行显示,要有精确的布局才能做出自己的效果。

2.1我得解决方案

第一个宽度为50%,第二个占用剩余宽度,我记得是“*%”,后来发现不是;两个都设置为50%,发现还是上下显示,第二个索性不填了,显示第二章图的效果。于是我果断把第一个img标签前面加了一些空格" ",现在是第三幅效果,就是我博文右侧边栏了。

2.2遗留问题

控件占用剩余宽度,怎么表示?

三.<img>标签在HTML和XHTML中有什么区别?

前者不需要结束标志,在后这里面必须被正确关闭。

四.为什么要指定height和width?

您在浏览网页的时候,可能会遇到这种情况:随着页面中的图像加载并成功显示,页面上的内容会随之发生不规律的移动,影响您的阅读。这种情况就是因为页面上的图像没有定义height和width属性而导致的。

如果没有定义图片的height和width属性,那么浏览器为了能够显示每一个加载的图像,它需要先下载图像,然后解析出图像的高度和宽度,并在显示窗口留出相应的屏幕空间,这样就会导致浏览器不断地重新计算/调整页面的布局,这可能会延迟文档的显示,并导致页面重绘。

因此,笔者建议使用<img>的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了空间,从而可以加速文档的显示,还可以避免文档内容的移动而引起页面重绘。

五.<img>标签的onload/onerror/onabort事件,在什么情况下会被触发?

onload: 事件会在图像加载完成后立即发生。

onerror: 事件会在文档或图像加载过程中发生错误时被触发。

onabort: 事件会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮,或者在图像下载的过程中。

六.如何获知用户是否禁止浏览图片呢?

用户是可以设置浏览器不显示图片的,尤其是在移动设备上,用户为了节省流量,往往会禁止图片显示。那么,如何获知用户是否禁止浏览图片呢?

在stackoverflow里说是设置src的complete属性,我现在用不到,不管了;我突然感觉,这是浏览器的事情,不显示就不显示吧,会出现alt,用户自己也知道,所以我认为这个问题没必要管。

七.收获

7.1收获1

笨方法就是最好的方法,其实不是该方法笨,而是自己根本想不到,说到底就是自己浮躁,不踏实。

7.2收获2

不想学习,我就果断回去睡觉,打游戏。

八.参考文献

http://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html

免责声明:文章转载自《Html之img标签》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇unicode 与 utf-8mysql 参数read_rnd_buffer_size的真正含义下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

将某个div内容保存成图片,使用html2canvas截图方法(高清图并解决图片跨域问题)

首先附上html2canvas的CDN地址:http://www.bootcdn.cn/html2canvas/ ; 此方法可截取整个div的内容,包括不可视区域,并且可以实现跨域图片截图。之前看了很多关于html2canvas插件图片跨域的解决办法,大部分的答复是在服务器端配置,之后将useCORS属性设置为true,但是如果图片是保存在别人家的服务器上...

js img转换base64

本文来自 http://www.cnblogs.com/taxi/p/7717486.html 完全复制粘贴,就为了以后能快速的找到地方抄代码,这一块也是属于我经常忘掉的一块。 方法一:canvas <script type="text/javascript"> functiongetBase64Image(img) {...

毕业设计 python opencv实现车牌识别 预处理

主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuowu 首先我们需要一个函数可以随时获取图片,无论在什么地方 filename = askopenfilename(title="选择识别图片", filetyp...

帆软常用JS

1.鼠标移动图片放大 $("td[id^=A] img").mouseover(function(e){var col=Number($(this).attr("col"))+1; //获取鼠标当前所在单元格的col var row=$(this).attr("row"); //获取鼠标当前所在单元格的row var img=this.src; //获取到...

javascript 九宫格图片随机打乱位置

  今天就做个九宫格的简易拼图,最让我头疼的就是点击开始打乱图片位置。一开始在百度查看相关博客,走了很多弯路。最后看了众多的例子,自己写了个方法。 1 <script> 2 //打乱图片方法 3 function fun(){ 4 var x = []; 5 var y ; 6...

python+opencv图像投影、水平投影、垂直投影

python+opencv图像投影 一、图像投影 水平投影:以y轴为轴投影 垂直投影:以x轴为轴投影 原图: 二、水平投影 代码及解释: 1 #水平投影 2 import numpy as np 3 import cv2 as cv 4 img=cv.imread("123.jpg",0) 5 ret,img1=cv.threshold(im...