<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>酒店管理系统</h1> </header> <main> <h2>酒店客房管理</h2> <table> <thead> <tr> <th>ID</th> <th>类型</th> <th>价格</th> <th>编辑</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>单人房</td> <td>¥200</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>3</td> <td>豪华房</td> <td>¥500</td> <td><button class="edit-btn">编辑</button></td> </tr> </tbody> </table> <div class="add-form"> <h3>添加客房</h3> <form> <div> <label for="room-id">ID:</label> <input type="number" id="room-id" required> </div> <div> <label for="room-type">类型:</label> <input type="text" id="room-type" required> </div> <div> <label for="room-price">价格:</label> <input type="number" id="room-price" required> </div> <button type="submit">添加</button> </form> </div> </main> <script src="script.js"></script> </body> </html>给代码逐行加上注释
时间: 2023-08-17 08:08:36 浏览: 103
<!DOCTYPE html> <!-- 声明文档类型 -->
<html>
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
<title>酒店管理系统</title> <!-- 设置网页标题 -->
<link rel="stylesheet" href="style.css"> <!-- 引入外部样式表 -->
</head>
<body>
<header> <!-- 设置网页头部 -->
<h1>酒店管理系统</h1> <!-- 设置网页标题 -->
</header>
<main> <!-- 设置网页主体内容 -->
<h2>酒店客房管理</h2> <!-- 设置主体内容标题 -->
<table> <!-- 创建表格 -->
<thead> <!-- 设置表格头部 -->
<tr> <!-- 创建表格行 -->
<th>ID</th> <!-- 创建表格头部单元格 -->
<th>类型</th>
<th>价格</th>
<th>编辑</th>
</tr>
</thead>
<tbody> <!-- 设置表格内容 -->
<tr>
<td>1</td> <!-- 创建表格单元格,并填写内容 -->
<td>单人房</td>
<td>¥200</td>
<td><button class="edit-btn">编辑</button></td> <!-- 创建带有“编辑”按钮的单元格 -->
</tr>
<tr>
<td>2</td>
<td>双人房</td>
<td>¥300</td>
<td><button class="edit-btn">编辑</button></td>
</tr>
<tr>
<td>3</td>
<td>豪华房</td>
<td>¥500</td>
<td><button class="edit-btn">编辑</button></td>
</tr>
</tbody>
</table>
<div class="add-form"> <!-- 创建添加客房的表单 -->
<h3>添加客房</h3> <!-- 设置表单标题 -->
<form> <!-- 创建表单 -->
<div>
<label for="room-id">ID:</label> <!-- 创建表单标签和输入框 -->
<input type="number" id="room-id" required> <!-- 设置输入框类型为数字,且必填 -->
</div>
<div>
<label for="room-type">类型:</label>
<input type="text" id="room-type" required> <!-- 设置输入框类型为文本,且必填 -->
</div>
<div>
<label for="room-price">价格:</label>
<input type="number" id="room-price" required>
</div>
<button type="submit">添加</button> <!-- 创建提交按钮 -->
</form>
</div>
</main>
<script src="script.js"></script> <!-- 引入外部JavaScript文件 -->
</body>
</html>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)