图文并茂类页面"/>
HTML构建图文并茂类页面
- 插入图片
插入方式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>
- height和width属性
height:制定图片的高度
width：制定图片的宽度
按需求进行设计
- 图片的格式
Gif:支持动画，支持半透明。
Png:不支持动画，体积小
Jpg:不支持动画，不支持半透明，可以展示丰富多彩的颜色。
- 相对路径（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"/>
绝对路径的使用：在树形目录结构中，从根节点到查找文件的唯一通路。
- 为图片添加标题
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>更多推荐
HTML构建图文并茂类页面
发布评论