HTML篇三——（3）

lewis 1年前 (2024-04-02) 阅读数 5 #技术

一、HTML常用标签

文本格式化标签、<div>和<span>标签见：https://editor.csdn.net/md/?articleId=126971409

1.7 图像标签

<img>标签用于定义HTML页面中的图像，其中img为单词image的缩写，意为图像；src是<img>标签的必须属性，它用于制定图像文件的路径和文件名（所谓舒属性：简单理解为属于这个图像标签的特性）；

1.语法格式如下：

<img src="图像URL" />

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签学习</title>
</head>
<body>
    <h4>图像标签学习：</h4>
    <img src="happyday.png" />
</body>
</html>

2.图像标签的其他属性

属性

属性值

说明

src

图片路径

必须属性

alt

文本

替换文本，图像不能显示的文字

title

文本

提示文本，鼠标放到图像上，显示的文字

width

像素

设置图像的宽度

height

像素

设置图像的高度

border

像素

设置图像的边框粗细

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图像标签学习</title>
    </head>
    <body>
        <h4>图像标签学习:</h4>
        <img src="happyday.png" />
        <h4>图像标签-alt 替换文本：图像显示不出来的时候用文字替换</h4>
        <img src="happyday1.png" alt=“我是替换文字” />
        <h4>图像标签-title 提示文本：鼠标放在图像上提示的文字</h4>
        <img src="happyday.png" title="我是提示文字" />

        <h4>图像标签-像素 width属性: 给图像设置宽度</h4>
        <img src="happyday.png" title="我是提示文字" width="300" />
        <h4>图像标签-像素 height属性: 给图像设置高度</h4>
        <img src="happyday.png" title="我是提示文字" height="200" />
        <h4>图像标签-像素 border属性: 给图像设置边框</h4>
        <img src="happyday.png" title="我是提示文字" width="250" border="15" />
    </body>
</html>