HTML入门学习之图文链接列表知识小结与图文实战练习 -

首页 > 博客列表 > HTML入门学习之图文链接列表知识小结与图文实战练习

博主信息

博文 12

粉丝 0

访问量 8742

专题推荐

更多>

HTML入门之图片、链接、列表知识小结与图文练习

图片

语法：<img src="static/image/bear.jpg" alt="Bear" />
链接
语法：<a href="https://www.php.cn">php.cn第19期直播班</a>
列表
无序列表
语法：
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
有序列表
-语法：
<dl>
<dt>地址</dt>
<dd>合肥市</dd>
<dt>邮箱</dt>
<dd>admin@php.cn</dd>

</dl>

作业效果图

作业代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>久久的动物园</title>
</head>
<body>
<H1>动物篇</H1>
<ul class="zoo" style="display: flex; list-style-type: style none">
<li class="item">
 <a href="https://www.php.cn"><img src="static/image/bear.jpg" alt="可爱的小熊" /><br/> 可爱的小熊</a>
</li>
&nbsp;
<li class="item">
 <a href="https://www.php.cn"><img src="static/image/rabbit.jpg" alt="肉肉的白兔" /><br/>酷酷的熊猫</a>
</li>
&nbsp;
<li class="item">
 <a href="https://www.php.cn"><img src="static/image/peacock(1).jpg" alt="高傲的孔雀" /><br/>高傲的孔雀</a>
</li>
&nbsp;
<li class="item">
 <a href="https://www.php.cn"><img src="static/image/cat.jpg" alt="萌萌的猫咪" /><br/>萌萌的猫咪</a>
</li>
&nbsp;
<li class="item">
 <a href="https://www.php.cn"><img src="static/image/swan(1).jpg" alt="优雅的天鹅" /><br/>优雅的天鹅</a>
</li>
&nbsp;
</ul>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

MarkDown入门基础语法学习与HTML标签学习小结

2022-03-17 16:35:01

HTML入门之图片、链接、列表知识小结与图文练习

图片

链接

列表

无序列表

有序列表

作业效果图

作业代码