HTML页面插入图片,使用background还是img标签
很多新手在刚开始学习HTML标签的时候,老师一定会教你
<img src="xxx.png"/>
这种引入图片格式,第二天学习css的时候,老师又会教你给div等元素添加背景图片,
div {
background-image: url(xxx.png);
}
那么这两种方式究竟孰优孰劣,分别应该在什么情况下使用呢?今天我在这里就给大家详细讲解一下:
关于img标签,我们要知道,它除了src路径以外,还有两个属性,一个是alt,一个是title
<img src="xxx.png" alt="" title=""/>
首先我们讲一下title,它的作用是什么呢?我们来看一下,当我们在body中写入以下代码的时候,
<img src="img/柯基.jpg" alt="" title="Hello,World!"/>
打开浏览器,会显示对应的那张图片,title里面写的"Hello,World!"是不显示的,只有当我们的鼠标放到图片上暂留的时候,鼠标上才会出现提示性文字如下图:


搜索引擎真的会分辨你网页当中的图片是不是柯基犬吗?人工智能有这么强大?可以智能识图?并不是的,搜索引擎是通过识别你网页当中的alt属性,来辨别本图片是不是它所要抓取的。我们的网站肯定是希望搜索引擎抓取到我们,这样我们的浏览量就会加大,我们的流量就会更多,我们就能赚取更多的广告费,我们就会更有银子。
其次,还有一个原因,img加载更快对于我们一篇HTML文档来说,浏览器对文档的加载是从上往下的,我们的css样式是在style标签内,当我们的浏览器加载到style标签的时候,它就会停下,跳过去,继续加载HTML,HTML加载完成后,才会继续加载css样式表,否则的话,假如我们在style标签内写了.div1{width:100px;}这时候浏览器并没有加载到body,因为我们的style标签是在head内,是在body上面的,这时候浏览器就无法找到div1并给其设置宽度。所以,如果论加载速度,还是body中的img标签加载更快。
最后呢,还有一个原因,是从用户体验角度来讲的。如果你在body 中通过img标签引入一张图片,那么用户在浏览网页的时候,是可以直接在图片上右键,然后另存为,把图片保存下来,但是background是不可以的;
还有一种情况比较少见:针对盲人用户,盲人用户眼睛无法直接看到网页,但是又有上网的需求,这时候,患者就可以借助一些读屏软件来浏览我们的网页,这时候问题来了,读屏软件可以阅读文字,可是它怎样阅读我们的图片给患者听呢?这是一个问题,所以这时候我们之前提到的alt属性的作用就来了,读屏软件可以直接阅读图片的alt属性值,从而使盲人用户看不到图片,也可以知道这里显示的是什么。
HTML页面插入图片,使用background还是img标签的更多相关文章
- JSP 页面中插入图片
第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- C#操作word的一些基本方法(word打印,插入文件,插入图片,定位页眉页脚,去掉横线)
Microsoft.Office.Interop.Word.Application wordApp = new ApplicationClass() word对象 2. Microsoft.Offic ...
- js获取页面中图片的总数
查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...
- 【使用Itext处理PDF文档(新建PDF文件、修改PDF文件、PDF中插入图片、将PDF文件转换为图片)】
iText简介 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文件转 ...
- 关于利用input的file属性在页面添加图片的问题
在页面添加图片涉及到兼容的问题怎么解决兼容问题呢?请看下面分析: 在IE浏览器上面我们能直接通过获取其input的value值来获取其图片的路径. 在火狐和谷歌需要用createObjectURL(( ...
- html2canvas页面截图图片不显示
前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...
- 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...
- 插入图片新方式:data:image
我们在使用<img>标签和给元素添加背景图片时,不一定要使用外部的图片地址,也可以直接把图片数据定义在页面上.对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入. 如何使用 ...
随机推荐
- {每日一题}:tcp协议实现简单的文件下载器(单任务版)
文件下载器客户端 这个版本的只是为了方便回顾一下TCP客服端,服务端的创建流程,缺点就是 服务器一次只能让一个人访问下载,过两个写个使用面向对象写一个多线程版的强化一下. from socket i ...
- SpringMvc启动源码解析
1. 前言 上篇文章介绍了Spring容器的初始化https://www.cnblogs.com/xiaobingblog/p/11738747.html,接下来介绍SpringMvc容器的初始化 2 ...
- Java 获取前一天的24小时
//获取凌晨时间 public static Date getTodayStartTime(){ Calendar todayEnd = Calendar.getInstance(); todayEn ...
- 类和对象(day19整理)
目录 面对对象和面对过程编程 什么是面向对象 什么是面向过程编程 什么是面对对象编程 类 类的定义 定义类时发生的事情 __dict__和. 对象 名称空间 __init__函数 调用类发生的事情 对 ...
- nginx配置中location匹配规则详解
一.概述 nginx官方文档给出location语法如下: 1 location [=|~|~*|^~] uri { … } 其中,方括号中的四种标识符是可选项,用来改变请求字符串和uri的匹配方式. ...
- Linux进程和线程
一.进程产生的方式 1.描述进程的ID号通常叫做PID,即进程ID,PID的变量类型为pid_t. 2.getpid(void)返回当前进程的ID号,getppid(void)返回当前进程的父进程的I ...
- video1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS盒模型以及如何解决边距重叠问题
盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别 ...
- SpringCloud之异常报警通知(八)
在之前整合降级的基础上,整合redis,达到报警的效果(redis的启动还是之前boot里面整合的redis) order-service pom.xml <dependency> < ...
- Python+requests+unittest+excel实现接口自动化测试框架(摘录)
一.框架结构: 工程目录 二.Case文件设计 三.基础包 base 3.1 封装get/post请求(runmethon.py) 1 import requests 2 import json 3 ...