首页 > 其他分享 >HTML——5.表单、框架、颜色

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

时间:2024-04-02 12:02:53浏览次数:19  
标签:框架 元素 表单 HTML 开发者 CSS

一、表单

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,开发者,CSS
From: https://blog.csdn.net/weixin_66370632/article/details/137264279

相关文章

  • vue中表单修改提交前利用watch找出新数据和原来数据之间的改动
    <template><div><[email protected]="submitForm"><inputv-model="formData.name"type="text"placeholder="Name"><inputv-model="formData.email"type......
  • 界面组件DevExpress WinForms v23.2 - 进一步增强HTML & CSS支持
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!DevExpressWinForms控件日前正式发布了v23.2,此版......
  • C#/.NET/.NET Core优秀项目和框架2024年3月简报
    前言公众号每月定期推广和分享的C#/.NET/.NETCore优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍、功能特点、使用方式以及部分功能截图等(打不开或者打开GitHub很慢的同学可以优先查看公众号推文,文末一定会附带项目和框架......
  • 53.html+css+js网页设计实例/“旅游”主题北京介绍/web前端期末大作业/
    一、前言 本实例以“旅游”北京为主题设计,应用html+css+js,包括菜单导航、视频、留言表单、搜索等,供大家参考。【关注作者】2000+套Web模板,主题涵盖30+类型,更多网页课程、网页模板,DW网页成品源代码下载,有兴趣的联系我交流分享!您的支持是我创作的动力,【点赞收藏博文】,3Q!二......
  • C#/.NET/.NET Core优秀项目和框架
    C#/.NET/.NETCore优秀项目和框架2024年3月简报 前言公众号每月定期推广和分享的C#/.NET/.NETCore优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍、功能特点、使用方式以及部分功能截图等(打不开或者打开GitHub很慢的同学......
  • 前端之HTML——网页的骨架!!
    目录一、HTML介绍二、HTML标签(一)基础标签(二)其他标签2.1        6个常用标签2.2    8个文本标签2.3    6个列表标签2.4    4个表格标签2.5    4个媒体标签2.6    1个嵌入标签2.7    1个表单标签三、HTML语......
  • HTML学习归纳1
            想通过这样的方式,记录自己的学习过程。将近期学习到的一些内容,不定期的做一些总结,方便有相同经历的人一起学习交流。    首先,在初步了解学习了HTML以后,先明白这是一门标签语言,逻辑架构上应该说是十分清晰的,我们需要的是掌握不同标签的用法。   ......
  • 【HTML】标签学习(下.4)
    (Hello!大家好哇,今天我们将继续学习HTML的相关知识,大家可以在评论区进行互动答疑哦~加油!......
  • 使用Element-UI的form表单验证文件是否上传
    项目中有个需求,表单中的文件为必传项。 其中使用了element-ui的form表单验证,话不多说,上代码。<template><div><el-formlabel-position="top":model="reportForm"ref="checkerForm":rules="rules"label-......
  • Python快速入门系列-7(Python Web开发与框架介绍)
    第七章:PythonWeb开发与框架介绍7.1Flask与Django简介7.1.1Flask框架Flask的特点Flask的安装一个简单的Flask应用示例7.1.2Django框架Django的特点Django的安装一个简单的Django应用示例7.2前后端交互与数据传输7.2.1前后端交互7.2.2......