2022年1月13日，学习html的表格、列表和表单标签。
今日主要学习内容：
1 表格标签
table 定义表格的标签
tr 定义表格的行
th 定义表头单元格 文字会加粗居中显示
td 定义表格单元格
<table>
<tr><th>11</th><th>12</th><th>13</th></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
表格不是用来布局页面的，是用来展示数据的。table、tr、td是嵌套关系。
1.1 表格标签的属性
属性要写在table标签
<table align="center" border="5" cellpadding="20" cellspacing="1" width="5">
<tr><th>11</th><th>12</th><th>13</th></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
1.2 表格结构标签
<table>
thead 定义表格的头部，内部必须有tr 标签，位于第一行
<thead>
<tr><th>11</th><th>12</th><th>13</th></tr>
</thead>
tbody 定义表格的主体
<tbody>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</tbody>
</table>1.3 合并单元格
跨行合并：rowspan=“合并单元格的个数”。
跨列合并：colspan=“合并单元格的个数”。
目标单元格：
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
合并单元格步骤：
1 先确定是跨行还是跨列合并。
2 找到目标单元格，写上 合并方式=合并的单元格数量。
3 删除多余的单元格。
<table align="center" border="1" cellpadding="20" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td><!-- 12和13单元格跨列合并，并删除13单元格 -->
</tr>
<tr>
<td rowspan="2"></td><!-- 21和31单元格跨行合并，并删除31单元格 -->
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
2 列表标签
2.1 无序列表
ul 表示无序列表
<ul>
<li> li 表示列表项</li>
<li>各个列表项之间没有顺序，是并列的</li>
<li> ul 中只能嵌套 li </li>
<li><p>li 相当于一个容器，可以容纳所有元素</p></li>
</ul>
2.2 有序列表
ol 表示有序列表
<ol>
<li> ol 中只能嵌套 li </li>
<li>其他与 ul 中相同</li>
</ol>
2.3 自定义列表
dl 表示自定义列表
<dl>
<dt> dt 定义项目</dt>
<dd> dd 描述每一个项目</dd>
<dd>自定义列表常用语对术语或名词进行解释和描述</dd>
<dd>自定义列表的列表项前没有任何项目符号</dd>
<dd> dl 中只能包含 dt 和 dd </dd>
<dd> dt 和 dd 个数没有限制，通常一个 dt 对应多个 dd </dd>
</dl>
3 表单标签
3.1 表单域
form 定义表单域，把范围内的表单元素信息提交给服务器
<form action="demo.php" method="POST" name="form1">
</form>
3.2 input输入表单元素
<form action="demo.php" method="POST" name="form1">
<h4>input 输入表单元素</h4>
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
密码：<input type="password" name="password" maxlength="6"> <br>
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked"><br>
<input type="submit" value="注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"><br>
上传头像：<input type="file">
</form>
3.2.1 name 和 value 是每个表单元素都有的属性值，只用给后台人员使用
3.2.2 name 表单元素的名字，要求单选按钮和复选框要有相同的 name 值
3.2.3 单选按钮和复选框可以设置 checked 属性，一打开页面可以默认选择该表单元素
3.3 label标签
<form>
<h4>label 标签为 input 元素定义标注</h4>
<label for="user">用户名：</label><input type="text" id="user" name="user"><br>
<label for="nan">男</label><input type="radio" id="nan" name="sex_">
<label for="nv">女</label><input type="radio" id="nv" name="sex_">
</form>
label 标签用于绑定一个表单元素，当点击 label 标签内文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，增加用户体验。
label标签的for属性应当与相关元素的id属性相同
3.4 select下拉表单元素
<form>
<h4>select 下拉表单元素</h4>
籍贯：
<select>
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
</select>
</form>
3.4.1 select 中至少包含一对 option
3.4.2 在 option 中定义 selected="selected"，当前项即为默认选中项
3.5 textarea文本域元素
<form>
<h4>textarea 文本域元素</h4>
留言板：
<textarea rows="5" cols="20">欢迎留言！</textarea>
</form>
文本内容较多时使用。
rows=“显示的行数” cols=“每行的字符数”
4 总结
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
table 定义表格的标签
tr 定义表格的行
th 定义表头单元格 文字会加粗居中显示
td 定义表格单元格
<table align="center" border="5" cellpadding="20" cellspacing="1" width="5">
thead 定义表格的头部，内部必须有tr 标签，位于第一行
<thead>
<tr><th>11</th><th>12</th><th>13</th></tr>
</thead>
tbody 定义表格的主体
<tbody>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</tbody>
</table><p></p>
<table align="center" border="1" cellpadding="20" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td><!-- 12和13单元格跨列合并，并删除13单元格 -->
</tr>
<tr>
<td rowspan="2"></td><!-- 21和31单元格跨行合并，并删除31单元格 -->
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
ul 表示无序列表
<ul>
<li> li 表示列表项</li>
<li>各个列表项之间没有顺序，是并列的</li>
<li> ul 中只能嵌套 li </li>
<li><p>li 相当于一个容器，可以容纳所有元素</p></li>
</ul>
ol 表示有序列表
<ol>
<li> ol 中只能嵌套 li </li>
<li>其他与 ul 中相同</li>
</ol>
dl 表示自定义列表
<dl>
<dt> dt 定义项目</dt>
<dd> dd 描述每一个项目</dd>
<dd>自定义列表常用语对术语或名词进行解释和描述</dd>
<dd>自定义列表的列表项前没有任何项目符号</dd>
<dd> dl 中只能包含 dt 和 dd </dd>
<dd> dt 和 dd 个数没有限制，通常一个 dt 对应多个 dd </dd>
</dl>
form 定义表单域，把范围内的表单元素信息提交给服务器
<form action="demo.php" method="POST" name="form1">
<h4>input 输入表单元素</h4>
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
密码：<input type="password" name="password" maxlength="6"> <br>
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked"><br>
<input type="submit" value="注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"><br>
上传头像：<input type="file">
<h4>label 标签为 input 元素定义标注</h4>
<label for="user">用户名：</label><input type="text" id="user" name="user"><br>
<label for="nan">男</label><input type="radio" id="nan" name="sex_">
<label for="nv">女</label><input type="radio" id="nv" name="sex_">
<h4>select 下拉表单元素</h4>
籍贯：
<select>
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
</select>
<h4>textarea 文本域元素</h4>
留言板：
<textarea rows="5" cols="20">欢迎留言！</textarea>
</form>
</body>
</html>
2612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
