HTML中的图片
在一开始时,Web仅有文本,那真的是很无趣。幸运的是,没过多久网页上就能嵌入图片和其他有趣的内容了。虽然还有许多其他类型的多媒体,但是从地位比较低的<img>元素开始是符合逻辑的,它常常被用来在网页中嵌入一张简单的图片。在这篇文章中,我们将看到怎样深入的使用它,包括基本的用<figure>来添加说明文字,以及怎样把它和CSS背景图片链接起来。
1.1 怎样将一幅图片放到网页上
我们可以用<img> 元素来把图片放到网页上。它是一个空元素(它不需要包含文本内容或闭合标签),最少只需要一个 src (一般读作其全称 source)来使其生效。src 属性包含了指向我们想要引入的图片的路径,可以是相对路径或绝对URL,就像 <a> 元素的 href 属性一样。
点击上面的链接,会给不同的div的背景色改变为红色。
1.2 备选文本
下一个我们讨论的属性是 alt ,它的值应该是对图片的文字描述,用于在图片无法显示或不能被看到的情况。例如,上面的例子可以做如下改进:
<img src="data:images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"> |
测试alt 属性最简单的方式就是故意拼错图片文件名,这样浏览器就无法找到该图片从而显示备选的文本。如果我们将上例的图片文件名改为 dinosooooor.jpg,浏览器就不能显示图片,而显示备选文本。
那么,为什么我们需要备选文本呢?它可以派上用场的原因有很多:
用户有视力障碍,通过屏幕阅读器来浏览网页 。事实上,给图片一个备选的描述文本对大多数用户都是很有用的。
就像上面所说的,你也许会把图片的路径或文件名拼错。
浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器,例如 Lynx,这些浏览器会把图片替换为描述文本。
你会想提供一些文字描述来给搜索引擎使用,例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。
用户关闭的图片显示以减少数据的传输,这在手机上是十分普遍的,并且在一些国家带宽是有限且昂贵。
你到底应该在 alt 里写点什么呢?这首先取决于为什么这张图片会在这儿,换句话说,如果这张图片没显示出来,会少了什么:
装饰:如果图片只是用于装饰,而不是内容的一部分,可以写一个空的alt="" 。例如,屏幕阅读器不会浪费时间读出对不是用户核心需要的内容。实际上装饰性图片就不应该放在HTML文件里, CSS background images才应该用于插入装饰图片,但如果这种情况无法避免, alt=""会是最佳处理方案。
内容:如果你的图片提供了重要的信息,就要在alt文本中简要的提供相同的信息,甚至更近一步,把这些信息写在主要的文本内容里,这样所有人都能看见。不要写冗余的备选文本(如果在主要文本中将所有的段落都重复两遍,对于有视力的用户来说多烦啊!),如果在主要文本中已经对图片进行了充分的描述,写alt=""就好。
链接:如果你把图片嵌套在<a>标签里,来把图片变成链接,那你还必须提供无障碍的链接文本。在这种情况下,你可以写在同一个<a>元素里,或者写在图片的alt属性里,随你喜欢。
文本:你不应该将文本放到图像里。例如,如果你的主标题需要有阴影,你可以用CSS来达到这个目的,而不是把文本放到图片里。如果真的必须这么做,那就把文本也放到alt里。
本质上,关键在于在图片无法被看见时也提供一个可用的体验,这确保了所有人都不会错失一部分内容。尝试在浏览器中使图片不可见然后看看网页变成什么样了,你会很快意识到在图片无法显示时备选文本能帮上多大忙。
1.3 宽度和高度
你可以用宽度和高度属性来指定你的图片的高度和宽度(你可以用多种方式找到你的图片的宽度和高度,例如在Mac上,你可以用 Cmd + I 来得到显示的图片文件的信息)回到我们的例子,你可以这样做:
<img src="data:images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341"> |
在正常的情况下,这不会对显示产生很大的影响, 但是如果图片没有显示(例如用户刚刚开始浏览网页,但是图片还没有加载完成),你会注意到浏览器会为要显示的图片留下一定的空间。
这是一件好事情——这使得页面加载的更快速更流畅。
然而,你不应该使用HTML属性来改变图片的大小。如果你把尺寸设定的太大,最终图片看起来会模糊;如果太小,会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的宽高比,图片可能看起来会扭曲。在把图片放到你的网站页面之前,你应该使用图形编辑器使图片的尺寸正确。
1.4 图片标题
类似于超链接,你可以给图片增加title属性来提供需要更进一步的支持信息。在我们的例子中,可以这样做:
<img src="data:images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341" title="A T-Rex on display in the Manchester University Museum"> |
这会给我们一个提示,看起来就像链接标题。
图片标题并不必须要包含有意义的信息,通常来说,将这样的支持信息放到主要文本中而不是附着于图片会更好。不过,在有些环境中这样做更有用,比如当没有空间显示提示时,也就是在图片栏中。
1.5 背景图片
你也可以使用 CSS 把图片嵌入网站中(JavaScript也行,不过那是另外一个故事了),这个 CSS 属性 background-image 和另其他 background-* 属性是用来放置背景图片的。比如,为页面中的所有段落设置一个背景图片,你可以这样做:
p { background-image: url("images/dinosaur.jpg"); } |
按理说,这种做法相对于 HTML 中插入图片的做法,可以更好地控制图片和设置图片的位置,那么为什么我们还要使用 HTML 图片呢?如上所述,CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西,来提升视觉效果,那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义,它们不能有任何备选文本,也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。
总而言之,如果图像对您的内容里有意义,则应使用HTML图像。 如果图像纯粹是装饰,则应使用CSS背景图片。
HTML中的图片的更多相关文章
- Open Xml 读取Excel中的图片
在我的一个项目中,需要分析客户提供的Excel, 读出其中的图片信息(显示在Excel的第几行,第几列,以及图片本身). 网络上有许多使用Open Xml插入图片到Word,Excel的文章, 但 ...
- C# 提取Word文档中的图片
C# 提取Word文档中的图片 图片和文字是word文档中两种最常见的对象,在微软word中,如果我们想要提取出一个文档内的图片,只需要右击图片选择另存为然后命名保存就可以了,今天这篇文章主要是实现使 ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- C#正则表达式通过HTML提取网页中的图片src
目前在做HoverTreeCMS项目中有处理图片的部分,参考了一下网上案例,自己写了一个获取内容中的图片地址的方法. 可以先看看效果:http://tool.hovertree.com/a/zz/im ...
- UIWebView保存网页中的图片(转载)
现在H5混合原生开发的方式越来越流行,也就要用到UIWebView控件.在开发过程中,我们可能会遇到一个需求,要求我们保存网页上的图片,当用户点击图片的时候,就可以让用户选择是否下载图片. 在系统自带 ...
- [MVC]如何删除文章内容中的图片
1.实现代码 if (!string.IsNullOrWhiteSpace(entity.Content)) { var immgList = TextHelper.GetImgUrlList(ent ...
- unity 内存中切割图片
一般的说我们切割图片是将一张图片资源切割成更小的图片资源,也就是说在资源上就进行了切割,比如ugui上的切割方法. 如果我们有一些情况比如做拼图,可能让玩家自己选择自己的生活照作为拼图的原图. 那么我 ...
- java POI实现向Excel中插入图片
做Web开发免不了要与Excel打交道.今天老大给我一个任务-导出Excel.开始想的还是蛮简单的,无非就是查找,构建Excel,response下载即可.但是有一点不同,就是要加入图片, ...
- imagesLoaded – 检测网页中的图片是否加载
imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库.支持回调的获取图片加载的进度,还可以绑定自定义事件.可以结合 jQuery.RequireJS 使用 ...
- [Android]ListView的Adapter.getView()方法中延迟加载图片的优化
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4139998.html 举个例子吧,以好友列表为例 ListVi ...
随机推荐
- 52.RocketMQ 事务
今天的博客有点多,因为前几天一直用笔记录,今天都补上了.后面的博客先停一段时间,后面还有dubbo.storm.kafka.solor.nginx.keepalived.fastdfs等内容,只是因为 ...
- 架构师养成记--18.NIO
有人叫new IO 我这里就叫Non-block IO 经典概念: Buffer(缓冲区):之前直接通过流,现在提供一个buffer存放数据. Channel:管道,包括ServerSocketCha ...
- QuantLib 金融计算——收益率曲线之构建曲线(2)
目录 QuantLib 金融计算--收益率曲线之构建曲线(2) YieldTermStructure 问题描述 Piecewise** 分段收益率曲线的原理 Piecewise** 对象的构造 Fit ...
- MySQL 创建schema
create schema zzz default character set utf8 collate utf8_general_ci;--创建数据库 grant select,insert,upd ...
- c#中异步编程
异步是现实生活中的很多现象的一种抽象.比如分工合作在很多时间段就是异步合作.异步中也一般要涉及委托方法.c#有3种模式的异步编程:异步模式,基于事件的异步模式,基于任务的异步模式(TAP). 一. ...
- eclipse中怎样添加项目至SVN资源库
转自:https://jingyan.baidu.com/article/642c9d341caac0644a46f73e.html 这是一个SVN最基本的一个使用方法,转一篇别人写的,方便日后查询. ...
- 自定义 checkbox 样式
前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...
- android常用Linux命令
安卓下面有个软件叫终端模拟器,其实就是Linux下的命令行,使用这些命令能有效处理问题. 1.基本知识 “/”,这个英文字母斜杠指的是根目录,类似Windows的C:\,但是Linux下只有一个根目录 ...
- Reference Type Casting
5.5.1. Reference Type Casting Given a compile-time reference type S (source) and a compile-time refe ...
- 各种数据库maven的pom文件编写与ibernate链接配置
各种数据库Hibernate链接配置 Derby db driver maven dependency <dependency> <groupId>org.ap ...