一,表单标签

news2024/11/18 11:50:04

一,表单标签

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 1.表单标签:比表格多了数据提交的功能
		1.1, 要求:必须使用form标签  + 必须有提交按钮 + 必须配置name属性
		1.2, 效果: 实现了数据提交,数据都在地址栏进行了拼接,多组数据使用&连接
http://127.0.0.1:8848/hbuilderx/cgb2111/register.html?user=jack&pwd=123
		1.3, 数据提交的格式: 属性名=属性值是
		     其中,属性名是 网页上name属性的值 ,属性值 是用户在浏览器中输入的数据
		1.4, 提交数据的方式:get和post两种方式!!!!!!
			get方式提交数据:在地址栏拼接数据,可以方便的查看数据,但是不安全,长度受限
			post方式提交数据:安全,数据大小不受限,但是,不好找数据了...
		1.5, form标签拥有两个重要属性: 
			method属性用来指定数据提交方式,默认是get
			action属性用来指定数据提交给哪段java程序来处理
		-->
		
		<!-- 
		 总结:
		 1,标签:form表单用来提交数据,table表格,h1标题,tr表里的行,td行里的列,input输入框
			   select用来定义下拉框,option定义下拉选项,img图片,button是按钮,textarea文本域
		 2,属性:method是用来指定form提交数据的方式,action是用来指定form提交数据到哪段程序
				bgcolor设置表格的背景色,border设置表格的边框,width设置表格的宽度,
				cellspacing设置单元格间距,type是设置输入框的类型,src用来指定图片的位置
				name是用来作为数据提交时的标识,colspan用来设置列合并
		 3,问题: 单选框和多选框,默认提交的都是on
		 4,解决方案:给单选框和多选框提供value属性用来指定提交时要使用的值(不再提交on了)
		-->
		<form method="post" action="#">
			<h1>注册表单</h1>
			<table bgcolor="lightgray" border="1px" 
					width="500px" cellspacing="0">
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="user"/>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" name="nick"/>
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="email" name="mail"/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="like" value="lq"/>篮球
						<input type="checkbox" name="like" value="zq"/>足球
						<input type="checkbox" name="like" value="ppq"/>乒乓球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<select name="city">
							<option value="">请选择</option>
							<option value="bj">北京</option>
							<option value="gz">广州</option>
							<option value="sz">深圳</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="photo"/>
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" />
						<img src="a.png" />
						<button>点我换一张</button>
					</td>
				</tr>
				<tr>
					<td>自我描述:</td>
					<td>
						<textarea>请在这里写...</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="submit">提交</button>
						<button type="reset">重置</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

–2,其他标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 在网页中加入音频 -->
		<audio controls="controls">
			<source src="jay.mp3"></source>
		</audio>
		<!-- 在网页中加入视频 -->
		<video controls="controls">
			<source src="b.mp4"></source>
		</video>
		
		<!-- 一个占一行:块元素(h1~h6,ul+li) -->
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		
		<p> Nice</p>
		<p> Nice</p>
		<p> Nice</p>
		
		<!-- 多个占一行:行元素(img,a,input,button) -->
		<span> hello</span>
		<span> hello</span>
		<span> hello</span>
	</body>
</html>

–3,练习学生管理系统
在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息管理系统MIS</title>
	</head>
	<body>
		<!-- 提供表单来提交学生的数据 -->
		<form>
			<h1>学生信息管理系统MIS</h1>
			<table>
				<tr>
					<td>
						姓名: <br />
						<input type="text" name="user" placeholder="请输入姓名.."/>
					</td>
				</tr>
				<tr>
					<td>
						年龄: <br />
						<input type="number" name="age" placeholder="请输入年龄.."/>
					</td>
				</tr>
				<tr>
					<td>
						性别:(单选框) 
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好:(多选) 
						<input type="checkbox" name="like" value="ppq" checked="checked"/>乒乓球
						<input type="checkbox" name="like" value="ps"/>爬山
						<input type="checkbox" name="like" value="cg"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历:(下拉框)  
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">研究生</option>
							<option value="4">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期:  <br />
						<input type="date" name="intime"/>
					</td>
				</tr>
				<tr>
					<td>
						<button type="submit">保存</button>
						<button type="reset">取消</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

二,CSS
–1,概述
1,全称是层叠样式表stylesheet,专门用来修饰HTML网页的,就是让网页变漂亮.
2,语法: 选择器 { 属性名:属性值;样式2;样式3; }
3,使用位置: 内联CSS , 内部CSS , 外部CSS

–2,入门案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css入门案例</title>
	</head>
	<body>
		<!-- css代码的出现位置:行内css/内联css  -->
		<!-- 1, 需求:把div文字修饰成红色 -->
		<div style="color: red;">你好css1</div>
		<div style="color: red;">你好css2</div>
		<div style="color: red;">你好css3</div>
	</body>
</html>

三,选择器
css为了方便的选中网页中的元素进行修饰,提供了各种选择器,分类:基础选择器+高级选择器

–1,标签名选择器
按照标签的名字,来选中元素.可能会选中多个.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<!-- css的存在位置:内部css -->
		<style>
			/* 1.标签名选择器 */
				/* 练习1:把div修饰成红色文字 */
				div{  /* 选中了网页中所有叫div的标签们 */
					color:red; /* 红色文字 */
				}
				/* 练习2:把span字号加大 */
				span{
					font-size:30px; /* 字号加大 */
					font-family: "宋体" ;/* 字体 */
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div> 
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

–2,class选择器
也叫类选择器,比标签名选择器更细致.
使用步骤: 给你想要修饰的元素加 class属性 + 通过.获取class的值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<!-- 在HTML网页中,嵌入一段css代码,使用style标签 -->
		<style>
			/* 语法: 选择器{样式1;样式2;} */
			/* 1.类选择器/class选择器:
					先加class属性 + 通过.获取class的值
					其中,class的值可以相同.
			 */
				/* 练习1:只div2修饰字号加大 */
				.a{ /* 选中了网页中 所有class=a的元素*/
					font-size: 40px;
				}
				/* 练习2:div1 div3加背景色 */
				.b{ /* 选中了网页中 所有class=b的元素*/
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div class="b">我是div1</div>
		<div class="a">我是div2</div>
		<div class="b">我是div3</div>
		<a href="#">我是a1</a>
		<a href="#" class="a">我是a2</a>
	</body>
</html>

–3,id选择器
id选择器的值不能相同 , 如果要使用id选择器只会选中一个元素.
使用步骤: 给想要修饰的元素加id属性 + 通过#获取id的值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<style>
			/* id选择器: 加id属性(属性值不让相同) + 通过#获取id的值 */
				/* 练习1:设置用户名输入框的背景色 */
				/* 选择器{样式1;} */
				#a{
					background-color: hotpink;/* 背景色 */
				}
				/* 练习2:设置 我是span2 字体透明度 */
				#c{
					opacity: 0.3;/* 值0.0~1.0区间,值越小越透明 */
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名..." id="a"/>
		<input type="text" placeholder="密码..." id="b"/>
		<span>我是span1</span>
		<span id="c">我是span2</span>
	</body>
</html>

–4,分组选择器
是指,把使用不同选择器选中的元素,分成一组,统一设置样式.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<style>
			/* 1.分组选择器:使用不同的选择器,来选中多种元素 */
			/* 语法: 选择器 {  样式1; 样式2; } */
				/* 练习1:把标签名/id选择器选中的元素,设置背景色 */
				div , #input1{ /* 分组选择器,多种选择器间用逗号隔开 */
					background-color: limegreen;
				}
				/* 练习2:把id/class选择器选中的元素,设置背景色 */
				#input1 , .a{
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<input type="text" placeholder="账号" id="input1"/>
		<input type="text" placeholder="密码"/>
		<span class="a">我是span1</span>
		<span class="a">我是span2</span>
	</body>
</html>

–5,属性选择器
根据标签的不同属性,来选中一些元素


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<style>
			/* 1.属性选择器:根据不同属性,选中不同元素 */
				/* 练习1:把有type属性的 设置背景色 */
				[type]{ /* 选中了,有type属性的元素 */
					background-color: indianred;
				}
				/* 练习2:把有type属性的input 设置边框 */
				input[type]{
					border: 3px dashed blue;/* 宽度 虚线 颜色 */
					border-radius: 25px; /* 圆角边框,值越大越圆 */
				}
				/* 练习3:type=text的input设置背景色 */
				input[type="text"]{
					background-color:seagreen;
					display: none; /* 隐藏元素*/
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名.."/>
		<input type="password" placeholder="密码.."/>
		<input type="number" placeholder="年龄.."/>
		<input type="text" placeholder="地址.."/>
		<a href="#">我是a1</a>
	</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

springcloud3 注册中心以及cloud启动原理总结(含面试)

springcloud3 注册中心以及cloud启动原理总结(含面试)

一 Springcloud微服务面试题 1.1 为何使用注册中心 1)问题描述 在多个单体微服务之间&#xff0c;可以直接通过http请求进行通信&#xff0c;但是存在以下问题&#xff1a; 1.调用服务提供者时需要写ip和端口&#xff0c;如果出现ip和端口进行了修改&#xff0c;没有及时告…
阅读更多...
SAP_ABAP_接口技术_RFC远程函数实践总结

SAP_ABAP_接口技术_RFC远程函数实践总结

SAP ABAP顾问能力模型梳理_企业数字化建设者的博客-CSDN博客SAP Abap顾问能力模型&#xff0c;ALV/REPORT|SMARTFROM|SCREEN|OLE|BAPI|BDC|PI|IDOC|RFC|API|WEBSERVICE|Enhancement|UserExits|Badi|Debughttps://blog.csdn.net/java_zhong1990/article/details/132469977 SAP接…
阅读更多...
[C/C++]天天酷跑超详细教程-中篇

[C/C++]天天酷跑超详细教程-中篇

个人主页&#xff1a;北海 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;C/C&#x1f91d;希望作者的文章能对你有所帮助&#xff0c;有不足的地方请在评论区留言指正&#xff0c;大家一起学习交流&#xff01;&#x1f9…
阅读更多...
stable diffusion实践操作-hypernetworks

stable diffusion实践操作-hypernetworks

本文专门开一节写hypernetworks的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 一、hypernetworks是什么&#xff1f; 中文名字叫超网络&#xff0c;功能和embedding&#xff0c;lora类似&#xff0c;都是对生成的图片进行针对性…
阅读更多...
Spring Cloud--从零开始搭建微服务基础环境【二】

Spring Cloud--从零开始搭建微服务基础环境【二】

&#x1f600;前言 本篇博文是关于Spring Cloud–从零开始搭建微服务基础环境【二】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;…
阅读更多...
02-Flask-对象初始化参数

02-Flask-对象初始化参数

对象初始化参数 前言对象初始化参数import_namestatic_url_pathstatic_foldertemplate_floder 前言 本篇来学习Flask中对象初始化参数 对象初始化参数 import_name Flask程序所在的包(模块)&#xff0c;传__name__就可以 _name_ 是一个标识 Python 模块的名字的变量&#x…
阅读更多...
随记-多租户数据隔离

随记-多租户数据隔离

数据隔离 DataBase 隔离 ( 独立数据库 )Schema 隔离 ( 共享数据库&#xff0c;但隔离数据架构 )Table 隔离 ( 共享数据库&#xff0c;共享数据架构 ) DB 隔离 即一个租户一个数据库&#xff0c;这种方案的用户数据隔离级别最高&#xff0c;安全性最好&#xff0c;但成本较高 …
阅读更多...
软件外包开发人员分类

软件外包开发人员分类

在软件开发中&#xff0c;通常会分为前端开发和后端开发&#xff0c;下面和大家分享软件开发中的前端开发和后端开发分类和各自的职责&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 前端开发&…
阅读更多...
通俗易懂的子网划分(第八课)

通俗易懂的子网划分(第八课)

博主换个思维方式来讲述自己学习的内容>学习这个技术的背景是啥?为什么要学习这个技术&#xff1f;如何去学习好这项技术&#xff1f;如何讲好自己学习这项技术。 一 思考下面问题带着问题找答案&#xff1f; 1 思考一下为什么要子网划分&#xff1f; 2 如何去子网划分&a…
阅读更多...
c++11 标准模板（STL）（std::basic_stringstream）（三）

c++11 标准模板（STL）（std::basic_stringstream）（三）

定义于头文件 <sstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_stringstream;(C11 前)template< class CharT, class Traits std::char_traits<CharT>, class Allocator std::alloc…
阅读更多...
解决Linux Ubuntu上安装RabbitMQ服务后的公网远程访问问题，借助cpolar内网穿透技术

解决Linux Ubuntu上安装RabbitMQ服务后的公网远程访问问题，借助cpolar内网穿透技术

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…
阅读更多...
使用Windbg动态调试排查软件启动不了的问题

使用Windbg动态调试排查软件启动不了的问题

目录 1、问题说明 2、初步分析 3、使用Windbg启动程序进行动态调试 4、进一步分析 5、何时使用Windbg静态分析&#xff1f;何时使用Windbg进行动态调试&#xff1f; 6、最后 VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&…
阅读更多...
Java_理解方法调用

Java_理解方法调用

理解方法调用 首先什么是隐式参数 --->隐式参数是调用该方法的对象本身。 接下来方法的名称和参数列表被称为方法的签名&#xff08;signature&#xff09;。在Java中&#xff0c;方法的签名由方法的名称和参数列表组成&#xff0c;用于唯一标识一个方法。返回类型不是签名的…
阅读更多...
windows 10通过IP连接hp打印机192.168.8.115

windows 10通过IP连接hp打印机192.168.8.115

一直点下一步。完成后要等一会儿才出现在列表里。
阅读更多...
Win7下设置“定时关机”的方法

Win7下设置“定时关机”的方法

【Win7下设置定时关机的方法】 ●【所有程序】→【附件】→【系统工具】→【任务计划程序】 ● 右键单击&#xff0c;选择【创建基本任务】&#xff0c;然后在【任务名称】中填自定义名称&#xff0c;如“定时关机” ● 之后&#xff0c;按照下面各图的提示进行“任务触发器”…
阅读更多...
MySQL left join 和 left outer join 区别

MySQL left join 和 left outer join 区别

先说结论: left join 和 left outer join 的结果是一致的。 我不知道各位大神是怎么测试的&#xff0c;网上面就说两个不一样&#xff0c;我A、B表都是有重复数据的&#xff0c;为啥结果是一样的。 表A 表B 左连接 SELECT ta.*,tb.Result ResultB FROM TableA ta LEFT JOIN…
阅读更多...
Linux常用命令——cupsenable命令

Linux常用命令——cupsenable命令

在线Linux命令查询工具 cupsenable 启动指定的打印机 补充说明 cupsenable命令用于启动指定的打印机。 语法 cupsenable(选项)(参数)选项 -E&#xff1a;当连接到服务器时强制使用加密&#xff1b; -U&#xff1a;指定连接服务器时使用的用户名&#xff1b; -u&#xff…
阅读更多...
pip安装第三方库与设置

pip安装第三方库与设置

pip的使用 假如下载numpy pip install numpypypi 镜像源「配置」 常用镜像源列表 官方&#xff1a;https://pypi.org/simple 百度&#xff1a;https://mirror.baidu.com/pypi/simple/ 清华&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 阿里&#xff1a;https://m…
阅读更多...
JVM介绍

JVM介绍

一、介绍 1. JVM是什么 JVM是Java Virtual Machine的缩写&#xff0c;即咱们经常提到的Java虚拟机。虚拟机是一种抽象化的计算机&#xff0c;有着自己完善的硬件架构&#xff0c;如处理器、堆栈等&#xff0c;具体有什么咱们不做了解。目前我们只需要知道想要运行Java文件&…
阅读更多...
sqlibs安装及复现

sqlibs安装及复现

sqlibs安装 安装phpstudy后&#xff0c;到github上获取sqlibs源码 sqli-labs项目地址—Github获取&#xff1a;GitHub - Audi-1/sqli-labs: SQLI labs to test error based, Blind boolean based, Time based. 在phpstudy本地文件中的Apache目录中解压上方下载的源码。 将sq…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023