前端秘法基础式(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,一经查实,立即删除!

相关文章

【30秒看懂大数据】数据中台

知幽科技是一家专注企业数字/智化&#xff0c;围绕数据价值应用的一站式数智化解决方案的咨询公司&#xff0c;也包括了为企业提供定制化数据培训&#xff0c;力求做企业最好的数智化决策伙伴。 点击上方「蓝字」关注我们 30秒看懂大数据专栏 让您在有限的碎片化时间&#xf…

六、Mybatis注解开发

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

(09)Hive——CTE 公共表达式

目录 1.语法 2. 使用场景 select语句 chaining CTEs 链式 union语句 insert into 语句 create table as 语句 前言 Common Table Expressions&#xff08;CTE&#xff09;&#xff1a;公共表达式是一个临时的结果集&#xff0c;该结果集是从with子句中指定的查询派生而来…

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

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

Docker之Oracle-XE版本安装

Docker之Oracle-XE版本安装 文章目录 Docker之Oracle-XE版本安装1. docker中安装Oracle11gR2-XE1. 拉取镜像2. Quick Start(快速开始)3. 快速安装案例1. 运行docker容器2. 创建用户与授权3. 导出备份数据 1. docker中安装Oracle11gR2-XE dockerhub参考地址: https://hub.docker…

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变量…

设计模式--策略模式(Strategy Pattern)

策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换&#xff0c;让算法独立于使用它的客户端。 策略模式主要包含以下几个角色&#xff1a; Strategy&a…

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

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

re:从0开始的CSS之旅 13. 文档流

1. 三种基本机制 CSS盒子三种基本定位机制&#xff1a;普通流normal flow、浮动float、定位position 文档流&#xff08;标准流、普通流 normal flow&#xff09;&#xff1a;HTML文档中一些皆为盒子&#xff0c;而盒子在HTML文档中默认的显示标准&#xff0c;称为文档流 2. …

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

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

Django学习全纪录:编写你的第一个 Django 应用,Django内置数据库的配置,以及扩展性的数据库介绍和配置

天下古今之庸人,皆以一惰字致败;天下古今之人才,皆以一傲字致败。——[清]曾国藩 导言 大家好,在上一篇文章里,我们一起学习了Django的视图以及路由,并且对Django的应用有了初步的认识,掌握了视图和路由的基本规则,学会了Django的应用如何创建,总之,收获满满。 这…

Linux常用管理命令NTFS磁盘挂载

一、常用管理命令 1.1 whoami 作用&#xff1a;显示出当前有效的用户名称 语法&#xff1a;whoami&#xff08;选项&#xff09; 选项&#xff1a; --help&#xff1a;在线帮助--version&#xff1a;显示版本信息和退出 示例&#xff1a; [rootlocalhost ~]# whoami root 1.2 …

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

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