首页用html语言写一个图文列表显示主页

用html语言写一个图文列表显示主页

时间: 2023-12-13 08:04:51 浏览: 79

好的，以下是一个简单的图文列表显示主页的 HTML 代码示例： ```html <!DOCTYPE html> <html> <head> <title>图文列表显示主页</title> </head> <body> <header> <h1>欢迎来到我的网站</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>最新消息</h2> <ul> <li> <h3>消息标题1</h3> <p>消息内容1</p> </li> <li> <h3>消息标题2</h3> <p>消息内容2</p> </li> </ul> </section> <section> <h2>产品展示</h2> <ul> <li> <h3>产品名称1</h3> <img src="product1.jpg" alt="产品1图片"> <p>产品介绍1</p> </li> <li> <h3>产品名称2</h3> <img src="product2.jpg" alt="产品2图片"> <p>产品介绍2</p> </li> </ul> </section> </main> <footer> <p>版权所有 © 2021 我的网站</p> </footer> </body> </html> ``` 在这个示例中，我们在主体部分使用了 `<section>` 标签来分隔不同的内容区域，然后在每个区域中使用 `<ul>` 和 `<li>` 标签来创建图文列表。列表中的每个图文项包括一个标题 `<h3>`、一张图片 `<img>` 和一段文本 `<p>`。您可以根据需要进行修改和扩展。

阅读全文