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

一、表单

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>
 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/795937.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

01.IDEA中出现Cannot resolve symbol ‘SpringApplication异常

01.IDEA中出现Cannot resolve symbol ‘SpringApplication异常

试了很多次&#xff0c;看了这篇文章终于发现了问题。IDEA解决springboot工程中Cannot resolve symbol SpringApplication异常-CSDN博客 我存在的问题在于Maven home path有误&#xff0c;改正之后就没有问题&#xff0c;不标红了。
阅读更多...
C语言实现快速排序算法

C语言实现快速排序算法

1. 什么是快速排序算法 快速排序的核心思想是通过分治法&#xff08;Divide and Conquer&#xff09;来实现排序。 算法的基本步骤是: 1. 选择一个基准值&#xff08;通常是数组中的某个元素&#xff09;&#xff0c;将数组分成两部分&#xff0c;使得左边的部分所有元素都小于…
阅读更多...
RabbitMQ3.13.x之六_RabbitMQ使用场景

RabbitMQ3.13.x之六_RabbitMQ使用场景

RabbitMQ3.13.x之六_RabbitMQ使用场景 文章目录 RabbitMQ3.13.x之六_RabbitMQ使用场景1. 为什么选择 RabbitMQ&#xff1f;1. 可互操作2. 灵活3. 可靠 2. 常见用户案例1. 服务解耦2. 远程过程调用3. 流处理4. 物联网 1. 为什么选择 RabbitMQ&#xff1f; RabbitMQ 是一个可靠且…
阅读更多...
C语言 | Leetcode C语言题解之第8题字符串转换整数atoi

C语言 | Leetcode C语言题解之第8题字符串转换整数atoi

题目&#xff1a; 题解&#xff1a; int myAtoi(char * s){int i0;int out0;int pol1;int lenstrlen(s);if(len0) return 0;while(s[i] ) i; //删除空格if(s[i]-){ //判断正负pol-1;i;}else if(s[i]){pol1;i;}else{pol1;}while(s[i]!\0){if(s[i]<0||s[i]>9){ /…
阅读更多...
算法学习（十七）规律

算法学习（十七）规律

规律 1. 概念 模拟题目过程探索问题规律找出隐含条件 2. 解题技巧&#xff08;我的总结&#xff09; 1> 将 问题中的抽象条件 找出实际意思 题目说明实现649. Dota2 参议院题中每个议员最好表现 禁止后面最近的对方议员 或 禁止前面最远的对方议员我的提交1702. 修改后的…
阅读更多...
Python基础教程：从入门到实践

Python基础教程：从入门到实践

Python&#xff0c;一种解释型、交互式、面向对象的编程语言&#xff0c;因其简洁易懂的语法和强大的功能库而广受欢迎。无论是数据分析、机器学习还是Web开发&#xff0c;Python都发挥着重要作用。本文将带你走进Python的世界&#xff0c;从基础语法开始&#xff0c;逐步深入实…
阅读更多...
【智能算法】跳蛛优化算法（AOA）原理及实现

【智能算法】跳蛛优化算法（AOA）原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2021年&#xff0c;H Peraza-Vzquez等人受到跳蛛狩猎行为启发&#xff0c;提出了跳蛛优化算法&#xff08;Jumping Spider Optimization Algorithm&#xff0c;JSOA&#xff09;。 2.算法原理 2.1…
阅读更多...
【Kaggle】练习赛《鲍鱼年龄预测》(上)

【Kaggle】练习赛《鲍鱼年龄预测》(上)

前言 上一篇文章&#xff0c;讲解了《肥胖风险的多类别预测》机器学习方面的文章&#xff0c;主要是多分类算法的运用&#xff0c;本文是一个回归的算法&#xff0c;本期是2024年4月份的题目《Regression with an Abalone Dataset》即《鲍鱼年龄预测》&#xff0c;在此分享高手…
阅读更多...
C++数据结构与算法——回溯算法组合问题

C++数据结构与算法——回溯算法组合问题

C第二阶段——数据结构和算法&#xff0c;之前学过一点点数据结构&#xff0c;当时是基于Python来学习的&#xff0c;现在基于C查漏补缺&#xff0c;尤其是树的部分。这一部分计划一个月&#xff0c;主要利用代码随想录来学习&#xff0c;刷题使用力扣网站&#xff0c;不定时更…
阅读更多...
C++ 引用和指针

C++ 引用和指针

C++ 中的引用（Reference）和指针（Pointer）是两种不同的概念，它们在语法上和语义上有很多不同之处，下面是它们的区别： 语法： 引用使用 & 符号声明，并且必须在初始化时绑定到一个对象上。例如：int& ref = obj;指针使用 * 符号声明，并且可以在任何时候指向一个对…
阅读更多...
Java入门第6课

Java入门第6课

1.数据类型的自动转化 java的数据转化是容量小的部分向大的方向转&#xff0c;这个部分很简单&#xff0c;byte->short->int->long&#xff0c;char->int->long;int->double 有一些数据转化虽然是自动的&#xff0c;但是存在数据精度丢失&#xff0c;比如i…
阅读更多...
特征增强自蒸馏卷积神经网络

特征增强自蒸馏卷积神经网络

目录 1.1 模型总体架构 1.2 特征增强金字塔模块 1.3 辅助分类器 1.1 模型总体架构 与自然图像相比&#xff0c;遥感场景图像地物较为复杂&#xff0c;具有类间相似度高和类内差异大的特点&#xff0c;这导致常用的网络模型难以有效学习遥感场景图像的表征特征。此外&#xf…
阅读更多...
【ARM 嵌入式 C 入门及渐进 21 -- 内存分配相关函数malloc 与 realloc】

【ARM 嵌入式 C 入门及渐进 21 -- 内存分配相关函数malloc 与 realloc】

请阅读【嵌入式开发学习必备专栏 】 文章目录 malloc 与 reallocmallocrealloc主要差异点 malloc 与 realloc malloc 和 realloc 都是 C 语言标准库中的函数&#xff0c;用于动态内存分配。它们在使用上有明显的区别&#xff1a; malloc malloc&#xff08;Memory Allocatio…
阅读更多...
springboot之mybatisPlus多表查询及分页查询

springboot之mybatisPlus多表查询及分页查询

文章目录 一、多表查询二、mybatis-plus条件查询三、分页查询 一、多表查询 可能会用到的注解 这里的场景是&#xff0c;查询每个用户及其所有的订单。就是查询你的id号的同时&#xff0c;把你所有的历史订单信息都拉出来。 表结构这样 CREATE TABLE User ( id INT PRIMARY…
阅读更多...
【可靠性】陷阱电荷对TDDB影响的多尺度模拟

【可靠性】陷阱电荷对TDDB影响的多尺度模拟

【From Accelerated to Operating Conditions: How Trapped Charge Impacts on TDDB in SiO2 and HfO2 Stacks】 文章总结&#xff1a; 本研究深入探讨了在SiO2和HfO2介质堆叠中&#xff0c;陷阱电荷对时间依赖介电击穿&#xff08;TDDB&#xff09;现象的影响。通过引入载流子…
阅读更多...
位运算-191. 位1的个数- 136. 只出现一次的数字

位运算-191. 位1的个数- 136. 只出现一次的数字

位1的个数 已解答 简单 相关标签 相关企业 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中 设置位 的个数&#xff08;也被称为汉明重量&#xff09;。 示例 1&#xff1a; 输入&#xff1a;n 11 输…
阅读更多...
Git 术语及中英文对照

Git 术语及中英文对照

完毕&#xff01;&#xff01;感谢您的收看 ----------★★历史博文集合★★---------- 我的零基础Python教程&#xff0c;Python入门篇 进阶篇 视频教程 Py安装py项目 Python模块 Python爬虫 Json Xpath 正则表达式 Selenium Etree CssGui程序开发 Tkinter Pyqt5 列表元组字…
阅读更多...
C++从入门到精通——类的定义及类的访问限定符和封装

C++从入门到精通——类的定义及类的访问限定符和封装

类的定义及类的访问限定符和封装 前言一、类的定义类的两种定义方式成员变量命名规则的建议示例 二、类的访问限定符和封装访问限定符访问限定符说明C为什么要出现访问限定符例题 封装例题 前言 类的定义是面向对象编程中的基本概念&#xff0c;它描述了一类具有相同属性和方法…
阅读更多...
MyBatis-Plus的学习笔记

MyBatis-Plus的学习笔记

MyBatis-Plus 一、MyBatis-Plus快速入门 1.1 简介 课程版本&#xff1a;3.5.3.1 https://baomidou.com/ MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window) 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&…
阅读更多...
基于Vision Transformer的迁移学习在乳腺X光图像分类中的应用

基于Vision Transformer的迁移学习在乳腺X光图像分类中的应用

乳房X线摄影(MG)在乳腺癌的早期发现中起着重要作用。MG可以在早期阶段发现乳腺癌&#xff0c;即使是感觉不到肿块的小肿瘤。基于卷积神经网络(CNN)的DL最近吸引了MG的大量关注&#xff0c;因为它有助于克服CAD系统的限制(假阳性、不必要的辐射暴露、无意义的活组织检查、高回调…
阅读更多...
最新文章

Copyright @ 2022~2023