小菜鸟之HTML第二课
JavaScript
运行在浏览器上的一种基于对象和事件的驱动的脚本语言
基于对象（windows – document location histroy
便于调用对象属性和方法
事件驱动
键盘和鼠标与浏览器互动
js特点
向html页面添加交互行为
脚本语言，语法与java类似
解释性语言，一边执行，一遍编译
js的模型
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>js引入的三种方式</title>
6 <link type="">
7 <script type="text/javascript">
8 function m1() {
9 alert("hello world2");
10 }
11 </script>
12 <script type="text/javascript" src="js/myjs.js"></script>
13 </head>
14 <body>
15 <!--行间事件驱动 给事件属性赋值-->
16 <div>
17 <input type="button" name="btn" value="点击" onclick="alert('hello world')">
18 </div>
19
20 <!--页面嵌入script标签进行交互-->
21 <div>
22 <input type="button" name="btn1" value="点击1" onclick="m1()">
23 </div>
24
25 <!-- 外部引入进行交互-->
26 <div>
27 <input type="button" name="btn2" value="点击2" onclick="m2()">
28 </div>
29 </body>
30 </html>
HTML表现型
CSS表现型
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>JS的介绍</title>
6 <link type="">
7 <script type="text/javascript">
8 function ml() {
9 alert("hello")
10 // 提示框显示“hello
11 }
12 </script>
13 <script type="text/javascript" src="myjs.js"></script>
14 </head>
15 <body>
16 <!--行间事件驱动 给属性赋值-->
17 <div>
18 <input type="button" name="btn" value="点击" onclick="alert('hello')">
19 </div>
20 <!--页面嵌入script标签进行交互-->
21 <div>
22 <input type="button" name="btn2" value="点击1" onclick="ml()">
23 </div>
24 <!--外部引用-->
25 <div>
26 <input type="button" name="btn3" value="点击3" onclick="m2()">
27 </div>
28 </body>
29 </html>
m2外部引用
1 function m2() {
2 alert("123")
3
4 }
js语法与注释
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>js语法与注释</title>
6 <script type="text/javascript">
7 //注释 /**/
8 /**
9 *
10 **/
11 //如何声明变量
12
13 var s;
14 var s1=1; var s2="abc";var s3=null;
15 var s1l=1,s22="abc",s33=null;
16 </script>
17 </head>
18 <body>
19
20 </body>
21 </html>
数据类型的判断
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>数据类型的判断</title>
6 <script type="text/javascript">
7 //声明一些变量
8 var str="abc";//string
9 var num=123;//number
10 var datc=new Date();//object 复合类
11 var flag=true;//boolean
12 var arr=new Array(4);//数组//typeof（）是js内置常用的方法//一般情况下，在执行过程中取不到的情况下，返回nullvar o;
13 //typeof（）是js内置常用的方法
14 document.write("str "+typeof (str)+"<br>");
15 document.write("num "+typeof (num)+"<br>");
16 document.write("str "+typeof (datc)+"<br>");
17 document.write("num "+typeof (flag)+"<br>");
18 document.write("str "+typeof (arr)+"<br>");
19
20 </script>
21 </head>
22 <body>
23
24 </body>
25 </html>
网页结果
1 str string
2 num number
3 str object
4 num boolean
5 str object
变量和函数的预解析
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>变量和函数的预解析</title>
6 <script type="text/javascript">
7 method();
8 //编译执行的顺序是从上往下
9 alert("num为"+num);
10 var num=123;//number
11 //函数的定义
12 function method() {
13 alert("abc")
14
15 }
16 </script>
17 </head>
18 <body>
19
20 </body>
21 </html>
行间事件调用和提取行间事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>行间事件调用和提取行间事件</title>
6 <script type="text/javascript">
7 //行间事件调用
8 function method1(){
9 alert("测试行间事件调用");
10 }
11 //提取行间事件，然后调用
12 window.onload=function(){
13 var oBtn=document.getElementById("id1");
14 oBtn.onclick=method2;//执行点击事件:调用method2方法
15 function method2() {
16 alert("测试提取行间事件");
17
18 }
19 }
20 </script>
21 </head>
22 <body>
23 <!--提取行间事件，然后调用-->
24 <input type="button" name="btn1" value="点击1" id="id1">
25 </div>
26 <div>
27 <!--行间事件 就是 onclick事件-->
28 <input type="button" name="btn" value="点击"
29 onclick="method1()">
30 </div>
31 <div>
32
33
34 </body>
35 </html>
匿名函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>匿名函数</title>
6 <script type="text/javascript">
7 //匿名函数 ：没有函数名的函数
8 window.onload=function () {
9 var oBtn=document.getElementById("btn1");
10 //匿名函数的好处：是代码更加简洁
11 oBtn.onclick=function(){
12 alert("test");
13 };
14
15 }
16 </script>
17 </head>
18 <body>
19 <div><input type="button" value="点击" id="btn1"></div>
20
21 </body>
22 </html>
有参函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>有参函数</title>
6 <script type="text/javascript">
7 function method(count) {
8 for(var i=0;i<count;i++){
9 document.write("学习js"+"<br>");
10 }
11 }
12 </script>
13 </head>
14 <body>
15 <div><input type="button" value="点击"
16 onclick="method(prompt('请输入次数',''))"></div>
17
18 </body>
19 </html>
条件语句
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>条件语句</title>
6 <script type="text/javascript">
7 //条件语句: if /if-else/ if-else-if/ if的嵌套/ switch
8 /* var a=1;
9 if(a==1){
10 alert("test1");
11 }else if(a==2){
12 alert("test2");
13 }else if(a==3){
14 alert("test3");
15 }*/
16 //switch
17 var a=12;
18 switch(a){
19 case 1:
20 alert("test1");
21 break;
22 case 2:
23 alert("test2");
24 break;
25 case 3:
26 alert("test3");
27 break;
28 default:
29 alert("test4");
30 break;//可写可不写
31 }
32 </script>
33 </head>
34 <body>
35
36 </body>
37 </html>
循环语句
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>循环语句</title>
6 <script type="text/javascript">
7 //while do-while for
8 for (var i=0;i<4;i++){
9 document.write("for输出序号："+(i+1)+"<br>");
10 }
11 /*+++++++++++++++++++++++++++++++*/
12 var j=0;
13 while(j<4){
14 document.write("while输出序号："+(j+1)+"<br>");
15 j++;
16 }
17 /*=====================================*/
18 var k=0;// 0 1 2 3 4取不到
19 do {
20 document.write("do-while输出序号："+(k+1)+"<br>")
21 k++;
22 }while (k<4);//false
23
24 </script>
25 </head>
26 <body>
27
28 </body>
29 </html>
break与continue与return的使用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>break与continue与return的使用</title>
6 <script type="text/javascript">
7 //break : 终止当前循环
8 // 如果有循环嵌套，当前循环是指终止最近的循环
9 for(var j=0;j<4;j++){
10 for(var i=0;i<10;i++){
11 document.write("输出:"+(i+1)+"<br>");
12 if(i==5){
13 break;
14 }
15 }
16 //代码
17 //代码
18 }
19 //代码
20 //代码
21 //continue的使用
22 for(var k=0;k<10;k++){
23 if(k==5){
24 continue;
25 }
26 document.write("输出:"+(k+1)+"<br>");
27 }
28 //return
29 function method() {
30 alert("test1");
31 return;
32 alert("test2");
33 }
34 method();
35 </script>
36 </head>
37 <body>
38
39 </body>
40 </html>
函数return的用法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>函数return的用法</title>
6 <script type="text/javascript">
7 //定义一个有参函数
8 function add(a,b) {
9 var c=a+b;
10 alert("test1"); //会输出
11 return c; //通过return关键字结束函数
12 alert("test2"); //不会输出
13
14 }
15 //之间调用/执行函数
16 var result=add(1,2);
17 alert(result);
18 </script>
19 </head>
20 <body>
21
22 </body>
23 </html>
数组的用法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>数组的用法</title>
6 <script type="text/javascript">
7 //数组的声明和赋值
8 //方法一
9 var arr=new Array(4);
10 arr[0]=1;
11 arr[1]=2;
12 arr[2]=3;
13 arr[3]=4;
14 //方法二
15 var arr1=new Array(1,2,3,4);
16 //方法三
17 var arr2=[1,2,3,4];
18 //数组的常用方法
19 alert("数组arr2的长度为："+arr2.length);
20 //数组中的元素分别是什么
21 alert(arr2[0]);
22 /* alert(arr2[1]);
23 alert(arr2[2]);
24 alert(arr2[3]);*/
25 //将数组元素通过分隔符号连成字符串
26 alert(arr2.join("-"));
27 alert(arr2);
28 //push（）在数组最后位置添加数组元素
29 arr2.push(5);
30 alert("添加元素后输出："+arr2);
31 //pop（）删除数组中的最后一个元素
32 arr2.pop();
33 alert(arr2);
34 // unshift()和shift（） 在数组的头部添加和删除元素
35 arr2.unshift(0);
36 alert(arr2);
37 arr2.shift();
38 alert(arr2);
39 //将数组反转
40 arr2.reverse();
41 alert(arr2);
42 //如何知道数组元素对应的下标（索引值）
43 alert(arr2.indexOf(2));
44 //splice() 从索引为2开始（包含2），删除一个元素，添加 7，8，9
45 arr2.splice(2,1,7,8,9);
46 alert(arr2);
47
48
49 </script>
50 </head>
51 <body>
52
53 </body>
54 </html>
window对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>window对象</title>
6 <script type="text/javascript">
7 function location1() {
8 //打开一个网页,此网页覆盖最初的网页
9 window.location="01.html";
10 }
11 //打开新的网页
12 function open1() {
13 window.open("01.html");
14 }
15 //关闭当前网页
16 function close1() {
17 window.close();
18 }
19 //window常用的方法 confirm() 确认框
20 function confirm1() {
21 var flag=window.confirm("你确定要删除此消息吗？");//返回 boolean类型
22 if(flag==true){
23 alert("删除成功");
24 }else{
25 alert("删除取消");
26 }
27 }
28 </script>
29 </head>
30 <body>
31 <div><input type="button" onclick="location1()" value="location按钮测试"></div>
32 <div><input type="button" onclick="window.location='01.html'" value="location按钮测试1"></div>
33
34 <div><input type="button" onclick="open1()" value="open按钮测试"></div>
35 <div><input type="button" onclick="window.open('01.html')" value="open按钮测试1"></div>
36
37 <div><input type="button" onclick="close1()" value="close按钮测试"></div>
38 <div><input type="button" onclick="window.close()" value="close按钮测试1"></div>
39
40 <div><input type="button" onclick="confirm1()" value="confirm按钮测试"></div>
41
42
43
44
45 </body>
46 </html>
setTimeout函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>setTimeout函数</title>
6 <script type="text/javascript">
7 //setTimeout函数 ，设置一定时间（毫秒为单位）后调用某个函数
8 function timer() {
9 setTimeout("alert1()",3000);
10 }
11
12 function alert1() {
13 alert('3秒后输出警示框');
14 }
15 </script>
16 </head>
17 <body>
18 <!-- 编写一个按钮，点击按钮，调用函数-->
19 <div><input type="button" value="定时器" onclick="timer()"></div>
20 </body>
21 </html>
实现时钟的特效
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>实现时钟的特效</title>
6 <script type="text/javascript">
7 function myClock() {
8 var now=new Date();
9 var str= "现在是："+now.getHours()+"时"+now.getMinutes()+"分"+now.getSeconds()+"秒";
10 document.getElementById("id1").innerHTML=str;
11 }
12 var intervalId;
13 //表示 每一秒钟调用一次此函数
14 function start() {
15 intervalId=setInterval("myClock()",1000);
16 }
17 //让时钟暂停
18 function stop() {
19 clearInterval(intervalId);
20 }
21 </script>
22 </head>
23 <body>
24 <div><input type="button" value="start" onclick="start()"></div>
25 <div><input type="button" value="stop" onclick="stop()"></div>
26
27 <div id="id1"></div>
28 </body>
29 </html>
document对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document对象</title>
6 <script type="text/javascript">
7 //获得html中id="div1" 的对象
8 window.onload=function () {
9 var oDiv=document.getElementById("div1");
10 alert(oDiv.innerHTML);
11 }
12
13 </script>
14 </head>
15 <body>
16 <div id="div1">这是一个div元素</div>
17
18 </body>
19 </html>
document操作属性（读取和写入）</
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <link href="css1.css" rel="stylesheet" type="text/css">
5 <meta charset="UTF-8">
6 <title>document操作属性（读取和写入）</title>
7 <script type="text/javascript">
8 window.onload=function () {
9 var oInput=document.getElementById("input1");
10 //通过属性名，读取到属性值
11 var text1=oInput.type;
12 var name1=oInput.name;
13 var class1=oInput.className;
14 var value1=oInput.value;
15 //如何时document对象实现这样的样式设计：style="color:red;font-size: 50px
16 var oA=document.getElementById("link1");
17 oA.style.color="red";
18 var oInput2=document.getElementById("input2");
19 var value2=oInput2.value;
20 oA.style[value2]=value1;
21 //属性的写入
22 // oA.style.fontSize=value1;
23 }
24 </script>
25 </head>
26 <body>
27 <div>
28 <input type="text" class="className" name="setsize" id="input1" value="50px">
29 <input type="text" class="className" name="setsize" id="input2" value="fontSize">
30 <input type="text" class="className" name="setsize" id="input3" value="color">
31 <a href="http://www.baidu.com" id="link1" >百度</a>
32 <div>html内容</div>
33
34 </div>
35 </body>
36 </html>
innerHTML和innerText的区别
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>innerHTML和innerText的区别</title>
6 <script type="text/javascript">
7 window.onload=function () {
8 var oDiv=document.getElementById("div1");
9 //读取到标签对中间的内容
10 //innerHTML可以识别标签，而innerText不能
11 var str= oDiv.innerHTML;
12 alert(str);
13 /* var str1=oDiv.innerText;
14 alert(str1);*/
15
16 //如何写入
17 var oDiv2=document.getElementById("div2");
18 oDiv2.innerText="<a href='http://www.baidu.com'>点击</a>";
19 }
20 </script>
21 </head>
22 <body>
23 <div id="div1"><h1>这是一个div元素</h1></div>
24 <div id="div2"></div>
25 </body>
26 </html>
dom模型的其他方法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>dom模型的其他方法</title>
6 <script type="text/javascript">
7 function changeBookName() {
8 //getElementsByName(),返回的是一个对象数组，数组内只有一个对象元素
9 var newBookNames=document.getElementsByName("addBookName");
10 document.getElementById("book").innerHTML=newBookNames[0].value;
11 }
12
13 function outputSeason() {
14 //getElementsByName(),返回的是一个对象数组，数组内有4个对象元素
15 var seasons=document.getElementsByName("season");
16 var str="";
17 //数组遍历，for遍历
18 for(var i=0;i<seasons.length;i++){
19 //累加
20 str+=seasons[i].value+" ";
21
22 }
23 document.getElementById("outputSeason").innerHTML=str;
24
25 }
26 function outputZM() {
27 //getElementsByTagName(),返回的是对象数组
28 var zms=document.getElementsByTagName("p");
29 var str="";
30 for(var i=0;i<zms.length;i++){
31 //累加
32 str+= zms[i].innerHTML+" ";
33 }
34 document.getElementById("div1").innerHTML =str;
35 }
36 function clearAll() {
37 document.write("");
38 }
39 </script>
40 </head>
41 <body>
42 <div id="book">java编程思想</div>
43 <div><input name="addBookName" type="text" value=""></div>
44 <div><input type="button" value="改变书名" onclick="changeBookName()"></div>
45
46 <div>
47 <input type="text" name="season" value="春">
48 <input type="text" name="season" value="夏">
49 <input type="text" name="season" value="秋">
50 <input type="text" name="season" value="冬">
51 </div>
52 <div id="outputSeason"></div>
53 <div><input type="button" value="输出四季" onclick="outputSeason()"></div>
54
55 <div>
56 <p>a</p>
57 <p>b</p>
58 <p>c</p>
59 <p>d</p>
60 </div>
61 <div id="div1"></div>
62 <div><input type="button" value="输出字母" onclick="outputZM()"></div>
63
64 <div><input type="button" value="清空所有内容" onclick="clearAll()"></div>
65 </body>
66 </html>
1 Html（表现的结构）
2 CSS（表现的样式）
3 JavaScript（表现的是一种行为）
4 运行在浏览器上的一种基于对象和事件驱动的脚本语言。
5 基于对象（window --document location history）,便于调用
6 对象的属性和方法。
7 事件驱动
8 键盘和鼠标与浏览器的互动（键盘在输入框输入文字/ 鼠标的点击等）
9 js的特点
10 向html页面添加交互行为
11 脚本语言，语法与java类似
12 解释性语言，一边执行一边解释
13 js的模型
14 BOM模型
15 browser object model 是指浏览器对象模型，提供操作浏览器的一些方法
16 window
17 document
18 location
19 history
20 window的常用方法和属性
21 location
22 open()
23 close()
24 confirm()
25 alert()
26 prompt()
27 setTimeout()
28 setInterval()
29 document的常用方法和属性
30 write()
31 getElementById()
32 getElementsByTagName() 返回是一个对象数组
33 getElementsByName() 返回的是一个对象数组
34 innerHTML 读取的<>这里的内容<>
35 DOM模型
36 document object model 是指文档对象模型，提供操作html和css的一些方法。
37
39
40
小菜鸟之HTML第二课的更多相关文章
- 小菜鸟之HTML第一课
web项目 前端网页web(人体结构) HTML负责前端网页结构 Css负责网页样式 css引入 内联样式引入 内部样式 外部样式 三种基本引入器 id选择器 类选择器 标签选择器 <!DOCT ...
- OpenCV 第二课 认识图像的存储结构
OpenCV 第二课 认识图像的存储结构 Mat Mat 类包含两部分,矩阵头和矩阵体.矩阵头包含矩阵的大小,存储方式和矩阵体存储空间的指针.因此,Mat中矩阵头的大小是固定的,矩阵体大小是不定的. ...
- Kali Linux Web 渗透测试视频教程— 第二课 google hack 实战
Kali Linux Web 渗透测试— 第二课 代理简介 文/玄魂 课程地址: http://edu.51cto.com/course/course_id-1887.html 目录 shellKal ...
- 【Linux探索之旅】第二部分第二课：命令行，世界尽在掌握
内容简介 1.第二部分第二课:命令行,世界尽在掌握 2.第二部分第三课预告:文件和目录,组织不会亏待你 命令行,世界尽在掌握 今天的标题是不是有点霸气侧漏呢? 读者:“小编,你为什么每次都要起这么非主 ...
- 【Web探索之旅】第三部分第二课：IP地址和域名
内容简介 1.第三部分第二课:IP地址和域名 2.第三部分第三课预告:协议 第三部分第二课:IP地址和域名 上一课我们说了在Web之中,全球各地有无数台机器,有些充当客户机,有些作为服务器. 那么这些 ...
- 【Web探索之旅】第二部分第二课：服务器语言
内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...
- 【C++探索之旅】第一部分第二课：C++编程的必要软件
内容简介 1.第一部分第二课:C++编程的必要软件 2.第一部分第三课预告:第一个C++程序 C++编程的必要软件 经过上一课之后,大家是不是摩拳擦掌,准备大干一场了呢. 这一课我们来做一些C++开发 ...
- 【Linux探索之旅】第一部分第二课：下载Linux，免费的噢
内容简介 1.第一部分第二课:下载Linux,免费的噢 2.第一部分第三课预告:测试并安装Ubuntu 下载Linux,免费的噢 大家好,上一课我们认识了非常“霸气侧漏”的Linux操作系统. 也知道 ...
- 【C语言探索之旅】 第三部分第二课：SDL开发游戏之创建窗口和画布
内容简介 1.第三部分第二课: SDL开发游戏之创建窗口和画布 2.第三部分第三课预告: SDL开发游戏之显示图像 第三部分第二课:SDL开发游戏之创建窗口和画布 在上一课中,我们对SDL这个开源库做 ...
随机推荐
- php+上传超大文件
demo下载:http://t.cn/Ai9p3CKQ 教程:http://t.cn/Aipg9uUK 一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是up ...
- 【luoguP1182】数列分段 Section II
题目描述 对于给定的一个长度为N的正整数数列A-i,现要将其分成M(M≤N)段,并要求每段连续,且每段和的最大值最小. 关于最大值最小: 例如一数列4 2 4 5 1要分成3段 将其如下分段: [4 ...
- 用matlab脚本语言写M文件函数时用三种方法简单实现实现DFT（离散傅里叶变换）
%用二重循环实现DFT: function xk=dt_0(xn); %define a function N=length(xn); %caculate the length of the vari ...
- python sqlite3查询表记录
1.查询数据库log_info表最后10条记录. desc - 指"降序" 解决的方法是:按照ID 逆序排列,选取前10个 select * from 'log_info' ord ...
- JavaScript设计模式—适配器模式
适配器模式介绍 旧接口格式和使用者不兼容,中间加一个适配器转换接口 在生活中,我们有许多的适配器,例如iPhone7以后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的 lightning接口.许多 ...
- shell编程之 （）[] {}
shell脚本中各种括号的区别以及用法 2018年08月19日 14:55:33 M_QiJunChao 阅读数:273 最近学到了shell脚本编程,觉得脚本中的不同括号有不同的用处,以及有些括 ...
- L1-049 天梯赛座位分配 (20 分)
L1-049 天梯赛座位分配 (20 分)(Java解法) 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所 ...
- 基于角色的权限控制系统（role-based access control）
role-based access control(rbac),指对于不同角色的用户,拥有不同的权限 .用户对应一个角色,一个角色拥有若干权限,形成用户-角色-权限的关系,如下图所示.当一个用户进行访 ...
- 数据分析 - matpltlib 模块
matplotlib 模块 引入模块 import matplotlib.pyplot as plt 设置图片大小 - figure 展示图片 - show 画图 - 实例化后指定类型画图 plot ...
- 深度学习之DCGAN
1.知识点 """ DCGAN:相比GAN而言,使用了卷积网络替代全连接 卷积:256*256*3 --- > 28*28*14 -->结果 ,即H,W变小, ...