前端学习笔记（三）HTML 标签（下）

这是我学习B站pink老师的前端教程时自己手打的笔记，对你有用，点赞收藏关注三连走起！

1. 表格标签

1.1 表格的主要作用

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

1.2 表格基本语法

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

1.3 表头单元格标签 th

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

1.4 表格属性

只作了解，后期通过 CSS 来设置。
这些属性都要写到 <table></table> 标签中

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

1.5 表格结构标签

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

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

注意：

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

1.6 合并单元格

合并单元格方式：

• 跨行合并：rowspan=“合并单元格个数”
• 跨列合并：colspan=“合并单元格个数”

合并三部曲：

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

2. 列表标签

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

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

2.1 无序列表（重要）

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

语法格式:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

注意:

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

2.2 有序列表（理解）

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

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

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

2.3 自定义列表（重点）

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

基本语法：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

注意

1. 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	名称	用于指定表单名称，区分同一个页面中的多个表单域

注意：

1. 写表单元素之前需要有表单域将其包含。
2. 表单域是 form 标签。

3.4 表单控件（表单元素）

在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。

3.4.1 <input> 表单元素

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

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

<input type="属性值" />

• input 标签为单标签
• type 属性设置不同属性值来指定不同控件类型

type 常用属性值

属性值	描述
button	定义可点击按钮
chekbox	复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。字符被掩码。
radio	定义单选按钮
reset	定义重置按钮，清除表单所有数据。
submit	定义提交按钮。重置按钮会清除表单所有数据。
text	定义输入字段。用户可输入文本，默认宽度为 20 个字符。

input 的其他属性

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

注意

1. 对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。
   同理，复选框也要有相同的name值。
2. 单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
3. 设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。
4. 设置 type="button"，普通按钮，后期结合 js 使用

3.4.2 label 标签

<label> 标签为 input 元素定义标注。
<label> 标签用于绑定一个表单源深路，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。
语法：

<label for="sex">男</label> <input type="radio" name="sex" id=="sex" />

核心：
<lable>标签的 for 属性与相关元素的 id 属性相同。

3.4.3 select 下拉表单元素

select 标签设置多个选项让用户选择，节约页面空间。
语法

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

注意

1. select 中至少包含一对 option。
2. 在 option 中定义属性selected=selected，当前项即为默认选项。

3.4.4 textarea 文本域表单元素

场景：输入内容较多时。

语法：

<textarea rows="3" cols="20">
    文本内容
</textarea>

注意

1. cols=“每行字符数”，rows=“显示的行数”