上一节:
下一节:

  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属性指定图像的宽度和高度。或者,您可以使用widthheight属性来设置:
     <img alt="风景图片1" style="width:100;height:125;" src="images/f1.jpg"><br>
             <img alt="风景图片3" height="500px" width="400px" src="images/f3.jpg">
    
    
    尝试一下
    widthheight属性总是限定图像的宽度和高度。
    注意:始终指定图像的宽度和高度。如果未指定宽度和高度,则在加载图像时页面会闪烁。
    那图像用widthheight,还是style呢?widthheightstyle属性在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 widthheight属性定义图像的大小(或者)
    • 使用CSS widthheight属性来定义图像的大小
    • 使用CSS float属性让图像浮动
    • 使用HTML <map>元素定义图像映射
    • 使用HTML <area>元素定义图像映射中的可单击区域
    • 使用HTML <img>元素 usemap属性指向图像映射
    • 使用HTML <picture>元素显示不同设备的不同图像
上一节:
下一节: