HTML学习总结基础篇图像标签imag的使用及其属性

最新推荐文章于 2024-04-22 21:35:12 发布

Ace_bb

最新推荐文章于 2024-04-22 21:35:12 发布

阅读量1.9k

点赞数

分类专栏： HTML、CSS、JS 文章标签： html css js

本文链接：https://blog.csdn.net/Ace_bb/article/details/104275913

版权

HTML、CSS、JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

图像标签

在HTML中，用img标签显示图像。
语法格式： < img src=" 图像路径">，src为必须要写的元素，用于指定文件的路劲和文件名

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像索	设置图像的宽度
height	像素	设置图像的高度
border	像索	设置图像的边框粗细

示例代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签及其属性</title>
</head>
<body>
    <h3>使用img引用图像，src为路径</h3>
    <img src="imag_l.jpg">
    <h3>alt表示的是在图片加载不出来显示不了时代替的文字</h3>
    <img src="imag_l.jpg" alt="这是一张海贼王的图片">
    <h3>title表示在鼠标移到图片时，在鼠标旁边提示的文字</h3>
    <img src="imag_l.jpg" title="这是一张海贼王的图片">
    <h3>width  height border 就是图片的长宽，边框的粗细</h3>
    <img src="imag_l.jpg" width="600px" height="300px" border="700">
</body>
</html>
在这里插入代码片

图像标签的路径

目录文件夹：就是普通文件夹，里面存放了我们做页面所需要的相关素材。
根目录：打开目录文件夹的第一层就是根目录

路径可以分为相对路径和绝对路径

相对路径

相对路径：以引用文件夹所在位置为参考基础，而建立出的目录路径。 也就是相对于当前编写的HTML文件的位置 如果相对于HTML文件属于同一级的文件夹，则可以直接写文件名引用。如果图片相对于HTML文件属于下一级文件，则需要用文件夹名/图片文件名引用图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签及其属性</title>
</head>
<body>
    <h3>使用img引用图像，src为路径</h3>
    <img src="imag_l.jpg">
    <img src="images/imag_first.jpg">
</body>
</html>

如果图片相对于HTML文件属于上一级路径，则使用**…/** 引用图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签及其属性</title>
</head>
<body>
    <h3>使用img引用图像，src为路径</h3>
    <img src="../image/image_lf.jpg">
</body>
</html>