【3.0】前端基础之HTML补充

【3.0】前端基础之HTML补充

【一】表格标签

  • 准备数据
dream 521 swim
chimeng 369 running
mengmeng 123 music

<table border="1" cellpadding="5" cellspacing="5">
 # border：为表格添加外边框 # cellpadding： 调整字体离边框距离 # cellspacing ： 调整内边框离外边框的距离
    <thead>
        <th></th> # 加粗字段信息
        <td></td> # 不加粗字段信息
    </tr> # 一个 tr 表示一行
    </thead> # 表头(字段信息)
    	
    <tbody>
		<td colspan="2">chimeng</td> # colspan ：水平占两行
        <td>369</td>
        <td rowspan="2">running </td> # rowspan ： 垂直占两行
	</tbody> # 表单(数据信息)
  </table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
    <thead>
    <tr>
        <th>Username</th>
        <th>Password</th>
        <th>Hobby</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>dream</td>
        <td>521</td>
        <td>swim</td>
    </tr>

    <tr>
        <td colspan="2">chimeng</td>
        <td>369</td>
        <td rowspan="2">running </td>
    </tr>

    <tr>
        <td>mengmeng</td>
        <td>123</td>
        <td>music</td>
    </tr>
    </tbody>
</table>
</body>
</html>

原生表格很丑，但是我们可以用别人写好的框架

【二】form表单

  • 能够获取前端用户输入的数据
    • 用户输入的，用户选择的，用户上传的
  • 基于网络发送给后端

【1】form表单

  • 表单（Form）是网页中用于收集用户输入信息的一种方式。
    • 通过表单，用户可以输入各种数据
    • 例如文本、数字、日期等。在HTML中，使用
      标签创建表单。

一个基本的表单通常由以下几个组件组成：

  1. 表单域（Form Fields）：用于接收用户输入的数据。常见的表单域包括文本框（Input Text）、单选框（Radio Buttons）、复选框（Checkboxes）、下拉列表（Select）、文本区域（Textarea）等。

  2. 提交按钮（Submit Button）：用户在填写完表单后，点击提交按钮将表单数据发送到服务器进行处理。

  3. 取消按钮（Cancel Button）：允许用户取消当前的操作并清空表单内的所有数据。

  4. 标签（Labels）：描述表单域的作用或意义，增加表单的可读性和易用性。

  5. 校验机制（Validation）：用于验证用户输入的数据是否符合预期的格式或要求。常见的校验包括必填项（Required Fields）、长度限制（Length Limitation）、数据格式验证（Data Format Validation）等。

  • 在HTML中，通过在标签中添加各种不同类型的、

posted @ 2023-07-04 08:19  Chimengmeng  阅读(19)  评论(0)  编辑  收藏  举报