本文详细介绍了HTML中表格标签的使用，包括`<table>`、`<tr>`、`<td>`等，以及CSS属性如`align`、`border`、`cellpadding`和`cellspacing`的应用。同时，着重讲解了表单元素，如`<input>`、`<select>`、`<textarea>`以及单选框和复选框的使用和CSS控制。
表格标签
用于展示数据：
<table>
<tr>
<td>单元格内文字</td>
</tr>
</table>
<table></table>定义表格的标签
<tr></tr>表格中的行
<td></td>(table data)单元格中的数据。
但是为突出重要性，第一行通常设为表头单元格。
那么问题来了，为什么没边框，（标签和CSS相似）
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 表格相对周围元素对齐方式 |
| border | 1或"" | 规定是否有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为2 |
| width | 像素值或百分比 | 规定表格宽度 |
align：
border：
cellpadding：
cellspacing:
width height:
排行榜：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京剧排行榜</title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="400">
<tr>
<th>排名</th><th>关键词</th><th>趋势</th><th>搜索数</th><th>链接</th>
</tr>
<tr>
<td>1</td><td>《红鬃烈马》</td><td><img src="图片\屏幕截图 2024-01-11 210807.png" /></td><td>110</td><td><a href=https://baike.baidu.com/item/%E7%BA%A2%E9%AC%83%E7%83%88%E9%A9%AC/34511 target="_blank">《红鬃烈马》</a></td>
</tr>
<tr>
<td>2</td><td>《失空斩》</td><td><img src="图片\屏幕截图 2024-01-11 210807.png" /></td><td>101</td><td><a href=https://baike.baidu.com/item/%E5%A4%B1%E7%A9%BA%E6%96%A9/33411 target="_blank">《失空斩》</a></td>
</tr>
<tr>
<td>3</td><td>《伍子胥》</td><td><img src="图片\屏幕截图 2024-01-11 210807.png" /></td><td>90</td><td><a href=https://scripts.xikao.com/play/06000002 target="_blank">《伍子胥》</a></td>
</tr>
<tr>
<td>4</td><td>《四郎探母》</td><td><img src="图片\屏幕截图 2024-01-11 210807.png" /></td><td>87</td><td><a href=https://baike.baidu.com/item/%E5%9B%9B%E9%83%8E%E6%8E%A2%E6%AF%8D/3265508 target="_blank">《四郎探母》</a></td>
</tr>
<tr>
<td>5</td><td>《铡美案》</td><td><img src="图片\屏幕截图 2024-01-11 210807.png" /></td><td>77</td><td><a href=https://baike.baidu.com/item/%E9%93%A1%E7%BE%8E%E6%A1%88/9554343 target="_blank">《铡美案》</a></td>
</tr>
<tr>
<td>6</td><td>《霸王别姬》</td><td><img src="图片\屏幕截图 2024-01-11 210807.png" /></td><td>62</td><td><a href=https://baike.baidu.com/item/%E9%9C%B8%E7%8E%8B%E5%88%AB%E5%A7%AC/8130036 target="_blank">《霸王别姬》</a></td>
</tr>
<tr>
<td>7</td><td>《辕门斩子》</td><td><img src="图片\屏幕截图 2024-01-11 210807.png" /></td><td>60</td><td><a href=https://baike.baidu.com/item/%E8%BE%95%E9%97%A8%E6%96%A9%E5%AD%90/2990999 target="_blank">《辕门斩子》</a></td>
</tr>
</table>
</body>
</html>
表格也拥有结构标签：
<thead></thead>:定义表格头部，内部拥有<tr>标签；
<tbody></tbody>：定义表格主体。
合并单元格：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数"
跨行:最上侧单元格为目标单元格，写合并代码
跨列:最左侧单元格为目标单元格，写合并代码
如：
列表标签
无序列表：
<ul><ul>
<li><li>
在<ul>里只能放<li>标签，而<li>中可以放任何标签
有序列表
同理：
<ol>
<li></li>
</ol>
自定义列表：
自定义列表对术语进行解释与描述
<dl>
<dt>名词</dt>（可以放任何标签）
<dd>名词解释1</dd>（可以放任何标签）
<dd>名词解释2</dd>
</dl>
表单标签
表单用于收集用户信息
包括表单域，表单控件，表单信息
表单域
<form>定义表单域，实现信息收集与传递。把范围内元素信息提交给服务器。
<input type="属性值" />收集用户信息；根据不同属性值，输入字段有很多形式。
input
属性值：
1.text:可输入文本，默认20个字符。
2.password:定义密码，字符被掩盖。
3.radio:单选按钮
4.checkbox:复选按钮
问题来了，为什么单选框可以多选？
5.name
由于表单元素众多，那么就可以用name个表单元素起名进行区分，就可以起到单选作用。
6.value：规定元素值：
7.checked:默认选中
<input type="radio" name="sex" checked="checked">vers
8.submit：定义提交按钮，作用是把form表单元素值提交到服务器
<input type="submit" value="免费注册">
9.reset：清空表单数据
10.button：可点击按钮（多数情况下用于通过js启动脚本）
例如获取验证码按钮。
11.file定义输入字段和浏览按钮，供文件上传。
<label>标签：
增加用户体验，绑定表单元素，点击<label>内文本时，浏览器自动选择表单元素。
语法：
<label for="sex">男</label id="sex">
<input type="radio" name="sex" id="sex">
select
<select>下拉表单元素。可以节约空间
语法：
<select>
<option></option>
</select>
其中selected表示处于选定状态；
textarea
用于大量书写元素，特大号文本框。
同时也可以调节文本框大小
用处不大，可以在CSS中实现。
注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小绿注册页面</title>
</head>
<body>
<h2> 小绿注册
</h2>
<table width="400">
<tr>
<td>User:</td>
<td><input type="text" value="用户名"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="password"> <input type="button" value="获取验证码"></td>
</tr>
<tr>
<td>性别： </td>
<td><input type="radio" name="sex" checked="checked" id="Ver"><label for="Ver">Ver</label>
<input type="radio" name="sex" id="Tp"><label for="Tp">Tp</label>
<input type="radio" name="sex" id="other"><label for="other">other</label>
<td>
</tr>
<tr>
<td>Brith: </td>
<td> <select>
<option>50后</option>
<option>60后</option>
<option>70后</option>
<option>80后</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
<select>
<option>12月</option>
<option>11月</option>
<option>10月</option>
<option>9月</option>
<option>8月</option>
<option>7月</option>
<option>6月</option>
<option>5月</option>
<option>4月</option>
<option>3月</option>
<option>2月</option>
<option>1月</option>
</select>
<select>
<option>1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option>6号</option>
<option>7号</option>
<option>8号</option>
<option>9号</option>
<option>10号</option>
<option>11号</option>
<option>12号</option>
<option>13号</option>
<option>14号</option>
<option>15号</option>
<option>16号</option>
<option>17号</option>
<option>18号</option>
<option>19号</option>
<option>20号</option>
<option>21号</option>
<option>22号</option>
<option>23号</option>
<option>24号</option>
<option>25号</option>
<option>26号</option>
<option>27号</option>
<option>28号</option>
<option>29号</option>
<option>30号</option>
<option>31号</option>
</select>
</td>
</tr>
<tr>
<td>where:</td>
<td><input type="text" value="地区"></td>
</tr>
<tr>
<td>Purpose:</td>
<td><input type="checkbox">交友 <input type="checkbox">情侣
<input type="checkbox">约会
<input type="checkbox">聊天
<input type="checkbox">其他
</td>
</tr>
<tr>
<td>Introduce:</td>
<td>
<textarea>介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="确认">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" checked="checked" id="协议书"><label for="协议书">我已阅读《政策》</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://www.green.cn/" target="_parent">密码登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>介绍不同身份</li>
<li>尊重不同取向</li>
<li>提供设交空间</li>
<li>净化网络环境</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
扫一扫
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
