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

这篇具有很好参考价值的文章主要介绍了webIDE表单标签以及包含选择器的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

IDE的使用

<!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>

表单标签

<!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)

  • 外链样式的好处
    • 首先提高代码的复用性
    • 他可以降低代码的耦合性
<!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>

基本选择器

<!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>

包含选择器

<!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>

文章来源地址https://www.toymoban.com/news/detail-817215.html

到了这里,关于webIDE表单标签以及包含选择器的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • KaiOS 2.5.X 使用 WebIDE 安装以及调试第三方应用程序

    本教程将展示使用 Waterfox Classic 安装为 KaiOS 2.5.x 设计的应用,同时我们也非常推荐使用它来进行安装和调试应用。 本教程本身不会对手机产生任何损害,但请注意,你必须信任你所安装的应用是安全、无任何威胁的,WebIDE不会验证应用的安全性,Momo Trace 不对因使用 WebIDE 安

    2024年02月03日
    浏览(52)
  • CSS:选择器的各种类型和用法(含有例子和部分动态效果)

    元素选择器 E{} 如: 特殊的 * 所有元素选择器 如: 一般加不明显的样式 如: 属性选址器 E[attr]{} 根据属性有没有进行区分 可以用属性值作为限制,也可用属性值的位置作为限制如用有无id区分: 或者根据id属性值区分: ^以xx开头的: $ 以xx结尾的: 只要包含xx: 当然也可以

    2024年02月12日
    浏览(53)
  • css标签选择器学习

    有三个div;然后在style/style中,指定了      div {     ......      } 这样在这里定义的样式将应用到本页面的所有div上;这是标签选择器,选择了所有的div标签; 运行如下; 假如在style/style中定义, p{    font-size:12px;    background:#900;    color:090; } 则样式将应用到本页面所有的

    2024年02月11日
    浏览(43)
  • css-选择器、常见样式、标签分类

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位

    2024年02月11日
    浏览(55)
  • 选择器的使用

    2024年02月15日
    浏览(34)
  • 第45天:标签的分类和重要属性及常用标签、css介绍及选择器

            标签的分类         按 结构 分,html标签可以分为 单标签 和 双标签 。         单标签         由一个标签组成。例如:         双标签         由 开始标签 和 结束标签 两部分构成,例如:         按照 属性 分,标签还可以分为 块级标签 和 行

    2024年02月07日
    浏览(36)
  • Element UI 系列 - 表单标签和输入框对齐以及修改输入框长度

    前言 elementui 文档中如何使表单的标签和输入框分别对齐 类似于这样的效果, 虽然 Elementui官方文档写的有, 但是因为我不经常写前端, 每次都会忘记, 这里记录下 官方文档 https://element.eleme.cn/#/zh-CN/component/form 如上图, 主要是通过修改 label-postion 对齐, 另外 label-width 是修改左侧标

    2024年02月11日
    浏览(35)
  • 【CSS 17】attribute selector 属性选择器 设置无class或id的表单样式

    attribute selector 属性选择器 可以设置带有特定属性或属性值的 HTML 元素的样式 [attribute] 选择器用于选取带有指定属性的元素 [attribute=“value”] 选择器用于选取带有指定属性和值的元素 [attribute~=“value”] 选择器选取属性值包含指定词的元素 [attribute|=“value”] 选择器用于选取

    2024年02月12日
    浏览(49)
  • Element Plus 日期选择器的使用和属性

    element plus 日期选择器如果如果没有进行处理 他会返回原有的属性值data格式 如果想要获取选中的日期时间就需要通过以下的代码来实现选中的值 format=\\\"YYYY/MM/DD\\\"  value-format=\\\"YYYY-MM-DD\\\"  看一下加上后的效果: 这个组件还能转换为时间戳的方式,也是需要更改 value-format属性。将

    2024年02月10日
    浏览(40)
  • 【vue + element ui】ColorPicker 颜色选择器的使用

    组件提供的 ColorPicker 颜色选择器不能满足实际需求,所以在此基础上使用了自定义的方式进行使用 我这边的使用场景是 ColorPicker 与 el-input 输入框的联动使用,在这里参考了下面博主的文章 https://blog.csdn.net/s1441101265/article/details/109672819 1.自定义组件 inputColor.vue 2.父组件引入该

    2024年02月04日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包