帮我用HTML写一下下面的作业 学生全面了解并掌握 Web 应用开发基础知识HTML5、CSS3等◇并能够综合应用开发网页。通过实验项目作品◇以考查学生的动手能力和解决问题的能力 结合专业课程◇从项目1、2、3、4四个项目中任选两个完成项目作品。 (1)项目1(通过表格制作商城首页,为了方便学生掌握表格的属性及其应用◇通过设置表格的宽高、对齐方式、表格的行标签的宽高和背景色等属性◇使页面内容简单整齐地排列出来。)、+ ◇2)项目2◇实现网页中的买家评论信息◇合理的嵌套使用各种标签◇实现改变网页内容的样式以及在网页中整齐地展示买家评论的内容。)、+ (3)项目3◇通过表单实现酒店筛选页面◇可以通过表单将信息列出让用户筛选◇掌握文本框、下拉菜单、单选框、复选框的使用。)说◇4)项目4◇设置网页中图片的属性◇通过 HTML 与 CSS 共同实现◇掌握< img >标签的各种属性◇给图片添加超链接的方法。◇+ 完成自选的两个项目作品◇提交项目作品源代码和运行效果。
时间: 2024-01-24 12:18:40 浏览: 87
<!DOCTYPE html>
<html>
<head>
<title>Web应用开发基础知识实验项目</title>
<meta charset="UTF-8">
<style>
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #ccc;
}
.comment {
margin-top: 30px;
border: 1px solid black;
padding: 10px;
width: 50%;
margin: 0 auto;
}
.comment h3 {
font-size: 24px;
text-align: center;
}
.comment p {
font-size: 18px;
line-height: 1.5;
text-indent: 2em;
}
form {
width: 80%;
margin: 0 auto;
margin-top: 30px;
}
label {
display: block;
margin-top: 10px;
font-size: 18px;
}
input[type="text"], select {
margin-top: 5px;
padding: 5px;
font-size: 18px;
border: 1px solid black;
border-radius: 5px;
}
input[type="submit"] {
margin-top: 20px;
padding: 10px;
font-size: 18px;
background-color: #ccc;
border: none;
border-radius: 5px;
cursor: pointer;
}
img {
display: block;
margin: 0 auto;
width: 50%;
height: auto;
}
</style>
</head>
<body>
<h1>Web应用开发基础知识实验项目</h1>
<h2>项目1:商城首页</h2>
<table>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>库存</th>
<th>购买</th>
</tr>
<tr>
<td>商品1</td>
<td>100元</td>
<td>1000件</td>
<td><button>购买</button></td>
</tr>
<tr>
<td>商品2</td>
<td>200元</td>
<td>500件</td>
<td><button>购买</button></td>
</tr>
<tr>
<td>商品3</td>
<td>300元</td>
<td>200件</td>
<td><button>购买</button></td>
</tr>
</table>
<h2>项目2:买家评论</h2>
<div class="comment">
<h3>买家评论</h3>
<p>这个商品真的很不错,质量超好,价格也很实惠,值得购买!</p>
</div>
<h2>项目3:酒店筛选页面</h2>
<form>
<label for="location">地点:</label>
<input type="text" id="location" name="location">
<label for="price">价格:</label>
<select id="price" name="price">
<option value="">请选择</option>
<option value="1">100元以下</option>
<option value="2">100-200元</option>
<option value="3">200-300元</option>
<option value="4">300元以上</option>
</select>
<label for="room-type">房型:</label>
<input type="radio" id="single" name="room-type" value="single">
<label for="single">单人房</label>
<input type="radio" id="double" name="room-type" value="double">
<label for="double">双人房</label>
<label for="wifi">WiFi:</label>
<input type="checkbox" id="wifi" name="wifi" value="1">
<label for="wifi">有</label>
<input type="checkbox" id="no-wifi" name="wifi" value="0">
<label for="no-wifi">无</label>
<input type="submit" value="筛选">
</form>
<h2>项目4:网页中的图片</h2>
<a href="https://www.example.com"><img src="example.jpg" alt="示例图片"></a>
</body>
</html>
阅读全文