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

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

news 文章来源：https://blog.csdn.net/lmy050813/article/details/136107036 2025/5/14 17:45:12

目录

一.表单标签

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]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fastApi笔记04-查询参数和字符串校验

额外校验 使用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)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…...

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

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

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

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

手动实现new操作符

<script>//前置知识// 每一个函数在创建之初就会有一个prototype属性&#xff0c;这个属性指向函数的原型对象// function abc(){// }// abc.prototype--> {constructor: f}// 在JS中任意的对象都有内置的属性叫做[[prototype]]这是一个私有属性&#xff0c;这个私有属…...

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

【flutter】环境安装

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

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

ROUGE-L和SPICE

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

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

vue3组件通信方式汇总

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

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

备份服务器数据的重要

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

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

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

经纬管网建模系统MagicPipe3D&#xff0c;本地离线参数化构建地下管网、建筑三维模型&#xff0c;输出标准3DTiles服务、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析。欢迎下载试用&#xff1a;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 鼠标单击选中一个文件&#xff0c;再同时按住 Ctrl 鼠标左键来选中第二个文件&#xff0c;在其中一个文件上鼠标右击选择 Compare With -> Each Other. References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.n…...

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

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

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

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

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

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

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

【动态规划专栏】专题二：路径问题--------4.下降路径最小和

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…...

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

LabVIEW读取excel日期

LabVIEW读取excel日期 | Excel数据表格中有日期列和时间列&#xff0c;如下表所示&#xff1a; 通过LabVIEW直接读取Excel表格数据&#xff0c;读出的日期列和时间列数据与原始表格不一致&#xff0c;直接读出来的数据如下表所示&#xff1a; 日期、时间列数据异常 问题产生原因…...

编程日记 2024/2/21 9:20:31

K8s ingress-nginx根据请求目录不同将请求转发到不同应用

K8s ingress-nginx根据请求目录不同将请求转发到不同应用 1. 起因 有小伙伴做实验想要实现以下需求: 输入www.pana.com/app1访问app1的svc 输入www.pana.com/app2访问app2的svc 2. 实验 2.1 Dockerfile 先准备Dockerfile FROM nginx:1.20ADD index.html /usr/share/ngin…...

编程日记 2024/2/21 9:19:31

【Linux】git操作 - gitee

1.使用 git 命令行 安装 git yum install git 2.使用gitee 注册账户 工作台 - Gitee.com 进入gitee&#xff0c;根据提示注册并登录 新建仓库 仓库名称仓库简介初始换仓库 3.Linux-git操作 进入仓库&#xff0c;选择“克隆/下载” 复制下面的两行命令进行git配置 然后将仓库clo…...

编程日记 2024/2/21 9:17:28

EXCEL使用VBA一键批量转换成PDF

EXCEL使用VBA一键批量转换成PDF 上图是给定转换路径 Sub 按钮1_Click() Dim a(1 To 1000) As String Dim a2 As String Dim myfile As String Dim wb As Workbook a2 Trim(Range("a2"))myfile Dir(a2 & "\" & "*.xls")k 0Do While m…...

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

【大厂AI课学习笔记】【2.2机器学习开发任务实例】（8）模型训练

好吧&#xff0c;搞了半天&#xff0c;都是围绕数据在干活&#xff0c;这也就验证了&#xff0c;我们说的&#xff0c;数据准备等工作&#xff0c;要占到机器学习项目一半以上的工作量和时间。而且数据决定了模型的天花板&#xff0c;算法只是去达到上限。 我们今天来学习模型…...

编程日记 2024/2/21 9:13:24

【Flink网络通讯（一）】Flink RPC框架的整体设计

文章目录 1. Akka基本概念与Actor模型2. Akka相关demo2.1. 创建Akka系统2.2. 根据path获取Actor并与之通讯 3. Flink RPC框架与Akka的关系4.运行时RPC整体架构设计5. RpcEndpoint的设计与实现 我们从整体的角度看一下Flink RPC通信框架的设计与实现&#xff0c;了解其底层Akka通…...

编程日记 2024/2/21 9:06:16

【Flink】FlinkSQL读取hive数据（批量）

一、简介： Hive在整个数仓中扮演了非常重要的一环，我们可以使用FlinkSQL实现对hive数据的读取，方便后续的操作，本次例子为Flink1.13.6版本 二、依赖jar包准备： 官网地址如下： Overview | Apache Flink 1、我们需要准备相关的jar包到Flink安装目录的lib目录下，我们需…...

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

list链表

1. list基本概念 功能&#xff1a;将数据进行链式存储 链表&#xff08;list&#xff09;是一种物理存储单元上非连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接实现的 链表的组成&#xff1a;链表由一系列结点组成 结点的组成&#xff1a;一个是存储数据…...

编程日记 2024/2/21 8:59:09

＜网络安全＞《42 网络攻防专业课＜第八课 - SQL注入漏洞攻击与防范＞》

1 SQL注入漏洞利用及防范 1 SQL注入的地位 2 SQL注入的危害及本质 这些危害包括但不局限于&#xff1a; 数据库信息泄漏&#xff1a;数据库中存放的用户的隐私信息的泄露。网页篡改&#xff1a;通过操作数据库对特定网页进行篡改。网站被挂马&#xff0c;传播恶意软件&#…...

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