html宠物商城首页代码
时间: 2024-06-09 21:03:05 浏览: 10
HTML宠物商城首页代码通常包括以下部分:
1. DOCTYPE声明:定义文档类型,告诉浏览器使用哪个HTML版本来解析文档。
2. HTML标签:HTML文档的根元素,包含<head>和<body>两个子元素。
3. head标签:包含页面的元信息,如标题、样式表、脚本等。
4. body标签:包含页面的主要内容,如导航栏、轮播图、产品展示、底部信息等。
下面是一个简单的HTML宠物商城首页代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>宠物商城</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">宠物用品</a></li>
<li><a href="#">宠物食品</a></li>
<li><a href="#">宠物医疗</a></li>
</ul>
</nav>
</header>
<main>
<section class="banner">
<img src="banner.jpg" alt="宠物商城">
</section>
<section class="products">
<h2>热门商品</h2>
<ul>
<li>
<img src="product1.jpg" alt="商品1">
<h3>商品1</h3>
<p>价格:100元</p>
</li>
<li>
<img src="product2.jpg" alt="商品2">
<h3>商品2</h3>
<p>价格:200元</p>
</li>
<li>
<img src="product3.jpg" alt="商品3">
<h3>商品3</h3>
<p>价格:300元</p>
</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 宠物商城</p>
</footer>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)