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>