HTML构建图文并茂类页面----HTML插入图片

搁浅小泽

已于 2024-07-14 14:50:04 修改

阅读量1.9k

点赞数

文章标签： html css 前端

于 2023-10-16 14:10:48 首次发布

本文链接：https://blog.csdn.net/m0_64148419/article/details/133857231

版权

本文详细介绍了如何在HTML中使用img标签插入图片，包括相对路径和绝对路径的选择，以及如何设置图片的宽度和高度。还讲解了如何使用Figure标签添加图片标题和figcaption内容，涉及GIF、PNG和JPEG格式的特性。

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

1.插入图片

插入方式1：使用img标签插入图片

例如：<img src="img/2ee18-231100-163232346010b0.jpg" alt="用户注册按钮位置" title="用户注册1" width="1138px"/>

插入方式2 图片做背景：使用style=”background”作背景插入

2.height和width属性

height:制定图片的高度

width：制定图片的宽度

按需求进行设计

3.图片的格式

Gif:支持动画，支持半透明。

Png:不支持动画，体积小

Jpg:不支持动画，不支持半透明，可以展示丰富多彩的颜色。

4.相对路径（HTML和图片的位置来比喻）

当前目录：使用 ./来表示。

例子：如图所示

此时可以写成：<img src="./2ee18-231100-163232346010b0.jpg"/>

./可以省略不写即写成：<img src="2ee18-231100-163232346010b0.jpg"/>

上一级目录用 ../来表示

例子：如图所示图片在HTML的上一级目录中

代码可以写成

下一级目录直接写

即 <img src="test-img/2ee18-231100-163232346010b0.jpg"/>

绝对路径的使用：在树形目录结构中，从根节点到查找文件的唯一通路。

5.为图片添加标题

Figure标签来标记文档中的一个图片,采用figcaption标签说明图片的标题。

例子：

HTML代码参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 以下是用户指南content部分的代码 -->
		<div id="content" style="background: #fff;">
			<h2>用户指南</h2>
			<hr size="5" color="red"/>
			<h3 style="color: red;">如何注册 MobileShop 账号？</h3>
			<p>如果你没有可以按照以下操作</p>
<!-- 			<img src="img/2ee18-231100-163232346010b0.jpg" alt="用户注册按钮位置" title="用户注册1" width="138px"/>
			<p>按照注册页面的要求进行填写，并提交：</p>
			<img src="img/2ee18-231100-163232346010b0.jpg" alt="用户注册表单页面" title="用户注册2" width="138px"/>
			<img src="2ee18-231100-163232346010b0.jpg"/>
			<img src="./2ee18-231100-163232346010b0.jpg"/> -->
			<figure>
				<img src="test-img/2ee18-231100-163232346010b0.jpg" width="300px" height="300px"/>
				<figcaption>王朝是一直注意</figcaption>
			</figure>
			
			
		</div>
		<div style="background: url('img/2ee18-231100-163232346010b0.jpg'); width:1110px;height:550px;"></div>
		
	</body>
</html>