（二）HTML 标签（下）

咩野冬溪

已于 2022-06-05 17:08:57 修改

阅读量79

点赞数

分类专栏： HTML 文章标签： html css html5

于 2022-06-01 09:57:28 首次发布

本文链接：https://blog.csdn.net/weixin_57162892/article/details/125077529

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表格标签，包括表格的作用、基本语法、表头单元格、表格属性、结构标签及合并单元格。此外，还讲解了列表标签，如无序列表、有序列表和自定义列表的使用。最后，阐述了表头标签在收集用户信息和交互中的重要性，以及表单域的基本概念和表单控件的应用。

摘要由CSDN通过智能技术生成

（二）HTML 标签（下）

1. 表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。表格不是来布局的，而是来展示数据的。

1.2 表格基本语法

<table></table> 用于定义表格的标签。
<tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table>中。
<td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
字母 td 指表格数据（table data），即单元格的内容。

1.3 表头单元格标签 th

一般单元格位于表格的第一行或第一列，表格单元格里面的文本内容 加粗显示。

<th> 标签表示 HTML 表格的表头部分（table head 的缩写）表头单元格(<th>)也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

 <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td></td>
            <td>345</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>鬼吹灯</td>
            <td></td>
            <td>345</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

1.4 表格属性

只作了解，后期通过 CSS 来设置。

这些属性都要写到 <table></table> 标签中

属性名	属性值	描述
align	left、center、right	表格元素对齐方式
border	1 或""	规定是否有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间空白，默认 1px
cellspacing	像素值	规定单元格之间的空白，默认为 2px
width	像素值或百分比	规定表格宽度
hight	像素	表格高度

1.5 表格结构标签

场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。

加强语义化：<thead> 表示头部区域，<tbody> 表示主体区域，更好区分表格结构。

注意：

<thead></thead>：定义表格头部，且内部必须有<tr>标签。
<tbody></tbody>：定义表格主体，存放数据。
以上标签都放在 <table></table> 里面。

1.6 合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格个数"
跨列合并：colspan="合并单元格个数"

合并三部曲：

确定跨行 or 跨列。
找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。<td colspan="2"></td>
删除多余单元格。

2. 列表标签

表格展示数据，列表则用来布局。

列表特点是整齐、整洁、有序，作为布局更方便自由。根据使用场景不同，列表分为三大类：

2.1 无序列表（重要）

列表无序 ul (unordered list) 有序 ol (ordered list)

<ul> 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。

语法格式:

<ul>

注意:

各个列表项之间无需，并列关系。
<ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的（写入<ul>中）。
无序列表带有自己的属性，可用 CSS 修改样式属性。

2.2 有序列表（理解）

使用 <ol> 标签来定义有序列表，<li> 来定义列表项。

<ol>

与无需列表类似，有自己的样式属性，通过 CSS 设置。

2.3 自定义列表（重点）

Definition List

<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。

基本语法：

<dl>

注意

dl 里面只能包含 dt 和 dd。

3. 表头标签

3.1 为什么需要表头

收集用户信息。

和用户进行交互，收集用户资料。

3.2 表头组成

表单域
表单控件/元素
提示信息

3.3 表单域

表单域是一个包含表单元素的区域。使用 <form> 标签用于定义表单域，手机和传递用户信息。 form 标签会将它范围内的表单元素信息提交给服务器。

目前而言，暂时不需要用表单域提交数据，只需要写上 form 标签即可。

语法格式

<form action="url地址" method="提交方式" name="表单域名称">

各种表单元素控件</form>

常用属性：

属性	属性值	作用
action	url 地址	指定接受并处理表单数据的服务器的 url 地址
method	get/post	设置表单数据的提交方式
name	名称	用于指定表单名称，区分同一个页面中的多个表单域

注意：

写表单元素之前需要有表单域将其包含。

表单域是 form 标签。

在表单域中定义各种表单元素，允许用户在表

3.4 表单控件（表单元素）单中输入或选择的内容控件。

3.4.1 <input> 表单元素

<input> 标签用于收集用户信息。

input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

input 标签为单标签<input type="属性值" />

type 属性设置不同属性值来指定不同控件类型

type 常用属性值

属性值	描述
button	定义可点击按钮（与js一起用，例：获取验证码等）
checkox	复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。字符被掩码。
radio	定义单选按钮
reset	定义重置按钮，清除表单所有数据。（后面加value可以改字）
submit	提交按钮。重置按钮会清除表单所有数据。（后面加value可以改字）
text	定义输入字段。用户可输入文本，默认宽度为 20 个字符。

input 的其他属性

属性	属性值	描述
name	自定义	定义 input 元素名称
value	自定义	规定 input 元素的（默认）值
checked	checked	规定此 input 元素首次加载时应当被选中(默认打√)
maxlength	正整数	规定输入字段字符的最大长度

注意

对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。同理，复选框也要有相同的name值。
单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。
设置 type="button"，普通按钮，后期结合 js 使用。
关于value：还是建议使用：placeholder属性设置提示文字，这样颜色较淡，且一旦输入就会消失。
checked 属性主要针对于单选按扭和复选框主要作用一打开页面就要可以默认选中某个表单元素。
maxlength 是用户可以在表单元素输入的最大字符数一般较少使用