【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中,使用
一个基本的表单通常由以下几个组件组成:
-
表单域(Form Fields):用于接收用户输入的数据。常见的表单域包括文本框(Input Text)、单选框(Radio Buttons)、复选框(Checkboxes)、下拉列表(Select)、文本区域(Textarea)等。
-
提交按钮(Submit Button):用户在填写完表单后,点击提交按钮将表单数据发送到服务器进行处理。
-
取消按钮(Cancel Button):允许用户取消当前的操作并清空表单内的所有数据。
-
标签(Labels):描述表单域的作用或意义,增加表单的可读性和易用性。
-
校验机制(Validation):用于验证用户输入的数据是否符合预期的格式或要求。常见的校验包括必填项(Required Fields)、长度限制(Length Limitation)、数据格式验证(Data Format Validation)等。
-
在HTML中,通过在标签中添加各种不同类型的、
本文来自博客园,作者:Chimengmeng,转载请注明原文链接:https://www.cnblogs.com/dream-ze/p/17524709.html