怎样将一幅图片放到网页上?
我们可以用 < img> 元素来把图片放到网页上. 它是一个空元素 (它不需要包含文本内容或闭合标签), 最少只需要一个 src (一般读作其全称 source) 来使其生效. src 属性包含了指向我们想要引入的图片的路径, 可以是相对路径或绝对 URL, 就像 <a> 元素的 href 属性一样.
搜索引擎也读取图像的文件名并把它们计入 SEO. 因此你应该给你的图片取一个描述性的文件名: dinosaur.jpg 比 img835.PNG 要好.
注意: 像 < img > 和 < video > 这样的元素有时被称之为替换元素, 因为这样的元素的内容和尺寸由外部资源 (像是一个图片或视频文件) 所定义, 而不是元素自身.
备选文本
属性是 alt , 它的值应该是对图片的文字描述, 用于在图片无法显示或不能被看到的情况.
为什么我们需要备选文本呢? 它可以派上用场的原因有很多:
用户有视力障碍
图片的路径或文件名拼错
浏览器不支持该图片类型
提供一些文字描述来给搜索引擎使用
用户关闭的图片显示以减少数据的传输
到底应该在 alt 里写点什么呢? 这首先取决于为什么这张图片会在这儿
装饰: 如果图片只是用于装饰, 而不是内容的一部分, 可以写一个空的
内容: 如果你的图片提供了重要的信息, 就要在 alt 文本中简要的提供相同的信息, 甚至更近一步, 把这些信息写在主要的文本内容里, 这样所有人都能看见.
链接: 如果你把图片嵌套在 < a > 标签里, 来把图片变成链接, 那你还必须提供无障碍的链接文本.
文本: 你不应该将文本放到图像里.
宽度和高度
用宽度和高度属性来指定你的图片的高度和宽度, 显示多大的图就放多大的图.
通过为图片搭配说明文字的方式来解说图片
使用 html5 的 <figure> 和 <figcaption> 元素, 为图片提供一个语义容器, 在标题和图片之间建立清晰的关联.
<figcaption> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure> 元素的内容.
注意 <figure> 里不一定要是一张图片, 只要是一个这样的独立内容单元:
用紧凑, 简洁的方式表达意图.
可以置于页面线性流的某处.
为主要内容提供重要的补充说明.
<figure> 可以是几张图片, 一段代码, 音视频, 方程, 表格或别的.
CSS 背景图片
CSS 属性 和另其他 background-* 属性是用来放置背景图片的.
CSS 背景图片只是为了装饰 - 如果你只是想要在你的页面上添加一些漂亮的东西, 来提升视觉效果, 那 CSS 的做法是可以的. 但是这样插入的图片完全没有语义上的意义, 它们不能有任何备选文本, 也不能被屏幕阅读器识别. 这就是 HTML 图片有用的地方了.
来源: http://www.bubuko.com/infodetail-3059317.html