当前位置： 首页 > news >正文

HTML——5.表单、框架、颜色

news 2026/3/26 12:09:01

一、表单

HTML 表单用于在网页中收集用户输入的数据，例如登录信息、搜索查询等。HTML 提供了一系列的表单元素，允许用户输入文本、选择选项、提交数据等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form</title>
</head>
<body>
    <!-- 表单开始 -->
    <form action="/submit-form" method="post">
        <!-- 用户名输入框 -->
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>

        <!-- 密码输入框 -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>

        <!-- 邮箱输入框 -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <!-- 性别选择下拉菜单 -->
        <label for="gender">Gender:</label>
        <select id="gender" name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select><br><br>

        <!-- 同意协议复选框 -->
        <label for="agree">Agree to Terms:</label>
        <input type="checkbox" id="agree" name="agree" required><br><br>

        <!-- 提交按钮 -->
        <input type="submit" value="Submit">
    </form>
    <!-- 表单结束 -->
</body>
</html>

 效果展示：

  • <form> 元素：用于定义表单，包括表单中包含的所有输入元素。action 属性指定了表单提交的目标 URL，method 属性指定了提交表单时使用的 HTTP 方法（这里是 POST 方法）。

  • <input> 元素：用于接收用户输入。type 属性指定了输入框的类型，如文本框（text）、密码框（password）、电子邮件（email）等。id 属性用于关联 <label> 元素，name 属性用于标识输入字段的名称，required 属性表示字段为必填项。

  • <label> 元素：用于创建标签，提供对应输入框的描述。for 属性与输入框的 id 属性相对应，用于关联标签和输入框。

  • <select> 元素：用于创建下拉菜单，用户可以从中选择一个选项。<option> 元素用于定义下拉菜单中的选项。

  • <checkbox> 元素：用于创建复选框，允许用户选择或取消选择一个或多个选项。

  • <submit> 元素：用于创建提交按钮，用户点击后将提交表单数据。v

二、框架

HTML 框架（Framework）通常是指前端开发中用于构建网页和应用程序界面的工具和库，它们提供了一系列的预定义组件、样式和布局，使开发者能够更快速、高效地构建现代化的网页和应用。下面介绍一些常见的 HTML 框架：

  • Bootstrap： Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架之一，由 Twitter 开发并开源。它提供了丰富的组件库、响应式网格系统、样式和 JavaScript 插件，使开发者能够快速构建移动优先的网页和应用。Bootstrap 具有简洁的文档和易用的API，广泛应用于各种项目中。

  • Foundation： Foundation 是另一个流行的 HTML、CSS 和 JavaScript 框架，由 ZURB 开发。它也提供了丰富的组件库、响应式网格系统和定制化选项，支持快速构建移动友好的界面。Foundation 具有灵活的定制性和强大的社区支持，适用于各种规模的项目。

  • Semantic UI： Semantic UI 是一款语义化的前端框架，提供了直观的语义化的 HTML 元素和类名，使开发者能够更易理解和编写代码。它还提供了丰富的组件和样式，支持快速构建现代化的界面，具有良好的可读性和可维护性。

  • Materialize： Materialize 是一个基于 Google Material Design 设计原则的前端框架，提供了丰富的组件、样式和动效，使开发者能够创建具有 Material Design 风格的网页和应用。它简单易用，支持快速开发响应式的界面，并且具有灵活的定制性。

  • Tailwind CSS： Tailwind CSS 是一种不同于传统框架的 CSS 框架，它提供了一系列的原子类，允许开发者通过组合这些类来构建界面。Tailwind CSS 提倡以 HTML 优先的开发方式，使开发者能够更灵活地定制样式，并且具有更好的可维护性。

三、颜色

颜色可以使用多种方式来表示，包括颜色名称、十六进制值、RGB 值和 HSL 值等。

1. 颜色名称

HTML 支持一些常见颜色的英文名称，如 "red"（红色）、"blue"（蓝色）、"green"（绿色）等。例如：

<p style="color: red;">This is a red text.</p>
 

2. 十六进制值

颜色也可以用十六进制值来表示，格式为 #RRGGBB，其中 RR、GG 和 BB 分别表示红色、绿色和蓝色的分量，取值范围为 00 到 FF。例如：

<p style="color: #00FF00;">This is a green text.</p>
 

3. RGB 值

颜色还可以使用 RGB 值来表示，格式为 rgb(R, G, B)，其中 R、G 和 B 分别表示红色、绿色和蓝色的分量，取值范围为 0 到 255。例如：

<p style="color: rgb(255, 0, 0);">This is a red text.</p>
 

4. HSL 值

HSL（色相、饱和度、亮度）是一种表示颜色的另一种方式，它通过色相、饱和度和亮度三个参数来描述颜色。格式为 hsl(H, S%, L%)，其中 H 表示色相（取值范围为 0 到 360），S 表示饱和度（取值范围为 0% 到 100%），L 表示亮度（取值范围为 0% 到 100%）。例如：

<p style="color: hsl(120, 100%, 50%);">This is a green text.</p>
 

相关文章：

HTML——5.表单、框架、颜色

一、表单 HTML 表单用于在网页中收集用户输入的数据&#xff0c;例如登录信息、搜索查询等。HTML 提供了一系列的表单元素&#xff0c;允许用户输入文本、选择选项、提交数据等。 <!DOCTYPE html> <html lang"en"> <head> <meta charset&q…...

编程日记 2024/4/6 18:43:16

Docker、Kubernetes之间的区别

比较容器化工具&#xff1a;了解 Docker、Kubernetes 在应用程序部署和管理方面的差异。 基本概述 Docker 是一个流行的容器化平台&#xff0c;允许开发人员在容器中创建、部署和运行应用程序。 Docker 提供了一组工具和 API&#xff0c;使开发人员能够构建和管理容器化应用程…...

编程日记 2024/4/6 18:42:13

【21-40】计算机网络基础知识（非常详细）从零基础入门到精通，看完这一篇就够了

【21-40】计算机网络基础知识&#xff08;非常详细&#xff09;从零基础入门到精通&#xff0c;看完这一篇就够了 以下是本文参考的资料 欢迎大家查收原版 本版本仅作个人笔记使用21、HTTPS是如何保证数据传输的安全&#xff0c;整体的流程是什么&#xff1f;&#xff08;SSL是…...

编程日记 2024/4/6 18:40:12

软考111-上午题-【计算机网络】-URL和DNS

一、URL解析 org&#xff1a;各类组织结构&#xff08;非盈利团队&#xff09; 1-1、顶级域 顶级域名是域名的最后一个部分&#xff0c;即是域名最后一点之后的字母&#xff0c;例如&#xff1a;www.baidu.com这个域名中&#xff0c;顶级域是.com&#xff08;或.COM&#xff…...

编程日记 2024/4/6 18:39:11

EasyCVR视频汇聚平台海康Ehome2.0与5.0设备接入时的配置区别

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2024/4/6 18:35:08

echarts实现炫酷科技感的流光效果

前言&#xff1a; echarts实现炫酷科技感的流光效果 效果图&#xff1a; 实现步骤&#xff1a; 1、引入echarts,直接安装或者cdn引入 npm i echarts https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js 2、封装 option方法&#xff0c;第一个数据是折线数据&a…...

编程日记 2024/4/6 18:34:06

从多模态生物图数据中学习Gene的编码-MuSeGNN

由于数据的异质性&#xff0c;在不同的生物医学背景下发现具有相似功能的基因对基因表示学习提出了重大挑战。在本研究中&#xff0c;作者通过引入一种称为多模态相似性学习图神经网络的新模型来解决这个问题&#xff0c;该模型结合了多模态机器学习和深度图神经网络&#xff0…...

编程日记 2024/4/6 18:33:05

Redis Desktop Manager可视化工具

可视化工具 Redis https://www.alipan.com/s/uHSbg14XmsL 提取码: 38cl 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视频原画倍速播放。 官网下载&#xff08;不推荐&#xff09;&#xff1a;http…...

编程日记 2024/4/6 18:31:02

ARM汇编与逆向工程：揭秘程序背后的神秘世界

文章目录 一、ARM汇编语言&#xff1a;底层世界的密码二、逆向工程&#xff1a;软件世界的侦探工作三、ARM汇编与逆向工程的完美结合四、ARM汇编逆向工程的风险与挑战五、ARM汇编逆向工程的未来展望《ARM汇编与逆向工程　蓝狐卷 基础知识》内容简介作者简介译者简介ChaMd5安全团…...

编程日记 2024/4/6 18:29:00

idea使用docker将Java项目生成镜像并使用

1&#xff1a;开启docker 远程访问 使用 vim 编辑docker服务配置文件 vim /lib/systemd/system/docker.service [Service] Typenotify # the default is not to use systemd for cgroups because the delegate issues still # exists and systemd currently does not suppor…...

编程日记 2024/4/6 18:26:57

clickhouse sql使用2

1、多条件选择 multiIf(cond_1, then_1, cond_2, then_2, …, else) select multiIf(true,0,1) 当第一条件不成立看第二条件判断 第一个参数条件参数&#xff0c;第二参数条件成立时走 2、clickhouse 在计算时候长出现NaN和Infinity异常处理 isNaN()和isInfinite()处理...

编程日记 2024/4/6 18:23:54

jrebel

JRebel最新版&#xff08;2024.1.2&#xff09;在线激活_jrebel 激活 2024-CSDN博客 JRebelXRebel热部署插件激活支持IDEA2023.1_jrebel and xrebel 激活-CSDN博客...

编程日记 2024/4/6 18:20:51

【单片机家电产品学习记录--红外线】

单片机家电产品学习记录–红外线 红外手势驱动电路&#xff0c;&#xff08;手势控制的LED灯&#xff09; 原理 通过红外线对管&#xff0c;IC搭建的电路&#xff0c;实现灯模式转换。 手势控制灯模式转换&#xff0c;详细说明 转载 1《三色调光LED台灯电路》&#xff0c…...

编程日记 2024/4/6 18:19:49

Java入门教程||Java Applet基础

Java Applet基础 applet是一种Java程序。它一般运行在支持Java的Web浏览器内。因为它有完整的Java API支持,所以applet是一个全功能的Java应用程序。 如下所示是独立的Java应用程序和applet程序之间重要的不同&#xff1a; Java中applet类继承了 java.applet.Applet类Applet…...

编程日记 2024/4/6 18:17:47

Python可视化概率统计和聚类学习分析生物指纹

&#x1f3af;要点 &#x1f3af;使用Jupyter Notebook执行Dash 应用&#xff0c;确定Dash输入输出&#xff0c;设计回调函数&#xff0c;Dash应用中包含函数。&#x1f3af;使用Plotly绘图工具&#xff1a;配置图对象选项&#xff0c;​将图转换为HTML、图像。使用数据集绘图…...

编程日记 2024/4/6 18:16:46

yolo v8 教程（不出5行代码让你学会）

Solving environment: failedPackagesNotFoundError: The following packages are not available from current channels:- python3.8https://github.com/ultralytics 下滑来到 先来介绍为什么写这篇博客&#xff0c; 一. 是我之前的yolov5的博客挺多人访问的&#xff0c;但是…...

编程日记 2024/4/6 18:14:44

MongoDB集合结构分析工具Variety

工具下载地址&#xff1a;GitHub - variety/variety: Variety: a MongoDB Schema Analyzer 对于Mongo这种结构松散的数据库来说&#xff0c;如果想探查某个集合的结构&#xff0c;通过其本身提供的功能很不方便&#xff0c;通过调研发现一个很轻便的工具--variety&#xff0c;…...

编程日记 2024/4/6 18:13:43

详解Qt中访问数据库

在Qt中访问数据库涉及到几个关键步骤&#xff0c;主要包括加载数据库驱动、建立数据库连接、执行SQL语句、读取结果等。下面将详细介绍这些步骤&#xff0c;并给出一个简单的示例&#xff0c;这里假设使用的是SQLite数据库。 记得首先在pro文件中添加QT sql 1. 加载数据库驱动…...

编程日记 2024/4/6 18:08:38

《QT实用小工具·三》偏3D风格的异型窗体

1、概述 源码放在文章末尾 可以在窗体中点击鼠标左键进行图片切换&#xff0c;项目提供了一些图片素材&#xff0c;整体风格偏向于3D类型&#xff0c;也可以根据需求自己放置不同的图片。 下面是demo演示&#xff1a; 项目部分代码如下所示&#xff1a; 头文件部分&#xff…...

编程日记 2024/4/6 18:03:33

如何优化TCP？TCP的可靠传输机制是什么？

在网络世界中&#xff0c;传输层协议扮演着至关重要的角色&#xff0c;特别是TCP协议&#xff0c;以其可靠的数据传输特性而广受青睐。然而&#xff0c;随着网络的发展和数据量的激增&#xff0c;传统的TCP协议在效率方面遭遇了挑战。小编将深入分析TCP的可靠性传输机制&#x…...

编程日记 2024/4/6 18:00:30

AI背景分离革新性全攻略：ComfyUI-BiRefNet创意工作流零基础上手指南

AI背景分离革新性全攻略&#xff1a;ComfyUI-BiRefNet创意工作流零基础上手指南 【免费下载链接】ComfyUI-BiRefNet-ZHO Better version for BiRefNet in ComfyUI | Both img & video 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-BiRefNet-ZHO 在数字创意…...

编程新知 2026/3/26 11:05:38

前后端分离毕设架构指南：从技术选型到生产级落地

前后端分离架构如今已成为现代Web开发的标配&#xff0c;但对于即将进行毕业设计的同学来说&#xff0c;如何从零开始搭建一个结构清晰、易于维护的毕设项目&#xff0c;却是一个不小的挑战。很多同学在项目初期雄心勃勃&#xff0c;但在开发过程中却常常陷入接口文档缺失、前后…...

编程新知 2026/3/26 10:57:29

四旋翼无人机自抗扰控制算法的深度研究与ADRC轨迹跟踪实现：附带详细说明文档

四旋翼无人机自抗扰控制算法研究 ADRC 轨迹跟踪 附带说明文档 飞控调试间里飘着咖啡香&#xff0c;小张盯着屏幕上抖得像筛糠的无人机轨迹曲线&#xff0c;第17次把咖啡杯捏得咯吱响。四旋翼在风洞实验室的强风里表演着醉拳&#xff0c;传统PID控制器的参数怎么调都像在打地鼠。…...

编程新知 2026/3/26 9:20:49

FUTURE POLICE新手入门：无需代码基础，快速实现语音转字幕精准对齐

FUTURE POLICE新手入门&#xff1a;无需代码基础&#xff0c;快速实现语音转字幕精准对齐 你是不是也遇到过这样的烦恼&#xff1f;辛辛苦苦给视频配好了字幕&#xff0c;结果播放时总是对不上口型&#xff0c;要么字幕快了&#xff0c;要么慢了&#xff0c;来回调整时间轴&am…...

编程新知 2026/3/26 9:14:47

Python从入门到精通（05章）：类与对象结构

Python从入门到精通&#xff08;第05章&#xff09;&#xff1a;条件判断与分支结构 开头导语 这是本系列第05章。本文采用“知识点讲解 错误示例 正确写法 自测清单”的结构&#xff0c;目标是让你不仅能看懂&#xff0c;还能独立写出可运行代码。建议你边看边敲&#xff0…...

编程新知 2026/3/26 8:46:36

会Python可以找什么工作?

Python凭借简洁易用、功能强大的特点&#xff0c;成为当下就业面极广的编程语言。不少人学会后却不清楚可以找什么工作&#xff0c;其实从开发、数据分析到自动化运维都有大量机会&#xff0c;接下来为大家详细讲解一下。会Python后&#xff0c;可以找的工作有很多&#xff0c;…...

编程新知 2026/3/26 8:22:31

OpenClaw飞书办公助手：Qwen3-VL:30B自动化会议纪要生成

OpenClaw飞书办公助手&#xff1a;Qwen3-VL:30B自动化会议纪要生成 1. 为什么需要自动化会议纪要 每次开完会最痛苦的事情是什么&#xff1f;对我来说就是整理会议纪要。作为团队的技术负责人&#xff0c;我每周要参加至少5场会议&#xff0c;从需求评审到技术方案讨论&#…...

编程新知 2026/3/26 8:08:28

RVC模型计算机组成原理视角：理解AI推理的硬件底层

RVC模型计算机组成原理视角&#xff1a;理解AI推理的硬件底层 你是不是觉得AI模型推理就像一个黑盒子&#xff1f;输入一段音频&#xff0c;点一下按钮&#xff0c;等一会儿&#xff0c;就得到了变声后的结果。整个过程看似简单&#xff0c;但背后却是一场在GPU硬件上精密上演…...

编程新知 2026/3/26 8:08:28

FlowState Lab生成对抗网络（GAN）模式探究：创造极致逼真的模拟数据

FlowState Lab生成对抗网络&#xff08;GAN&#xff09;模式探究&#xff1a;创造极致逼真的模拟数据 1. 引言&#xff1a;当AI学会"造假" 想象一下&#xff0c;你面前有两组数据&#xff1a;一组来自真实世界的传感器采集&#xff0c;另一组由AI生成。它们看起来几…...

编程新知 2026/3/26 7:34:23

Rasa Pro企业级对话AI实战：从安全扫描到密钥管理的完整配置指南

Rasa Pro企业级对话AI实战&#xff1a;从安全扫描到密钥管理的完整配置指南 在金融行业数字化转型浪潮中&#xff0c;智能对话系统已成为客户服务的核心组件。作为Rasa的商业化企业版本&#xff0c;Rasa Pro凭借其专业级的安全防护和可观测性功能&#xff0c;正在成为银行、保险…...

编程新知 2026/3/26 7:24:20