上一节:
下一节:

  HTML 图像

  • HTML图片

    图像可以改善网页的设计和外观。
    风景图片1
    风景图片2
    风景图片3
    <img alt="风景图片1" src="/images/f1.jpg">
<img alt="风景图片1" src="/images/f1.jpg">
<img alt="风景图片1" src="/images/f1.jpg">
    尝试一下

  • HTML图像语法

    在HTML中，图像是使用<img>标记定义的。该<img>标签是空的，它仅包含属性，并没有关闭标签。该src属性指定图像的URL（Web地址） 
    <img src="url">

  • HTML图像语法

    alt如果用户由于某种原因无法查看它（由于连接速度慢，src属性中的错误或用户使用屏幕阅读器），该属性为图像提供替代文本。alt属性的值应描述图像： 
    <!-- 这张图片存在，且网络正常 -->
        <img alt="风景图片1" src="images/f1.jpg">
        <!-- 这张图片不存在 -->
        <img alt="风景图片4" src="images/f4.jpg">
    尝试一下
    注意：该alt属性是必需的。没有它，网页将无法正确验证。

  • 图像大小 | 宽度和高度

    您可以使用该style属性指定图像的宽度和高度。或者，您可以使用width和height属性来设置： 
     <img alt="风景图片1" style="width:100;height:125;" src="images/f1.jpg"><br>
         <img alt="风景图片3" height="500px" width="400px" src="images/f3.jpg">
    尝试一下
    width和height属性总是限定图像的宽度和高度。
    注意：始终指定图像的宽度和高度。如果未指定宽度和高度，则在加载图像时页面会闪烁。
    那图像用width和height，还是style呢？width和height和style属性在HTML5有效。但是，我们建议使用style属性。它可以防止样式表更改图像的大小： 
    <!DOCTYPE html>
        <html>
        <head>
        <style>
        img { 
            width: 100%; 
        }
        </style>
        </head>
        <body>

        <img src="images/f1.jpg" alt="风景1" width="200" height="250">
        <img src="images/f1.jpg" alt="风景1" style="width:200;height:250px;">

        </body>
        </html>
    尝试一下

  • 本地图像 | 远程图像

    一些网站将其图像存储在图像服务器上。实际上，您可以从世界上任何网址访问图像：有些网站则直接将图片存在同一台服务器的其他文件夹。因此可用指定src源为绝对地址或相对地址： 
    <img src="images/f1.jpg" alt="风景1">
<img src="/images/f1.jpg">
    尝试一下
    提示：HTML也支持加载.gif这样的动画图像。

  • 浮动图像

    使用CSS float属性让图像浮动到文本的右侧或左侧 
    <p><img src="images/f1.jpg" alt="风景1" style="float:right;width:200px;height:250px;">
这张图片将浮动在右边</p>

<p><img src="images/f1.jpg" alt="风景1" style="float:left;width:200px;height:250px;">
这张图片将浮动在左边</p>
    尝试一下

  • 图像映射

    HTML的<map>标签定义图像映射。图像映射是具有可点击区域的图像。在下例中，单击酒壶或酒杯： 
    <img src="images/j1.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="53,46,105,123" alt="jiuhu" href="images/j2.jpg">
  <area shape="rect" coords="122,112,149,166" alt="jiubei" href="images/j3.jpg">
</map>
    尝试一下
    所述name的的属性<map>标签与相关联<img>的属性usemap并创建图像和地图之间的关系。该<map>元素包含许多<area>标记，用于定义图像映射中的可单击区域。

  • 背景图

    要在HTML元素上添加背景图像，请使用CSS属性 background-image： 
    <!-- 在整个页面添加背景图 -->
<body style="background-image:url('images/f1.jpg')">

<h2>背景图</h2>

<!-- 在一个段落添加背景图 -->
<p style="background-image:url('images/f2.jpg')">
...
</p>

</body>

  • <picture>元素

    HTML5引入了<picture>元素，以便在指定图像资源时增加更多灵活性。该<picture>元素包含许多<source>元素，每个元素都引用不同的图像源。这样浏览器可以选择最适合当前视图和/或设备的图像。每个<source>元素都有描述其图像最适合的属性。浏览器将使用<source>具有匹配属性值的第一个元素，并忽略任何后续<source>元素。 如果浏览器窗口（视口）大于765像素，则显示第一张图片;如果不是，则显示另一张图片，但窗口465像素。 
    <picture>
  <source media="(min-width: 765px)" srcset="images/f1.jpg">
  <source media="(min-width: 465px)" srcset="images/f2.jpg">
  <img src="images/f3.jpg" alt="风景3" style="width:auto;">
</picture>
    尝试一下
    注意：始终将<img>元素指定为元素的最后一个子<picture>元素。该<img>元素由不支持该<picture>元素的浏览器使用，或者如果没有<source>匹配的标记。
    提示：屏幕阅读器是一种软件程序，它读取HTML代码，转换文本，并允许用户“收听”内容。屏幕阅读器对盲人，视障人士或学习障碍人士非常有用。

  • 章节总结

    • 使用HTML <img>元素定义图像
    • 使用HTML src属性定义图像的URL
    • 如果无法显示图像的替代文本，请使用HTML属性alt
    • 使用HTML width和height属性定义图像的大小（或者）
    • 使用CSS width和height属性来定义图像的大小
    • 使用CSS float属性让图像浮动
    • 使用HTML <map>元素定义图像映射
    • 使用HTML <area>元素定义图像映射中的可单击区域
    • 使用HTML <img>元素 usemap属性指向图像映射
    • 使用HTML <picture>元素显示不同设备的不同图像
上一节:
下一节: