【2024】前端学习笔记4-图像标记

最新推荐文章于 2025-03-08 09:46:48 发布

丶重明

最新推荐文章于 2025-03-08 09:46:48 发布

阅读量566

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_42527269/article/details/142182952

前端专栏收录该内容

19 篇文章

订阅专栏

在 HTML 中，<img>标签用于在网页中插入图像。

基本语法：

<img src="图像文件地址" alt="替代文本">

src：指定图片的路径，可以是相对路径、绝对路径。
alt：为图像提供代替文本，如图像无法显示时，这个文本会显示，以提供图像的描述。

示例：图片来源分别为互联网和本地

<body>
   <!--图片来源为互联网-->
   <img src="https://cdn.pixabay.com/photo/2023/09/29/14/58/road-8284023_1280.jpg" alt="风景" width="200px">
   <!--图片来源为本地-->
   <img src="C:\Users\yyang\Desktop\html-study\image\色彩.jpg" alt="色彩" width="200px"">
</body>

展示效果：

在这里插入图片描述

width：设置图像的宽度，可以等比例缩放，这里设置为200px
height：设置图像的高度
border：设置图像的边框

示例：给图像设置边框

<body>
   <!--图片来源为互联网-->
   <img src="https://cdn.pixabay.com/photo/2023/09/29/14/58/road-8284023_1280.jpg" alt="风景" width="200px">
   <!--图片来源为本地-->
   <img src="C:\Users\yyang\Desktop\html-study\image\色彩.jpg" alt="色彩" width="200px" border="10px">
</body>