HTML标签下

表格标签

表格的主要作用

表格用来显示、展示数据。

pink老师总结：表格不是用来布局页面的，而是显示和展示数据的。

表格的基本语法

1. <table></table>是定义表格的标签
2. <tr></tr>定义表格中的一行，必须嵌套在table标签中
3. <td></td>定义表格中的单元格，必须嵌套在<tr><\tr>标签中
4. 字符td指的表格数据（table data），级单元格中的内容

表头单元格标签

表头决定了表格中的内容是什么。

<th>是表头标签（table head），可以突出内容的重要性：居中显示，加粗。

和<th>相对应的是<td>

表格属性

注意：

1. 这些属性要写到表格标签<table>中去

2. 区分cellpading和cellspacing

   cellpadding是单元格和单元格内元素 空隙

   cellspaceing是单元格和单元格之间的空隙，习惯设置为0

案例

表格结构标签

如上图 在代码中看起来就很整洁，便于区分

1. <thead></thead>：用于定义表格头部，内部必须有<tr>标签。一般是位于第一行
2. <tbody></tbody>：用于定义表格主题，用来放数据
3. 以上标签都放在<table></table>标签中

合并单元格

合并单元格的方式：

1. 跨行合并：rowspan=“合并单元格的个数”

2. 跨列合并：colspan=“合并单元格的个数”

   

目标单元格：（写合并代码）

1. 跨行：最上方单元格为目标单元格，写合并代码
2. 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲：

1. 先确定跨行合并还是跨列合并
2. 找到目标单元格。写合并方式=合并单元格的数量。如<td colspan="2"></td>
3. 删除多余单元格。（多余，即被合并的单元格）

表格总结

1. 表格相关标签

   table标签

   tr表格中的一行

   td一行中的各个单元格 特殊：想让第一行特殊表示 td改为th

   

2. 表格相关属性

1. 合并单元格

   合并方法三部曲：确定合并方式；写合并公式；删除多余单元格，

列表标签

表格用来展示数据，列表就是用来布局的

列表分类：

• 无序列表
• 有序列表
• 自定义列表

无序列表（重点）

注意：

1. 无序列表各个列表之间没有顺序之分

2. ul标签中只能嵌套li标签，别的标签不行

3. li标签相当于一个容器，可以容纳任何元素

   li里面可以放文字段落（带标签）等都可以

4. 无序列表有自己的样式属性，但是在实际使用中，我们会使用css来设置

有序列表（理解）

<ol></ol>标签定义有序列表

自定义列表（重点）

使用场景：一个大哥带领一些小弟

语法：

注意：

1. dl里面只能包含dt和dd
2. 一个dl里面可以包含很多dt和dd
3. 经常是一个dt对应多个dd
4. 注意自定义列表的结构：下面很多小的围绕上面的小标题进行解释

列表总结

无序列表：整齐一列并列关系

自定义列表：下面的内容围绕上面的小标题进行解释

表单标签

作用

收集用户信息

与用户进行交互，收集资料

表单组成

表单域

表单域是一个包含表单元素的区域。

在Html中，使用<form>标签实现表单域，实现用户信息的收集和传递。

`

`会把它范围内的表单元素信息提交给服务器</font>  ### 表单控件（表单元素）  #### `input`表单元素 ``标签用于收集用户信息。 输入字段有很多形式（可以使文本字段、复选框、掩码后的文本控件、按钮等） ```html ``` 注意 1. 单标签 2. `type`属性值设置为不同的属性值来指定不用的控件类型   - `name`和`value`是每个表单元素都有的属性值，主要给后台人员使用。`value`的值只有在文本框中才显示，在其他单元框和复选框中不显示内容。 - `name`表单元素的名字，要求单选按钮和复选按钮要有相同的name值。 - `checked`属性主要针对单选框和复选框，主要作用是可以使页面再首次打开时，某些选项就默认选中 - `maxlength`是用户可以在表单中输入的最大字符数 #### `label`标签 不属于表单元素 但是经常和表单标签一起使用 `label`标签为`Input`元素定义标注（标签） `label`标签用于绑定一个表单元素，当点击`label`标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。(提示文字和表单元素相绑定)  核心：`for`属性的值和`id`的值一样 #### select下拉标签 使用场景：如果有多个选项让用户选择，并且想要节约页面空间。下拉列表可以节省空间，非常方便。 注意： 1. `select`中至少包含一对`option`标签 2. 在`option`中 设置属性键值对，`selected="selected"时`当前项即为默认选项 #### textarea文本域标签 使用场景:用户输入较多，需要输入多行 常见于浏览版、评论区  在实际开发中，都是使用css空间文本框的大小。不使用上面的`rows`和`clos` ### 表单小结 - `input`单标签 `type`属性获得不同的显示形式 - `select`双标签 下拉列表 - `textarea`双标签 文本框 ## 案例  ## 查阅文档