前端之HTML图片

嵌入图片

使用格式

<img
src=“图片路径”
width=“指定宽”
height=“指定高”
alt=“图片内容的文字描述，图片无法显示时显示”
title=“图片显示时，鼠标放在图片上，提供需要更进一步的支持信息，并不必须要包含有意义的信息”
>

    <h1>Image in HTML</h1>
    <img src="./images/text-bg.jpg" width="400px" height="210px" alt="冰雪覆盖的山崖的夜色" title="雷神的约顿海姆风景图">

width和height如果不写单位，默认是px。另外改变尺寸的事应该交给css。

注意：大多数图片是有版权的。没得到授权之前，在src内使用其他网站的照片链接的行为被称为“盗链”；

作用和要求

1. 装饰；alt=“”
2. 内容；alt=“图片提供的内容信息”
3. 链接；<img>要嵌套在<a>内，可以将链接文本写在<a>内或alt内
   alt针对无障碍的视力障碍。

图文搭配

div标签自定义

<div class="figure">
    <img src="./images/text-bg.jpg" width="400px" height="210px" alt="冰雪覆盖的山崖的夜色" title="雷神的约顿海姆风景图">
    <p>雷神电影的约顿海姆的山崖</p>
</div>

figure标签√

<div class="figure">
    <img src="./images/text-bg.jpg" width="400px" height="210px" alt="冰雪覆盖的山崖的夜色" title="雷神的约顿海姆风景图">
    <p>雷神电影的约顿海姆的山崖</p>
</div>

<figure>
    <img src="./images/text-bg.jpg" width="400px" height="210px" alt="冰雪覆盖的山崖的夜色" title="雷神的约顿海姆风景图">
    <figcaption>雷神电影的约顿海姆的山崖</figcaption>
</figure>
<figure>
    <figcaption>雷神电影的约顿海姆的山崖</figcaption>
    <img src="./images/text-bg.jpg" width="400px" height="210px" alt="冰雪覆盖的山崖的夜色" title="雷神的约顿海姆风景图">
</figure>

<figure>是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。
<figcaption>是图片的文字说明； <figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置

figure例子

图片

<figure>
    <img src="./images/text-bg.jpg" width="400px" height="210px" alt="冰雪覆盖的山崖的夜色" title="雷神的约顿海姆风景图">
    <figcaption>雷神电影的约顿海姆的山崖</figcaption>
</figure>

代码

<figure>
    <figcaption>Get browser details using
        <code>add function</code>.</figcaption>
    <pre>
        function add(a,b){
            return a+b;
        }
    </pre>
</figure>

诗歌

代码来源

<figure>
  <p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
  Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
  Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
  Not gross to sink, but light, and will aspire.</p>
  <figcaption><cite>Venus and Adonis</cite>,
    by William Shakespeare</figcaption>
</figure>

加css后：

<style>
    figure {
        border: thin #c0c0c0 solid;
        display: flex;
        flex-flow: column;
        padding: 5px;
        max-width: 220px;
        margin: auto;
    }

    img {
        max-width: 220px;
        max-height: 150px;
    }

    figcaption {
        background-color: #222;
        color: #fff;
        font: italic smaller sans-serif;
        padding: 3px;
        text-align: center;
    }
</style>

网页实例

响应式图片

响应式图片仅仅只是响应式web设计的一部分（奠定了响应式web设计的良好基础）。可以在不同的屏幕尺寸和分辨率的设备实现自适应的图片。

分辨率切换：不同的尺寸

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。

1. 一个文件名 (elva-fairy-480w.jpg.)
2. 一个空格
3. 图像的固有宽度（以像素为单位）

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。

1. 一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是480像素或更少”。
2. 一个空格
3. 当媒体条件为真时，图像将填充的槽的宽度（440px）

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

捷径：前端之矢量图形结尾小结

下一节：HTML视频、音频