本文详细介绍了HTML中的表格元素，包括<table>、<tr>、<td>、<th>的用法，以及如何通过rowspan和colspan属性来合并单元格。此外，还探讨了列表标签<ul>、<ol>、<dl>的使用。最后，深入解析了HTML表单的构成，如<form>、<input>、<select>、<textarea>等表单元素，以及<label>标签的作用，并提供了实际的代码示例。
表格标签
<table> </table>是用于定义表格的标签。
<tr> </tr>标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容，可以放任何元素，文字、链接、图片都可以。
<th></th> 标签表示 HTML 表格的表头部分(table head 的缩写)。
字母 th 指表格头部（table head）表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示。
<table>
<tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
<tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
<tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
<tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
<tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>
</table>
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left/center/right | 规定表格相对周围元素的对齐方式 |
| border | 1或者"" | 规定表格是否会有边框，默认""没有边框 |
| callpading | 像素值 | 规定单元边沿与其内容之间的额空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白。默认2像素 |
| width | 像素值或者百分比 | 规定表格的宽度 |
设计下面的表格：包括图片和链接
<table>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src = '1.jpg'></td>
<td>6520</td>
<td>123</td>
<td><a href="www.baidu.com">百度</a> <a href = "#">图片</a> <a href = "www.tieba.com" target="_blank></a> </td>
</tr>
</table>
合并单元格
- 合并单元格的方式：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数” - 目标单元格
跨行：最上侧单元格为目标单元格, 写合并代码
跨列：最左侧单元格为目标单元格, 写合并代码
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<br>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
两个表格分别如下：
列表标签
表格是用来显示数据的，那么列表就是用来布局的。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul></ul> | 无序列表 | 里面只能包含li，没有顺序，li里面可以包含任何标签 |
<ol></ol> | 有序列表 | 里面只能包含li，有顺序，li里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd，dt和dd里面可以放任何标签 |
表单标签
在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
表单域：
表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
- action：属性值为url地址，用于指定接收并处理表单数据的服务器程序的url地址。
- method：属性值为get/post，用于设置表单数据的提交方式。
- name：属性值为名称，用于指定表单的名称，以区分同一个页面中的多个表单域。
表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。包括：input输入表单、 select下拉表单、textarea文本域：
1. input输入表单元素：于收集用户信息
<input type="属性值" />
input 单标签包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
| 属性值 | 描述 |
|---|---|
| button | 可点击按钮（多数形况下，用于通过Javascript启动脚本） |
| checkbox | 复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮 |
| submit | 定义提交按钮，会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入字段，默认宽度20字符 |
| name | 用户自定义——input元素的名称 |
| value | 用户自定义——input元素的值 |
| checked | 规定此input元素首次加载时应当被选中 |
| maxlemngth | 正整数——规定输入字段中字符的最大长度 |
name 和value 是每个表单元素都有的属性值,主要给后台人员使用。当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，name 的主要作用就是用于区别不同的表单：
<input type="text" value="请输入用户名" name="username" />
radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字：单选按钮和复选框要有相同的name值
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
如果页面一打开就让某个单选按钮或者复选框是选中状态：checked 属性：表示默认选中状态。用于单选按钮和复选按钮。
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
input表单元素展示不同的形态? 比如单选按钮或者文本框，用type属性可以让input表单元素设置不同的形态
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>
实现案例：
代码如下：
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd"> <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: <input type="checkbox" name="hobby">唱歌 <input type="checkbox" name="hobby">睡觉 <input type="checkbox" name="hobby" checked="checked">打羽毛球
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file">
</form>
2. select下拉表单元素
<select> 中至少包含一对<option> 。
在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。
实现：
代码：
<form>
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
3. textarea 文本域元素
在表单元素中， 标签是用于定义多行文本输入的控件。当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea> 标签。该控件常见于留言板，评论。
实现：
代码：（cols=“每行中的字符数” ，rows=“显示的行数”）
<form>
今日反馈:
<textarea cols="50" rows="5">用textarea做多行文本框 </textarea>
</form>
4. label标签：为 input 元素定义标注（标签）。<label> 标签用于绑定一个表单元素, 其 for 属性应当与相关元素的 id 属性相同。当点击
<label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
扫一扫
5852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
