1.js事件
事件就是某些操作 如单击 双击 键盘按键
事件源 组件  如 按钮 文本输入款

监听器 代码
注册监听器 将事件 事件源 监听器 绑定在一起
                        当事件源上发生了某个事件 则触发执行某个监听器代码
                       
常见事件
点击事件 onclick
双击事件 ondblclick

焦点 onfocus 元素获得焦点
onblus 元素 失去焦点

加载事件 onload

鼠标事件
onmouse down 、up、move、over。out
onkeydown 、up、press

定义方法时 定义一个形参来接受event对象 button属性可以看到 哪个键被点击了
alert（event.button）
--------------------

选中和改变
onselect onchange

表单事件 onsubmit 表单提交

onreset

----------【
提交表单时
定义flag为false 方法返回值为false则不会提交

如果是在标签内部 添加onclick
则需要些return 再加上方法名



-----------------------------
bs 框架

前段开发的框架

框架：一套半成品软件 开发人员在框架基础上简化编码
好处：
1，定义了很多css样式和js插件 开发人员可以直接使用这些插件得到页面效果

2.响应式布局
兼容不同分辨率的设备
--------------------------
框架快速入门

下载
引入
项目中复制


-------------
响应式布局
实现 依赖于栅格系统 将一行平均分为12个格子 分配每个元素占几个格子
定义容器 相当于之前的table

定义行 相当于之前的tr

定义元素  指定该元素在不同设备上 所占数目


container
container-fluid 左右 填充满

定义行 row
col 设备代号 格子数目

不能向下兼容 可以向上兼容

图片中 任意图片 class=“img-responsive”
响应式图片







-----------------------------------------------










-------------------------------------------------














-------------------------------------------------
BOM
对象
封装浏览器对象


浏览器对象

window
navigator
screen
history
location
---------------【
window 弹出方法
window对象不需要创建可以直接使用 window.也可以省略
alert 警告框
confirm 出现确定和取消按钮
prompt 帮用户输入框

打开关闭的方法
open 会返回新window对象
close 会关闭当前文件
-------------------------
定时器
settimeout 设置定时器               只会执行一次
cleartimeout 清空定时器

setinterval  
clearinteral

返回值为唯一编号 用于取消定时器0


----------------------------------
获取其他对象 动物

location 地址栏对象
location
-------------------

历史记录个数只显示 当前窗口的历史记录个数 而不是整个浏览器的个数





------------------------
DOM
对象
获取元素对象 即 获取标签对象 对标签进行操作
element 对象
document。getelementbyid（id值）

修改图片源 src


innerHTML 修改文本内容

--------------------------

事件 某些组件被执行了某些操作后 出发某些代码的执行

绑定事件
直接在html标签绑定属性值 属性值就是js代码

事件 onclick 单击事件




-----------------------------

dom

核心dom document element node

html dom 学习








四个案例




-----------------------------------
1.javascript
客户端脚本语言


不需要编译 直接交给浏览器运行       
最开始创造用来进行表单校验‘

bom dom对象






ECMAscript
--------------------
基本语法
内部js
外部js

定义script标签
<script>
可以定义在任意位置
但会影响运行顺序 先后执行
可以定义很多script标签

外部 使用js标签 src 加载外部js文件


-------------------
数据类型’
原始数据类型 （基本数据类型）
number  三种 整数小数nan（not a number）
string  单引号 双引号均可
boolean
null 一个对象为空的赋值
undefined 未定义 没有初始化赋值 则会为此类型

引用数据类型
对象 存在好的功能 调用使用
------------------------------
变量  一块存储数据的内存空间

java强类型
指定int 后 今后内存区域 只能存放int型数据
  

js 弱类型
var a=3
仅仅是 给变量空间赋值 不定义变量空间类型

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

定义方法
var 变量名 初始化值

使用typeof 可以判断获得具体类型

输出语句 document。write



--------------------

一元运算符

算数运算符

赋值运算符

比较运算符
=== 全等

逻辑运算符
&& || ！

三元运算符

？：


在js中 如果运算数不是不运算符所要求的类型 那么js引擎
会自动将运算数进行类型转换

字符串转数字  如果不是数字 则是转变成nan格式

true转为1 false转为0

字符串难找字典顺序比较

全等于 在比较之前会先进行类型比较 如果类型不一样 则直接报错  

----------------------
逻辑运算符
其他类型转boolean
number  0或nan 为假 非0为真
string 除了空字符串 都是true
null undefined 都是false
对象
所有对象都是true
0---------------------------

JS 特殊语法

用var 定义变量 为局部变量
不用则定义为全局变量

---------------

流程控制语句


-------------------
script 对象 function

函数对象function
对象创建
//var fun=new function（形式参数列表，方法体、、//）；

常用方法
方法定义时 形式参数类型不用写
function  fun（a,b）{
alert(a,b)
}
fun(3,4)


方法三 var fun=function(a,b){
alert(a,b)
}


形参类型不用定义
同名方法会覆盖  
方法不传参数 得到的 都是undefined

存在内置对象 arguments 封装了所有参数

返回值也不需要定义

--------------------

其他对象
var date = new date；
date。tolocalstring
方法gettime 获取毫秒值 返回当前日期对象 描述的时间和1970年


------------------------------------
正则表达式
规定输入规则

regexp 字符串的组成规则
特殊符号来地表特殊含义单个字符
\d单个数字字符
\w单个单词字符

量词符号
？出现量词或一次
*出现0次货多次
+出现1次或多次

{m,n}表示数量大于m 小于n

正则表达式对象

regexp

global 对象中的方法 不需要对象可以直接调用

url编码
解码

nan参与的比较都是false 只能使用isnan进行判断


http协议不识别中文 所以需要对中文进行编码 解码  gbk 和utf-8之间不需要互相切换即可

------------------------------------------------------








-----------------------[
3.











1.form 表单

用于采集用户输入数据 用于和服务器进行交互
使用标签 form
action 提交数据的url（位置）

-------------------
input输入框
        type         text文本输入框
                        password 密码输入框       


select 下拉框
textarea文本域

label for属性与id属性对应

隐藏域 hidden 用于提交信息
设置name属性

submit 提交按钮
button 按钮
img

-----------------
checked 为默认选中属性

2.css选择器
-
根绝格式不同 选择使用不同选择器
-----------------
css页面美化 布局控制
层叠样式表

多个样式可以放在同一个html上 同时生效

好处
功能强大
将内容展示 和样式控制分离
  降低耦合度 解耦
  让分工协作 更容易
  提高开发效率

-----------------
css与html结合方式
内联样式 标签内部书写 不推荐使用

内部样式 在head标签内 定义style标签 style标签的标签体内容就是css代码
        在head内 加入style标签
        div{
       
        }；
在body中加入div标签
只在当前页面生效

外部样式  
将css页面抽取到外部文件中
使用link进行 引入

----------------
css基本语法
--------------------
格式

选择器{
属性名：属性值；
}

元素选择器
选择器 来筛选具有相似特征的元素

#id id选择器 格式相同

class 类选择器
.class名

如果互相冲突时 id选择器优先级大于元素选择器
类选择器优先级高于元素

-------------------------
id值尽量唯一
class可以多个
---------------

扩展选择器
所有 *{}

并集 选择器1，选择器2{}            两个全部更改

子集 选择器1 选择器2{}   1元素下的二元素的标签

父类选择器 选择器1>选择器2{}；

属性选择器   根据input的 type 定义的 text和password不同 可以进行区分

伪类选择器 点击超链接的 状态颜色区分
                        link
                        hover
                        active
                        visited

------------------------------------
选择器中的属性 定义方法 和标签的区别
字体
font size
color
text align
line height

背景
边框
border

尺寸
height
weight
background：url（）no repeat center； 不重复 居中

3.css盒子模型

控制布局
margin外边距
padding 内边距 默认情况下 内边距会影响整个盒子大小
boxsizing：borderbox















1.html
cs      socket
bs       server socket

----------------
资源分类

静态资源 使用一些静态网页开发技术完成开发的资源
看到同样的页面
如文本 图片音频视频等
如果请求的是静态资源 服务器会直接发送 浏览器中存在相对应的结构，可以直接解析


动态资源
使用动态网页技术发布的资源
jsp/servlet，php，asp
请求动态资源 服务器会执行这些动态资源 转换为静态资源再发送给浏览器

静态资源
html标签 搭建基础网页 展示页面内容

css 美化页面
javascript 控制页面元素 出现动态效果

-----------------------------
html
概念 超文本标记语言
超文本 使用超链接方法将各种不同空间文字信息组织在一起的网状文本

标记语言
------------
快速入门
后缀名为html
标签分为
        围堵标签：有开始标签和结束标签
        自闭和标签 开始标签和结束标签在一起 如 <br/>
标签可以嵌套
需要正确嵌套

属性是由键值对构成 需要用引号引起
不区分大小写
---------------
文件标签
html 文档的根标签
head 头标签 用于去指定html文档的属性 引入外部资源
title 标题标签
body 体标签

《!doctype html》定义文档类型

meta charset 定义字符集 utf-8
------------
文本标签
<!-- 注释-->  html的注释

标题 标签
《h1》 标题标签 从大到小 h1最大

《p》 段落标签

《hr》 展示一条水平线0003

《b》字体加粗
《I》斜体
《font》修改字体标签
face 字体
face=“楷体”

color 红绿蓝 三色定义
#值1值2值3 00~FF之间

width 宽度 数值的单位默认是px（）像素
数值 % 占比相对于 父元素的比例

《center》包裹的部分 页面居中显示

------------------------
图片标签
图片加载失败会 替换掉
属性 src 指定图片位置
图片存放位置
.3

alt 图片加载不出来 会显示文字

------------------
列表标签

有序列表
ol有序
li 列表项


无序列表
ul
li 列表项



超链接标签
a 定义一个超链接

href=‘连接’
新页面 target=“_self"
  target = "_blank"
  
连接可以写入 本地文件./5_列表标签.html

"mailto:邮箱地址"



-----------------------------------------
span标签 文本信息在一行展示 行内标签 内联标签

div 每个div为一行 进行换行

---------------------
语义化标签
<header>
<footer>
没有任何样式 只是提高可读性
-------------------------------------

表格标签
table
th
tr
td
cellpadding 文字和边缘的间隙距离
cellspacing 双线都编程单线
align 对齐方式

-------------------
caption 表格标题
thead 表格头部分

tbody 表格体部分
tfoot 表格脚部分

colspan 合并列
rowspan 和并行






bgcolor













2.html标签













3.使用标签编写网页

1.js事件
事件就是某些操作 如单击 双击 键盘按键
事件源 组件  如 按钮 文本输入款

监听器 代码
注册监听器 将事件 事件源 监听器 绑定在一起
                        当事件源上发生了某个事件 则触发执行某个监听器代码
                       
常见事件
点击事件 onclick
双击事件 ondblclick

焦点 onfocus 元素获得焦点
onblus 元素 失去焦点

加载事件 onload

鼠标事件
onmouse down 、up、move、over。out
onkeydown 、up、press

定义方法时 定义一个形参来接受event对象 button属性可以看到 哪个键被点击了
alert（event.button）
--------------------

选中和改变
onselect onchange

表单事件 onsubmit 表单提交

onreset

----------【
提交表单时
定义flag为false 方法返回值为false则不会提交

如果是在标签内部 添加onclick
则需要些return 再加上方法名



-----------------------------
bs 框架

前段开发的框架

框架：一套半成品软件 开发人员在框架基础上简化编码
好处：
1，定义了很多css样式和js插件 开发人员可以直接使用这些插件得到页面效果

2.响应式布局
兼容不同分辨率的设备
--------------------------
框架快速入门

下载
引入
项目中复制


-------------
响应式布局
实现 依赖于栅格系统 将一行平均分为12个格子 分配每个元素占几个格子
定义容器 相当于之前的table

定义行 相当于之前的tr

定义元素  指定该元素在不同设备上 所占数目


container
container-fluid 左右 填充满

定义行 row
col 设备代号 格子数目

不能向下兼容 可以向上兼容

图片中 任意图片 class=“img-responsive”
响应式图片







-----------------------------------------------










-------------------------------------------------














-------------------------------------------------
BOM
对象
封装浏览器对象


浏览器对象

window
navigator
screen
history
location
---------------【
window 弹出方法
window对象不需要创建可以直接使用 window.也可以省略
alert 警告框
confirm 出现确定和取消按钮
prompt 帮用户输入框

打开关闭的方法
open 会返回新window对象
close 会关闭当前文件
-------------------------
定时器
settimeout 设置定时器               只会执行一次
cleartimeout 清空定时器

setinterval  
clearinteral

返回值为唯一编号 用于取消定时器0


----------------------------------
获取其他对象 动物

location 地址栏对象
location
-------------------

历史记录个数只显示 当前窗口的历史记录个数 而不是整个浏览器的个数





------------------------
DOM
对象
获取元素对象 即 获取标签对象 对标签进行操作
element 对象
document。getelementbyid（id值）

修改图片源 src


innerHTML 修改文本内容

--------------------------

事件 某些组件被执行了某些操作后 出发某些代码的执行

绑定事件
直接在html标签绑定属性值 属性值就是js代码

事件 onclick 单击事件




-----------------------------

dom

核心dom document element node

html dom 学习








四个案例




-----------------------------------
1.javascript
客户端脚本语言


不需要编译 直接交给浏览器运行       
最开始创造用来进行表单校验‘

bom dom对象






ECMAscript
--------------------
基本语法
内部js
外部js

定义script标签
<script>
可以定义在任意位置
但会影响运行顺序 先后执行
可以定义很多script标签

外部 使用js标签 src 加载外部js文件


-------------------
数据类型’
原始数据类型 （基本数据类型）
number  三种 整数小数nan（not a number）
string  单引号 双引号均可
boolean
null 一个对象为空的赋值
undefined 未定义 没有初始化赋值 则会为此类型

引用数据类型
对象 存在好的功能 调用使用
------------------------------
变量  一块存储数据的内存空间

java强类型
指定int 后 今后内存区域 只能存放int型数据
  

js 弱类型
var a=3
仅仅是 给变量空间赋值 不定义变量空间类型

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

定义方法
var 变量名 初始化值

使用typeof 可以判断获得具体类型

输出语句 document。write



--------------------

一元运算符

算数运算符

赋值运算符

比较运算符
=== 全等

逻辑运算符
&& || ！

三元运算符

？：


在js中 如果运算数不是不运算符所要求的类型 那么js引擎
会自动将运算数进行类型转换

字符串转数字  如果不是数字 则是转变成nan格式

true转为1 false转为0

字符串难找字典顺序比较

全等于 在比较之前会先进行类型比较 如果类型不一样 则直接报错  

----------------------
逻辑运算符
其他类型转boolean
number  0或nan 为假 非0为真
string 除了空字符串 都是true
null undefined 都是false
对象
所有对象都是true
0---------------------------

JS 特殊语法

用var 定义变量 为局部变量
不用则定义为全局变量

---------------

流程控制语句


-------------------
script 对象 function

函数对象function
对象创建
//var fun=new function（形式参数列表，方法体、、//）；

常用方法
方法定义时 形式参数类型不用写
function  fun（a,b）{
alert(a,b)
}
fun(3,4)


方法三 var fun=function(a,b){
alert(a,b)
}


形参类型不用定义
同名方法会覆盖  
方法不传参数 得到的 都是undefined

存在内置对象 arguments 封装了所有参数

返回值也不需要定义

--------------------

其他对象
var date = new date；
date。tolocalstring
方法gettime 获取毫秒值 返回当前日期对象 描述的时间和1970年


------------------------------------
正则表达式
规定输入规则

regexp 字符串的组成规则
特殊符号来地表特殊含义单个字符
\d单个数字字符
\w单个单词字符

量词符号
？出现量词或一次
*出现0次货多次
+出现1次或多次

{m,n}表示数量大于m 小于n

正则表达式对象

regexp

global 对象中的方法 不需要对象可以直接调用

url编码
解码

nan参与的比较都是false 只能使用isnan进行判断


http协议不识别中文 所以需要对中文进行编码 解码  gbk 和utf-8之间不需要互相切换即可

------------------------------------------------------








-----------------------[
3.











1.form 表单

用于采集用户输入数据 用于和服务器进行交互
使用标签 form
action 提交数据的url（位置）

-------------------
input输入框
        type         text文本输入框
                        password 密码输入框       


select 下拉框
textarea文本域

label for属性与id属性对应

隐藏域 hidden 用于提交信息
设置name属性

submit 提交按钮
button 按钮
img

-----------------
checked 为默认选中属性

2.css选择器
-
根绝格式不同 选择使用不同选择器
-----------------
css页面美化 布局控制
层叠样式表

多个样式可以放在同一个html上 同时生效

好处
功能强大
将内容展示 和样式控制分离
  降低耦合度 解耦
  让分工协作 更容易
  提高开发效率

-----------------
css与html结合方式
内联样式 标签内部书写 不推荐使用

内部样式 在head标签内 定义style标签 style标签的标签体内容就是css代码
        在head内 加入style标签
        div{
       
        }；
在body中加入div标签
只在当前页面生效

外部样式  
将css页面抽取到外部文件中
使用link进行 引入

----------------
css基本语法
--------------------
格式

选择器{
属性名：属性值；
}

元素选择器
选择器 来筛选具有相似特征的元素

#id id选择器 格式相同

class 类选择器
.class名

如果互相冲突时 id选择器优先级大于元素选择器
类选择器优先级高于元素

-------------------------
id值尽量唯一
class可以多个
---------------

扩展选择器
所有 *{}

并集 选择器1，选择器2{}            两个全部更改

子集 选择器1 选择器2{}   1元素下的二元素的标签

父类选择器 选择器1>选择器2{}；

属性选择器   根据input的 type 定义的 text和password不同 可以进行区分

伪类选择器 点击超链接的 状态颜色区分
                        link
                        hover
                        active
                        visited

------------------------------------
选择器中的属性 定义方法 和标签的区别
字体
font size
color
text align
line height

背景
边框
border

尺寸
height
weight
background：url（）no repeat center； 不重复 居中

3.css盒子模型

控制布局
margin外边距
padding 内边距 默认情况下 内边距会影响整个盒子大小
boxsizing：borderbox















1.html
cs      socket
bs       server socket

----------------
资源分类

静态资源 使用一些静态网页开发技术完成开发的资源
看到同样的页面
如文本 图片音频视频等
如果请求的是静态资源 服务器会直接发送 浏览器中存在相对应的结构，可以直接解析


动态资源
使用动态网页技术发布的资源
jsp/servlet，php，asp
请求动态资源 服务器会执行这些动态资源 转换为静态资源再发送给浏览器

静态资源
html标签 搭建基础网页 展示页面内容

css 美化页面
javascript 控制页面元素 出现动态效果

-----------------------------
html
概念 超文本标记语言
超文本 使用超链接方法将各种不同空间文字信息组织在一起的网状文本

标记语言
------------
快速入门
后缀名为html
标签分为
        围堵标签：有开始标签和结束标签
        自闭和标签 开始标签和结束标签在一起 如 <br/>
标签可以嵌套
需要正确嵌套

属性是由键值对构成 需要用引号引起
不区分大小写
---------------
文件标签
html 文档的根标签
head 头标签 用于去指定html文档的属性 引入外部资源
title 标题标签
body 体标签

《!doctype html》定义文档类型

meta charset 定义字符集 utf-8
------------
文本标签
<!-- 注释-->  html的注释

标题 标签
《h1》 标题标签 从大到小 h1最大

《p》 段落标签

《hr》 展示一条水平线0003

《b》字体加粗
《I》斜体
《font》修改字体标签
face 字体
face=“楷体”

color 红绿蓝 三色定义
#值1值2值3 00~FF之间

width 宽度 数值的单位默认是px（）像素
数值 % 占比相对于 父元素的比例

《center》包裹的部分 页面居中显示

------------------------
图片标签
图片加载失败会 替换掉
属性 src 指定图片位置
图片存放位置
.3

alt 图片加载不出来 会显示文字

------------------
列表标签

有序列表
ol有序
li 列表项


无序列表
ul
li 列表项



超链接标签
a 定义一个超链接

href=‘连接’
新页面 target=“_self"
  target = "_blank"
  
连接可以写入 本地文件./5_列表标签.html

"mailto:邮箱地址"



-----------------------------------------
span标签 文本信息在一行展示 行内标签 内联标签

div 每个div为一行 进行换行

---------------------
语义化标签
<header>
<footer>
没有任何样式 只是提高可读性
-------------------------------------

表格标签
table
th
tr
td
cellpadding 文字和边缘的间隙距离
cellspacing 双线都编程单线
align 对齐方式

-------------------
caption 表格标题
thead 表格头部分

tbody 表格体部分
tfoot 表格脚部分

colspan 合并列
rowspan 和并行






bgcolor













2.html标签













3.使用标签编写网页