【前端1】标签（input），css（选择器），js（Bom，Dom）

文章目录

1.标签
2.css
3.js

1.标签

1.1 html：HTML（用于创建网页结构），CSS（对页面进行美化），JavaScript（用于与用户交互）

#两种软件架构
	1. C/S : client to server  客户端对服务端
	2. B/S : browser to server 浏览器对服务端
前后端的概念
	1. 前端: 直接跟用户打交道
		1. 大前端: 网页,app,小程序...
		2. 前端: 网页	
	2. 后端(后台) : 提供数据支持 (服务器)
前端的学习
	1. html + css : 标签语言
	2. JavaScript : 编程语言
	3. Jquery : 基础框架
	4. BootStrap : 高级框架

//1111111111111111111111111111111111111111111111111111111111111111
开发工具: idea (HBuilder)	
运行环境: 浏览器(google : chrome)	
# 浏览器
-- 1. 内核 : 引擎
	a. IE : MS -> edge
	b. Chrome : google 
	c. safari : apple
	d. firefox : 火狐
	e. Opera : 欧朋
-- 2. 外壳(皮肤)
	360浏览器	
前端开发: 适配(写了一套网页)	

//1111111111111111111111111111111111111111111111111111111111111111111111
## HTML：HyperText Markup Language 超文本标记语言，html的语法不需要像xml那么严谨, 浏览器会自动补全
	1. 超文本 : 不仅仅是文本(文本,图片,超链接...)
	2. 标记语言 : 标签 	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

File-New-Project-Static Web，右击New-HTMLFile。

DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    
    <body>
        Hello Html
        <hr>   
        <hr/>
        <div>div div>   
        xx
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

1.2 文本标签：字体属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
        
        中文
        <font face="楷体">中文font>
        <font face="楷体" color="#a0522d">中文font>
        <font face="楷体" color="#a0522d" size="1">中文1font>
        <font face="楷体" color="#a0522d" size="3">中文3font>
        <font face="楷体" color="#a0522d" size="7">中文7font>
        <b>
            <i>
            <font face="楷体" color="#a0522d" size="8">中文8font>
            i>
        b>

        <hr>
        <h1>何以生肖莫h1>
        NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...
        <hr>
        <hr size="50px" color="green"/>
        <hr size="50px" color="pink"/>
        <hr size="50px" color="#ffff00" width="500px" align="left"/>
        <hr size="50px" color="#000000" width="50%" align="center"/>
        <hr size="50px" color="#FFB3D2" width="50%" align="right"/>
        <hr>

        NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪... <br>
        NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪... <br>

        <p>NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...p>
        <p>NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...p>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

1.3 a标签：anchor(锚) 超链接

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    
    <h1 id="start"> h1h1>

     <a>百度一下,你就知道a>   <br>
     <a href="http://www.baidu.com">百度一下,你就知道a>   <br>
     <a href="00_基本语法.html">基本语法a>   <br>
     <a href="mailTo:liuyan@163.com?subject=约会&cc=高圆圆">发邮件a>   <br>

        <a href="#start">回到h1的位置a> <br>
        <a href="#">当前页面a> <br>
           
        <hr>
    <a href="http://www.baidu.com" >百度一下,你就知道a>   <br>
    <a href="http://www.baidu.com" target="_self">百度一下,你就知道a>   <br>
    <a href="http://www.baidu.com" target="_blank" title="点击了解更多">百度一下,你就知道a>   <br>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

1.4 列表标签：list (嵌套)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    
        <h1>奥运奖牌榜h1>        
        <ol type="I">
            <li>中国li>
            <li>美国li>
            <li>俄罗斯li>
        ol>

        <h1>优秀男性榜h1>        
        <ul type="square">
            <li>东哥li>
            <li>坤哥li>
            <li>凡哥li>
        ul>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述

1.5 图像标签：img标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    
    <img src="img/a.jpg" alt="查无此图片" title="呵呵">
    <img src="img/b.jpg" alt="查无此图片">
  
    <img src="img/a.jpg" alt="查无此图片" width="160px">
    <img src="img/a.jpg" alt="查无此图片" height="320px">
    <img src="img/a.jpg" alt="查无此图片" width="320px" height="240px">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1.6 标签分类：div，span

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
        
        <font>fontfont>  
        <hr> 
        <img src="" alt="">         
        <a href="#">嘻嘻a> 
        <hr>

        啦啦
        <h1>h1h1>
        嘻嘻 <br>
        <a href="#">aa> <br>
        呼呼

        <hr>
        <div>divdiv>
        <div>divdiv>
        <span>spanspan>
        <span>spanspan>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

1.7 表格标签：快捷键，table(嵌套)

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    
    <table border="1px" cellspacing="0px" cellpadding="10px" width="500px" >
        <caption>学生成绩表caption>
        <tr>
            <td align="center"><b>姓名b>td>
            <th>年龄th>
            <th>身高th>
            <th>体重th>
        tr>
        <tr align="center">
            <td>张三td>
            <td>18td>
            <td>180td>
            <td>180td>
        tr>
        <tr>
            <td align="center">李四td>
            <td>18td>
            <td>180td>
            <td>180td>
        tr>
    table>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

1.8 合并单元格：rowspan=“2”

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>

<table width="500px" border="1px" cellspacing="0px">
    <tr>
        <td rowspan="2">11td>
        <td>12td>
        <td colspan="2">13td>        
    tr>
    <tr>
        <td>22td>
        <td>23td>
        <td>24td>
    tr>
    <tr>
        <td>31td>
        <td>32td>
        <td>33td>
        <td>34td>
    tr>
    <tr>
        <td>41td>
        <td>42td>
        <td>43td>
        <td>44td>
    tr>
table>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
<table width="500px" border="1px" cellspacing="0px" cellpadding="10px">
    <caption>
        <h1>学生成绩表h1>
    caption>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
        <th>成绩th>
    tr>
    <tr align="center">
        <td>100td>
        <td>zstd>
        <td>maletd>
        <td>30td>
    tr>
    <tr>
        <td>200td>
        <td>td>
        <td>td>
        <td rowspan="2">90td>
    tr>
    <tr>
        <td>300td>
        <td>td>
        <td>td>
    tr>
    <tr>
        <td>总成绩td>
        <td colspan="3">900td>
    tr>
table>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在这里插入图片描述

1.9 实体字符：copy

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    
        <
        >
        ©版权归百度所有
        ¥988

        < >  © ¥ 可以直接写
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

1.10 form表单标签：和列表或表格标签一样不能单独，需嵌套

 DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    
        <form action="#" method="get">
            用户名: <input type="text" name="username"> <br>                     
            密码: <input type="text" name="password"> <br>
            <input type="submit">  
        form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述
百度服务器不会理你。

1.11 input标签：type/name/value/checked属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
        
        <form action="#">
            用户名: <input type="text" value="zs"> <br>  
            密码: <input type="password"> <br>
            性别: <input type="radio"> 男
                    <input type="radio"> 女 <br>
            喜好: <input type="checkbox"> 抽烟
                    <input type="checkbox"> 喝酒
                        <input type="checkbox"> 烫头 <br>
            生日: <input type="date"> <br>
            上传文件: <input type="file"> <br>
            
            <input type="hidden" value="xx">  
            <input type="submit">
            <input type="image" src="../img/btn.jpg"> <br><br>
            <input type="reset">
        form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
        
        <form action="#">
            用户名: <input type="text" name="user" value="zs"> <br>
            密码: <input type="password" name="pwd"> <br>
            性别: <input type="radio" name="gender" value="male" checked="checked"> 男
                    <input type="radio" name="gender" value="female"> 女 <br>
            喜好: <input type="checkbox" name="hobby" value="smoke" checked="checked"> 抽烟
                    <input type="checkbox" name="hobby" value="drink" checked> 喝酒
                        <input type="checkbox" name="hobby" value="firehead"> 烫头 <br>
            生日: <input type="date" name="birth"> <br>
            上传文件: <input type="file" name="tx"> <br>

            <input type="hidden" name="id" value="xx">
            <input type="submit" value="我是提交">  
            <input type="image" src="../img/btn.jpg"> <br><br>
            <input type="reset">
        form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function method01() {
            alert("警告: 今天会下雨")
        }
    script>
head>

<body>
    
    <input type="button" value="按钮" onclick="method01()"> <br>
    
    <input type="color">
    <input type="week">
    <hr>
    <form action="#">
        <input type="email"> <br>
        <input type="submit">
    form>
        <hr>
        <hr>
    <input type="text"> <br>
    <input type="text" size="20"> <br>
    <input type="text" size="30">  <br>
    <input type="text" maxlength="6"> <br>
    <input type="text" value="哈哈" readonly> <br>
    <input type="text" value="嘻嘻" disabled> <br>
    <input type="text" placeholder="请输入你的银行卡密码"> <br>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

在这里插入图片描述

1.12 select和textarea标签：< form >下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
        
        
        <form action="#">
            地区:
            <select name="area" id="" multiple>  
                <option value="1">安徽option>
                <option value="2" selected>江苏option>
                <option value="3">福建option>
            select>
            <br>
            自我介绍: <br>
            <textarea name="self"  cols="8" rows="5">textarea>
            <br>
            <input type="submit">
        form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述

2.css

2.1 css三种引入方式：< style >

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /* CSS: 专业美化网页的： 1. html没有的css有   2. html有也没有css方便 */
        h2{
            color: blue;
        }
        span{
            font-size: 60px;
        }
    style>
head>


<body>
    
     <h1>  
         <font color="red">标题font>
     h1>   

     <font size="7">span1font>  
     <font size="7">span2font>
     <font size="7">span3font>


    <h2>标题h2>
    <span>span1span>
    <span>span2span>
    <span>span3span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <link rel="stylesheet" href="../css/my.css">
    <style>
        span{
            color: green;
            font-size: 40px;
        }
    style>
head>


<body>
        <font color="green" size="4">font>   
        <span style="color: red;font-size: 30px">字体span> <br>   

        <span >字体span> <br>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

在这里插入图片描述

2.2 css三种基本选择器：优先级：id > class > 标签tag

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        #myid{
            color: red;
        }
        .myclass{
            color: green;
        }
        span{
            color: blue;
        }
    style>
head>


<body>
        <span >spanspan> <br>
        <span id="myid" class="myclass">span1span> <br>

        <span class="myclass">span2span> <br>
        <span class="myclass">span2span> <br>

        <span >span3span> <br>
        <span >span3span> <br>
        <span >span3span> <br>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在这里插入图片描述

2.3 扩展选择器：层级/并集/属性/伪类

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*
        需求: 让div下的span变red
        层级选择器:
            父选择器 子选择器{  .xx类选择器也是子选择器
            }
        */
        div .xx{
            color: red;
        }
    style>
head>


<body>
    <div>divdiv>
    <div>
        <span>div下的spanspan>
        <span class="xx">div下的span xxspan>
        <span class="xx">div下的span xxspan>
        <span>div下的spanspan>
        <span>div下的spanspan>
    div>
    <span class="xx">spanspan>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*
        需求: span和div都变red
        并集选择器:
            选择器1,选择器2...{
            }
        */
        span,div h1{    /*div h1是层级选择器 */
            color: red;
        }
    style>
head>


<body>
        <span>spanspan>
        <div>divdiv>
        <div>
            <h1>div下的h1h1>
        div>
        <h1>h1h1>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*
		属性选择器：
        标签名[属性名] : 选中有某种属性的标签
        标签名[属性名="属性值"] : 某种属性=某个特定的值的标签
        */
        font[size][face]{
            color: red;
        }
        font[size='3']{
            color: green;
        }
    style>
head>


<body>
    <font size="1" face="楷体">font1font>
    <font size="3">font3font>
    <font size="5">font5font>
    <font size="3">font3font>
    <font>fontfont>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*
            伪类选择器 : 选中某种状态下的标签
                选择器1:状态{
                }
                
            超链接的不同状态:  
            1. 未点击 link: 蓝色
            2. 鼠标悬浮 hover: 蓝色
            3. 激活 active: 红色
            4. 访问过后 visited: 紫色
        */
        a:link{    //改变默认的颜色
            color: black;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: deeppink;
        }
        a:visited{
            color: grey;
        }
    style>
head>


<body>
    <a href="#">超链接a> <br>
    <a href="#">超链接a> <br>  
    <a href="#1">超链接a> <br>
    <a href="#2">超链接a> <br>
    <a href="#3">超链接a> <br>
    <a href="#4">超链接a> <br>
    <a href="#5">超链接a> <br>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

2.4 css属性：背景/文本/字体/边框/浮动/展示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
       /* body{
            background-color: #a3d1dd;
            background-image: url("../img/girl2.jpg");
            background-repeat: no-repeat;
            background-position: 50px 10px;   背景横着是x轴
        }*/
        
        body{
            color: green;    /*文本属性*/
            direction: ltr;  /*文本方向*/
            line-height: 30px;  /*行高*/
            letter-spacing: 20px;  /*字符间距*/
            text-decoration: overline; /* 下划线underline */
            text-indent: 2em; /* 首行缩进*/
 
            font-size: 25px;  /*字体属性*/
            font-family: 楷体; /*相当于html中face属性*/
            font-weight: bold; /* 加粗*/
            font-style: italic; /* 斜体*/
        }
    style>
head>


<body>
       他找若遂凌云志, 敢笑黄巢不丈夫.
       他找若遂凌云志, 敢笑黄巢不丈夫.
       他找若遂凌云志, 敢笑黄巢不丈夫.
       他找若遂凌云志, 敢笑黄巢不丈夫.
       他找若遂凌云志, 敢笑黄巢不丈夫.
       他找若遂凌云志, 敢笑黄巢不丈夫.
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*        
       1. 边框: border: 1px green solid;     solid : 实线(固体)
       2. float : 浮动      clear: 清除浮动效果            
        */
        div{
            border: 1px green solid;
            width: 150px;
            height: 150px;
            float: left;
        }
    style>
head>


<body>
        <div>1div>
        <div>2div>
        <div style="clear: left">3div>
        <div>4div>
        <div>5div>
        <div>6div>
        <div>7div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

如下7是接着6后面，看浏览器窗口大小，动态调整。
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*
         display : 1. inline : 内联  不换行
                   2. block : 块级
                   3. none : 隐藏
        */
        div{
            display: none; /*将div隐藏*/
        }
        span{
            display: block;  /*将span换行*/
        }
    style>  
head>


<body>
        <div>1div>   
        <div>2div>
        <div>3div>
        <span>span1span>  
        <span>span2span>
        <span>span3span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述

2.5 盒子模型：每个标签都可看成一个盒子，width height border，padding margin

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*                        
               1/2. width/height：指的是内容的宽高(边框里面: 内容 + 内间距)
               3. border : 边框，有线宽
               4. padding : 内间距 (边框 和 内容之间的距离)
               5. margin : 外间距 (当前标签与其他标签的距离)
        */
        div{
            border: 1px green solid;
            width: 100px;
            height:100px;
            padding: 10px;
            padding-left: 20px;
            margin: 30px;
        }
    style>
head>


<body>
        <div>divdiv>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

2.6 注册案例：中间 < div > < form >

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*
            big的内容: 750px(包含3个小div)
            2个side的div大小= 200 * 2 + 4 = 404
            1个middle的div大小= 750-404-2 = 344
        */
        #big{
            border: 1px red solid;
            height: 450px;
            width: 750px;
            margin: auto;
        }
        .side{
            border: 1px green dashed;
            width: 200px;
            height: 450px;
            float: left;  /* 流式布局 */
        }
        #middle{
            border: 1px blue dashed;
            float: left;
            height: 450px;
            width: 344px;
        }
    style>
head>


<body>
    <div id="big">
        <div class="side">1div>
        <div id="middle">2div>
        <div class="side">3div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #big{
            border: 10px lightgrey solid;
            height: 450px;
            width: 750px;
            margin: auto;
        }
        .side{
            width: 200px;
            height: 450px;
            float: left;
        }
        #middle{
            float: left;
            height: 450px;
            width: 344px;
        }
    style>
head>


<body>
    <div id="big">  
        <div class="side">
             <span style="color: orange;font-size: 20px;margin: 30px">新用户注册span> <br>
             <span style="color: grey;font-size: 20px">USER REGISTERspan> <br>
        div>

     
        <div id="middle">
            <form action="#">   
                <table>
                    <tr>
                        <td>用户名td>   
                        <td colspan="2">     
                            <input type="text" placeholder="请输入账号" size="30" style="border-radius: 5px">
                        td>                        
                    tr>
                
                
                    <tr>
                        <td>密码td>
                        <td colspan="2">
                            <input type="password" placeholder="请输入密码">
                        td>
                    tr>
                    
  
                    <tr>
                        <td>验证码td>
                        <td>
                            <input type="text">
                        td>
                        <td>
                            <img src="../img/btn.jpg" alt="">
                        td>
                    tr>

            
                    <tr>
                        <td>td>
                        <td>
                            <input type="submit">
                        td>
                        <td>td>
                    tr>
                table>
            form>
        div>

           
        <div class="side">
            已有账号?
            <a href="#" style="color: hotpink;text-decoration: none">立即登录a>
        div>
    div> 
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

在这里插入图片描述

2.7 css的优先级：id>class>tag

在这里插入图片描述
div下面p标签，同时p标签需具有class是cp1且id是p1。如下第二行蓝色比第一行蓝色优先级高。

3.js

3.1 js两种引入：js最终要引入到html在浏览器中运行

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <script>
        function method01() {
            var result = confirm("你满18岁了吗?")
        }
    script>    
head>


<body>
            <form action="#">
                <input type="text" name="user" placeholder="请输入用户名"> <br>
                <input type="submit">
            form>
                <hr>
                
            <input type="button" value="按钮:跳转" onclick="method01()" >
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <script>        
        document.writeln("hello");  //DOM : 在网页中输出
    script>

     
    <script src="../js/my.js">
         //中间不能写
    script>

 
    <script>
        /*
        *   1. 一行代码后面可以不加 ;
        *   2. js弱类型语言 (有类型,但是不强调)，所有类型都赋值给var (variable 变量)
        *   3. var可写可不写
        */
        document.writeln("
")
        document.writeln("a")

        var a = 1;    //数字  不用int a =1
        // a = "abc"    // 字符串

        b = 2;
        document.writeln(a + b)

        var c = 1; //定义: 初次声明并赋值
        var c = 2; // 赋值
    script>
head>


<body>
        内容
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

3.2 js五大原始类型：undefined

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        *  js的类型
        *   1. 原始类型: 如下
        *   2. 引用类型： a. object
        *                 b. function
        *
        *   原始类型：
        *   1. number : 数字：整数/小数
        *   2. string : 字符串：单引/双引
        *   3. boolean：true/false
        *   4. null (值)：表示引用类型变量为null
        *   5. undefined : 未定义
        *       定义: 变量初次声明并赋值
        *       未定义: 变量只声明不赋值
        *       java:  int a; //定义
        *              a = 1; // 赋值
        *       js :  var a = 1; //定义
        *             var b; //未定义
        *  运算符 :  变量的类型  = typeof 变量 。 返回变量类型  像java中instance of
        */
        var a = 1.1;
        var type = typeof a
        document.writeln(a + "->" + type)   
        document.writeln("
")

        var a = 'abc'; //赋值
        var type = typeof a
        document.writeln(a + "->" + type)
        document.writeln("
")

        var a = true;
        var type = typeof a
        document.writeln(a + "->" + type)
        document.writeln("
")

        var a = null;  //任意引用类型继承object
        var type = typeof a
        document.writeln(a + "->" + type)
        document.writeln("
")

        var b;
        var type = typeof b
        document.writeln(b + "->" + type)
        document.writeln("
")
    script>
head>


<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

在这里插入图片描述

3.3 js的运算符和流程控制：js不支持单&和单|性能低

判断用户是否输入内容：java如下，js中直接写if(a)。
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        * 在js中,任意类型的表达式或者变量都可以作为判断条件
        *  1. number : 非0为true , 0为false
        *  2. string : 非空串为true，空串为false(比较重要)。可以用来判断用户是否输入内容
        *  3. null : false
        *  4. undefined : false
        */
        var a = "用户输入的内容"
        if(a){
            document.writeln("true")  //true
        }else{
            document.writeln("false")
        }
        document.writeln("
")
    script>
    

    <script>
        var result = 1 > false? "嘻嘻" : 10  //三元运算，java中问号后面必须同类型，js可不同
        document.writeln(result)  //嘻嘻 ，因为false运算时转为数字0
        document.writeln("
")
    script>
    
    
    <script>
        /*
        * == : 等等: 只比较字面值, 不比较类型。常用
        * === : 恒等：不仅比较字面值, 比较类型。不常用，在js中判断类型意义不大，因为js弱类型。
        */
        var a = "200"
        var b = 200
        document.writeln(a == b) // true  //网页输入都是字符串
        document.writeln(a === b)// false
        document.writeln("
")
    script>

    
    <script>
        /*
        *   运算规则: 任意类型都可运算
        *   以+为例:
        *       1. 任意类型+string=string
        *       2. 除string之外+ number = number / NaN
        *           1. boolean : true=1,false=0
        *           2. null : 0
        *           3. undefined : NaN(not a number)
        */
        // var a = "abc"
        // var b = 100
        // document.writeln(a + b)   // abc100

        // var a = "abc"
        // var b = true
        // document.writeln(a + b)   // abctrue

        var a = "abc"
        var b
        document.writeln(a + b)   // abcundefined

//111111111111111111111111111111111111111111111111111111111111 
        // var a = 100
        // var b = true
        // document.writeln(a + b) // 101
        
        // var a = 100
        // var b = null 
        // document.writeln(a + b) // 100

        // var a = 100
        // var b  
        // document.writeln(a + b) // NaN        
    script>
head>


<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

3.4 案例_99乘法表：Sources调试

i：1到9。
j：列数=行序号，1到i。
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        table{
            border-collapse : collapse;
        }
    style>
    
  
    <script>
        document.writeln("")for(var i =1; i <=9; i++){  
            document.writeln("")for(var j =1; j <= i; j++){  
                document.writeln("")//这行及以下成对}
            document.writeln("")}
        document.writeln("
            
               ")
                document.writeln(j + "x" + i + "=" + i * j)
                document.writeln(" 
              
        
")
    script>
head>


<body>
  
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Sources 》打断点》右击重新加载》watch右边点+号并输入想看的变量》如下鼠标所指的下一步。
在这里插入图片描述

3.5 函数的基本语法：function

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        *    java :   public static void main(String[] args){
        *             方法体
        *     		  }
        *       	  修饰符 返回值类型 方法名(参数列表) {方法体}
        * 
        *    js : function 函数名(参数列表){ 函数体}
        *    注意点: 1. 参数列表不写var
        *      	    2. 如果有返回值,直接return
        *          3. 调用函数时,传入的参数个数不限制
        *        4. 函数内部有个默认参数, arguments (本质数组 : 调用此函数传入的所有参数)
        */
        function method01() {
            console.log("控制台输出")
        }
        method01()  

//11111111111111111111111111111111111111111111111111111111111111111111111111111
        function method02(a,b) {
            // return a + b;
            var sum = 0;
            for(var i=0;i<arguments.length;i++){
                sum += arguments[i]
            }
            return sum;
        }
        var result = method02(1)  //return a + b;为NaN （因为b undefined） //如上arguments输出为1
        var result = method02(1,2,3)  //return a + b;为3  //如上arguments输出为6
        console.log(result)
    script>
head>


<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在这里插入图片描述

3.6 函数的两种变量和两种定义：全局/局部变量

 DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>        
        var a = 1; //全局，外面隐含var c;    
        
        function method01() {
            var b = 2; //局部
            c = 3;  // 没有写var为全局变量
            document.writeln("内部:" + a)
            document.writeln("内部:" + b)
            document.writeln("内部:" + c)
        }
        method01()   
             
        document.writeln("外部:" + a)
        document.writeln("外部:" + c)
        // document.writeln("外部:" + b) //访问不到
    script>

  
    <script>
        document.writeln("另一个script:" + a) //可访问到，等价于上面document.writeln("外部:" + a)
    script>
 
    
    <script>
        /*
        *  两种定义: 1. 命名函数
        *           function 函数名(参数列表){
        *           }
        *           2. 匿名函数
        *           变量名 = function(参数列表) { }
        */
        document.writeln("
")
        function method02() {
            document.writeln("2")
        }
        method02()
        
        //如下没有函数名
        var m = function (a,b) {
           return a + b;
        }
        var result = m(1,2)
        document.writeln(result)
    script>

  
    <script>
        function method03(xx) {   //xx=匿名函数 ，函数回调(callback)：xx()  
            xx()
        } 
        method03( function(){document.writeln("哈哈")} )    //最终打印 哈哈 
    script>
head>

 
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

3.7 事件的两种注册：js事件驱动语言

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        *  事件(event，实现和用户的交互): 发生在html元素上的事：1.用户输入的行为
        *     								                 2.浏览器自己的行为
        *
        *  事件A : onclick (单击事件 : 当用户单击鼠标左键的时候触发)
        * 
        *  事件绑定函数(事件注册)
        *       1. 命名注册
        *           1. 首先声明一个命名函数
        *           2. 每个标签都有事件属性：onclick = "method01()"，当单击事件被触发的时候,method01执行。 
        *       2. 匿名注册
        *           1. 先找到html标签, 生成对象
        *           2. 给对象的事件属性 赋值一个匿名函数
        */
        function method01() {
            console.log("xx")
        }
    script>
head>

  
<body>
        <input type="button" value="命名注册" onclick="method01()">  <br><br>
        <input type="button" value="匿名注册" id="myid">
body>
html>

  
<script>
    //1. 如下先找到html标签, 生成对象 (id选择器)
    var btn = document.getElementById("myid");    
    //2. 如下给对象的事件属性 赋值一个匿名函数，不用上面的method01()
    btn.onclick = function (ev) { // 回调函数 (一个函数是我们定义的,但不是我们调用,但最终还是执行的)
        console.log("yy")
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在这里插入图片描述

3.8 页面加载事件：当浏览器加载完整个html页面时才触发

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        *   问题: 不能给null设置onclick属性
        *   原因: 页面加载顺序: 从上至下的
        *       解决: 1. script标签写在body标签之后
        *             2. script标签写在head标签中 + 页面加载事件
        */
        window.onload = function (ev) { //页面加载事件
            //1. 先找到html标签, 生成对象 (id选择器)
            var btn = document.getElementById("myid");            
            //2. 给对象的事件属性 赋值一个匿名函数
            btn.onclick = function (ev) { // 回调函数 (一个函数是我们定义的,但是不是我们调用,但最终还是执行的)
                console.log("yy")
            }
        }
    script>
head>

   
<body>
        <input type="button" value="匿名注册" id="myid">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

3.9 案例_轮播图：每隔一秒换一张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        *   知识预备：只要动态修改html中的东西, 浏览器会自动刷新
        *      java思路: 0.jpg到4.jpg
        *      int i = 0;
        *      while(true){ //死循环
        *           Thread.sleep(1000); //每隔1秒
        *           i++;
        *           img = document.getElementById("myid"); //找到这图
        *           img.src = "../img/"+ i +".jpg"
        *           if(i == 4){
        *               i = -1;  //没有跳出循环
        *           }
        *      }
        *
        *     js思路: 有多进程(多进程占资源)。 js里没有多线程（多线程不安全） -> 引入BOM
        */
    script>
head>

 
<body>
        <img src="../img/0.jpg" width="500px" id="myid">
        <script>
            var i = 0;
            function method01() {
                i++;
                var img = document.getElementById("myid");
                img.src = "../img/"+ i +".jpg"
                if(i == 4) {
                    i = -1    //循环回去++又变成0
                }
            }
            window.setInterval(method01,1000)            
        script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

 DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        * BOM: browser Object model 浏览器对象模型。 window : 窗体
        * window.setInterval(函数名,时间)  含义: 每隔时间ms 执行一次 函数名，相当于: 死循环+ 暂停        
        */
        function method01() {
            document.writeln("哈")
        }
        window.setInterval(method01,1000) //这行可以替代Thread.sleep(1000);，因为没有线程。
    script>
head>

 
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.10 内置对象_数组/日期/字符串解析/url编码：encodeUri编码，decodeUri解码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        * 1. 数组对象
            1. 数组在JS中是一个类，通过构造方法创建对象
            2. 数组的四种方式
                1. new Array() 无参的构造方法，创建一个长度为0的数组
                2. new Array(5) 有参的构造方法，指定数组的长度
                3. new Array(2,4,10,6,41) 有参的构造方法，指定数组中的每个元素
                4. [4,3,20,6] 使用中括号的方式创建数组

            java数组
                int[] array = new int[5]
                int[] array = {1,2,3}      array = new int[]{1,2,3}

            js的数组特点:
                1. 数组中的元素类型不需要一致
                2. 数组可以自动扩容(只要新增元素就会扩容, 没有越界异常, 没有默认值)
        */
        var array = [0,1,"a"]
        array[4] = 4; //扩容
        document.writeln(array.length) //5
        document.writeln("
")
        for(var i=0; i < array.length; i++){
            document.writeln(array[i])  //0 1 a undefined 4
        }
    script>
    

    <script>
        document.writeln("
")
        /*
        * 2. 日期对象
            1. 作用：Date 对象用于处理日期和时间。
            2. 创建 Date 对象的语法: var myDate=new Date()
                1. Date 对象会自动把当前日期和时间保存为其初始值。
            3. 日期对象的方法
                1. getFullYear() 从 Date 对象以四位数字返回年份。
                2. getMonth() 从 Date 对象返回月份 (0 ~ 11)。
                3. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
                4. getTime() 返回 1970 年 1 月 1 日（Unix）至今的毫秒数。类似于Java中的System.currentTimeMillis()
                5. toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
        */
        var myDate = new Date()
        document.writeln(myDate) // 系统当前时间
        document.writeln("
")

        document.writeln(myDate.getMonth()) //10月打印出：9
        document.writeln("
")
        
        document.writeln(myDate.getTime()) //1970年到现在 时间毫秒值
        document.writeln("
")
        document.writeln(myDate.toLocaleString()) 
    script>
head>


<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        * parseInt() : 从左开始读取到第一个非数字的内容,停止解析, 返回整数
        * parseFloat () : 从左开始读取到第一个非数字的内容,停止解析, 返回整数+小数
        *   isNaN : 如果是NaN(not a number),返回true
        */
         var str = "1230.01 px"
        // var n = parseInt(str) //1230
        var n = parseFloat(str)
        document.writeln(n) //1230.01

        var a
        var b = 1
        var c = a + b
        document.writeln(isNaN(c)) //true
        document.writeln("
")
    script>
 

    <script>
        /*
        *   url(uri)编码 : url远程 < uri远程和本地
        *       word=%E6%9D%AF%E5%AD%90
        *
        *     前端->服务器(请求): 提交的数据 要经过 url编码
        *       编码: 字符 -> 字节
        *             杯子 -> %E6%9D%AF%E5%AD%90 （浏览器上网址栏渲染的url中还是杯子）
        *
        *     服务器接收到 : url解码
        *           %E6%9D%AF%E5%AD%90 -> 杯子 
        */
        var word = '杯子'
        var result = encodeURI(word)
        document.writeln(result)  //%E6%9D%AF%E5%AD%90        
        var re = decodeURI(result)
        document.writeln(re)  //杯子
    script>
head>


<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function method01() {
            /*
            * 1. 获取span的字体大小
            * 2. 字体大小 * 2
            * 3. 重新赋值给span标签
            */
            var span = document.getElementById("myid");
            console.log(span.style.fontSize)  // 20px
            var newSize = parseInt(span.style.fontSize) * 2  // 拿出20数字再* 2
            span.style.fontSize = newSize + "px"
        }
    script>
head>


<body>
        <input type="button" value="字体放大两倍" onclick="method01()">  <br><br>
        <span style="font-size: 20px" id="myid">字体span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

3.11 Bom编程_window对象：编写时可被省略，窗口 (运行环境)

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        * Bom : browser object model 浏览器对象模型
        *     1. window
        *     2. history
        *     3. location
        *
        *   三种提示框
        *       1. alert(msg) : 警告框, 只有确认按钮
        *       2. var result = confirm(msg)  : 确认框
        *           a. 确定 : 返回true
        *           b. 取消 : 返回false
        *       3. var result = prompt(msg,default)
        *           a. 确定: 返回输入的内容
        *           b. 取消: 返回null
        * 
        *   两种计时器
        *       1. 无限循环
        *           返回值 setInterval(method,time,param)
        *               每隔time ms 执行一次method(调用method,传入的param)
        *               返回值: 就是当前设置的计时器
        * 
        *       2. 单次使用 setTimeout
        *          清除计时器
        *               clearInterval(计时器对象)
        *               clearTimeout
        */
        // window.alert("警方提示: 今晚会下雨~~")
        // alert("警方提示: 今晚会下雨2~~")

        // var result = confirm("你满18周岁了吗?");
        // document.writeln(result)  //result返回值由用户选择按钮决定

        // var content = prompt("安全问题: 你的女朋友是谁?","高圆圆"); //提示框默认输入高圆圆，可以改
        // document.writeln(content)
    script>
    <script>
        var method01 = function (a) {
            // document.writeln(a) //网页输出
            console.log(a)  
        }
        var timer = setInterval(method01,1000,"呼") //每1秒打印一次 呼 死循环
        // setInterval("method01('嘻')",1000)  //效果同上行              
        // setTimeout(method01,3000,'呵呵') //3秒后就执行一次 呵呵，不会死循环
        
        function method02() {
            clearInterval(timer)
        }
    script>
head>


<body>
        <input type="button" value="按钮" onclick="method02()">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

3.12 案例_会动的时钟：innerText (开闭标签之间的内容)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        /*
        *    1. 先实现 页面初始化效果
        *       坑: 页面刚刷新的时候,设置系统当前时间
        *        1. 先获取系统事件
        *        2. 然后设置到div标签内
        *
        *    2. 哪些事件驱动什么逻辑 (js)
        *       1. 开始按钮被点击: 时间动起来
        *           方案A: 每隔1秒,时间+1 (时间进制问题)
        *           方案B: 每隔1秒,获取系统当前时间(不自己写)
        *
        *       2. 暂停按钮被点击: 时间不动了
        *           清除计时器
        *
        *   坑: 连续点击开始按钮, 那么就停不掉了!!!
        *       原因: 计时器在一个网页中可以设置多个
        *          timer = 0x0001
        *          timer = 0x0002
        *       解决:  1. 方案A: 点开始, 先清除timer
        *              2. 方案B: 当开始按钮点击的时候,开始按钮 禁用!
        *                        当暂停按钮点击的时候,开始按钮 启用!
        */
    script> 
    <script>
        window.onload = function (ev) { //