01_Web开发
学习目标：

简单了解应用程序开发的分类：桌面应用程序和 Web 应用程序

1.1 桌面应用程序开发
桌面应用程序开发，是一种比较基本的传统的软件开发方式，是基于 C/S 架构模式的软件体系。我们比较熟悉的一些软件，如：QQ、微信、浏览器以及一些单机版游戏等，需要通过软件包安装的方式集成到我们的操作系统中，这些都属于桌面应用体系范畴。桌面应用程序使用到的开发语言主要有：C、C++、Java、C#等。在桌面应用程序开发过程中，我们常常需要考虑的是语言的跨平台性以及软件的多平台支持，比如常见的操作平台windows、Linux、MacOS。我们开发一款桌面应用软件，一般需要考虑对这几类操作系统的支持。

1.2 Web应用程序开发
web应用程序开发主要是建立在 B/S 架构模式下，衍生出来的一系列web应用程序，即主要是基于浏览器的应用程序开发，比如淘宝、腾讯、京东网等。Web开发在近年来，随着本身技术的突破以及移动设备的普及，基于Web领域的开发，也出现了明确的岗位职责分工，一个Web互联网产品中，基本上会分为：Web UI设计、Web前端开发以及Web后端开发。
1.2.1 Web前端开发

Web前端开发用到的编程语言主要有javascript，以及伴随有标记性文本语言html和样式渲染方式css。以及近年来衍生出来的一批优秀Web前端框架，比如：vue、react等，使Web前端在应用构建方面的效率得到显著提升。另外nodejs的出现，越来越多的Web前端开发人员开始走入服务端编程领域，甚至在一些项目中扮演着Web全栈开发的角色。
1.2.2 Web后端开发

Web后端开发，主要用到的语言有java、python、php等，当然随着nodeJs的兴起，也成为近年来服务端开发的另一种选择，当前nodeJs更多的是面向Web前端开发人员。

02_HTML基础

本章节学习目标
能够知道html的作用
能够安装和卸载 vscode 的插件
能够设置 vscode 的颜色主题和字体大小
能够知道单标签和双标签的区别
能够知道相对路径和绝对路径的区别
无序列表标签(ul标签)
有序列表标签(ol标签)

本章节常用单词
auto 自动
body 主体，一个HTML 标记
button 按钮
head头部
meta元信息
title标题
browser 浏览器

2.1 html 的介绍
学习目标

能够知道html的作用

2.1.1 网页效果图 -- 京东首页

2.1.2 html的定义
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。

标记：就是标签, <标签名称> , 比如: 、等，标签大多数都是成对出现的。

所谓超文本，有两层含义:

(1) 因为除了普通文本，网页中还可以包含图片、视频、音频等内容(超越文本限制)

(2) 它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

2.1.3 html的作用
html是用来开发网页的，它是开发网页的语言。

2.2 html 的基本结构
学习目标

能够写出html的基本结构

2.2.1 结构代码

第一行是文档声明，用来指定页面所使用的html的版本，这里声明的是一个html5的文档。
...标签是开发人员在告诉浏览器，整个网页是从这里开始的，到结束，也就是html文档的开始和结束标签。
...标签用于定义文档的头部，是负责对网页进行设置标题、编码格式以及引入css和js文件的。
...标签是编写网页上显示的内容。

2.2.2 浏览网页文件
网页文件的后缀是.html或者.htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。
2.2.3 html基本结构

注意：html 页面结构上方通常还有文档声明

2.3vscode 的基本使用
学习目标

能够安装和卸载 vscode 的插件
能够设置 vscode 的颜色主题和字体大小

2.3.1 vscode 的基本介绍
全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。

2.3.2 vscode 的安装
下载网址: Download Visual Studio Code - Mac, Linux, Windows
选择对应的安装包进行下载:

根据下载的安装包双击进行安装即可，当然为了更好的使用 vscode 还可以安装对应的插件。
2.3.3 vscode 的插件安装
插件名说明
Chinese (Simplified) Language Pack for VS Code 中文(简体)汉化包
open in browser 右击在浏览器打开html

(1) 汉化插件安装

(2) open in browser插件安装

(3) 注意: 如果在vscode打开的html文档中右击没有出现 open in browser 类型的选项，需要把当前打开的文件关掉，重新打开这个文件就好了。

插件名	说明
Chinese (Simplified) Language Pack for VS Code	中文(简体)汉化包
open in browser	右击在浏览器打开html

2.3.4 vscode 的插件卸载
点击对应安装的插件，然后再点击卸载按钮即可。

2.3.5 vscode 的使用
(1) 打开文件夹创建文件

(2) 快速创建html文档的基本结构

(3) 右击在浏览器打开html文档

2.3.6 设置字体大小

2.3.7 设置颜色主题

2.3.8 设置默认浏览器[可选]
(1) 可以根据自己的需要设置默认使用的浏览器

谷歌浏览器: chrome

2.3.9 设置自动保存代码[必选]

VSCode默认不会自动保存代码, 所以当编写完代码运行在浏览器时, 网页不会有变化. 因此, 需要勾选自动保存

2.4 初识常用的 html 标签
学习目标

能够知道单标签和双标签的区别

2.4.1 常用的 html 标签

一级标题二级标题这是一个div标签这是一个div标签

这是一个段落标签

百度网百度网

提示:

标签不区分大小写，但是推荐使用小写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容，比如: img标签

2.5 资源路径

学习目标

能够知道相对路径和绝对路径的区别

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

2.5.1 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

2.5.2 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

2.6 列表标签
学习目标

能够知道列表标签的种类

2.6.1 列表标签的种类
无序列表标签(ul标签)
有序列表标签(ol标签)

2.6.2 无序列表

 
 
     列表标题1
     列表标题2
     列表标题3

2.6.3 有序列表

 
 
     列表标题1
     列表标题2
     列表标题3

03_CSS基础本章节学习目标
能够知道 css 的作用
能够知道 css 的引入三种方式
能够说出 css 选择器的种类
能够知道常用的样式属性
本章节常用单词
style样式
type类型
href 网址路径

3.1 css 的介绍
学习目标

能够知道css的作用

3.1.1 css 的定义

css(Cascading Style Sheet)层叠样式表，它是用来美化 html 页面的一种语言。

没有使用css的效果图

使用css的效果图

3.1.2 css 的作用
美化 html 页面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
控制 html 页面布局, 比如: 设置浮动、定位等样式。

3.1.3 css 的基本语法

选择器 {
    样式规则
}

样式规则：
    属性名1: 属性值1;
    属性名2: 属性值2;
    属性名3: 属性值3;
    ...

选择器：是用来选择标签的，选出来以后给标签加样式。

代码示例：

div {
    width: 100px; 
    height: 100px; 
    background: gold; 
}

说明

css 是由两个主要的部分构成：选择器和一条或多条样式规则，注意:样式规则需要放到大括号里面。

3.2 css 的引入方式
学习目标

能够知道 css 的引入三种方式

css的三种引入方式

行内式
内嵌式（内部样式）
外链式

3.2.1 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

hello

优点：方便、直观。

缺点：缺乏可重用性。

3.2.2 内嵌式（内部样式）

在标签内加入标签，在标签中编写css代码。

示例代码:


    ...
    
    
        h3 {
            color: red;
        }

优点：在同一个页面内部便于复用和维护。

缺点：在多个页面之间的可重用性不够高。

3.2.3 外链式

将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中。

示例代码:

main.css：

a {
    color: green;
    font-size: 20px;
}

...

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。

缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

3.2.4 css引入方式选择

行内式几乎不用
内嵌式在学习css样式的阶段使用
外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

完整代码：




    
    
    
    document
    
    
        h3 {
            color: red;
        }
    
    
    


    
    hello

    三级标题

    百度网

3.3 css 选择器
学习目标

能够说出 css 选择器的种类

3.3.1 css 选择器的定义
css 选择器是用来选择标签的，选出来以后给标签加样式。

3.3.2 css 选择器的种类
标签选择器
类选择器
id选择器

3.3.3 标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码




    
    
    
    document
    
        
        p {
            color: red;
        }
    


    这是一个段落
    这是一个段落
    这是一个div

3.3.4 类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码




    
    
    
    document
    
        
        .blue {
            color: blue;
        }
        .big {
            font-size: 20px;
        }
        .box {
            width: 150px;
            height: 150px;
            background: gold;
        }
    


    这是一个段落
    这是一个段落
    这是一个div

3.3.5 id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用。

示例代码




    
    
    
    document
    
        
        #msg {
            background: green;
        }
    


    这是一个段落
    这是一个段落
    这是一个div

注意点: 虽然给其它标签设置id="box"也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

04_Javascript 本章节学习目标
能够知道Javascript的作用
能够知道Javascript的使用方式
能够说出常用的数据类型
能够知道函数的定义和调用方式
能够知道 2种循环语句
能够知道字符串拼接的操作
能够知道json的格式
本章节常用单词
alert 提醒，警示
Array数组
length 长度
result 结果
append 附加，增补

4.1 Javascript的介绍
学习目标

能够知道Javascript的作用

4.1.1 Javascript的定义
Javascript是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称js.

它能够让网页和用户有交互功能, 增加良好的用户体验效果。

前端开发三大块

(1) HTML：负责网页结构

(2) CSS：负责网页样式

(3) Javascript：负责网页行为，比如:网页与用户的交互效果

4.2 Javascript的使用方式
学习目标

能够知道Javascript的使用方式

4.2.1 行内式（主要用于事件）

4.2.2 内嵌式

4.2.3 外链式

index.js：

// 外链式js
alert('外链式js!');

4.3 变量和数据类型
学习目标

能够说出常用的数据类型

4.3.1 定义变量

Javascript 是一种弱类型语言，也就是说不需要指定变量的类型，Javascript的变量类型由它的值来决定，定义变量需要用关键字 'var', 一条Javascript语句应该以“;”结尾

定义变量的语法格式:

var 变量名 = 值;

var iNum = 123;
var str = 'smart';

//同时定义多个变量可以用","隔开，公用一个 var 关键字
var a = 1, b = 2, c = 3;

4.3.2 Javascript注释

Javascript的注释分为单行注释(//注释内容)和多行注释()

4.3.3 数据类型

js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。

4种基本数据类型：

number 数字类型
string 字符串类型
boolean 布尔类型 true 或 false
undefined undefined类型，变量声明未初始化，它的值就是undefined

1种复合类型：

object 后面学习的Javascript对象属于复合类型
null 表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null

//1.1 数字 number
var num = 10.1;

//1.2 字符串 string
var str = '1234';

//1.3 布尔 boolean; 
var isTrue = false;

//1.4 未定义 undefined
var unData;

//1.5 null 表示空对象
var nullData = null;

//1.6 object 表示对象类型
var obj = {
   name: "隔壁老王",
   age: 38
}
// 获取变量的类型
typeof(obj)
// 获取对象的name属性
obj.name
// 获取对象的age属性
obj.age

4.3.4 变量命名规范

由数字、字母、下划线、美元符组成，不能以数字开头

变量名区分大小写

4.4 函数定义和调用
学习目标

能够知道函数的定义和调用方式

4.4.1 函数定义和调用

函数就是可以重复使用的代码块, 使用关键字 function 定义函数。

函数调用就是函数名加小括号，比如:函数名(参数[参数可选])

4.4.2 匿名函数

函数可以没有名字, 使用匿名函数表达式。将匿名函数，赋值给一个变量。

4.4.3 定义有参数有返回值的函数

定义函数时，函数如果有参数，参数放到小括号里面，函数如果有返回值，返回值通过 return 关键字来返回

函数中 return 关键字的作用:
(1) 返回函数中的值
(2) 执行完 return 函数即执行结束

4.5 数组及操作方法
学习目标

能够说出数组的定义和取值语法

4.5.1 数组的介绍
数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。

4.5.2 数组的定义

// 创建数组方式1
var aList = [1, 2, 3, 4];

// 创建数组方式2：实例化对象方式
var aList2 = new Array(1, 2, 3, 'smart');

4.5.3 数组的操作

(1) 获取数组的长度

var aList = [1, 2, 3, 4];
// 获取数组的长度
alert(aList.length); // 弹出4

(2) 根据下标取值

var aList = [1, 2, 3, 4];
// 根据下标取值
alert(aList[0]); // 弹出1

4.6 循环语句
学习目标

能够知道2种循环语句

4.6.1 循环语句的介绍
循环语句就是让一部分代码重复执行，javascript中常用的循环语句有:

for
while

4.6.2 for循环

var aList = [1, 3, 5];

// for 循环遍历数组元素
for (var i=0; i

4.6.3 while循环

var aList = [1, 3, 5];        
var i = 0;

// while 循环遍历数组元素
while (i < aList.length) {
    var result = aList[i];
    alert(result);
    i++;
}

说明:

当条件成立的时候, while语句会循环执行

4.7 字符串拼接
学习目标

能够知道字符串拼接的操作

4.7.1 字符串拼接

字符串拼接使用: "+" 运算符

var num1 = 10;
var str1 = 'abc';
var str2 = 'def';

var result = str1 + str2;
alert(result); // 弹出abcdef

result = num1 + str1;
alert(result); // 弹出10abc

说明

数字和字符串拼接会自动进行类型转换(隐式类型转换)，把数字类型转成字符串类型进行拼接

4.8 Javascript对象
学习目标

能够知道Javascript对象有两种创建方式

4.8.1 Javascript对象的介绍
Javascript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，Javascript 允许自定义对象，对象可以拥有属性和方法。

4.8.2 Javascript创建对象操作

创建自定义javascript对象有两种方式:

通过顶级Object类型来实例化一个对象
通过对象字面量创建一个对象

Object类创建对象的示例代码:

对象字面量创建对象的示例代码:

说明:

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

4.9 json
学习目标

能够知道json的格式

4.9.1 json的介绍
json是 Javascript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

4.9.2 json的格式

json有两种格式：

对象格式
数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据:

'{"name":"tom","age":18}'

格式说明:

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的json数据:

'["tom",18,"programmer"]'

实际开发的json格式比较复杂,例如:

'{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}'

4.9.3 json数据转换成Javascript对象

json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为Javascript对象。

示例代码:

05_Jquery 本章节学习目标
能够知道jQuery的作用及优点
能够知道jQuery的引入方式
能够说出两种jQuery入口函数的写法
能够使用jQuery选择器获取标签元素
能够知道获取和设置元素内容的操作
能够知道获取和设置元素属性的操作
能够说出两个常用的jQuery事件
能够知道ajax的作用
能够结合所学知识,通过Ajax请求天气数据接口,实现天气页面的动态刷新
本章节常用单词
person 人，个人
name 名字
age 年龄

5.1 jQuery的介绍
学习目标

能够知道jQuery的作用及优点

5.1.1 jQuery的定义
jQuery是对Javascript的封装，它是免费、开源的Javascript函数库，jQuery 极大地简化了 Javascript 编程。

5.1.2 jQuery的作用
jQuery和Javascript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了Javascript编程，jQuery实现交互效果更简单。

5.1.3 jQuery的优点
jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
jQuery简化了 Javascript 编程，代码编写更加简单。

5.2 jQuery的用法
学习目标

能够知道jQuery的引入方式
能够说出两种jQuery入口函数的写法

5.2.1 jQuery的引入

 # 本地引入
 # 线上引入

5.2.2 jQuery的入口函数

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

入口函数示例代码:




这是一个div

入口函数的简写示例代码:




这是一个div

5.3 jQuery选择器
学习目标

能够使用jQuery选择器获取标签元素

5.3.1 jQuery选择器的介绍
jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

5.3.2 jQuery选择器的种类

标签选择器
类选择器
id选择器

示例代码:

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签

说明:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

$(function(){
    var result = $("div").length;
    alert(result);
});

5.4 获取和设置元素内容
学习目标

能够知道获取和设置元素内容的操作

5.4.1 html方法的使用

jquery中的html方法可以获取和设置标签的html内容

示例代码:

hello

说明:

给指定标签追加html内容使用append方法

5.5 获取和设置元素属性
学习目标

能够知道获取和设置元素属性的操作

5.5.1 prop方法的使用

设置标签的属性可以使用prop方法。

示例代码:




    
    
    
    document
    
    
        .a01 {
            color: red;
        }
    
    


    这是一个链接

说明: 获取value属性和设置value属性还可以通过val方法来完成。

5.6 jQuery事件
学习目标

能够说出两个常用的jQuery事件

5.6.1 常用事件

onload() 页面加载完成
click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点

示例代码:


    
    
    
    document

说明:

this指的是当前发生事件的对象，但是它是一个原生js对象
$(this) 指的是当前发生事件的jquery对象

5.7 ajax异步请求
学习目标

能够知道ajax的作用

5.7.1 ajax的介绍
ajax 是 Asynchronous Javascript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台服务器通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台服务器数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

5.7.2 ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

使用前, 先在 API Shop，专业的数据交易平台 | API免费调用，行业数据下载，数据定制注册账号, 在控制台获得APIKEY
使用时, 需更换自己的APIKEY进行测试使用

示例代码:

ajax方法的参数说明:

(1) url 请求地址

(2) type 请求方式，默认是'GET'，常用的还有'POST'

(3) dataType 设置服务器返回的数据格式，常用的是'json'格式

(4) data 设置发送给服务器的数据，没有参数不需要设置

(5) success 设置请求成功后的回调函数

(6) error 设置请求失败后的回调函数

(7) async 设置是否异步，默认值是'true'，表示异步，一般不用写

(8) 同步和异步说明

a. 同步是必须等待一个 ajax 请求完成之后，代码才能继续向下执行

b. 异步是指代码的执行不必等待一个 ajax 请求完成

5.7.3 ajax简写方式

$.ajax按照请求方式可以简写成$.get或者$.post方式

$.get和$.post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

(1) url 请求地址

(2) data 设置发送给服务器的数据，没有参数不需要设置

(3) success 设置请求成功后的回调函数

a. data 请求的结果数据

b. status 请求的状态信息, 比如: "success"

c. xhr 底层发送http请求XMLHttpRequest对象

(4) dataType 设置返回的数据格式, 如果设置了dataType为JSON, 则会将JSON字符串自动转换为JS对象类型.

a. "xml"

b. "html"

c. "text"

d. "json"

(5) error 表示错误异常处理

func 错误异常回调函数

5.8 前端开发综合练习

学习目标

能够结合所学知识，通过Ajax请求天气数据接口，实现天气页面的动态刷新

5.8.1 数据接口： https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=3bHuMQ58fc3165eac0273bb4ab3925d90e9a37700099738&area=上海 5.8.2 请求数据格式效果

5.8.3 关键字说明

{
    "statusCode":"000000",
    "desc":"请求成功",
    "result":{
        "area":"上海",//地区名称
        "areaid":"101280101", //地区ID
        "dayList":[
            {
                "area":"上海",//地区名称
                "areaid":"310000",//地区ID
                "day_air_temperature":"29", //日平均温度
                "day_weather":"小雨",//天气状况
                "day_weather_code":"07",//天气状况编码
                "day_weather_pic":"http://app1.showapi.com/weather/icon/day/07.png", //天气状况示例图片
                "day_wind_direction":"东北风",//风向
                "day_wind_power":"0-3级",//风力
                "daytime":"20210816",//日期
                "night_air_temperature":"25",//晚间温度
                "night_weather":"阴",//晚间天气状况
                "night_weather_code":"02", //晚间天气状态编码
                "night_weather_pic":"http://app1.showapi.com/weather/icon/night/02.png",//晚间天气状况示例图
                "night_wind_direction":"3-4级"//晚间风向
            }
        ],
        "ret_code":0
    }
}

5.8.4 页面效果

5.8.5 代码




    
    
    
    document
    
    
    
        
        input {
            font-size: 20px;
        }
        
        .red {
            color: red;
        }
        
        #city {
            background:oldlace;
        }

2021-10-19大数据学习日志——数据埋点+网络爬虫——前端开发入门

01_Web开发 学习目标： 简单了解应用程序开发的分类：桌面应用程序和 Web 应用程序

02_HTML基础

本章节学习目标 能够知道html的作用能够安装和卸载 vscode 的插件能够设置 vscode 的颜色主题和字体大小能够知道单标签和双标签的区别能够知道相对路径和绝对路径的区别无序列表标签(ul标签)有序列表标签(ol标签)

本章节常用单词 auto 自动body 主体，一个HTML 标记button 按钮head头部meta元信息title标题browser 浏览器

2.1 html 的介绍 学习目标 能够知道html的作用

2.1.1 网页效果图 -- 京东首页

2.1.3 html的作用 html是用来开发网页的，它是开发网页的语言。

2.2 html 的基本结构 学习目标 能够写出html的基本结构

2.3vscode 的基本使用 学习目标 能够安装和卸载 vscode 的插件能够设置 vscode 的颜色主题和字体大小

2.3.1 vscode 的基本介绍 全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。

2.3.4 vscode 的插件卸载 点击对应安装的插件，然后再点击卸载按钮即可。

2.3.5 vscode 的使用 (1) 打开文件夹创建文件 (2) 快速创建html文档的基本结构 (3) 右击在浏览器打开html文档 2.3.6 设置字体大小

2.3.7 设置颜色主题 2.3.8 设置默认浏览器[可选] (1) 可以根据自己的需要设置默认使用的浏览器 谷歌浏览器: chrome

2.3.9 设置自动保存代码[必选] VSCode默认不会自动保存代码, 所以当编写完代码运行在浏览器时, 网页不会有变化. 因此, 需要勾选自动保存

2.4 初识常用的 html 标签 学习目标 能够知道单标签和双标签的区别

2.5 资源路径 学习目标 能够知道相对路径和绝对路径的区别 当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如: 这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

2.5.1 相对路径 从当前操作 html 的文档所在目录算起的路径叫做相对路径 示例代码:

2.5.2 绝对路径 从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/ 示例代码: 提示: 一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

2.6 列表标签 学习目标 能够知道列表标签的种类

2.6.1 列表标签的种类 无序列表标签(ul标签)有序列表标签(ol标签)

2.6.2 无序列表 列表标题1 列表标题2 列表标题3

2.6.3 有序列表 列表标题1 列表标题2 列表标题3

03_CSS基础 本章节学习目标 能够知道 css 的作用能够知道 css 的引入三种方式能够说出 css 选择器的种类能够知道常用的样式属性 本章节常用单词 style样式type类型href 网址路径

3.1 css 的介绍 学习目标 能够知道css的作用

3.1.1 css 的定义 css(Cascading Style Sheet)层叠样式表，它是用来美化 html 页面的一种语言。 没有使用css的效果图 使用css的效果图

3.1.2 css 的作用 美化 html 页面, 比如: 设置标签文字大小、颜色、字体加粗等样式。控制 html 页面布局, 比如: 设置浮动、定位等样式。

3.2 css 的引入方式 学习目标 能够知道 css 的引入三种方式 css的三种引入方式 行内式内嵌式（内部样式）外链式

3.2.1 行内式 直接在标签的 style 属性中添加 css 样式 示例代码: hello 优点：方便、直观。 缺点：缺乏可重用性。

3.2.2 内嵌式（内部样式） 在标签内加入标签，在标签中编写css代码。 示例代码: ... h3 { color: red; } 优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。

3.2.4 css引入方式选择 行内式几乎不用内嵌式在学习css样式的阶段使用外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。 完整代码： document h3 { color: red; } hello 三级标题 百度网

3.3 css 选择器 学习目标 能够说出 css 选择器的种类

3.3.1 css 选择器的定义 css 选择器是用来选择标签的，选出来以后给标签加样式。

3.3.2 css 选择器的种类 标签选择器类选择器id选择器

4.1 Javascript的介绍 学习目标 能够知道Javascript的作用

4.2 Javascript的使用方式 学习目标 能够知道Javascript的使用方式

4.2.1 行内式（主要用于事件） 4.2.2 内嵌式 alert('内嵌式js!'); 4.2.3 外链式 index.js： // 外链式js alert('外链式js!');

4.3 变量和数据类型 学习目标 能够说出常用的数据类型

4.3.4 变量命名规范 由数字、字母、下划线、美元符组成，不能以数字开头 变量名区分大小写

4.4 函数定义和调用 学习目标 能够知道函数的定义和调用方式

4.5 数组及操作方法 学习目标 能够说出数组的定义和取值语法

4.5.1 数组的介绍 数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。

4.5.2 数组的定义 // 创建数组方式1 var aList = [1, 2, 3, 4]; // 创建数组方式2：实例化对象方式 var aList2 = new Array(1, 2, 3, 'smart');

4.5.3 数组的操作 (1) 获取数组的长度 var aList = [1, 2, 3, 4]; // 获取数组的长度 alert(aList.length); // 弹出4 (2) 根据下标取值 var aList = [1, 2, 3, 4]; // 根据下标取值 alert(aList[0]); // 弹出1

4.6 循环语句 学习目标 能够知道2种循环语句

4.6.1 循环语句的介绍 循环语句就是让一部分代码重复执行，javascript中常用的循环语句有: forwhile

4.6.2 for循环 var aList = [1, 3, 5]; // for 循环遍历数组元素 for (var i=0; i

4.6.3 while循环 var aList = [1, 3, 5]; var i = 0; // while 循环遍历数组元素 while (i < aList.length) { var result = aList[i]; alert(result); i++; } 说明: 当条件成立的时候, while语句会循环执行

4.7 字符串拼接 学习目标 能够知道字符串拼接的操作

4.8 Javascript对象 学习目标 能够知道Javascript对象有两种创建方式

4.8.1 Javascript对象的介绍 Javascript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，Javascript 允许自定义对象，对象可以拥有属性和方法。

4.9 json 学习目标 能够知道json的格式

5.1 jQuery的介绍 学习目标 能够知道jQuery的作用及优点

5.1.1 jQuery的定义 jQuery是对Javascript的封装，它是免费、开源的Javascript函数库，jQuery 极大地简化了 Javascript 编程。

5.1.2 jQuery的作用 jQuery和Javascript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了Javascript编程，jQuery实现交互效果更简单。

5.1.3 jQuery的优点 jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。jQuery简化了 Javascript 编程，代码编写更加简单。

5.2 jQuery的用法 学习目标 能够知道jQuery的引入方式能够说出两种jQuery入口函数的写法

5.2.1 jQuery的引入 # 本地引入 # 线上引入

5.3 jQuery选择器 学习目标 能够使用jQuery选择器获取标签元素

5.3.1 jQuery选择器的介绍 jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

5.4 获取和设置元素内容 学习目标 能够知道获取和设置元素内容的操作

5.5 获取和设置元素属性 学习目标 能够知道获取和设置元素属性的操作

5.6 jQuery事件 学习目标 能够说出两个常用的jQuery事件

5.7 ajax异步请求 学习目标 能够知道ajax的作用

大数据系统相关栏目本月热门文章

01_Web开发
学习目标：

简单了解应用程序开发的分类：桌面应用程序和 Web 应用程序

本章节学习目标
能够知道html的作用
能够安装和卸载 vscode 的插件
能够设置 vscode 的颜色主题和字体大小
能够知道单标签和双标签的区别
能够知道相对路径和绝对路径的区别
无序列表标签(ul标签)
有序列表标签(ol标签)

本章节常用单词
auto 自动
body 主体，一个HTML 标记
button 按钮
head头部
meta元信息
title标题
browser 浏览器

2.1 html 的介绍
学习目标

能够知道html的作用

2.1.3 html的作用
html是用来开发网页的，它是开发网页的语言。

2.2 html 的基本结构
学习目标

能够写出html的基本结构

2.3vscode 的基本使用
学习目标

能够安装和卸载 vscode 的插件
能够设置 vscode 的颜色主题和字体大小

2.3.1 vscode 的基本介绍
全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。

2.3.4 vscode 的插件卸载
点击对应安装的插件，然后再点击卸载按钮即可。

2.3.5 vscode 的使用
(1) 打开文件夹创建文件

(2) 快速创建html文档的基本结构

(3) 右击在浏览器打开html文档

2.3.6 设置字体大小

2.3.7 设置颜色主题

2.3.8 设置默认浏览器[可选]
(1) 可以根据自己的需要设置默认使用的浏览器

谷歌浏览器: chrome

2.3.9 设置自动保存代码[必选]

VSCode默认不会自动保存代码, 所以当编写完代码运行在浏览器时, 网页不会有变化. 因此, 需要勾选自动保存

2.4 初识常用的 html 标签
学习目标

能够知道单标签和双标签的区别

2.5 资源路径
学习目标

能够知道相对路径和绝对路径的区别

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

2.5.1 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

2.5.2 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

2.6 列表标签
学习目标

能够知道列表标签的种类

2.6.1 列表标签的种类
无序列表标签(ul标签)
有序列表标签(ol标签)

2.6.2 无序列表

列表标题1

列表标题2

列表标题3

2.6.3 有序列表

列表标题1

列表标题2

列表标题3

03_CSS基础本章节学习目标
能够知道 css 的作用
能够知道 css 的引入三种方式
能够说出 css 选择器的种类
能够知道常用的样式属性
本章节常用单词
style样式
type类型
href 网址路径

3.1 css 的介绍
学习目标

能够知道css的作用

3.1.1 css 的定义

css(Cascading Style Sheet)层叠样式表，它是用来美化 html 页面的一种语言。

没有使用css的效果图

使用css的效果图

3.1.2 css 的作用
美化 html 页面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
控制 html 页面布局, 比如: 设置浮动、定位等样式。

3.2 css 的引入方式
学习目标

能够知道 css 的引入三种方式

css的三种引入方式

行内式
内嵌式（内部样式）
外链式

3.2.1 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

hello

优点：方便、直观。

缺点：缺乏可重用性。

3.2.2 内嵌式（内部样式）

在标签内加入标签，在标签中编写css代码。

示例代码:

... h3 { color: red; }

优点：在同一个页面内部便于复用和维护。

缺点：在多个页面之间的可重用性不够高。

3.2.4 css引入方式选择
行内式几乎不用
内嵌式在学习css样式的阶段使用
外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

完整代码：

document h3 { color: red; } hello 三级标题百度网

3.3 css 选择器
学习目标

能够说出 css 选择器的种类

3.3.1 css 选择器的定义
css 选择器是用来选择标签的，选出来以后给标签加样式。

3.3.2 css 选择器的种类
标签选择器
类选择器
id选择器

4.1 Javascript的介绍
学习目标

能够知道Javascript的作用

4.2 Javascript的使用方式
学习目标

能够知道Javascript的使用方式

4.2.1 行内式（主要用于事件）
4.2.2 内嵌式

4.2.3 外链式

index.js：

// 外链式js alert('外链式js!');

4.3 变量和数据类型
学习目标

能够说出常用的数据类型

4.3.4 变量命名规范

由数字、字母、下划线、美元符组成，不能以数字开头

变量名区分大小写

4.4 函数定义和调用
学习目标

能够知道函数的定义和调用方式

4.5 数组及操作方法
学习目标

能够说出数组的定义和取值语法

4.5.1 数组的介绍
数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。

4.5.2 数组的定义
// 创建数组方式1 var aList = [1, 2, 3, 4]; // 创建数组方式2：实例化对象方式 var aList2 = new Array(1, 2, 3, 'smart');

4.5.3 数组的操作
(1) 获取数组的长度

var aList = [1, 2, 3, 4]; // 获取数组的长度 alert(aList.length); // 弹出4

(2) 根据下标取值

var aList = [1, 2, 3, 4]; // 根据下标取值 alert(aList[0]); // 弹出1

4.6 循环语句
学习目标

能够知道2种循环语句

4.6.1 循环语句的介绍
循环语句就是让一部分代码重复执行，javascript中常用的循环语句有:

for
while

4.6.2 for循环
var aList = [1, 3, 5]; // for 循环遍历数组元素 for (var i=0; i

4.6.3 while循环
var aList = [1, 3, 5]; var i = 0; // while 循环遍历数组元素 while (i < aList.length) { var result = aList[i]; alert(result); i++; }

说明:

当条件成立的时候, while语句会循环执行

4.7 字符串拼接
学习目标

能够知道字符串拼接的操作

4.8 Javascript对象
学习目标

能够知道Javascript对象有两种创建方式

4.8.1 Javascript对象的介绍
Javascript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，Javascript 允许自定义对象，对象可以拥有属性和方法。

4.9 json
学习目标

能够知道json的格式

5.1 jQuery的介绍
学习目标

能够知道jQuery的作用及优点

5.1.1 jQuery的定义
jQuery是对Javascript的封装，它是免费、开源的Javascript函数库，jQuery 极大地简化了 Javascript 编程。

5.1.2 jQuery的作用
jQuery和Javascript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了Javascript编程，jQuery实现交互效果更简单。

5.1.3 jQuery的优点
jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
jQuery简化了 Javascript 编程，代码编写更加简单。

5.2 jQuery的用法
学习目标

能够知道jQuery的引入方式
能够说出两种jQuery入口函数的写法

5.2.1 jQuery的引入
# 本地引入 # 线上引入

5.3 jQuery选择器
学习目标

能够使用jQuery选择器获取标签元素

5.3.1 jQuery选择器的介绍
jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

5.4 获取和设置元素内容
学习目标

能够知道获取和设置元素内容的操作

5.5 获取和设置元素属性
学习目标

能够知道获取和设置元素属性的操作

5.6 jQuery事件
学习目标

能够说出两个常用的jQuery事件

5.7 ajax异步请求
学习目标

能够知道ajax的作用