前端基础-表格，列表，表单标签

Posted 2021-09-06 咖啡壶子

一.表格标签table

表格标签的基本使用

1. 表格作用：展示数据
2. 语法：三组标签（没有列的标签）

表头单元格

1. 位于表格的第一行
2. 标签:<th>

表格的属性

1. align：表格的对齐方式
2. border：表格单元格的边框
3. cellpadding：单元格与内容之间的空隙
4. cellspacing：单元格之间的空隙
5. width：表格的宽度

表格结构标签

1. 头部区域：<thead>标签
2. 主体区域：<tbody>标签

合并单元格

1. 合并单元格方式
   跨行合并：rowspan=“合并单元格的个数”
   跨列合并：colspan=“合并单元格的个数”
2. 目标单元格
   跨行：最上侧单元格为目标单元格, 写合并代码
   跨列：最左侧单元格为目标单元格, 写合并代码
3. 合并单元格的步骤： ①先确定是跨行还是跨列合并。
   ②找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。③ 删除多余的单元格。

二.列表标签

作用

列表就是用来布局的

分类

1. 无序列表（重点）
   <ul>
   <li>列表项1</li>
   </ul>

注意点

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul> 中只能嵌套 <li></li>，
3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

2. 有序列表（了解）
   <ol>
   <li>列表项1</li>
   </ol>
3. 自定义列表
   <dl>
   <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
   </dl>

注意点

1. <dl></dl> 里面只能包含 <dt> 和 <dd>。
2. 经常是一个<dt> 对应多个<dd>。

三.表单

作用

收集用户信息

组成

表单域

1. 含义:包含表单元素的区域
2. 标签: 会把它范围内的表单元素信息提交给服务器.
3. 属性:
   ①action:服务器url地址
   ②method：表单提交的方式（get/post）
   ③name：表单的名称

表单元素

1. input输入表单元素

1. 语法：<input type=“属性值” />

2. 注意点:<input /> 标签为单标签;type 属性设置不同的属性值用来指定不同的控件类型

3. type属性1:文本框：text;密码框:password;单选按钮：radio;复选框：checkbox

4. name和value属性:name表单元素的名字（可自定义），value:表单元素的值;对于单选按钮和复选框要有相同的name值

5. checked和maxlength属性:checked属性主要针对于单选按钮和复选框，给单选按钮和复选框给定默认值;maxlength 是用户可以在表单元素输入的最大字符数

6. type属性2
   ①提交按钮：submit（提交里的所有表单元素给服务器）
   重置按钮:reset重置里的所有表单元素
   普通按钮：button不提交数据的按钮
   文件域：file上传文件用的

7. lable元素：
   标注标签：<label for=“sex”>男
   <input type=“radio” name=“sex” id=“sex” />（和input一起使用）

2. select下拉表单元素

<select>
<option>选项1</option>
\\ 选项2</option>
<option>选项3</option>
…
</select>

注意点

1. <select> 中至少包含一对<option> 。
2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

3. textarea 文本域表单元素

1. 多行文本输入的控件
2. 常见于留言板，评论