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

目录

一.表单标签

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

看一下效果

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

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

相关文章

六、Mybatis注解开发

1.MyBatis的常用注解 注解开发越来越流行&#xff0c; Mybatis也可以使用注解开发方式&#xff0c;这样就可以减少编写Mapper映射文件。Insert&#xff1a;实现新增Update&#xff1a;实现更新Delete&#xff1a;实现删除Select&#xff1a;实现查询Result&#xff1a;实现结果…

DS:二叉树的顺序结构及堆的实现

创作不易&#xff0c;兄弟们给个三连&#xff01;&#xff01; 一、二叉树的顺序存储 顺序结构指的是利用数组来存储&#xff0c;一般只适用于表示完全二叉树&#xff0c;原因如上图&#xff0c;存储不完全二叉树会造成空间上的浪费&#xff0c;有的人又会问&#xff0c;为什么…

linux 09 软件安装,YUM

下载软件时候&#xff0c;windows会从网上下载exe文件。 windows中的exe文件linux中的rpm文件 简介部分&#xff1a; 其中的认识RPM包&#xff1a; YUM&#xff08;软件包管理工具&#xff09; 01.YUM工具简介 02.使用YUM 第一 安装YUM 全新安装&#xff1a; 01.先pin…

linux系统zabbix监控配置钉钉告警

zabbix配置钉钉告警 配置钉钉告警环境准备配置钉钉脚本文件钉钉日志目录编写脚本浏览器配置钉钉告警中文消息告警模版为用户添加报警媒介添加监控项》添加触发器》 添加玩监控项和触发器后添加动作 配置钉钉告警 环境准备 创建钉钉内部群创建自定义机器人记录加签地址和webho…

Web安全研究(六)

文章目录 HideNoSeek: Camouflaging(隐藏) Malicious JavaScript in Benign ASTs文章结构Introjs obfuscationmethodologyExample HideNoSeek: Camouflaging(隐藏) Malicious JavaScript in Benign ASTs CCS 2019 CISPA 恶意软件领域&#xff0c;基于学习的系统已经非常流行&am…

DS:二叉树的链式结构及实现

创作不易&#xff0c;友友们给个三连吧&#xff01;&#xff01; 一、前言 前期我们解释过二叉树的顺序结构&#xff08;堆&#xff09;为什么比较适用于完全二叉树&#xff0c;因为如果用数组来实现非完全二叉树&#xff0c;那么数组的中间部分就可能会存在大量的空间浪费。 …

Linux操作系统基础(十四):集群服务器搭建

文章目录 集群服务器搭建 一、新增Linux服务器 1、克隆虚拟机 2、修改虚拟机的硬件配置 3、修改虚拟机的网络配置 二、关闭防火墙 1、关闭firewalld 2、关闭SElinux 三、修改主机名 四、修改hosts映射 五、SSH免密登录 六、时钟同步 七、远程文件拷贝 1、从本机拷…

剑指offer——二进制中1的个数

目录 1. 题目描述2. 可能引起死循环的想法3. 改进后的代码4. 给面试官惊喜的代码 1. 题目描述 请实现一个函数&#xff0c;输入一个整数&#xff0c;输出该数二进制表示中1的个数。例如把9表示成二进制位1001&#xff0c;有2位是1&#xff0c;因此如果输入9&#xff0c;该函数输…

Selenium图表自动化开篇

目录 前言&#xff1a; 使用 Canvas 或者 SVG 渲染 选择哪种渲染器 代码触发 ECharts 中组件的行为 前言&#xff1a; 图表自动化一直以来是自动化测试中的痛点&#xff0c;也是难点&#xff0c;痛点在于目前越来越多公司开始构建自己的BI报表平台但是没有合适的自动化测试…

Shell 学习笔记(三)-shell变量

Shell 语言是一种动态类型和弱类型语言, 因此,在Shell中无需显示地声明变量, 且变量的类型会根据不同的操作符而发生变化. 静态类型语言: 在程序编译期间就确定变量类型的语言, 如java, C等 动态类型语言: 在程序运行期间才确定变量类型的语言, 如PHP, Python等. 一 shell变量…

高中信息技术—数据采集与编码(一)

计算机技术的应用&#xff0c;使得数据的处理方式发生了巨大的转变&#xff0c;要用计算机处理这些数据&#xff0c;需要对采集到的数据进行一定的转换。 采集方式 1.人工采集—观察、实验 2.机器采集 互联网—网络爬虫 传感器—自然信源 数字化 信息可用模拟信号或数字信号表…

MySQL学习记录——구 复合查询

文章目录 1、基本查询2、多表查询3、自连接4、子查询1、多行子查询2、多列子查询3、from句中的子查询 5、合并查询 1、基本查询 看一些例子&#xff0c;不关心具体内容&#xff0c;只看写法 //查询工资高于500或岗位为MANAGER的雇员, 同时还要满足他们的姓名首字母为大写的J …

Docker的常见命令以及命令别名

常见命令 命令说明docker pull拉取镜像docker push推送镜像到DockerRegistrydocker images查看本地镜像docker rmi删除本地镜像docker run创建并允许容器docker stop停止指定容器docker start启动指定容器docker restart重新启动容器docker rm删除指定容器docker ps查看容器do…

ClickHouse--04--数据库引擎、Log 系列表引擎、 Special 系列表引擎

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.数据库引擎1.1 Ordinary 默认数据库引擎1.2 MySQL 数据库引擎MySQL 引擎语法字段类型的映射 2.ClickHouse 表引擎3.Log 系列表引擎几种 Log 表引擎的共性是&#…

opencv通道分离与合并

void QuickDemo::channels_demo(Mat & image) {std::vector<Mat>mv;//通道分离合并split(image,mv);//原图 指针(Mat)imshow("蓝色", mv[0]);imshow("绿色", mv[1]);imshow("红色", mv[2]); } split(image,mv);//原图 指针(Mat) 这里…

学习笔记20:牛客周赛32

D 统计子节点中1的个数即可&#xff08;类似树形dp&#xff1f;&#xff09; #include<iostream> #include<cstring> #include<cmath> #include<algorithm> #include<queue> #include<vector> #include<set> #include<map>u…

Rust 数据结构与算法:5栈:用栈实现前缀、中缀、后缀表达式

3、前缀、中缀和后缀表达式 计算机是从左到右处理数据的,类似(A + (B * C))这样的完全括号表达式,计算机如何跳到内部括号计算乘法,然后跳到外部括号计算加法呢? 一种直观的方法是将运算符移到操作数外,分离运算符和操作数。计算时先取运算符再取操作数,计算结果则作为…

HTML5+CSS3+JS小实例:锥形渐变彩虹按钮

实例:锥形渐变彩虹按钮 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /…

maven创建webapp+Freemarker组件的实现

下载安装配置maven Maven官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘123云盘为您提供Maven最新版正式版官方版绿色版下载,Maven安卓版手机版apk免费下载安装到手机,支持电脑端一键快捷安装https://www.123pan.com/s/9QRqVv-TcUY.html链接为3.6.2-3.6.3的版本 下载解…

LLVM的中间表示

概括 选择编译器IR的决策很重要&#xff0c;它决定了优化过程将拥有多少信息来使代码运行得更快。 一方面非常高层级的IR允许优化器轻松地提取原始源代码的相关信息。 另一方面&#xff0c;低层的IR更加贴近目标机器&#xff0c;这样编译器更容易为特定的硬件生成相应的代码…