黑马JavaWeb开发笔记04——HTML表格＜table＞、表单＜form＞、表单项＜input＞＜select＞＜textarea＞标签

本文链接：https://blog.youkuaiyun.com/apple_68589597/article/details/140645501

文章目录

前言
一、HTML表格标签
- 1. 标签内容
- 2. 快速入门
二、HTML表单标签
- 1. 概述
- 2. vscode实现
三、HTML表单项标签
- 1. 概述
- 2. vscode实现
总结

前言

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单DAY1完结）04 ：HTML表格、表单、表单项标签的总结，帮助需要学习Web开发的朋友温故而知新。

HTML表格标签
HTML表单标签
HTML表单项标签

一、HTML表格标签

1. 标签内容

场景：在网页中以表格（行、列）形式整齐展示数据，我们在一些管理类的系统中，会看到数据通常都是以表格的形式呈现出来的，比如：班级表、学生表、课程表、成绩表等等。

< table > : 用于定义整个表格, 可以包裹多个 < tr >
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing: 规定单元之间的空间
< tr > : 表格的行，可以包裹多个 < td >
< td > : 表格单元格(普通)，可以包裹内容
- 如果是表头单元格，可以替换为 < th >，表头的字体会加粗

2. 快速入门

在这里插入图片描述

整个表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)。

二、HTML表单标签

其实就是收集表，输入数据，点击提交后，这个数据，一般会提交到服务端，最终保存在数据库中。

表单项必须要有name属性，不然无法提交！

1. 概述

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签: < form >
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- < input >: 定义表单项，通过type属性控制输入形式
- < select >: 定义下拉列表
- < textarea >: 定义文本域
表单属性
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL地址。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?
  - username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。

2. vscode实现

get方式
post方式

在消息体（请求体）中进行数据传递（F12）

三、HTML表单项标签

1. 概述

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

< input >: 表单项 , 通过type属性控制输入形式。
< select >: 定义下拉列表, < option > 定义列表项
< textarea >: 文本域

2. vscode实现

创建一个新的表单项的html文件，具体内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title

黑马JavaWeb开发笔记04——HTML表格＜table＞、表单＜form＞、表单项＜input＞ ＜select＞ ＜textarea＞标签

文章目录

前言

一、HTML表格标签

1. 标签内容

2. 快速入门

二、HTML表单标签

1. 概述

2. vscode实现

三、HTML表单项标签

1. 概述

2. vscode实现

黑马JavaWeb开发笔记04——HTML表格＜table＞、表单＜form＞、表单项＜input＞＜select＞＜textarea＞标签