Web前端零基础入门-04.HTML常用标签（下）

Web前端零基础入门-04.HTML常用标签（下）

表格标签

表格主要是用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示的时候，能够熟练运用表格就显得很重要。

表格的基本语法

	<table>
			<th>
				<td>表格头部</td>
			</th>
			<tr>
				<td>表格单元格</td>
			</tr>
		</table>

1. <table></table>是用于定义表格的标签
2. <th></<th> 表头单元格位于表格的第一行，表头单元格内容加粗居中显示，必须嵌套在<tr></tr>标签中
3. <tr></<tr> 是用于定义表格中的行，必须嵌套在<table></table>标签中
4. <th></<th> 是用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	数字或“”	规定表格单元格是否拥有边框，默认为“”没有边框
cellpadding	像素值	规定单元边缘与其内容之间的空白，默认1像素。
cellspacing	像素	规定单元格之间的空白，默认2像素
width	像素或百分比	规定表格的宽度

合并单元格

合并单元格有两种方式：

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

	<table >
			<tr>
				<td colspan="2">表格单元格</td>
			</tr>
			<tr>
				<td rowspan="2">表格单元格</td>
				<td >表格单元格</td>
			</tr>
			<tr>
				<td >表格单元格</td>
			</tr>
		</table>

列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，他作为布局会更加自由和方便。
根据使用情景不同，别表可以分为三大类：无序列表、有序列表和自定义列表.

无序列表

<ul>标签标示HTML页面中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

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

1. 无序列表的各个列表之间没有顺序级别之分，是并列的。
2. <ul></ul>中只能嵌套<li></li>，不允许在<ul></ul>标签中输入其他标签或文字。
3. <li></li> 标签之间相当于一个容器，可以容纳所有元素。
4. 无序列表会带有自己的样式属性，实际使用时，我们会用css来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

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

1. <ol></ol>中只能嵌套<li></li>，不允许在<ol></ol>标签中输入其他标签或文字。
2. <li></li> 标签之间相当于一个容器，可以容纳所有元素。
3. 有序列表会带有自己的样式属性，实际使用时，我们会用css来设置。

自定义列表

在HTML标签中，<dl>标签用于定义描述列表（自定义列表）,该标签会与<dt>和<dd>一起使用。

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

表单标签

在网页中，我们需要跟用户进行交互，收集用户资料，此时我们就需要表单。
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息组成。

表单域

表单域（Form Fields）是指在一个表单（如网页表单）中，用于收集用户输入或选择的信息的区域或元素。
在HTML标签中，<form>标签用于定义表单域，以实现yoghurt信息的手机和传递。
<form>会吧他范围内的表单元素信息提交给服务器。

<form action="URL地址" method="提交方式" name="表单名称">
	<!-- 各种表单元素 -->
	<input type="submit" value=""/>
</form>

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

表单控件

表单控件是一种用于收集用户数据的HTML组件。以下是常见的表单元素：

1. 输入框（Input）：用于用户输入文本、数字或密码。
2. 标签（Label）：为表单元素提供标识和描述。
3. 下拉菜单（Select）：提供一个选项列表供用户选择。
4. 单选按钮（Radio）：允许用户在多个选项中选择一个。
5. 复选框（Checkbox）：允许用户选择多个选项。
6. 文本域（TextArea）：允许用户输入多行文本。
7. 按钮（Button）：触发表单提交或执行其他操作。
8. 文件上传（File）：用于上传文件。

这些表单元素可以组合使用，从而构建复杂的数据收集表单。表单元素的属性可以调整其外观、行为和功能，如大小、颜色、是否必填等。最终，表单提交后的数据可以通过后端服务器处理，实现数据存储和处理。

提示信息

label标签是HTML中的一个元素，用于定义表单控件的标签，可以帮助用户更好地理解表单控件的用途。一般与表单控件如input、select、textarea等一起使用，使得表单控件更具语义。当用户点击label标签时，相应的表单控件也会被选中。

label标签有两种用法：

1. 用for属性关联表单控件：将label的for属性设置为相应表单控件的id值，即可实现点击label选中表单控件。

例如：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

2. 将表单控件放在label标签内：将表单控件放在label标签内，点击label即可选中表单控件。

例如：

<label>
  用户名：
  <input type="text" name="username">
</label>

使用label标签不仅可以提高表单的易用性，还有利于网页的可访问性。

查阅文档

经常查阅文档是一个非常好的学习习惯。
推荐一下网址：

1. 百度：https://www.baidu.com
2. W3C: https://www.w3chool.com.cn
3. MDN:https://developer.mozilla.org/zh-CN/