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