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>
 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

视频汇聚/安防监控/视频存储EasyCVR平台EasyPlayer播放器更新:新增【性能面板】

视频汇聚/安防监控/视频存储平台EasyCVR基于云边端架构&#xff0c;可以在复杂的网络环境中快速、灵活部署&#xff0c;平台视频能力丰富&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云…

【嵌入式硬件】三极管伏安特性曲线-饱和区

1.三极管伏安特性 三极管工作电路如下图所示。 三极管伏安特性曲线 书本上的描述: 截止区:三极管工作在截止状态,当发射结的电压Ube 小于 导通电压(0.6V-0.7V),发射结没有导通;集电结处于反向偏置,没有放大作用。 放大区:三极管的发射极加正向电压(…

聚观早报 | 蔚来推出油车置换补贴;iPhone 16 Pro细节曝光

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 4月02日消息 蔚来推出油车置换补贴 iPhone 16 Pro细节曝光 小米SU7创始版第二轮追加开售 OpenAI将在日本设立办事…

计算机网络-HTTP相关知识-RSA和ECDHE及优化

HTTPS建立基本流程 客户端向服务器索要并验证服务器的公钥。通过密钥交换算法&#xff08;如RSA或ECDHE&#xff09;协商会话秘钥&#xff0c;这个过程被称为“握手”。双方采用会话秘钥进行加密通信。 RSA流程 RSA流程包括四次握手&#xff1a; 第一次握手&#xff1a;客户…

vue项目入门——index.html和App.vue

vue项目中的index.html文件 在Vue项目中&#xff0c;index.html文件通常作为项目的入口文件&#xff0c;它包含了Vue应用程序的基础结构和配置。 该文件的主要作用是引入Vue框架和其他必要的库&#xff0c;以及定义Vue应用程序的启动配置。 import Vue from vue import App …

uniapp-打包app-图标配置

依次找到manifest->App图标配置&#xff0c;然后点击浏览&#xff0c;从本地文件夹中选择你们项目的logo&#xff0c;然后点击自动生成所有图标并替换&#xff0c;即可&#xff1a;

JS-23-原型继承

一、JS的原型继承 在传统的基于Class的语言如Java、C中&#xff0c;继承的本质是扩展一个已有的Class&#xff0c;并生成新的Subclass。 但是&#xff0c;JavaScript由于采用原型继承&#xff0c;根本不存在Class这种类型。 但是办法还是有的。我们先回顾Student构造函数&am…

【最佳实践】高效调优目标检测模型

【最佳实践】高效调优目标检测模型 数据层面算法层面CNN还是Transformer&#xff1f;学习率和优化器损失函数的权重正负样本平衡模型微调与迁移学习模型性能监控与早停可视化与模型解释超参数进化其他方面总结 在深入繁复的计算机视觉领域&#xff0c;目标检测无疑是一项挑战且…

Flutter仿Boss-3.登录页

效果 介绍 在Flutter应用程序中创建登录页面对于用户认证和参与至关重要。登录页面作为用户访问应用程序功能的入口。它应该提供无缝的体验&#xff0c;同时确保安全和隐私。这里仿Boss应用设计的登录页面&#xff0c;我们将创建一个登录页面&#xff0c;允许用户使用手机号码…

Photoshop 2024 Mac/win---图像处理的新纪元,解锁无限创意

Photoshop 2024是一款功能强大的图像处理软件&#xff0c;以其卓越的性能和广泛的应用领域&#xff0c;赢得了设计师、摄影师、图形艺术家等各类创意工作者的青睐。它提供了丰富的绘画和编辑工具&#xff0c;让用户能够轻松进行图片编辑、合成、校色、抠图等操作&#xff0c;实…

网站官网-首页源码html+css+js

网页设计与网站建设作业htmlcssjs 预览 说明 单页面&#xff0c;轮播图 获取&#xff1a;https://hpc.baicaitang.cn/2080.html

部署项目遇到的各种问题总结

文章目录 前言一、后端问题 jar包运行出现错误宝塔面板使用jdk17二、数据库问题 版本问题三、前端问题 连不上后端总结 前言 在做完项目之后&#xff0c;为了让别人访问到自己的网站&#xff0c;就需要部署前端后端以及数据库&#xff0c;但是在部署的过程中出现了各种问题和困…

Vue-Next-Admin:适配手机、平板、PC的开源后台管理模板

摘要&#xff1a;随着移动设备和PC的普及&#xff0c;为了满足不同设备的需求&#xff0c;开发一个能够自适应手机、平板和PC的后台管理系统变得至关重要。本文将介绍一个基于Vue3.x、Typescript、Vite、Element Plus等技术的开源模板库——Vue-Next-Admin&#xff0c;帮助开发…

界面组件DevExpress WinForms v23.2 - 进一步增强HTML CSS支持

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…

CMakeLists.txt编写简单介绍:CMakeLists.txt同时编译.cpp和.cu

关于CMakeLists.txt的相关介绍,这里不赘诉,本人的出发点是借助于CMakeLists.txt掌握基本的C++构建项目流程,下面是本人根据网络资料以及个人实践掌握的资料。 CMakeList.txt构建C++项目 下图是一个使用CUDA实现hello world的项目,一般来说,一个标准的C++项目包括三个文件…

VScode debug python(服务器)

方法一&#xff1a; 创建launch.json文件&#xff1a; launch.json文件地址&#xff1a; launch.json文件内容&#xff1a; {"version": "0.2.0", //指定了配置文件的版本"configurations": [{"name": "Python: Current File&…

使用tcpdump和wireshark进行服务器抓包分析

目录 前言 1.tcpdump简介 2.Wireshark简介 3.实际案例 4.代码示例 5.总结 前言 服务器抓包分析是一种非常常见和有效的网络故障排查和性能优化手段。通过捕获服务器上的网络流量&#xff0c;可以帮助我们深入了解服务器与其它设备之间的通信情况&#xff0c;发现问题并进…

探索Flutter混淆在提高应用安全性方面的作用

在移动应用开发中&#xff0c;保护应用代码安全至关重要。Flutter 提供了简单易用的混淆工具&#xff0c;帮助开发者在构建 release 版本应用时有效保护代码。本文将介绍如何在 Flutter 应用中使用混淆&#xff0c;并提供了相关的操作步骤和注意事项。 &#x1f4dd; 摘要 本…

AWS入门实践-S3对象存储的基本用法

AWS S3(Simple Storage Service)是亚马逊云服务提供的一种高度可扩展、安全且经济高效的对象存储服务。它允许用户在任何位置存储和检索任意数量的数据,非常适合存储和分发静态文件、备份数据以及作为数据湖的存储层。 一、S3上传和下载文件&#xff08;AWS门户&#xff09; …

【zlm】音视频流与音频流合并的设计

目录 设想一 设想二 方案三 关键技术 测试语句 测试脚本 参考文档 设想一 //开始录制_option.mp4_save_path custom_path;_option.mp4_max_second max_second;vector<Track::Ptr> mytracks getTracks();auto src MediaSource::find( DEFAULT_VHOST, "1&quo…