收藏
批改状态：合格
老师批语：
这里有一段相对完整的html/css代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格表单应用</title>
<style>
table {
border-color: #ffffff;
}
tr {
text-align: center;
}
th {
padding: 15px 15px;
}
td {
padding: 20px 20px;
}
.tr {
background-color: rgba(0,0,0,.05);
}
</style>
</head>
<body>
<!--cellspacing: 设置单元格与表格之间的间隙大小,0为折叠-->
<!--cellpadding: 设置单元格内容与单元格之间的内边距, 不要太拥挤-->
<table border="1" cellspacing="0" cellpadding="5" align="center" width="800">
<thead>
<tr class="tr">
<th colspan="4">
<h2>订餐统计</h2>
</th>
</tr>
<tr>
<th colspan="2">
<label for="nickname">姓名：</label>
<input type="text" name="nickname" id="nickname" class="">
</th>
<th colspan="2">
<label for="password">密码：</label>
<input type="password" name="password" id="password" class="">
</th>
</tr>
<tr class="tr">
<th colspan="2">
<input type="radio" name="gender" value="male" id="canteen1"><label for="canteen1">市局饭堂</label>
</th>
<th colspan="4">
<input type="radio" name="gender" value="male" id="canteen2"><label for="canteen2">物流饭堂</label>
</th>
</tr>
<tr>
<th colspan="2">
<label>日期：</label>
<input type="date" id="time1" name="time">-<input type="date" id="time2" name="time">
</th>
<th colspan="2">
<button type="button">确定</button>
<input type="reset">
</th>
</tr>
</thead>
<tbody>
<tr class="tr">
<td>餐次</td>
<td>已订餐</td>
<td>已就餐</td>
<td>已订餐未就餐</td>
</tr>
<tr>
<td>早餐</td>
<td>12</td>
<td>23</td>
<td>34</td>
</tr>
<tr class="tr">
<td>午餐</td>
<td>12</td>
<td>25</td>
<td>42</td>
</tr>
<tr>
<td>晚餐</td>
<td>62</td>
<td>12</td>
<td>72</td>
</tr>
</tbody>
<tfoot>
<tr class="tr">
<td>总计</td>
<td>86</td>
<td>60</td>
<td>148</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图如下：
上述代码中涉及知识点注释总结：
一、<DOCTYPE html> 除html类型外，还有xml 、xhtml。（声明文档类型）
二、<head>中常用的标签：
<title> 定义网页文档标题
<meta> 定义网页信息，如文档编码：utf-8
<link>链接外部文件
1. 链接样式表 <link rel=“stylesheet” type=“text/css” href=“路径”>
2. 链接缩略图标<link rel = “shotcut-icon” type=“image/x-icon” href =“路径”>
rel 定义文档与文件的关系 type 文件类型 href 文件路径
<style> 定义内部样式
三、<body>中常用的标签：
<a> 定义超链接：href
<div> 定义区块
<img> 定义图片
<table>定义表格：cellspacing(设置单元格与表格之间的间隙大小,0为折叠)、cellpadding(设置单元格内容与单元格之间的内边距, 不要太拥挤)
<input>定义表单：text、password、email、number、date、checkbox、radio、submit、rese
<textarea> 定义文本域
<button>定义按钮：submit、button
<select> 定义下拉
<option>下拉标签内的字标签
<span>定义普通文本
<iframe>定义内联框架：for
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
