09 图像标签

最新推荐文章于 2024-09-12 18:22:06 发布

cbs124758

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量27

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/cbs124758/article/details/135029070

版权

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的图像标签及其关键属性，包括src（指定图像URL）、alt（替代文字）、title（鼠标悬停标题）、width和height（控制图片尺寸）。通过实例展示了如何使用这些属性来优化网页图像显示。

摘要由CSDN通过智能技术生成

09 图像标签

语法

<img src="图片的URL">

属性

src 属性用于指定图像URL

alt 属性用于图像无法显示时显示的替换文字

title 属性用于鼠标悬停在图像上显示的标题

width属性指定图像的宽度，如果仅指定宽度或高度，浏览器会自动等比例缩放图片

height 属性指定图像的宽度，如果仅指定宽度或高度，浏览器会自动等比例缩放图片

特点

图像标签为单标签，仅有开始标签
src为必需属性
图像标签不换行
属性名=“属性值”
属性在尖括号内部，在标签名后边
标签名和属性名之间用逗号隔开
属性名和属性名之间用逗号隔开，不区分先后顺序

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 图像标签 -->
    <img src="./cat.jpg" alt="这是一只猫">
    <img src="./dog.jpg" alt="这是一只狗">
    <!-- alt属性用于图像无法显示时显示的替换文字 -->
    <img src="./cat2.jpg" alt="这是一只猫">
    <!-- title属性用于鼠标悬停在图像上显示的标题 -->
    <img src="./cat.jpg" title="这是一只猫">
    <!-- width属性指定图像的宽度，如果仅指定宽度或高度，浏览器会自动等比例缩放图片 -->
    <img src="./cat.jpg" width="200">
    <!-- height属性指定图像的宽度，如果仅指定宽度或高度，浏览器会自动等比例缩放图片 -->
    <img src="./cat.jpg" height="800">
</body>
</html>