Java Web学习笔记(三) html学习&css学习&js学习

实训第三天笔记

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="./he/c1.css">

<!-- 样式 -->
<style type="text/css">

#aaa {
	float: right;
	border: 1px dotted blue;
	margin: 0px 0px 10px 20px;/* 上开始顺时针 */
	padding: 15px;
	text-align: center;
	width:120px
}
.c {
	margin: 0px 0px 10px 20px;
}
</style>
</head>
<body>

<h1>最大的标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h3标题</h4>
<h5>h3标题</h5>
<h6>最小标题</h6>

<p>段落</p>
<div class=c>AAA</div>
<span>ccc</span><br>
<span>bbbb</span>&nbsp;
<!-- 链接 -->
<a href="httt://www.baidu.com">链接文本</a>
<a href="http://www.baidu.com">
	<img alt="替换文本" src="D:\\cjava\\output_1504236817.gif">
</a>
<a href="mailto:[email protected]">邮箱</a>
<!-- 表单 -->
<form action="/ede/user/login" method="post">
	<input type="text" value="111" name="email" size="20" maxLength="10"><br>
	<input type="password" name="pass" maxlength="50" size="20"><br>
	<input type="checkbox" checked name="shuiguo" value="1">苹&nbsp;果<br>
	<input type="checkbox" name="shuiguo" value="2">香&gt;蕉<br>
	<input type="radio" name="sex" id="sex1" value="1">男
	<!-- <label for='sex1'>男</lable><br> -->
	<input type="radio" name="sex" checked value="2" id="sex2">
	<label for="sex2">女</label><br>
	<input type="submit" value="send">
	<input type="reset" value="reset"><br>
	<input type="button" value="aa"><br>
	<input type="hidden" value="bbb" name="aaa"><br>
	<select name="sel">
		<option value="pingguo">苹果</option>
		<option value="2">香蕉</option>
		<option selected value="3">樱桃</option>
		<option value="4">橘子</option>
	</select>
	<textarea rows="5" cols="20" name="comment"></textarea>
</form>

</body>
</html>

css

@charset "UTF-8";

/*Id选择器 通过Id查找到对应样式<div id="bbb">*/
/*不推荐使用*/
#bbb {
	font-size: 24px;
	/* 字体大小 */
}

/* class类选择器 <span class="aaa"*/
.aaa {
	font-size: 34px;
}

/*标签选择器，按照标签寻找样式*/
p {
	background-color: blue
}

h1 {
	
}

/*引入:外部、内部、内联*/
/*放在style标签中 <p style="background-color:yellow;">ddd</p>*/
/*优先级:就近原则*/

/*属性选择器*/
input[type=text] {font-size:16px;}

/*关系选择器*/
/*E F包含选择器    被E包含的所有F*/
h1 p {margin:30px;}
/*E>F子选择器   E的直接子元素F*/
h1>p {margin:30px;}
/*E+F相邻选择器   紧跟在E后面的F元素*/
h1+p {margin:30px}
/*E~F兄弟选择器   E之后的所有兄弟元素F*/
h1~p {margin:30px}

/*选择器分组*/
h2,p,div,span { color: #000}

/*伪类 给属性加一些功能，添加变化效果*/
a:hover{}

js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 主要放在head里面，在body里面最好放在body结束之前 -->
<script type="text/javascript">
	/*1. 方法定义*/
	function aa() {
		alert("javascript");
	}
	/*2. 方法调用 打开网页就被调用*/
	alert("qwe");

	/*3. 调用可以传所有或一部分参数，从左往右逐个赋值，没赋值的变量为undefined*/
	function bb(a, b) {
		alert(a);
		alert(b);
	}

	/*4. 闭包：方法的引用作为变量*/
	function s1() {
		var a = 0;
		function s2() {
			a++;
			alert(a);
		}
		return s2;
	}

	function tt() {
		var ss = s1();
		alert(typeof ss);//function
		var w = ss();//返回函数内alert值1
		alert(ss);//s2()函数部分
		alert(ss());//先返回方法内alert值2然后返回方法返回值undefined
	}

	/*5. for(属性 in 对象)*/
	function test() {
		var p = {
			"name" : "zhangsan",
			age : 20,
			say : function() {
				alert("hello");
			}
		};

		for (a in p) {
			alert(a + "---" + p[a]);
		}
		p['say']();//方法调用加()
	}

	/*6. forEach()*/
	function testforeach() {
		var a = [ 1, 2, 3 ];
		var sum = 0;

		a.forEach(function(value, index, array) {
			alert(array[index] == value)
			sum += value;
		});
		alert(sum);
	}
	/*7. Document Object Model*/
	/*html最大标签封装成的对象 document*/
	/*得到Html中的值*/
	function testdom() {
		var a1 = document.getElementById("aa");
		var a2 = document.getElementsByName("bb");//数组类型
		var a3 = document.getElementsByTagName("input");//数组类型
		var a4 = document.getElementsByClassName("cc");//数组类型

		alert(a1.innerHTML);//标签内部的完整标签
		alert(a1.innerText);//标签内部的文字(除去标签之外的东西)
		a1.innerHTML = "QWER";//<div>dsad</div>生效
		/* a1.innerText = "QWER" *///<div>dsad</div>不生效
		a1.style.backgroundColor = "red"
	}
	/*8. 定时器案例*/
	var f1 = function() {
		var data = new Date();
		var s = data.toLocaleString();
		document.getElementById("aa").innerHTML = s;
	}
	var x = setInterval(f1, 1000);

	function stop1() {
		clearInterval(x);
	}
	/*9. 时间延迟*/
	var t;
	function startsetTimeout() {
		t = setTimeout(testsetTimeout, 3000);
	}
	function testsetTimeout() {
		alert("123");
	}
	function testclearTimeout() {
		clearTimeout();
	}
</script>
</head>
<body>

	<div id="bb">
		dasdasd
		<p>dsads</p>
	</div>
	<br>
	<button onclick="aa()">a1</button>

	<button onclick="x()">b1</button>

	<button onclick="tt()">q1</button>
	<div id="aa"></div>

	<!-- <!-- 引入 -->
	<script type="text/javascript" src="../j1.js"></script>
	-->

	<!-- 直接在标签里定义 -->
	<!--javascript:可以省略  -->
	<button onclick="javascript:alert(123)">a2</button>
	<!--javascript:不能省略  -->
	<a href="javascript:alert(123)">b2</a>
</body>
</html>

布尔类型为假的七种情况 0 -0 null “” false undefined NaN

Java Web学习笔记(三) html学习&css学习&js学习

html

css

js

猜你喜欢