14、网页图像添加与格式选择全解析

最新推荐文章于 2025-08-26 11:07:46 发布

pytorchlight8

最新推荐文章于 2025-08-26 11:07:46 发布

阅读量18

点赞数

CC 4.0 BY-SA版权

分类专栏： Head First学习法揭秘文章标签：网页图像添加 <img>元素图像格式选择

本文链接：https://blog.youkuaiyun.com/pytorchlight8/article/details/151574652

Head First学习法揭秘专栏收录该内容

53 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

网页图像添加与格式选择全解析

1. 网页图像添加基础

在网页开发中，图像是不可或缺的元素。为网页添加图像，其实就是使用 <img> 元素。在开始使用之前，先来了解一下浏览器是如何处理图像的。

1.1 浏览器处理图像的方式

浏览器处理 <img> 元素与其他元素有所不同。例如 <h1> 或 <p> 元素，浏览器看到这些标签时，只需直接显示即可。但当浏览器遇到 <img> 元素时，它需要先从服务器检索图像，然后才能在页面上显示。

以下是一个包含四个 <img> 元素的网页示例：

<html>
  <head>
    <title>Head First Lounge Elixirs</title>
  </head>
  <body>
    <h1>Our Elixirs</h1>
    <h2>Green Tea Cooler</h2>
    <p>
        <img src="../images/green.jpg">
        Chock full of vitamins and minerals, this elixir combines 
        the h