1、.目 录HTML 篇 .6一、HTML 的相关介绍 61、HTML 的介绍 .62、HTML 可以做什么 .63、HTML 运行原理 .61）本地运行 .62）远程访问运行 64、HTTP 的开发工具 .7二、HTML 的基本语法 71、HTML 基本语法 .72、HTML 符号实体 .83、超链接 .84、HTML 图片元素 .85、表格 .96、有序列表与无序列表 91）无序列表 .92）有序列表 .97、框架标记 108、HTML 表单元素 10（1）表单元素格式 .13（2）action 指定把请求交给那个页面 .133）input 元素 139、字体 141）字体大小 142）物理字
2、体 153）逻辑字体 154）客户端字体 1510、文字布局 .16.1）文字对齐（横向） .162）文字的分区 166）与格式化文本 .167)图像 .1611、跑马灯 .1712、多媒体页面 .17div+css 篇 .18一、div+css 是什么 18二、语法 .191、head 标签 .192、元素 193、选择器 191）类选择器 20（1）基本语法 20（2）案例 202）id 选择器 20（1）基本语法 203）html 元素选择器 21（1）基本语法 21（2）结论 214）通配符选择器 .215）案例练习 216）选择器的深入讨论 .22（1）父子选择器 .22（2）选择器
3、优先级 .22（3）id 选择器与 class 选择器的比较 .23（4）CSS 文件简化 .244、块元素和行内连元素 .251）概念 252）两者区别 25.5、流 261）标准流/非标准流概念 262）盒子模型 26（1）概念 26（2）浮动 273）定位 28（1）static 定位 .28（2）relative 定位（相对定位） .29（3）absolute 定位（绝对定位） .29（4）fixed 定位 .30（5）inherit .30Javascript 篇 31一、js 的基本介绍 .31二、js 基本语法（一） .321、js 标识符 342、js 中的数据类型 34（1）
4、基本数据类型（三大类型） 34（2）复合数据类型 .35（3）特殊数据类型 .363、变量的定义、初始化、赋值 364、运算符 375、流程控制（三大流程控制） 376、循环控制 39三、js 基本语法（二） .401、函数 401）语法 402）函数的引用 403）函数的调用方法 .412、数组（数据类型：引用类型/ 复合类型） 421）基本语法 42.2）数组在内存中的存在形式 .423）js 数组是引用传递 424）js 的增长方式 435）js 数组的几个应用 436）数组的其他引用方式 .447)冒泡排序 .448）二分查找 45四、js 对象编程 .46简单介绍： .461、js
5、面向（基于）对象的特征介绍 .462、为什么需要对象 .474、创建类的基本语法 .485、访问对象属性的两种方法 .496、对象引用问题 js 垃圾回收机制（GC ）的说明 507、this 问题的提出 518、js 类的定义 559、js 成员函数定义 55关于 Object 类的说明 .5810、构造方法（函数） 6011、创建对象的又一种形式 6012、js 的三大特征 .611）抽象的概念 .612）封装 623）继承 634）重载及覆盖 .655）多态 666）闭包 67五、js 内部类 .681、分类 682、内部类 68.1）Object 类 .682）Math 类 .693）
6、Date 类 .694）String 类 .705）Array 类 706）Boolean 类 717）Number 类 .713、系统函数 72六、js 事件驱动 .721、概述 722、事件驱动机制的理解 .733、js 访问样式并修改样式 .741）访问内部 style.742）访问外部 css.744、事件驱动机制不同浏览器的兼容 755、同一个事件可以被多个处理程序处理 76七、dom 编程 .761、dom 编程的必要性 .762、dom 编程简介 .763、分类 774、dom 关系图 .775、dom 对象 786、bom（The Browser Object Model） 浏
7、览器对象模型 简介 .787、window 对象 .798、history 对象 809、如何绑定事件监听 .8110、document 对象 8311、body 对象 8412、对 dom 的加强 .8513、style 对象 .85.14、forms 对象和 form 对象 .8515、其他对象 .85HTML 篇一、HTML 的相关介绍1、HTML 的介绍html 是一种标记语言，主要用于网页开发，使用 html 可以展现文字图片、视屏、声音等。html 是我们 web 开发的基础2、HTML 可以做什么3、HTML 运行原理1）本地运行HTML 文件本地存放，使用本地浏览器打开 2）远
8、程访问运行HTML 文件在另一台服务器中存放，使用浏览器通过网络打开.4、HTTP 的开发工具二、HTML 的基本语法1、HTML 基本语法不管 HTML 文件有多复杂，它的基本结构如下：内容注意：元素就是标记.2、HTML 符号实体3、超链接超链接 1超链接 2 target=_blank超链接 3 百度4、HTML 图片元素.5、表格用处：可以显示数据和图片，并且可以布局表时该单元格占# 列表时该单元格占#行6、有序列表与无序列表1）无序列表2）有序列表.7、框架标记说明：元素中不能出现标签小结：表格里面可嵌套表格，框架里面可嵌套框架8、HTML 表单元素1）表单元素主要用于让用户输入数据
9、，并提交给服务器2）基本语法.案例：源码： login登录.登录界面 用户名：密 码： .（1）表单元素格式（2）action 指定把请求交给那个页面3）input 元素画直线复选框、单选框默认下拉选项框#下拉选项框表示一次性显示多少条记录.下拉选项框表示一次性选择多少条记录小结：target 汇总9、字体1）字体大小.2）物理字体3）逻辑字体4）客户端字体.10、文字布局1）文字对齐（横向）2）文字的分区6）与格式化文本7)图像.11、跑马灯12、多媒体页面.div+css 篇一、div+css 是什么原理图：分类： 外部 css 内部 css.二、语法1、head 标签2、元素栏目三栏目四
10、3、选择器选择器是 CSS 中非常重要的概念，CSS 提供四种选择器：.1）类选择器（1）基本语法（2）案例xxx.css：.style1font-size: 40px;color: #3BA100;background-color:pink;xxxhtml：BBP2）id 选择器（1）基本语法说明：html 文件中引用 id 选择器.3）html 元素选择器（1）基本语法（2）结论当一个元素被 id 选择器，类选择器，html 选择器修饰，优先级是:id类html4）通配符选择器说明：margin:10px 9px 9px 7px;/*如果给出四个值，表示上、右、下、左 */margin:1
11、0px 9px 7px; /*如果给出三个值，表示上、（左右）、下*/5）案例练习.6）选择器的深入讨论（1）父子选择器#style2font-size: 50px;background-color: silver;#style2 spanfont-size: 60px;color: #ff0000;说明：1.父子选择器可以有多层，但用法不多#style2 span span font-size: 60px;color: #ff0110;2.父子选择器适用于类选择器和 id 选择器（2）选择器优先级1.如果一个元素被 id 选择器和类选择器同时修饰，优先级:idclass.2. 当一个元素同时
12、被 class、id、html、* 修饰时，优先级是：idclasshtml *（3）id 选择器与 class 选择器的比较一个元素只能有一个 id 选择器，可以有多个 class 选择器css：.style1font-size: 40px;color: #3BA100;background-color:pink;.style1_newfont-size: 70px;color:bule ;background-color:#e8ec42;text-decoration: underline;html：新闻 3.说明：两个类选择器同时作用于一个元素发生冲突时，在 css 文件中排在前面的类选
13、择器的优先级低于排在后面的（4）CSS 文件简化在 CSS 文件中，如果有多个 class/id/html 选择器有相同的部分，可以吧相同的 CSS 样式放在一起,这样可以简化 css 文件例：css:/*类选择器 */.style1font-size: 40px;color: #3BA100;/* background-color:pink; */.style1_newfont-size: 70px;color:blue;/* background-color:pink; */text-decoration: underline;/*id选择器*/#style2font-size: 40px
14、;/* background-color: silver; */./*合并选择器相同属性 */.style1,.style1_new,#style2background-color:pink;.4、块元素和行内连元素1）概念说明：内联元素可以根据不同的浏览器来添加不同的东西，不一定是仅仅文本或者是内联元素2）两者区别说明：案例：bbpBBPbbp内联元素只会占用内容的长度.5、流1）标准流/ 非标准流概念2）盒子模型（1）概念.说明：1. html 元素都可以看做一个盒子2. 盒子模型的参照物不一样，则使用的 css 的属性不一样3. 如果不想破坏外观，则尽量使用 margin 进行布局（2）
15、浮动左浮动：尽量的向左边移动，让出自己的空间给下一个元素，知道碰到父元素的左边框右浮动：尽量的向左边移动，让出自己的空间给下一个元素，知道碰到父元素的右边框案例 1：.案例 2：字包图清除浮动:3）定位（1）static 定位默认的定位方式说明：left 与 top 属性不生效.（2）relative 定位（相对定位）元素框偏移某个距离（left 和 top） ，元素保持其定位前的形状，它原本所占的空间任然保留，从这一角度看，该元素任然在文档流/标准流中一样说明：relative 的参照点是它原来的位置（3）absolute 定位（绝对定位）元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有原来的空间说明：.（4）fixed 定位见上图（5）inherit将子元素的 position 设置为继承父元素的 position
