Skip to content

Commit 2471975

Browse files
anbanganbang
committed
第一章的资料
1 parent 1618f06 commit 2471975

16 files changed

Lines changed: 589 additions & 24 deletions

‎test-file.html‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,21 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html >
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport"
66
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>Document</title>
9-
<link rel="stylesheet" href="./test.css">
109
</head>
1110
<body>
12-
<div class="flex-demo">
13-
<ul class="flex-container second">
14-
<li class="flex-item">1</li>
15-
<li class="flex-item">2</li>
16-
<li class="flex-item">3</li>
17-
<li class="flex-item">4</li>
18-
</ul>
19-
</div>
11+
<div id="div1">this is die one </div>
2012

2113

22-
<script>
23-
24-
console.log(2>100);//false
25-
console.log("2">"100");//true
26-
console.log(123<"124");//true
27-
28-
29-
30-
31-
32-
33-
34-
35-
</script>
14+
<script>
15+
console.log("this is out info");
16+
var oDiv=document.getElementById("div1");
17+
console.log(oDiv);
18+
oDiv.innerText="hello"
19+
</script>
3620
</body>
3721
</html>

‎前端开发初识/CSS3中两种方案.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
#div1{
8+
/*渐进增强的写法*/
9+
width: 400px;
10+
height: 200px;
11+
background-color: orange;
12+
/*这个是针对webkit内核的浏览器*/
13+
-webkit-border-radius: 30px 10px;
14+
/*这个属于所有的浏览器*/
15+
border-radius: 30px 10px;
16+
}
17+
#div2{
18+
/*优雅降级的写法*/
19+
width: 400px;
20+
height: 200px;
21+
background-color: darkcyan;
22+
/*这个属于所有的浏览器*/
23+
border-radius: 30px 10px;
24+
/*这个是针对webkit内核的浏览器*/
25+
-webkit-border-radius: 30px 10px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div id="div1">这是DIV1</div>
31+
<br>
32+
<br>
33+
<br>
34+
<div id="div2">这是DIV2</div>
35+
</body>
36+
</html>

‎前端开发初识/ES6的介绍和Javascript文档模式.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
9+
<script>
10+
//ES6- 是ECMAScrip2015 不是ECMAScrip5
11+
//ES8- 是ECMAScrip2017 不是ECMAScrip8
12+
13+
14+
//主流还是ES5
15+
16+
17+
</script>
18+
</body>
19+
</html>

‎前端开发初识/HTML中怎么写CSS.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<!--嵌入式的写法-->
7+
<style>
8+
#demo-ul{
9+
color: aqua;
10+
}
11+
.item-2{
12+
color: orange;
13+
}
14+
.item-9999{
15+
color: orange;
16+
}
17+
18+
19+
.ol-item{
20+
color: coral;
21+
border-bottom: 1px solid darkgreen;
22+
}
23+
.light-hight{
24+
color: orange;
25+
}
26+
/* id 分 100*/
27+
#test-demo{ color: rebeccapurple; }
28+
/* class 分10 标签是1分*/
29+
body .test-demo{ color: orange; }
30+
31+
</style>
32+
<!--外链的写法-->\
33+
<!--<style src="./wui/color.css?t=201708261529"></style>-->
34+
<link rel="stylesheet" href="./wui/color.css?t=201708261529">
35+
36+
</head>
37+
<body>
38+
<!--行内的CSS写法:css直接写在标签上-->
39+
<!--style="color: red"-->
40+
<div style="color: red" class="test-demo" id="test-demo">this is div <span>span</span></div>
41+
<div >2</div>
42+
<div style="color: red">3</div>
43+
<div style="color: red">4</div>
44+
<div style="color: red">5</div>
45+
<div style="color: red">5</div>
46+
47+
<!--嵌入式的写法-->
48+
<!--比起行内写法，方便维护;减少代码量-->
49+
<h1 class="light-hight">这是高亮的</h1>
50+
<ul id="demo-ul">
51+
<li>001</li>
52+
<li class="item-2">002</li>
53+
<li>003</li>
54+
<li>004</li>
55+
<li>004</li>
56+
<li>004</li>
57+
<li>004</li>
58+
<li>004</li>
59+
<li>004</li>
60+
<li>004</li>
61+
<li>004</li>
62+
<li>004</li>
63+
</ul>
64+
<ol>
65+
<li class="ol-item">111</li>
66+
<li class="ol-item">222</li>
67+
<li class="ol-item">333</li>
68+
<li class="ol-item">444</li>
69+
</ol>
70+
<p class="warning">你确定提交修改的信息吗？</p>
71+
</body>
72+
</html>

‎前端开发初识/HTML中怎么写CSS2.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
.light-hight{
8+
color: orange;
9+
}
10+
</style>
11+
<!--??-->
12+
<link rel="stylesheet" href="./wui/color.css">
13+
</head>
14+
<body>
15+
<p class="light-hight">这是高亮的</p>
16+
<p class="warning">这是警告信息</p>
17+
</body>
18+
</html>

‎前端开发初识/HTML中怎么写JS.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html >
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<script>
10+
//嵌入式的写法，直接放在上面，获取不到ID；
11+
/*var oDiv3=document.getElementById("btn2");
12+
console.log(oDiv3);//null*/
13+
14+
window.onload=function () {
15+
var oDiv3=document.getElementById("btn2");
16+
console.log(oDiv3,"window.onload");//null
17+
}
18+
</script>
19+
</head>
20+
<body>
21+
<!--JS行内写法:JS直接写在标签上-->
22+
<div>这是一段信息;<a href="javascript:;">这是百度的连接</a></div>
23+
<input type="button" value="click me 1" onclick="alert('这是行内的写法')">
24+
<br>
25+
<!--JS嵌入式的写法 :JS写在script标签内-->
26+
<input type="button" value="click me 2" id="btn1">
27+
<br>
28+
<br>
29+
<br>
30+
<input type="button" value="click me 3" id="btn2">
31+
32+
<br>
33+
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="">
34+
35+
<script>
36+
//嵌入式的写法
37+
var oDiv=document.getElementById("btn1");
38+
oDiv.onclick=function () {
39+
alert("这是嵌入式的写法")
40+
}
41+
</script>
42+
<script src="src/btn.js"></script>
43+
44+
</body>
45+
</html>

‎前端开发初识/HTML标签介绍.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>浏览器的标题头11</title>
9+
</head>
10+
<body>
11+
<div>这是DIV标签</div>
12+
<p>这是p标签1</p>
13+
<br>
14+
<br>
15+
<hr>
16+
<p>这是p标签2</p>
17+
<a href="https://www.baidu.com/">百度一下，你就知道</a>
18+
<br>
19+
<br>
20+
<a href="#div" target="_blank">百度一下，你就知道2</a>
21+
<br>
22+
<p>ddasdasdasdasdasdasd</p>
23+
<p>ddasdasdasdasdasdasd</p>
24+
<hr>
25+
<p>ddasdasdasdasdasdasd</p>
26+
<ul>
27+
<li>1</li>
28+
<li>2</li>
29+
<li>3</li>
30+
<li>4</li>
31+
<li>5</li>
32+
</ul>
33+
<p>222</p>
34+
<ol>
35+
<li>1</li>
36+
<li>222</li>
37+
<li>333</li>
38+
<li>444</li>
39+
</ol>
40+
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="这是百度的图片">
41+
42+
<h1>这是h1</h1>
43+
<h2>这是h2</h2>
44+
<h3>这是h3</h3>
45+
<h4>这是h4</h4>
46+
<h5>这是h5</h5>
47+
<table>
48+
<tr>
49+
<td>1</td>
50+
<td>2</td>
51+
<td>3</td>
52+
</tr>
53+
<tr>
54+
<td>1</td>
55+
<td>2</td>
56+
<td>3</td>
57+
</tr>
58+
</table>
59+
</body>
60+
</html>

‎前端开发初识/HTML标签的全局属性.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<style>
10+
.div-class{
11+
color: red;
12+
}
13+
.div2{
14+
background-color: red;
15+
}
16+
#div2{
17+
background-color: orange;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<div class="div-class">1</div>
23+
<div class="div-class">3</div>
24+
<div class="div-class">4</div>
25+
<div class="div-class">5</div>
26+
<div class="div-class">5</div>
27+
28+
<p>22222>
29+
<p>22222</p>
30+
<div id='div1' title="这是title by div">这是DIV1的内容</div>
31+
<div id="div2">222</div>
32+
<span title="这是span的说明信息">这是span</span>
33+
34+
<a href="#" title="这是title里面的文字">百度一下</a>
35+
36+
<p>dads</p>
37+
<ul>
38+
<li>
39+
ddd
40+
</li>
41+
</ul>
42+
<script>
43+
var oDiv1=document.getElementById("div1");
44+
var oDiv2=document.getElementById("div2");
45+
oDiv1.innerText="我已经被JS改变了";//通过JS来改变html
46+
oDiv2.style.color="red";//通过JS来改变CSS；
47+
console.log("ID",oDiv1);
48+
49+
50+
51+
var oDivClass=document.getElementsByClassName("div-class");//这是一对标签的集合
52+
console.log(oDivClass);
53+
console.log(oDivClass[0]);
54+
</script>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)