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

1. 插入图片

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

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

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

<div style="background: url('img/2ee18-231100-163232346010b0.jpg'); width:1110px;height:550px;"></div>

1. height和width属性

height:制定图片的高度

width：制定图片的宽度

按需求进行设计

1. 图片的格式

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

Png:不支持动画，体积小

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

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

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

例子：如图所示

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

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

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

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

代码可以写成

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

下一级目录 直接写

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

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

1. 为图片添加标题

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>