一级目录
二级目录
三级目录
表格
表格标签
表格相关属性
表格单元格合并
<!-- 表格标签 -->
<h3> 表格标签 展示数据 </h3>
<p>
table 定义表格标签 <br>
tr 定义表格中的行，嵌套在table中 <br>
td 定义表格中的普通单元格，嵌套在tr中 <br>
th 定义表格中的头部单元格，自动加粗居中 <br>
td 中包含每个单元格的内容 <br>
thead 表格的头部区域 <br>
tbody 表格的主体区域 <br>
</p>
<table border="2" width="300" height="200" cellspacing="0">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>boss_z</td> <td>女</td> <td>20</td>
</tr>
<tr>
<td>little_h</td> <td>男</td> <td>20</td>
</tr>
<tr>
<td>little_x</td> <td>男</td> <td>20</td>
</tr>
<tr>
<td>little_c</td> <td>男</td> <td>20</td>
</tr>
</tbody>
</table>
<!-- 表格常见属性(了解，后续使用css定义) -->
<p>
align 设置表格的位置，左中右 <br>
border 定义边框的粗细像素 <br>
cellpadding 单元格边框与其中内容的距离像素值 <br>
cellspacing 单元格之间的空白，默认2像素 <br>
width 表格的左右宽度 <br>
height 表格的上下高度 <br>
</p>
<!-- 单元格合并 -->
<h3>单元格合并</h3>
<p>
rowspan 跨行合并，上下，后加合并单元格的个数 <br>
colspan 跨列合并，左右，后加合并单元格的个数 <br>
步骤： <br>
1.判断是跨行还是跨列 <br>
2.找到目标单元格，跨行选择靠上的，跨列选择靠左的 <br>
3.把代码写在目标单元格中 <br>
</p>
<table border="2" width="300" height="200" cellspacing="0">
<tbody>
<tr>
<td colspan="2"></td> <td></td>
</tr>
<tr>
<td></td> <td rowspan="2"></td> <td></td>
</tr>
<tr>
<td></td> <td></td>
</tr>
</tbody>
</table>
列表
无序列表
有序列表
自定义列表
<!-- 无序列表 -->
<h3> 无序列表(不分前后，并列) </h3>
<p>
ul 无序列表标签，其中只能嵌套li标签 <br>
li 列表的每一个元素，其中可以嵌套任何元素
</p>
<h4> 我喜欢的歌手 </h4>
<ul>
<li> 米津玄师 </li>
<li> 许嵩 </li>
<li> 薛之谦 </li>
<li> 泽野弘之 </li>
</ul>
<!-- 有序列表 -->
<h3> 有序列表 </h3>
<p>
ol 有序列表标签，其中只能嵌套li标签 <br>
li 列表的每一个元素，其中可以嵌套任何元素
</p>
<h4> 我喜欢的歌手 </h4>
<ol>
<li> 米津玄师 </li>
<li> 许嵩 </li>
<li> 薛之谦 </li>
<li> 泽野弘之 </li>
</ol>
<!-- 自定义列表 -->
<h3> 自定义列表 大哥带几个小弟</h3>
<p>
dl 自定义列表标签 <br>
dt 头部元素，大哥，根节点 <br>
dd 普通元素，小弟，分支，解释说明大哥 <br>
</p>
<dl>
<dt>薛之谦</dt>
<dd>绅士</dd>
<dd>演员</dd>
<dd>刚刚好</dd>
</dl>
标签
表单标签
input标签
label标签(联系后单选框只能选一个)
下拉表单元素和文本域
<!-- 表单标签 -->
<h3> 表单标签，用于收集数据 </h3>
<p>
form 表单域，包含整个表单<br>
属性<br>
action 填地址，指定接受表单数据的服务器地址<br>
method get或post，设定取值方式<br>
name 指定表单的名称<br>
表单控件
input 输入表单元素
select 下拉表单元素
textarea 文本域元素
</p>
<!-- input(输入表单元素) -->
<h3>input(输入表单元素)</h3>
<p>
input 表单元素，单标签，具体见样例<br>
属性<br>
type 表单元素类型，必须有 <br>
name 定义input元素的名称，不能相同，区分每个表单元素 <br>
value input元素的值,默认打开即出现在文本框中 <br>
checked 选框默认选中 <br>
maxlength 输入最大长度 <br>
</p>
<form action="#">
属性<br>
text(输入文本，默认20字符) <input type="text" maxlength="6"> <br>
button(可点击按钮) <input type="button" value="获取验证码"> <br>
checkbox(复选框，可选多个，name相同) <input type="checkbox"name="hobby"> <input type="checkbox"name="hobby"><br>
radio(单选框，只选一个name相同) 男 <input type="radio" name="sex"> 女<input type="radio" name="sex"> <br>
password(密码字段，隐藏) <input type="password"> <br>
submit(提交按钮) <input type="submit"> <br>
reset(清除所有表单数据) <input type="reset"> <br>
file(上传文件) <input type="file"> <br>
</form>
<!-- label标签(辅助input，把汉字和输入框联系起来) -->
<h3>label标签(辅助input，把汉字和输入框联系起来)</h3>
<h4>
1.用label把表单前的汉字包起来<br>
2.设置一个for属性(属性值自定) <br>
3.在input中添加id属性，属性值为第二部设置的 <br>
</h4>
<form action="#">
<label for="text">用户名</label> <input type="text" id="text">
<label for="sex">男</label> <input type="radio" id="sex">
<input type="reset">
</form>
<!-- select 下拉表单元素 -->
<h3> select 下拉表单元素 </h3>
<p>
select 整个表单<br>
option 每个表单选项，至少包含一对<br>
selected option的属性，值设为selected当前项设为默认项<br>
</p>
籍贯:
<select name="籍贯">
<option value="">山东</option>
<option value="">河南</option>
<option value="">M-78星云</option>
<option value="" selected="selected">二次元</option>
</select>
<!-- textarea 文本域 -->
<h3> textarea 文本域(放很多字的大框框) </h3>
<form action="#">
日记
<textarea>
little_h的快乐的一天。
</textarea>
</form>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仙男仙女的常用标签库 下 </title>
</head>
<body>
<!-- 表格标签 -->
<h3> 表格标签 展示数据 </h3>
<p>
table 定义表格标签 <br>
tr 定义表格中的行，嵌套在table中 <br>
td 定义表格中的普通单元格，嵌套在tr中 <br>
th 定义表格中的头部单元格，自动加粗居中 <br>
td 中包含每个单元格的内容 <br>
thead 表格的头部区域 <br>
tbody 表格的主体区域 <br>
</p>
<table border="2" width="300" height="200" cellspacing="0">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>boss_z</td> <td>女</td> <td>20</td>
</tr>
<tr>
<td>little_h</td> <td>男</td> <td>20</td>
</tr>
<tr>
<td>little_x</td> <td>男</td> <td>20</td>
</tr>
<tr>
<td>little_c</td> <td>男</td> <td>20</td>
</tr>
</tbody>
</table>
<!-- 表格常见属性(了解，后续使用css定义) -->
<p>
align 设置表格的位置，左中右 <br>
border 定义边框的粗细像素 <br>
cellpadding 单元格边框与其中内容的距离像素值 <br>
cellspacing 单元格之间的空白，默认2像素 <br>
width 表格的左右宽度 <br>
height 表格的上下高度 <br>
</p>
<!-- 单元格合并 -->
<h3>单元格合并</h3>
<p>
rowspan 跨行合并，上下，后加合并单元格的个数 <br>
colspan 跨列合并，左右，后加合并单元格的个数 <br>
步骤： <br>
1.判断是跨行还是跨列 <br>
2.找到目标单元格，跨行选择靠上的，跨列选择靠左的 <br>
3.把代码写在目标单元格中 <br>
</p>
<table border="2" width="300" height="200" cellspacing="0">
<tbody>
<tr>
<td colspan="2"></td> <td></td>
</tr>
<tr>
<td></td> <td rowspan="2"></td> <td></td>
</tr>
<tr>
<td></td> <td></td>
</tr>
</tbody>
</table>
<!-- 无序列表 -->
<h3> 无序列表(不分前后，并列) </h3>
<p>
ul 无序列表标签，其中只能嵌套li标签 <br>
li 列表的每一个元素，其中可以嵌套任何元素
</p>
<h4> 我喜欢的歌手 </h4>
<ul>
<li> 米津玄师 </li>
<li> 许嵩 </li>
<li> 薛之谦 </li>
<li> 泽野弘之 </li>
</ul>
<!-- 有序列表 -->
<h3> 有序列表 </h3>
<p>
ol 有序列表标签，其中只能嵌套li标签 <br>
li 列表的每一个元素，其中可以嵌套任何元素
</p>
<h4> 我喜欢的歌手 </h4>
<ol>
<li> 米津玄师 </li>
<li> 许嵩 </li>
<li> 薛之谦 </li>
<li> 泽野弘之 </li>
</ol>
<!-- 自定义列表 -->
<h3> 自定义列表 大哥带几个小弟</h3>
<p>
dl 自定义列表标签 <br>
dt 头部元素，大哥，根节点 <br>
dd 普通元素，小弟，分支，解释说明大哥 <br>
</p>
<dl>
<dt>薛之谦</dt>
<dd>绅士</dd>
<dd>演员</dd>
<dd>刚刚好</dd>
</dl>
<!-- 表单标签 -->
<h3> 表单标签，用于收集数据 </h3>
<p>
form 表单域，包含整个表单<br>
属性<br>
action 填地址，指定接受表单数据的服务器地址<br>
method get或post，设定取值方式<br>
name 指定表单的名称<br>
表单控件
input 输入表单元素
select 下拉表单元素
textarea 文本域元素
</p>
<!-- input(输入表单元素) -->
<h3>input(输入表单元素)</h3>
<p>
input 表单元素，单标签，具体见样例<br>
属性<br>
type 表单元素类型，必须有 <br>
name 定义input元素的名称，不能相同，区分每个表单元素 <br>
value input元素的值,默认打开即出现在文本框中 <br>
checked 选框默认选中 <br>
maxlength 输入最大长度 <br>
</p>
<form action="#">
属性<br>
text(输入文本，默认20字符) <input type="text" maxlength="6"> <br>
button(可点击按钮) <input type="button" value="获取验证码"> <br>
checkbox(复选框，可选多个，name相同) <input type="checkbox"name="hobby"> <input type="checkbox"name="hobby"><br>
radio(单选框，只选一个name相同) 男 <input type="radio" name="sex"> 女<input type="radio" name="sex"> <br>
password(密码字段，隐藏) <input type="password"> <br>
submit(提交按钮) <input type="submit"> <br>
reset(清除所有表单数据) <input type="reset"> <br>
file(上传文件) <input type="file"> <br>
</form>
<!-- label标签(辅助input，把汉字和输入框联系起来) -->
<h3>label标签(辅助input，把汉字和输入框联系起来)</h3>
<h4>
1.用label把表单前的汉字包起来<br>
2.设置一个for属性(属性值自定) <br>
3.在input中添加id属性，属性值为第二部设置的 <br>
</h4>
<form action="#">
<label for="text">用户名</label> <input type="text" id="text">
<label for="sex">男</label> <input type="radio" id="sex">
<input type="reset">
</form>
<!-- select 下拉表单元素 -->
<h3> select 下拉表单元素 </h3>
<p>
select 整个表单<br>
option 每个表单选项，至少包含一对<br>
selected option的属性，值设为selected当前项设为默认项<br>
</p>
籍贯:
<select name="籍贯">
<option value="">山东</option>
<option value="">河南</option>
<option value="">M-78星云</option>
<option value="" selected="selected">二次元</option>
</select>
<!-- textarea 文本域 -->
<h3> textarea 文本域(放很多字的大框框) </h3>
<form action="#">
日记
<textarea>
little_h的快乐的一天。
</textarea>
</form>
</body>
</html>
本文详细介绍了HTML中的表格标签如table, tr, td, th及其属性，表格单元格的合并方法。此外，还涵盖了无序列表ul, 有序列表ol, 自定义列表dl的使用，以及input标签的各种类型，label标签的辅助作用，下拉表单select和文本域textarea的应用。内容深入浅出，适合初学者掌握HTML基础。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
