webIDE表单标签以及包含选择器的使用

IDE的使用

html 复制代码
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<ol>
			<!-- emmet命令 *符号可以指定生成几个子项 -->
			<!-- []中填写标签的属性 -->
			<!-- {}中填写内容 -->
			
			<!-- ctrl + k 可以将代码进行格式化处理-->
			<!-- ctrl + s 可以保存代码 -->
			<li style="border:1px solid red">子项1</li>
			<li style="border:1px solid red">子项2</li>
			<li style="border:1px solid red">子项3</li>
			<li style="border:1px solid red">子项4</li>
			<li style="border:1px solid red">子项5</li>
			<li style="border:1px solid red">子项6</li>
			<li style="border:1px solid red">子项7</li>
			<li style="border:1px solid red">子项8</li>
			<li style="border:1px solid red">子项9</li>
		</ol>
	</body>
</html>

表单标签

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 奥卡姆剃刀原则:如非必要 勿增实体 -->
	<body>
		<!-- action属性 表示填写信息提交的服务器处理函数 -->
		
		<!-- get 会将信息明文的形式拼接在url后面 -->
		<!-- post 会将的信息保存在request包中,通过浏览器提交 -->
		<!-- get和post的区别 -->
		<!-- 1.安全性上的不同 get会拼在url上所以 安全性不高 post实在request包体中-->
		<!-- 2.参数位置上的不同 get在url中写参数 post在request -->
		<!-- 3.参数长度的不同 get会因为浏览器的限制而有可能不能完整的传递参数 post无此顾虑-->
		<!-- 4.缓存方式不同  get会保存在浏览器的历史记录中 post不会-->
		
		<!-- enctype  urlencoded会使用url编码方式将表单信息进行编码-->
		<!-- form-data一般用来上传文件时使用 它使用二进制的数·据流传递信息 -->
		<!-- text/plain 使用明文-->
		<form action="#" method="get" enctype="text/plain">
			<!-- input标签 使用交信息的标签 可在各种类型的input标签传递各种类型数据 -->
			<!-- type属性决定了标签的形式 -->
			<!-- name属性决定了提交表单信息时键值对键的名字 如果没有name input标签将成为摆设 不具备数据提交的能力-->
			<!-- size可以用来设置 标签的宽度 -->
			<!-- maxlenth可以设置字符的数量 -->
			<!-- checked 可以让单选/复选默认选中 -->
			<!-- readonly 只读属性 用户无法修改 -->
			<!-- disable 失效 用户无法修改的同时 标签也是失效了 不再进行上传 -->
			<!-- placehoder属性 可以用来预制一些提示信息 -->
			<!-- autofocus属性 可以自动聚焦到某个标签-->
			用户名:<input type="text" name="username"  maxlength="6" placeholder="请输入你的用户名"> <br>
			<!-- password用于输入密码 -->
			密  码:<input type="password" name="password" value="11111"/><br>
			<!-- checkbox多选框 -->
			爱  好:<input type="checkbox" name="fav" value="bk" checked>篮球
			<input type="checkbox" name="fav" value="sing" checked>唱
			<input type="checkbox" name="fav" value="jump" checked>跳
			<input type="checkbox" name="fav" value="rap" checked>Rap <br>
			
			<!-- radio是单选框 使用name属性将多个radio进行关联 -->
			性  别:<input type="radio" name="sex" value="男">男
			<input type="radio" name="sex" value="女">女
			<input type="radio" name="sex" value="跨性别" checked>跨性别 <br>
			<!-- email是一个输入框 会进行内容的检测 只有你输入内容符合邮箱的格式 提交时才不会报错 -->
			邮  箱:<input type="email" name="email" autofocus/>
			<!-- submit 提交按钮 点击时会将表单中所有的信息提交到action指定的服务数据处理接口 -->
			<input type="submit">
			<!-- button同submit -->
			<button>上传</button>
			<!-- file 类型 用于上传文件-->
			<input type="file" name="avarta">
			
			<div style="width: 100px;height: 100px;"></div>
			<!-- reset类型 是重置按钮 一旦点击 之前录入用户信息全部清空 -->
			<input type="reset" >
			<!-- image类型是图片按钮 可以设置开发者想要的或者更优化按钮效果 本质上还是提交按钮 -->
			<input type="image" name="avarta" src="img/button.jpg" width="250px" height="100px">
			<!-- hidden隐藏域 一些无需用户键入信息可以自动获取的信息,可以使用hidden类型来上传-->
			<input type="hidden" name="location" value="西安">
			
			
			<!-- h5推出的新标签 -->
			<!-- 颜色选择器 -->
			<input type="color">
			<!-- 日期选择器 -->
			<input type="date">
			<!-- 时期时间选择器 -->
			<input type="datetime-local">
			<!-- 时间 -->
			<input type="time" name="" id="">
			<!-- url输入框 规则是必须在起始部分写入https://-->
			<input type="url">
			<!-- 范围选择 -->
			<input type="range" max="100" min="20">
		</form>
	</body>
</html>

CSS 部分

css层叠样式表(cascading style sheet)

  • 外链样式的好处
    • 首先提高代码的复用性
    • 他可以降低代码的耦合性
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 第二种使用CSS的方式 页面样式 -->
		<style type="text/css">
			div{
				width: 100px;
				height: 200px;
				background-color: black;
			}
			/*  第四种方式 @import */
			@import url("css/new_file.css");
		</style>
		<!-- 第三种方式 外链样式 -->
		<!-- <link rel="stylesheet" href="css/new_file.css"> -->
	</head>
	<body>
		<!-- 第一种使用CSS的方式 :行内样式-->
		<!-- <div style="border: 1px solid rebeccapurple;width: 100px;height: 100px;">1</div> -->
		<div></div>
		<span></span>
	</body>
</html>

基本选择器

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			/* 优先级关系 id > class > 标签 > *       */
			/* 通配符选择器:一般用于重置页面样式 */
			*{
				/* 间距 */
				margin: 0px;
				/* 边距 */
				padding: 0px;
				
				background-color: black;
			}
			
			/* id选择器 :对指定id的标签进行样式修整*/
			#first_div{
				width: 200px;
				height: 200px;
				border: 1px dotted red;
			}
			
			/* 类选择器:对引用该类的标签使用样式 */
			.div_class{
				width : 300px;
				height: 300px;
				background-color: aqua;
			}
			
			/* 标签选择器 :作用于页面中所用相同的标签*/
			div{
				width: 100px;
				height: 100px;
				border:1px solid rebeccapurple;
			}
			
		</style>
	</head>
	<body>
		<div id="first_div"></div>
		<div class="div_class"></div>
		<div class="div_class"></div>
	</body>
</html>

包含选择器

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 逗号选择器,可以将样式代码赋给多个选择器,选择器种类任意 */
			div,.span_class,p{
				padding: 10px;
				background-color: aqua;
				border: 1px dashed firebrick;
			}
			/* 子代选择器 */
		/* 	ul > li{
				border: 1px solid red;
			} */
			/* 后代选择器 */
			ul  li{
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li>子项1</li>
			<li>子项2</li>
			<li>子项3</li>
			<li>
				<ol>
					<li>子项的子项1</li>
					<li>子项的子项2</li>
					<li>子项的子项3</li>
					<li>子项的子项4</li>
				</ol>
			</li>
		</ul>
	</body>
</html>
相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端