前端三件套 HTML +CSS +JS基础知识内容

HTML 课堂笔记

1、什么是HTML？

• Hyper Text Markup Language

• 超文本标记语言

  超文本？超级文本，例如流媒体，声音、视频、图片等。
  标记语言？这种语言是由大量的标签组成。

  任何一个标签都有开始标签和结束标签，例如：
  <标签> : 开始标签
  </标签> : 结束标签

  HTML严格意义上来只能说是一种规范，一种浏览器上的规范，
  标签语言，不能称为编程语言，因为HTML中没有变量、数据类型
  控制语句if 、for，这些都没有的。

2、HTML运行在哪？
运行在浏览器上。

• 世界五大主流浏览器： IE：微软的 FireFox：火狐（FF） Chrome：谷歌 Opera：欧朋

• Safari：MAC OS专用（苹果专用的浏览器） 国内前端程序员主要安装三个：
  IE FF Chrome

• 前端的程序员开发完成之后需要在不同的浏览器上运行程序， 以便发现浏览器兼容问题。

3、HTML怎么开发？
新建一个.html或者.htm结尾的文件。
使用记事本打开就能开发，浏览器打开就能运行。不需要编译。

4、什么是web？
web就是网站开发。

5、web程序员包括：

• web前端程序员： 需要精通：html css javascript
  web前端主要负责的是：前端浏览器展示的效果，客户要求：要酷炫、要震撼…

• web前端页面展示的时候，是需要动态的数据的，这些数据是后台java程序或者 C++程序提供的。

  web后台程序员
  需要精通：
  这个不一定了，后台有可能是C语言，也可能是C++，也可能是Java，也可能PHP
  也可能是Python等…

  这种系统架构被称为：B/S结构系统。
  B: Browser （浏览器）
  S: Server （服务器）

6、HTML是哪个组织制定的标准呢？
W3C.
html实际上是w3c制定的一套标准，有不同的版本，例如：HTML4.0、HTML5.0(简称H5)

• W3C是一个什么组织呢？ W3C是World Wide Web Consortium（万维网联盟）的缩写 tim
  berners-lee 万维网联盟创始人。万维网之父。（地位等同于爱因斯坦…）

• 因为有了他，才有了现如今的互联网时代，他让我们能够上网了。

  HTTP协议：超文本传输协议，也是W3C制定的。
  HTTP协议是一种什么协议？
  浏览器和web服务器传消息的协议。

7、B/S架构的原理？（粗略的描述一下）

• 第一步：用户在浏览器地址栏上输入URL。【http://www.baidu.com】

• 第二步：回车（这一步相当于通过浏览器向服务器发送了一个请求） 请求：request Browser ---->
  Server（浏览器向服务器发送数据）

• 第三步：服务器会给浏览器一个响应，最终响应一段HTML代码给浏览器， 浏览器对HTML代码进行执行展示一个结果。
  响应：response Server —> Browser（服务器向浏览器发送数据）

• 重点：

  到目前为止，浏览器向服务器发送请求有两种方式： 第一种方式：用户直接在浏览器的地址栏上输入URL，回车。
  第二种方式：用户直接在网页上点击超链接。

• 以上两种方式在本质上是没有区别的。 但是第二种方式更加方便，更加傻瓜式！

CSS课堂笔记

1、什么是CSS？
Cascading Style Sheet
层叠样式表语言（不是编程语言，属于样式表语言，没有变量、数据类型、控制语句…）
CSS其实是专门用来修饰HTML的，让HTML更好看。
CSS是HTML的化妆品。

2、CSS是为HTML服务的，所以HTML还是主体，CSS是依附在HTML上的，
所以进行CSS的开发，我们还是需要新建html/htm文件。

3、在HTML中怎么嵌入CSS样式呢？三种方式
第一种方式：内联定义
第二种方式：定义内部样式块对象
第三种方式：链入外部样式表文件（这种方式最常用！）

4、关于选择器的优先级：

标签选择器优先级最低。
其次是类选择器。
最高优先级是id选择器。

还有什么疑问的，可以自行测试以下！

5、常见的CSS样式

课程体系说明：
标号1表示必须掌握；
标号2表示能够理解；
标号3表示简单了解；
标号4表示扩展内容；
1.JavaScript概述
（1）简称JS
（2）一种脚本语言，脚本语言的特点
Java语言是一种非脚本语言，属于编译型语言。
JavaScript语言是一种脚本语言（解释型语言），JavaScript的“目标程序”是以普通文本的形式保存。用记事本是可以直接打开的。浏览器打开就直接解释执行了。
（3）JavaScript和JScript的关系
JavaScript是网景公司开发的，javascript之父是 布兰登艾奇。JavaScript前身叫做LiveScript。当时网景公司开发JavaScript的目的是为了占领“浏览器”市场。网景公司有一个浏览器，当时非常著名：领航者浏览器Navigator。JavaScript语言是为领航者浏览器专门量身打造的。JavaScript只支持Navigator浏览器，其它浏览器不支持。这个时候微软慌了，马上组建团队，开发了一种编程语言叫做Jscript，专门和JavaScript抗衡的，只支持IE浏览器。网景公司在某个历史阶段，和SUN公司有合作，SUN公司把LiveScript改名为JavaScript。
（4）JavaScript主要用来操作HTML中的节点，产生动态效果
JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果的。JavaScript中也有变量、数据类型、运算符、if语句、for循环、标识符、关键字等。
（5）JavaScript和Java的区别
JavaScript运行在浏览器当中，浏览器中有执行JS代码的内核。
Java运行在JVM当中。JavaScript和Java没有任何关系。
Java语言是SUN公司开发的，JavaScript这个名字是SUN公司给起的名。
JavaScript选择是对的，真的搭上了Java的顺风车！
2.JavaScript包括三块：ECMAScript、DOM、BOM

（1）ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法
（2）DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。（Document Object Model：文档对象模型）
（3）BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。（Browser Object Model：浏览器对象模型）
3.嵌入JS三种方式以及JS的注释
3.1.行间事件

（1）
（2）JS是一种基于事件驱动型的编程语言，当触发某个事件之后，执行一段代码
（3）JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。
（4）JS中的字符串可以使用单引号括起来，也可以使用双引号括起来
（5）window是JS中的内置BOM顶级对象，代表当前浏览器窗口，window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。
（6）JS中的一条语句结束后可以使用“;”结尾，也可以不写。
（7）window.alert()中的window.可以省略。
3.2.页面script标签嵌入

（1）
（2）window.alert()的执行会阻塞当前页面的加载
（3）一个页面中可以写多个脚本块
（4）脚本块的位置没有限制
（5）暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行
3.3.外部引入

（1）
（3）这种写法错误：

（1）标识符命名规则和规范按照java执行
（2）关键字不需要刻意记
5.变量
5.1.变量的声明与赋值

（1）变量未赋值，系统默认赋值undefined
（2）JS是一种弱类型编程语言，一个变量可以接收任何类型的数据
（3）一行上也可以声明多个变量
5.2.函数的定义与调用

（1）函数类似于java语言中的方法，是一段可以完成某个功能的可以被重复利用的代码片段
（2）定义函数的两种语法
第一种：普通函数定义，这种方式较多
function 函数名(形式参数列表){
函数体;
}

例如：
function sum(a, b){
return a + b;
}

注意：
a和b是形式参数列表，也是两个局部变量。
JS中的函数不需要指定返回值类型，因为JS是弱类型编程语言，变量可以接收任何类型的数据，也就是说JS中的函数可以返回任何类型的数据，当然也可以不返回任何数据。返回数据使用return语句。
JS中的函数在调用的时候，实参可以随意，例如调用以上的sum函数，可以这样调用：sum()，没有传任何实参的时候a和b变量没有赋值，则a和b都是undefined。也可以这样调用sum(10)，这样就表示a变量赋值10，b变量仍然是undefined。还可以这样调用：sum(1,2)，这样则表示a是1，b是2。

第二种：如果是把函数的声明当做类进行定义这种方式较多
函数名 = function(形式参数列表){
函数体;
}

例如：
sum = function(a, b){
return a + b;
}

（3）JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。
（4）由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制
（5）这样的代码顺序是可以的，页面打开的时候会先进行所有函数的声明，函数声明优先级较高。

（6）用户点击按钮，调用函数

5.3.局部变量和全局变量

（1）局部变量：函数的形参是局部变量，另外使用var关键字在函数体中声明的变量是局部变量，函数执行结束之后，局部变量的内存就释放了。
（2）全局变量：在函数体外声明的变量属于全局变量，另外不使用var关键字声明的变量无论位置在哪，它都是全局变量，全局变量在浏览器关闭时销毁。
6.JS数据类型
6.1.typeof运算符
6.1.1.JS中为什么会有typeof运算符

6.1.2.typeof运算符怎么用，代码怎么写

语法格式是：
function sum(a, b){
if(“number” === typeof a && “number”=== typeof b){
return a + b;
}
alert(“数据格式不合法”);
return 0;
}
6.1.3.typeof运算符的运算结果都是全部小写的字符串

“undefined”
“number”
“string”
“boolean”
“object”
“function”
6.2.ES6版本之前的数据类型有6种
6.2.1.Undefined

只有一个值undefined，变量声明没赋值，系统默认赋值undefined
6.2.2.Number

（1）Number类型包括哪些值：0,1，-1,3.14,12,300，NaN，Infinity
（2）parseInt()函数
（3）parseFloat()函数
（4）Math.ceil()函数：向上取整
（5）isNaN()函数
6.2.3.String

（1）可以使用单引号，也可以用双引号
（2）JS中的字符串包括小String，也包括大String，小String属于原始类型，大String是JS的内置对象，大String属于Object类型。
（3）无论大String还是小String，它们的属性和方法都是通用的。
（4）字符串中常用方法讲一些，主要讲解字符串的substr()和substring()的区别。
6.2.4.Null

（1）该类型只有一个值：null
（2）typeof运算符的执行结果是"object"
6.2.5.Boolean

（1）只有两个值：true和false
（2）Boolean()函数
（3）JS中的if语句自动调用Boolean()函数。
6.2.6.Object

（1）JS中如何定义一个类。
（2）JS中如何创建一个对象。
（3）JS中如何访问对象属性，调用对象的方法。
（4）JS中的一个函数，既是函数声明，又是类的定义，同时函数名也可以看做构造方法名。直接调用函数表示普通函数调用，如果使用new运算符来调用该函数则会创建对象。
（5）使用prototype属性动态的给对象扩展属性以及方法。
6.3.ES6版本及之后包括的数据类型有8种

除了以上6种类型之外，还有两种类型分别叫做：Symbol和BigInt
7.null NaN undefined区别

（1）=、==、===三者的区别
（2）null NaN undefined三者类型不同，null和undefined的值可以等同
8.JS中的事件
8.1.常用事件

（1）blur失去焦点
（2）change下拉列表选中项改变，或文本框内容改变
（3）click鼠标单击
（4）dblclick鼠标双击
（5）focus获得焦点
（6）keydown键盘按下
（7）keyup键盘弹起
（8）load页面加载完毕
（9）mousedown鼠标按下
（10）mouseover鼠标经过
（11）mousemove鼠标移动
（12）mouseout鼠标离开
（13）mouseup鼠标弹起
（14）reset表单重置
（15）select文本被选定
（16）submit表单提交
8.2.注册事件的两种方式

（1）在标签中使用事件句柄的方式注册事件

（2）在页面加载完毕后使用JS代码给元素绑定事件

重点：通过事件注册，理解回调函数的概念
8.3.代码的执行顺序

这是一种错误的写法：

这样写：

或者这样写：

8.4.通过keydown事件演示回车键13，ESC键27

9.JS运算符之void

运算符就讲这一个，告诉学生其它运算符和java一样用。void主要讲：javascript:void(0)的用法。
10.JS之控制语句

告诉学生控制语句和Java一样用，课堂上不再讲解。只讲一下for…in语句的使用，使用for…in语句遍历数组，以及遍历一个对象的属性。
11.JS内置对象
11.1.Array

（1）创建数组
（2）JS中的数组特点
（3）JS中数组对象常用方法：push，pop，join，reverse等。
（4）数组遍历
11.2.Date

（1）new Date() 获取当前系统时间
（2）new Date().getTime()获取时间戳
（3）new Date().getFullYear()、getMonth()等方法。
12.BOM和DOM的区别与联系

BOM: Browser Object Model（浏览器对象模型），通过BOM的对象和方法可以完成浏览器窗口的操作，例如：关闭浏览器，前进，后退，修改地址栏上的地址等，这些操作都属于BOM。BOM的顶级内置对象是window。

DOM: Document Object Model（文档对象模型），通过DOM的对象和方法可以完成网页中元素的增删改，让网页产生动态效果，DOM的顶级内置对象是document。

13.DOM编程案例
13.1.innerHTML innerText操作div和span

13.2.JS的正则表达式(Regular Expression)
13.2.1.正则表达式概述

（1）正则表达式是一门独立的学科，不止用在JS中
（2）正则表达式专门用来做字符串格式匹配的
13.2.2.常用的正则表达式符号

参考30分钟入门正则表达式：
^ 字符串开始
$ 字符串结束
\s 空白

• 0~N次

• 1~N次
  ? 0或1次
  {3} 3次
  {3,} 3~N次
  {3,5} 3~5次
  (a|b) a或b
  [a-z] a到z
  [^abc] 不是abc
  13.2.3.会写简单的正则表达式

（1）qq号正则
（2）必须由数字和字母组成，不能含有其它符号的正则
（3）给学生一些常用的正则表达式
13.2.4.会创建JS中的正则表达式对象

（1）var regExp = new RegExp("¹[0-9]{4,}$");（2）varregExp={/}^{[}1-9][0-9]4,$/;
13.2.5.会调用JS中正则表达式对象的test()函数

写一个校验用户名只能由数字和字母组成的案例
13.3.表单验证

（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交
13.4.复选框全选和取消全选

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
以上三个函数告知学生很重要
13.5.获取下拉列表选中项的value

change事件
13.6.显示网页时钟

window.setyInterval()
window.clearInterval()
主要两个函数
捎带着提一下window.setTimeout()
13.7.拼接html的方式，设置table的tbody

html += “”;
html += “” + (i+1) + “”;
html += “” + s.name + “”;
html += “” + s.age + “”;
html += “”;
13.8.要求学生在此之后会使用浏览器的F12

会使用F12调试面板：第一会调错；第二会定位并查看HTML页面元素。
14.BOM编程案例
14.1.window.open()和window.close()

14.2.window.alert()和window.confirm()

14.3.如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口

if(window.top != window.self){
window.top. location = window.self. location;
}
14.4.历史记录

window.history.back(); window.history.go(-1); window.history.go(1);
14.5.window.location.href

提示一下document.location.href也可以完成同样功能
15.JSON对象
15.1.eval函数

15.2.怎么创建json对象以及访问json对象的属性

15.3.json在开发中有什么用

数据交换作用
15.4.写一个这样的JSON

描述一个班级的总人数，另外包括描述班级中每个学生的信息，这样的JSON怎么写
15.5.JS中[]和{}的区别

16.总结一下浏览器向服务器发送请求的常见方式

（1）直接在浏览器地址栏上写URL，get请求。
（2）点击页面超链接，get请求。
（3）提交form表单，可以是get，也可以是post。
（4）window.open(url);
（5）window.location.href=url;
（6）document.location.href=url;

---

1. 1-9 ↩︎