HTML+CSS+JavaScript综合教学视频

HTML+CSS+JavaScript综合教学视频

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-html-001-html概述–.mp4
10-html-010-html表格单元格合并–.mp4
100-javascript-055-将当前窗口设置为顶级窗口–.mp4
101-javascript-056-历史记录–.mp4
102-javascript-057-发送请求的多种方式–.mp4
103-javascript-058-eval函数–.mp4
104-javascript-059-json概述–.mp4
105-javascript-060-json对象的创建和使用–.mp4
106-javascript-061-json对象作为属性的值–.mp4
107-javascript-062-描述全班学生的json对象–.mp4
108-javascript-063-json用于交换数据–.mp4
109-javascript-064-解析json动态生成表格–.mp4
11-html-011-html表格的th标签–.mp4
110-javascript-065-正则表达式–.mp4
111-javascript-066-正则表达式–.mp4
112-javascript-067-表单验证–.mp4
113-javascript-068-表单验证–.mp4
114-javascript-069-表单验证–.mp4
115-javascript-070-获取元素的三种方式–.mp4
12-html-012-thead tbody tfoot–.mp4
13-html-013-背景色和背景图片–.mp4
14-html-014-图片img–.mp4
15-html-015-超链接–.mp4
16-html-016-w3c以及bs结构原理–.mp4
17-html-017-超链接的target属性–.mp4
18-html-018-无序列表–.mp4
19-html-019-有序列表–.mp4
2-html-002-web概述–.mp4
20-html-020-表单有什么用–.mp4
21-html-021-表单提交数据格式–.mp4
22-html-022-用户注册表单–.mp4
23-html-023-下拉列表多选–.mp4
24-html-024-file控件–.mp4
25-html-025-hidden隐藏域–.mp4
26-html-026-readonly和disabled–.mp4
27-html-027-表单项的maxlength属性–.mp4
28-html-028-html的id属性–.mp4
29-html-029-div和span图层–.mp4
3-html-003-第一个html–.mp4
30-html-030-嘱咐–.mp4
31-css-001-dreamweaver–.mp4
32-css-002-回顾html–.mp4
33-css-003-css概述–.mp4
34-css-004-内联定义方式–.mp4
35-css-005-样式块方式–.mp4
36-css-006-标签选择器和id选择器–.mp4
37-css-007-类选择器–.mp4
38-css-008-链接外部独立的样式表文件–.mp4
39-css-009-隐藏的样式–.mp4
4-html-004-浏览器的安装–.mp4
40-css-010-文本装饰样式–.mp4
41-css-011-列表样式–.mp4
42-css-012-设置鼠标悬停效果–.mp4
43-css-013-内外补丁–.mp4
44-css-014-float浮动样式–.mp4
45-css-015-光标样式–.mp4
46-javascript-001-xmind文件转word–.mp4
47-javascript-002-js概述–.mp4
48-javascript-003-javascript三大块–.mp4
49-javascript-004-嵌入js的第一种方式–.mp4
5-html-005-html基本标签–.mp4
50-javascript-005-嵌入js的第二种方式–.mp4
51-javascript-006-嵌入js的第三种方式–.mp4
52-javascript-007-标识符和关键字–.mp4
53-javascript-008-js变量的理解–.mp4
54-javascript-009-js变量的声明和赋值–.mp4
55-javascript-010-js函数初步–.mp4
56-javascript-011-js函数初步–.mp4
57-javascript-012-回顾昨天内容–.mp4
58-javascript-013-全局变量和局部变量–.mp4
59-javascript-014-js函数可以重载吗–.mp4
6-html-006-html基本标签–.mp4
60-javascript-015-js数据类型概述及typeof运算符–.mp4
61-javascript-016-web api–.mp4
62-javascript-017-undefined类型–.mp4
63-javascript-018-null类型–.mp4
64-javascript-019-number类型–.mp4
65-javascript-020-number类型–.mp4
66-javascript-021-number类型–.mp4
67-javascript-022-number类型–.mp4
68-javascript-023-boolean类型–.mp4
69-javascript-024-js中的10除以3–.mp4
7-html-007-html基本标签–.mp4
70-javascript-025-string类型–.mp4
71-javascript-026-object类型的prototype–.mp4
72-javascript-027-类的定义–.mp4
73-javascript-028-类型的定义对象的创建和使用–.mp4
74-javascript-029-null nan undefined区别–.mp4
75-javascript-030-js的常用事件–.mp4
76-javascript-031-js的常用事件–.mp4
77-javascript-032-事件注册的第一种方式–.mp4
78-javascript-033-根据id获取节点访问节点属性–.mp4
79-javascript-034-事件注册的第二种方式–.mp4
8-html-008-html实体符号–.mp4
80-javascript-035-代码的执行顺序–.mp4
81-javascript-036-使用onload解决代码顺序问题–.mp4
82-javascript-037-改造onload–.mp4
83-javascript-038-事件处理的完美案例–.mp4
84-javascript-039-捕捉回车键–.mp4
85-javascript-040-void运算符–.mp4
86-javascript-041-js的控制语句–.mp4
87-javascript-042-内置对象array–.mp4
88-javascript-043-array的常用函数–.mp4
89-javascript-044-内置对象date及常用函数–.mp4
9-html-009-html表格table–.mp4
90-javascript-045-回顾昨天内容–.mp4
91-javascript-046-bom和dom的区别和联系–.mp4
92-javascript-047-innerhtml和innertext区别–.mp4
93-javascript-048-复选框的全选和取消全选–.mp4
94-javascript-049-获取文本框的value–.mp4
95-javascript-050-获取下拉列表选中项的value–.mp4
96-javascript-051-周期性调用函数–.mp4
97-javascript-052-网页时钟–.mp4
98-javascript-053-窗口的开启和关闭–.mp4
99-javascript-054-alert和confirm–.mp4