实训第三天笔记
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>
<!-- 链接 -->
<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:clxk1997@163.com">邮箱</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">苹 果<br>
<input type="checkbox" name="shuiguo" value="2">香>蕉<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