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

前端秘法基础式(HTML)(第二卷)

news 2025/11/12 5:16:48

一.表单标签

1.表单域

2.表单控件

2.1input标签

2.2label/select/textarea标签

2.3无语义标签

三.特殊字符

一.表单标签

用来完成与用户的交互,例如登录系统

1.表单域

<form>通过action属性,将用户填写的数据转交给服务器

2.表单控件

2.1input标签

type属性:text文本输入框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是标题</title>
</head>
<body><!-- 这里是注释 --><form action = "">姓名<input type = "text"></form>
</body>
</html>

type = password

这种情况下对用户输入的数据具有加密效果

type = radio单选框

<body><!-- 这里是注释 --><form action = "">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender">男<input type = "radio" name = "gender">女</form>
</body>

附加相同的name属性,只能选择一个,当加入checked = "checked"则可以默认一个选项

type = checkbox复选框可以选择多个选项

 <form action = "">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender" checked = "checked">男<input type = "radio" name = "gender">女<br>爱好<input type = "checkbox">吃饭<input type = "checkbox">睡觉<input type = "checkbox">打豆豆</form>

type = button普通按钮(配合JS监听用户操作)

<form action = "">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender" checked = "checked">男<input type = "radio" name = "gender">女<br>爱好<input type = "checkbox">吃饭<input type = "checkbox">睡觉<input type = "checkbox">打豆豆<br><input type = "button" value="                     登录                     " onclick="alert('登录成功')"></form>

type = submit/reset提交/重置

<form action = "https://www.baidu.com/">姓名<input type = "text"><br>密码<input type = "password"><br><input type = "submit"><input type = "reset"></form>

2.2label/select/textarea标签

label标签通常搭配单选框使用,与单选框对应的文本内容进行绑定

select标签是下拉菜单框

textarea标签是可变化的文本框,超出默认行数就会出现滚动条

<form action = "https://www.baidu.com/">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender" id = "male"><label for="male">男</label><input type = "radio" name = "gender" id = "female"><label for="female">女</label><br>出生年份<select><option>--请选择出生年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select><br>个人经历<br><textarea rows="2" cols="30"></textarea><br><input type = "submit"><input type = "reset"></form>

2.3无语义标签

有两种

div独占一行(可以替代<br>)

span不独占一行

<body><!-- 这里是注释 --><form action = "https://www.baidu.com/"><div>姓名<input type = "text"></div><div>密码<input type = "password"></div><div>性别<input type = "radio" name = "gender" id = "male"><label for="male">男</label><input type = "radio" name = "gender" id = "female"><label for="female">女</label></div><div>出生年份<select><option>--请选择出生年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select></div><div>个人经历</div><div><textarea rows="2" cols="30"></textarea></div><div><input type = "submit"><input type = "reset"></div></form>
</body>

三.特殊字符

在html中如何表示空格,<>,&呢,肯定不能直接表示,因为html会将多余的空格字符叠加为一个,<>又会和标签符号混淆,那么我们需要用额外的方法来表示

空格&nbsp

<&lt <&gt & &amp

看一下效果

前端秘法基础式(HTML)(第二卷)

目录一.表单标签 1.表单域 2.表单控件 2.1input标签 2.2label/select/textarea标签 2.3无语义标签三.特殊字符一.表单标签用来完成与用户的交互,例如登录系统 1.表单域 <form>通过action属性,将用户填写的数据转交给服务器 2.表单控件 2.1input标签 type…...

编程日记 2024/2/21 10:18:27

PTA-统计英文字母和数字字符[2]

本题要求编写程序，输入N个字符，统计其中英文字母、数字字符和其他字符的个数。输入格式: 输入在第一行中给出正整数N，第二行输入N个字符，最后一个回车表示输入结束，不算在内。输出格式: 在一行内按照 letter 英…...

编程日记 2024/2/21 10:17:26

Elasticsearch：将 IT 智能和业务 KPI 与 AI 连接起来 - 房间里的大象

作者：Fermi Fang 大象寓言的智慧在信息技术和商业领导力的交叉点，蒙眼人和大象的古老寓言提供了一个富有洞察力的类比。这个故事起源于印度次大陆，讲述了六个蒙住眼睛的人第一次遇到大象的故事。每个人触摸大象的不同部位 —— 侧面、象牙…...

编程日记 2024/2/21 10:14:23

基于芯驰 X9HP PTG4.1 在 yocto 中添加 Linux 应用

1.参考例程并添加应用 1.1 参考例程 （1）查看自带的串口测试例程 uart_test ，查看 bb 文件怎么写的。 1.2 添加 printf-test 应用 （1）在 yocto/meta-semidrive/recipes-bsp/ 目录中 copy 自带例程 uart-test 改名为 …...

编程日记 2024/2/21 10:11:20

【微服务安全】OpenID Connect 简介：现代应用程序的身份验证

OpenID Connect (OIDC) 是一个建立在 OAuth 2.0 之上的开放身份验证协议。它简化了应用程序以一种标准化和可互操作的方式验证用户身份并获取其基本个人资料信息的方式。可以将其视为应用程序“知道你是谁”的一种安全方式，而无需你创建单独的帐户或透露你的密码。 …...

编程日记 2024/2/21 10:10:19

Linux系统中HTTP隧道的搭建与配置步骤：穿越网络的“魔法隧道”

在Linux系统中搭建HTTP隧道，就像是开启了一条穿越网络的“魔法隧道”。这条隧道能让你的数据在网络中自由穿梭，无论是远程办公还是数据同步，都能变得轻松自在。下面，就让我们一起探索如何搭建这条神奇的“魔法隧道”吧&#xff01…...

编程日记 2024/2/21 10:05:14

额外校验使用Query可以对查询参数添加校验 from typing import Unionfrom fastapi import FastAPI, Queryapp FastAPI()app.get("/items/") async def read_items(q: Union[str, None] Query(defaultNone, max_length50)):results {"items": [{"…...

编程日记 2024/2/21 10:01:11

笔记记录

前言个人记录官网模版基于 vue2 示例图...

编程日记 2024/2/21 9:57:07

相机图像质量研究(38)常见问题总结：编解码对成像的影响--呼吸效应

系列文章目录相机图像质量研究(1)Camera成像流程介绍相机图像质量研究(2)ISP专用平台调优介绍相机图像质量研究(3)图像质量测试介绍相机图像质量研究(4)常见问题总结：光学结构对成像的影响--焦距相机图像质量研究(5)常见问题总结：光学结构对成…...

编程日记 2024/2/21 9:56:05

MQTT协议-ISO标准下基于发布/订阅范式的消息协议

MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在 TCP/IP协议族上，是为硬件性能低下的远程设备以及网络状况糟糕的情况下而设计的发布/订阅型消息协议，为此，它需要一个消息中间件。 MQTT是一个…...

编程日记 2024/2/21 9:53:02

手动实现new操作符

编程日记 2024/2/21 9:52:01

【flutter】环境安装

安装flutter sdk 下载sdk flutter sdk就包含dart，所以我们只用安装flutter sdk就可以了。我们去清华大学开源软件镜像站下载，flutter开发中，版本对不上基本项目就跑步起来，如果是团队协同开发的话，建议统一下载指定版…...

编程日记 2024/2/21 9:51:00

ROUGE-L和SPICE

ROUGE-L ROUGE-L（Recall-Oriented Understudy for Gisting Evaluation - Longest Common Subsequence）是一种用于评估自动文本摘要或机器翻译等自然语言处理任务的评价指标。它基于最长公共子序列（LCS）来计算，主要关注…...

编程日记 2024/2/21 9:46:55

vue3组件通信方式汇总

前言：本文默认读者有JS基础和Vue基础，如果没有这个两个基础，可能阅读比较困难，建议先看下官方文档，当然，也欢迎评论交流😁 通信方式总结常见搭配形式一、props（使用频率最高&#…...

编程日记 2024/2/21 9:38:47

备份服务器数据的重要

备份服务器数据的重要无论您是在运营一个网站、一个业务应用程序还是整个平台，无法定期备份服务器数据都可能将会再次困扰您。这不是一个是否的问题。这是个何时的问题。你们需要将灾难性故障的潜在损害降至最低。灾难性故障期间最大限度地减少潜在损害的最佳方法…...

编程日记 2024/2/21 9:37:46

基于shp数据制作3DTiles建筑白膜

经纬管网建模系统MagicPipe3D，本地离线参数化构建地下管网、建筑三维模型，输出标准3DTiles服务、Obj模型等格式，支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析。欢迎下载试用：http://www.magic3d.…...

编程日记 2024/2/21 9:32:41

SpringBootWeb学习笔记——12万字详细总结！

0. 写在前面注：这套笔记是根据黑马程序员B站2023-3-21的视频学习的成果，其中省略了前端基础部分、Maven部分和数据库基础部分，详情可见目录。注注：目前文章内结尾处多幅图片加载不出来，因为图片还存在本地没被传上来，过段时间再改~ 所有的Spring项目都基于Spring Fra…...

编程日记 2024/2/21 9:30:40

Code Composer Studio (CCS) - 文件比较

Code Composer Studio [CCS] - 文件比较 References 鼠标单击选中一个文件，再同时按住 Ctrl 鼠标左键来选中第二个文件，在其中一个文件上鼠标右击选择 Compare With -> Each Other. References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.n…...

编程日记 2024/2/21 9:27:37

【GIT学习】仓库过大的清理办法

1、.git目录过大要解决.git目录过大的问题，可以尝试以下方法： 使用git gc命令清理不再需要的缓存。这将帮助减小仓库的大小。在命令行中输入以下命令： git gc --prunenow --aggressive使用git repack -ad命令来重新打包已经提交的文件。 …...

编程日记 2024/2/21 9:25:35

[office] excel如何设置图片大小 #其他#其他

excel如何设置图片大小如果你是EXCEL初学者，因为EXCEL功能强大，刚开始肯定很难记住许多的操作技巧，这里讲一下如何插入图片并根据需要改变图片的大小。下面让小编为你带来excel设置图片大小的方法。 excel设置图片大小步骤： 步骤…...

编程日记 2024/2/21 9:22:33

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41