js-入门（字符串-运算符） html常用命令代码行

最新推荐文章于 2022-06-12 21:58:22 发布
最新推荐文章于 2022-06-12 21:58:22 发布
阅读量373 收藏 1
点赞数 1
分类专栏： Web 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39460362/article/details/89194611
版权

运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num1 = 12
			var num2 = 4
//			alert(num1 % num2)   //0
//			alert(-97 % 10)     //-7
//			alert(97 % -10)    //7
             alert(10 > 7)  //true 真的
             alert(5>7)    //false  假的
//           alert( 4 == '4' )
             alert( 4 === '4' )
		</script>
	</body>
</html>

运算符+数据类型


<html>
	<head>
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//如果输入的是纯数字就会被转换符转换
			var num1 = prompt('num1')
			var num2 = prompt('num2')
			alert(num1 - num2)
			var num3 = 333
			alert(typeof num3)
		</script>
	</body>
</html>

运算符+数据类型简单练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="ipt"/>
		<button id="btn">点击</button>
		<div id="box"></div>
	   <!--
	   	在输入框中输入一个三位数，点击按钮后，
	   	在id为result的div中输出这个数的个数
	   -->
	   <script type="text/javascript">
	   		//997  -->  7
	   		var oIpt = document.getElementById('ipt')
	   		var oBtn = document.getElementById('btn')
	   		var oBox = document.getElementById('box')
	   		//给按钮绑定点击事件
	   		oBtn.onclick = function(){
	   			//运算符 数据类型  %
	   			//9999%1000 d  得到的就是一个三位数  999
	   			//999  %  100   得到2位数     99
	   			//99  % 10  得到  9
//	   			alert(9999 % 1000)
//	   			alert(999 % 100)
//	   			alert(99 % 10)
               var num1 = oIpt.value
               //value是input 元素的值。
               var num2 = num1 % 100 % 10
               alert(num2)
               //把这个值赋给div
               oBox.innerHTML = num2
	   		}
	   </script>
	</body>
</html>

字体连续放大缩小效果

<html>
	<head>
		<title></title>
	</head>
	<style type="text/css">
		
	
		body{
				text-align: center;
			}
			#p1{
				width: 50%;
				height: 100px;
				margin: 50px auto;
				border: 1px solid #CCCCCC;
			}
			</style>
		</style>
	</head>
	<body>
		<button id="btn1">+</button>
		<button id="btn2">-</button>
		<p id="p1">love</p>
		<script type="text/javascript">
			var oBtn1 = document.getElementById('btn1')
			var oBtn2 = document.getElementById('btn2')
			var oP1 = document.getElementById('p1')
			//这个变量用来存p元素的字体大小
			var fontSize = 20
          //点击加号按钮
          oBtn1.onclick = function(){
          	// 改变P1的字体大小 20 + “px” == “20px”
          	//每次点击的时候需要变大 2个像素
          	fontSize = fontSize + 2    //数字类型
           	//fontSize  记得加“px”
//        	alert('love+')
          	oP1.style.fontSize = fontSize + "px"   //数字+字符串
          }
           oBtn2.onclick = function(){
           	fontSize = fontSize - 2
           	//fontSize  记得加“px”
            oP1.style.fontSize = fontSize + "px"
          }
		</script>
	</body>
</html>

js函数块

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script type="text/javascript">
			//函数是具有一定功能的代码块
			function fn(){
				//功能就是弹出四次10
				alert("10")
				alert("10")
				alert("10")
				alert("10")
				alert("10")
				alert("10")
				alert("10")
			}
//			fn()
			
			function fn2(){
				var a = prompt("数字1")
				var b = prompt("数字2")
				alert(Number(a)-Number(b))
			}
			fn2()
			fn2()
			fn2()
		</script>
	</body>

</html>

获得input的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text"  id="ipt" value="刘冬冬" />
		<button id="btn">点击</button>
		<script type="text/javascript">
			//点击按钮获得input的内容
			// 1 找到按钮 找到input  2  点击  3绑定
			var oBtn = document.getElementById("btn")
			var oIpt = document.getElementById("ipt")
			oBtn.onclick = function(){
				//弹出input的内容
//				alert(oIpt.value)
                oIpt.value = '情窦初开遇到你'
			}
		</script>
	</body>
</html>

js输出方式三种

alert("欢迎光临！！！")
弹窗
document.write("怦然心动")
输出到浏览器的body中

console.log("几乎心动")

//输入  prompt接收到用户输入的内容 会放到num中
var num = prompt("请输入内容")
//把num中的内容弹窗输出
alert(num)

js简单乘法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
                padding-top: 100px;
			}
			#box{
				height: 100px;
				width: 50%;
				margin:50px auto;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<input type="text"  id="y1"  />
		<input type="text"  id="y2"  />
		<button id="btn">计算</button>
		<div id="box"></div>
		<script type="text/javascript">
			var oY1 = document.getElementById('y1')
			var oY2 = document.getElementById('y2')
			var oBtn = document.getElementById('btn')
			var oBox = document.getElementById('box')
			oBtn.onclick = function(){
				var num1 = oY1.value
				var num2 = oY2.value
				var box = num1 * num2 
				oBox.innerHTML = box
			}
		</script>
	</body>
</html>

js变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//定义变量 声明变量
			// var 是js的关键字  作用：定义变量   如果定义变量的时候就不要使用
//			var num = 10
//			alert(num)
//			num = 30
//			alert(num)

            //需求： 输入两个数字，并且求他们的差
//          var a = prompt("请输入数字1：")
//          var b = prompt("请输入数字2：")
//          alert(a-b)
            
//          var a = prompt("请输入第一个数字：")
//          var b = prompt("请输入第二个数字：")
//          var c = prompt("请输入第三个数字：")
//          var d =a*b*c
//          document.write(d)
            //document.write是输入到浏览器的内容
            
            var a = prompt("输入第一个数字")
            var b = prompt("输入第二个数字")
            var c = prompt("输入第三个数字")
            var d = prompt("输入第四个数字")
//          var e = a+b+c+d
            Number = a+b+c+d
            console.log(Number)
		</script>
	</body>
</html>

label标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<!--显式绑定-->
			<!--单选框太小  点的时候不容易被点中，如果想点击前面的文字就能实现选中该怎么办-->
			<label for="man">男：</label><input  id="man" type="radio" name="dan" /> <label for="women">女：</label><input id="women"  type="radio" name="dan" />
			<!--作用 扩大选区-->
		    <!--隐式绑定-->
			<label>
				不详：<input type="radio" name="dan"/>
			</label>
		</form>
	</body>
</html>

内嵌百度搜索（表单）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--input type=text 文本-->
		<!--input type=submit 提交按钮   相当于一个开关 发送数据-->
		<!--解决方案 分析：
			最终百度跳转页面
			把自己网页中的内容发送给百度处理
			name需要和百度后缀 wd一样
		-->
		<form action="https://www.baidu.com/s">
			<!--把名字为wd的ipnut输入框的内容发送到action-->
			<input type="text" name="wd" /><input type="submit" value="百度一下" />
		</form>
	</body>
</html>

select下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--select 和   option标签连用  类似于 li ul-->
		<!--注意  name属性是加在select身上的元素    
			value是加在option身上的元素
			size表示可见选项的条数
			multiple 表示可以按住shift进行多选
		-->
		<select name="city" size="3" multiple>
			<!--这里value加的是北京  发送的数据 就是北京-->
			<option value="北京">北京</option>
			<!--这里value数据为“”发送的就是一个空的东西过去-->
			<option value="">上海</option>
			<!--不写value 发送的内容就是option内部的东西-->
			<option>广州</option>
			<option value="">深圳</option>
		</select>
	</body>
</html>

清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				height: 60px;
				background-color:black ;
			}
			/*.boxn{
				height: 800px;
				background-color: gray;
			}*/
			.box1{
				width: 65%;
				height: 500px;
				background-color: green;
				float: left;
			}
			.box2{
				width: 30%;
				height: 600px;
				background-color: yellow;
				float: right;
			}
			.boxm{
				height: 50px;
				background-color: black;
				color: white;
				text-align: center;
				font-size: 35px;
			}
			/*去掉浮动带来的问题*/
			.boxm{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="boxn">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="qcfd"></div>
		</div>
		<div class="boxm">yuchcjcjc</div>
	</body>
</html>

固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				height: 60px;
				width: 100%;
				background-color: red;
				/*固定定位*/
				position: fixed;
				left: 0;
				bottom: 0;
				text-align: center;
					font-size: 20px;	
					line-height: 20px;
					

				}
			#box2{
					height: 2000px;
					border: 1px solid red;
							
				}
				a{
					text-decoration: none;
					color: white;
				}
		</style>
	</head>
	<body>
		<div id="box2"></div>
		<div id="box">
			<p><a href="https://www.baidu.com/"target="_blank">要做好窗帘，就来大广联。</a></p>
		</div>
	</body>
</html>

绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 600px;
				height: 400px;
				/*居中*/
				margin: 100px auto;
				background-color: gray;
				position: relative;
				
			}
			.box2{
				width: 400px;
				height: 200px;
				margin: 100px auto;
				background-color: green;
				/*相对定位  相对于原来位置发生偏移*/
				/*position: relative;*/
			}
			.box3{
				width: 100px;
				height: 100px;
				border-radius:50% ;
				background-color: red;
				/*绝对定位*/
				/*参照物：有定位属性最近的父级元素*/
				position: absolute;
				/*right: 300px;*/
				right: 10px;
				top: 0;
				text-align: center;
				line-height: 100px;
				font-family: "楷体";
				font-size: 15px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3">一只傻瑞雯</div>
			</div>
		</div>
	</body>
</html>

相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				background-color: red;
				/*定位命令*/
				position: relative;
				margin-left: 100px;
				margin-bottom: 100px;
				/*left: 100px;
				bottom: -100px;*/
				left: -100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

相邻选择器

<html>
	<head>
		<title></title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			.box1+p{
				color: green;
			}
			.box1+span{
				color: green;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	    <span>嘤嘤嘤</span>
		<p>p1</p>
		<p>p2</p>
	</body>
</html>

后现代选择器

<html>
	<head>
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			/*选中.box后面的p元素的元素特点可以影响后面很多层*/
			.box p{
				color: green;
			}
			.box span{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>p1</p>
			<h1>h1</h1>
			<div>
				<span>span</span>
				<p>p2</p>
				<div>
					<p>p3</p>
				</div>
			</div>
		</div>
	</body>
</html>

父元素的单一子元素选择器 无div+id使用

<html>
	<head>
		<title></title>
		<style type="text/css">
			/*
			p:nth-of-type(1)  这个nth-of-type 是在没有id和class的情况下 使用  数字的序号
			 * */
			p:nth-of-type(1){
				color: green;
			}
			p:nth-of-type(2){
				color: red;
			}
			p:nth-of-type(3){
				color: blue;
			}
			p:nth-of-type(4){
				color: yellow;
			}
			p:nth-of-type(5){
				color: orange;
			}
		</style>
	</head>
	<body>
		<p>Taking my time, step by step.</p>
		<p>Taking my time, step by step.</p>
		<p>Taking my time, step by step.</p>
		<p>Taking my time, step by step.</p>
		<p>Taking my time, step by step.</p>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*选中的是具有name属性的元素
			 属性：开始标签后面 属性名=“一种至”
			 * */
			
			/*input[name]{
				border: 1px solid red;
			}*/
			/*选中input中type=password的元素*/
			/*input[type=text]{
				border: 1px solid red;
			}
			input[type=password]{
				border: 1px solid blue;
			}*/
			/*^表示以什么东西开头的都会被选中*/
			/*表示选中iput中name值u开头的*/
			/*input[name^=user]{
				border: 1px solid blue;
			}*/
			/*以e结尾的标签*/
			input[name$=e]{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!--表单type-text 输入框-->
		<input type="text" name="username" id="" value="" />
		<input type="text" name="username" id="" value="" />
		<input type="text" name="username" id="" value="" />
		<input type="text" name="username" id="" value="" />
		<input type="text" />
		<!--type=password密码框-->
		<input type="password" name="ll"/>
	</body>
</html>

子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				height: 100px;
				width: 100px;
				border: 1px solid red;
			}
			/*子元素选择器>*/
			.box>p{
				color: blue;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>p1</p>
			<div>
				<p>p2</p>
			</div>
		</div>
	</body>
</html>

伪类

<html>
	<head>
		<title></title>
		<style type="text/css">
			/*a链接没有被访问的状态下*/
			a:link{
				color: orange;
			}
			/*a链接访问过的状态*/
			a:visited{
				color: blue;
			}
			/*鼠标移入a标签的状态*/
			a:hover{
				color: red;
			}
			/*鼠标按下但是没有抬起激活的情况下的状态*/
			a:active{
				color: green;
			}
			ul{
				margin: 0;
				padding: 0;
			}
			li{
				list-style-type: none;
				float: left;
				width: 160px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				background-color: black;
				color: white;
			}
			li:hover{
				background-color: red;
			}
			/*伪类*/
		</style>
	</head>
	<body>
		<!--a标签的几种用法-->
		<a href="https://www.baidu.com/"target="_blank">百度</a>
		<ul>
			<li>实战</li>
			<li>课程</li>
			<li>博客</li>
			<li>论坛</li>
		</ul>
	</body>
</html>

伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*在内容后面插入content的值*/
			a::after{
				content: "搜索一下";
				color: green;
			}
			/*在内容前面插入content的值*/
			a::before{
				content: "隐隐约约";
				color: blue;
			}
		</style>
	</head>
	<body>
		<a href="">百度</a>
	</body>
</html>

行内元素和块级元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 20px;
				height: 20px;
				background-color: green;
				/*margin-left: 2px;*/
				margin-bottom: 2px;
				/*块级元素转换为行内元素*/
				/*display: inline;*/
				/*设置行内元素不显示*/
				/*display: none;*/
			}
			span{
				height: 50px;
				width:50px;
				background-color: blue;
				/*display: inline-block;*/
				display: none;
				
				text-align: center;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div>hhwahdw</div>
		<div>dwwf</div>
		<div>fwf</div>
		<div>fwf</div>
		<div>fwf</div>
		<div>fwf</div>
	<span>首页</span>
	<span>首页</span>
	<span>首页</span>
	<span>首页</span>
	</body>
</html>

<!--行内元素转换为块级元素-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	   <style type="text/css">
	   	  div{
	   	  	height: 50px;
	   	  	background-color: green;
	   	  	margin-bottom: 5px;
	   	  }
	   	  a{
	   	  	/*高度*/
	   	  	height: 50px;
	   	  	/*宽度*/
	   	  	width: 130px;
	   	  	/*填充背景颜色*/
	   	  	background-color: yellow;
	   	  	/*他们之前的距离*/
	   	  	margin-left: 5px;
	   	  	/*行内元素转换成块级元素 并在一行内显示*/
	   	  	display:inline-block;
	   	  	/*文字垂直居中*/
	   	  	line-height: 50px;
	   	  	/*文字水平居中*/
	   	  	text-align: center;
	   	  	/*字体颜色*/
	   	  	color: green;
	   	  }
	   </style>
	<body>
	   <div></div>
	   <div></div>
	   <div></div>
	   <div></div>
	   <a>叫我怎么说出口</a>
	   <a>劝我免了心中的火</a>
	   <a>试着找寻自我</a>
	</body>
</html>

表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>课堂表</title>
		<style type="text/css">
			table{
				border: 4px solid orange;
						margin: 0 auto;
						border-spacing:0 ;
						width: 50%;
						align-content: center;
			}
			td{
				border: 1px solid red;
		        align-content: center;
			}
			tr{
				align-content: center;
			}
		</style>
	</head>
	<body>
		<table cellspacing="0">
			<!--标题-->
			<tr>
				<td colspan="7" align="center">课程表</td>
			</tr>
			<!--日期-->
			<tr>
				<td></td>
				<td></td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<!--课程安排-->
			<!--第一节课-->
			<tr>
				<td rowspan="4"align="center">上午</td>
				<td width="50px">1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!--<td>上午</td>-->
				<td width="50px">2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!--<td>上午</td>-->
				<td width="50px">3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!--<td>上午</td>-->
				<td width="50px">4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="7" height="30px"></td>
				<!--<td width="50px">5</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>-->
			</tr>
			<tr>
				<td rowspan="4"align="center">下午</td>
				<td width="50px">6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!--<td>下午</td>-->
				<td width="50px">6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!--<td>下午</td>-->
				<td width="50px">7</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!--<td>下午</td>-->
				<td width="50px">8</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

合并单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<table border="1px"cellspacing="0" align="center">
	<tr>
		<!--个人简历居中-->
		<!--解决方案 水平居中单元格-->
		<!--关键搞清楚谁和谁合并-->
		<!--个人简历和后面四个单元格合并 在第一个td上加colspan-->
		<!--colspan里面的值是所有合并单元格的个数-->
	<td colspan="5" align="center">个人简历</td>
	<!--<td></td>
	<td></td>
	<td></td>
	<td></td>-->
	</tr>
	<tr>
		<td>姓名</td>
		<td>刘冬冬</td>
		<td>出生年月</td>
		<td>2001.10.13</td>
		<td><img src=""/></td>
	</tr>
	</table>
</html>

表单账号密码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form相关属性</title>
	</head>
	<!--aform相关的元素
		action 表单提交的地址 （收集好的数据要发送到哪里？由action决定）
		methon 表单的发送行形式  默认使用get方式
		  get  把数据放在浏览器地址栏 可以在浏览器地址栏看到信息
		  post  隐藏不可见
		  name属性  通用的属性
		  涉及数据库修改post 查询get
	-->
	<body>
		<form action="" method="post">
			账号：<input type="text" name="ldd" />
			密码：<input type="password"name="ldd" />
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

表单其他属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--属性 
			
		name是表单项目
		value表单的值
		readonly表示只读  内容不能修改 只针对输入框 数据可以发送过去
		disabled表示控件无效  不能用 提交不会传输数据
		checked 表示选中状态 对checkbox radio 有效
		-->
		
		<form action="" method="post">
			<input type="text"  value="请输入用户名" readonly/>
			<input type="text"  value="请输入用户名" disabled/>
			<input type="checkbox" checked />
			<input type="radio" checked />
		</form>
	</body>
</html>

表单属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="https://hao.360.cn/">
			<!--input 输入的控件 工具-->
			<!--input 学好这个标签需要学会几种常见的属性
				type="text"文本属性 用来输入文本 文本输入框 （用户名 邮箱 手机号）
				type="passwode"密码输入框 用来输入密码 （用户输入内容不可见）
				type="checkbox" 复选框（多选）
				type="radio" 单选框（单选）  需要记得加name属性 把几个input成个组
				type="hidden" 隐藏域   应用：不想让用户看到时 使用  一个隐藏的区域
				type="botton" 一个普通按钮  value值的意思  点击不会触发提交行为    应用场景：留给js决定什么时候触发提交功能
				type="file"   文件上传控件  文件上传工具  让你选择文件
			-->
			文本框：<input type="text" /><br />
			密码框：<input type="password" /><br />
			复选框：<input type="checkbox" />  篮球  <input type="checkbox" />  足球  <input type="checkbox" />  排球 <br />
			单选框：<input type="radio" name="aa"/>  男   <input type="radio"  name="aa"/>  女   <input type="radio" name="aa" />  保密 <br />
			隐藏域：<input type="hidden" /><br />
			普通按钮：<input type="button" value="登录" style="color: green"/><br />
			提交按钮：<input type="submit" value="sub登录" />
			文件上传：<input type="file" /> 选择一张图片
		</form>
	</body>
</html>

textarea和button

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--文本域  和  input type=text进行对比
			表单一定要加name属性 不然表单内容不会被发送出去
			rows表示行（高度）  cols表示列（宽度）
			input type=button  和    button简单区别：
			button  语义话标签  内部可以放图片
		-->
		<!--<textarea name="" rows="100" cols="100" style="font-size: 30px;" disabled></textarea>-->
		<!--单独的一个按钮-->
		<form action="https://hao.360.cn/">
		<button><img src="../img/QQ图片20190315140506.jpg" />点击登录</button>
		<input type="submit" value="登录" />
		</form>
	</body>
</html>

 

贝多芬的芬
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML(12-js运算符)
mhfaaa的博客
04-02 522
运算符算术运算符赋值运算符赋值运算符可以嵌套使用：三元运算符逻辑运算符字符串连接运算符 JavaScript 运算符主要包括：算术运算符、赋值运算符、比较运算符、三元运算符、逻辑运算符、字符串连接运算符 算术运算符 var x = 2; alert(++x); //输出：3 alert(x); //输出：3 var y = 2; alert(y++); //输出：2 alert(y); //输出：3 赋值运算符 赋值运算符 = 用于赋值运算，赋值运算符的作用在于把右边的值赋值给左边变量。 赋
JavaScript 基本运算符
m0_53561448的博客
03-30 3232
JavaScript的一些基本运算符
HTML 网页特殊符号代码大全
热门推荐
青颜的天空的博客
07-09 4万+
HTML网页特殊符号代码大全 在网页设计中，我们有时需要把以下两种字符显示在页面上： HTML的保留字符。 无法通过键盘输入但能表达某种特殊含义的字符。 直接使用往往是无法显示的，这时就必须使用它们对应的实体名称或实体数字才能显示（在大多数浏览器中默认的字符集为ISO-8859-1）。下面做了整理，以备速查（注意：代码对大小写敏感）。 1、特色类 字符 实体名称 实体数字 描述 © &copy; &#169; 版权标志 | 竖线，常用作菜单或导航中的分隔符
js中的运算符
weixin_52346897的博客
04-12 6055
认识运算符 什么是运算符？ 运算符是用于执行程序代码运算，会针对一个以上操作数项目来进行运算。 运算符的应用: 购物车：计算总价，数量； Js中有哪些运算符？ 算术运算符、赋值运算符、关系运算符、逻辑运算符、三元运算符 如何理解运算符 算数的个数：一元、二元、三元 1.如果操作数只有一个，称之为一元运算符，或者单目运算符。 2.如果操作数有两个，称之为二元运算符，或者双目运算符，这是最多的 3.如果操作数有三个，称之为三元运算符，或者三目运算符，在js中，只有一个?: 例子： var a =
HTML——JS—运算符
piduocheng0577的博客
03-17 494
运算符 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> /** * 运算符 * 算术运算符 ...
devcit-js:JavaScript编程基础知识（DEVCIT-JS）
04-28
7. **ES6及新特性**：随着ECMAScript标准的更新，JavaScript引入了许多新特性和语法糖，如箭头函数、模板字符串、解构赋值、let和const等。课程会涵盖这些新特性，提升代码的可读性和效率。 8. **前端框架预览**：...
js-cheatsheet:javascript入门指南
05-04
字符串属性和方法字符串属性和方法示例： 常用表达 正则表达式方法 样例代码 条件语句 if..else语句 切换语句 三元运算符 循环与迭代 for循环 对于...的声明 对于...在声明中 while循环 做...一会儿 休息 继续 数组...
JavaScript教程--从入门到精通.zip
最新发布
09-16
JavaScript，也被称为JS，是一种广泛应用于网页和网络应用的编程语言。它主要负责网页的动态交互，让静态的HTML页面变得生动有趣。本教程“JavaScript教程--从入门到精通”旨在帮助初学者全面掌握JavaScript的核心...
ES6-for-humans：编写ES6的入门指南
02-03
模板字符串用反引号（`）包围，可以包含占位符 `${expression}`，使得字符串插值变得简单直观。 3. **箭头函数** 箭头函数的语法更紧凑，它将`function`关键字替换为一个箭头(`=>`)。箭头函数没有自己的`this`值...
js-start:用于JavaScript学习的简单任务
05-05
1. **变量与数据类型**：JavaScript支持var、let和const关键字声明变量，数据类型包括基本类型（如字符串、数字、布尔值）和引用类型（如对象、数组）。 2. **运算符与表达式**：了解算术、比较、逻辑、赋值等多种...
html字符表达式的运算符,ES 6 运算符
weixin_39959298的博客
06-17 362
ES 6 运算符表达式是一种特殊的语句，其计算结果为值。每个表达式都由以下两部分组成Operands(操作数)：表示数据Operator(运算符)：定义如何处理操作数以生成值javascript支持以下类型的运算符算术运算符假设变量A和B中的值分别为10和5。运算符描述例+加法返回操作数的和。A+B是15-减法返回值的差异。A-B是5*乘法返回值的乘积。A*B是50/除法执行除法运算并返回商。A/...
【js 算术运算符 html】
m0_69964155的博客
06-12 325
一、使用步骤代码如下（示例）： 2.i++与i-- 代码如下（示例）：
HTML-JavaScript基础入门(三)运算符/一看就懂,零基础你也会.(持续更新)
weixin_52137913的博客
11-05 879
算数运算符 +加 -减 *乘 /除 %余 <script> console.log( 5 + 2 ) console.log( 5 - 2 ) console.log( 5 * 2 ) console.log( 5 / 2 ) console.log( 5 % 2 ) // 5除以2的余数 结果是 1 // m % n 结果永远在 0 ~ n-1 之间 // 一个数除以2的余数等于0, 它就是偶数 </script>
html语句中字符串运算符,JavaScript中字符串运算符
weixin_39964391的博客
06-16 167
字符串运算符是用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。在JavaScript中，使用 + 和 += 这两个运算符对字符串进行连接运算，前者用于连接两个字符串，后者则连接两个字符串，并将结果赋给第一个字符串。示例：+ 号运算符用于连接字符串+号运算符用于连接字符串clickMefunctionstring(){varstr1="Welcome";varstr...
html符号代码大全
sc13647346287的博客
09-20 9590
转载自：https://www.cnblogs.com/Aliase/p/8318411.html
几个关于HTML的js方法
Un_Believable的博客
07-07 423
//加入收藏  function addBookmark(title) {       var url=parent.location.href;       if (window.sidebar) {               window.sidebar.addPanel(title, url,"");        } else if( document.all ) {          
JS 在 HTML 中做加减乘除
weixin_33674976的博客
09-02 1040
&lt;script type="text/javascript"&gt; function fun(t){ var fa = parseInt(document.getElementById('fa').value); var fb = parseInt(document.getElementById('fb').value); var fc = document.get...
HTML5-JS(算数运算符;number数字；判断；循环；string字符串;数组；Math 数学函数)
zdc_56的博客
01-30 989
算数运算符（基础数字运算）                 +  -  *  /  % (求余数）              当不是数字之间的运算的时候                 +号两边一旦有字符串（引号引起来的一坨），那么+号就不再是数学运算了,而是拼接，最终结果是字符串  *****                 -/*%  尽量将字符串转换成数字（隐式类型转换）          ...
HTML运算符
m0_63924379的博客
04-05 1491
逗号操作符 //简化一次性定义多个变量的操作 var a = 1; var b = 2; var c = 3; var a = 1,b = 2, c = 3;//简化一次性定义多个变量的操作 赋值操作符 var a = 1; //+= 加完后面的值后，在进行赋值 a += 1;//把前面值（变量）+ 后面的值，最终赋值给前面的变量 ...
JavaScript基础教程(第8版) - 入门到实践的Web开发指南
"JavaScript基础教程（中文第8版.pdf）是一本面向初学者的JavaScript入门教程，涵盖了JavaScript语言基础以及相关的CSS、DOM、Ajax、jQuery等技术。本书详细讲解了JavaScript语法，包括图像处理、框架、浏览器窗口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值