HTML

value 页面显示的内容  

文件标签
html  head  title  body

文本标签
注释  <h1>to<h6>  <p>  <br> <b>  <i>  <font>  
<center> -->: color size face
<hr> 属性: color width size align-->center left right

属性 color  width (像素或相对于父元素的比例)

列表标签
有序  ol> li
无序  ul> li

链接
a标签
属性  
href 定义url   
target 定义打开方式-->1. _self: 默认值 在当前页面打开
                      2. _blank: 空白页面打开

                                          
div 块级标签
span 行内标签


表格标签
table
        width border bgcolor align
        
tr
  bgcolor align

td
  colspan  rowspan

th
<caption> 标题
<thead> 表格头
<tbody> 体
<tfood> 脚



表单标签form
属性: action 提交地址  
       method 提交方式-->get post {地址栏显示; 字数限制; 安全性  }
         
表单项数据想提交,必须指定其name属性

  input
    type属性: text(placeholder 灰体,输入内容后清除) password  hidden
                        radio  checkbox  file  
                        submit  button  img(src) reset
        select, texteara                                 

     select--><select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>  {selected 默认选择该项}
         </select><br>
     texteara --> cols 列  rows 行

         
         
         
         
CSS

1. 行内  
   标签内使用style属性指定css 代码
   <div  style=" color:red; "> aa </div>
2. 内部
   在head标签内定义style标签
   <style> div{ color:red; } </style>  
   <div> aa </div>
3. 外链
  <link rel="stylesheet" href="css文件的路径.css">

css选择器
  id选择器                                        #ID名{}
  标签选择器                    标签名{}
  类选择器(相同class属性值)                .class后属性值

  并列选择器       选择器1,选择器2{}
  子选择器         选择器1(父) 选择器2(子){}
  父选择器             选择器1(父)>选择器2(子){}
  属性选择器       元素名[属性名="值"]{} / 元素名[属性名]{}
  *{}              选择所有元素

属性
  font-size  color  text-align  line-height  
  background  border  width  height  

盒子模型
  padding  内边距
  margin   外边距
  border   边框

浮动 left/right


JavaScript
与html结合三种方式
1. 行内式    双引号
<元素名 属性名="javascript:js代码;">
<a href="javascript:void(0);">test</a>

2.内联式
3.外链式
<script src="js代码路径"> </script>


数据类型
基本:
number  String  boolean  null  undefined
引用:  对象

转boolean
string  空字符串false
number   0为false
null 和 undefind 为false
对象 为ture

变量
弱类型语言
[强弱之分  在开辟变量存储空间后,是否定义数据类型]
typeof 运算符
   null 运算后返回object

JS中,运算数不是符合要求的运算类型,js引擎会自动转换
string 转 number 按照内容转换, 有非number内容转为NAN
boolean  true 为 1, false 为 0

=== 和 ==区别

定义变量  var 可以不加
加   局部变量
不加 全局变量(不推荐)

正则表达式
^ 开始   $ 结束
\w 单个单词字符 eg:[a-zA-Z0-9]
\d 单个数字字符 eg:[0-9]
? 0次或1次  + 1次或多次  * 0次或多次
{m,n} 最少m次 最多n次

var reg = / 正则表达式 /;  或 new RegExp("正则表达式");
test(参数)  参数字符串是否符合该正则表达式

Global
全局对象  不需对象,直接调用
encodeURL()  编码
decodeURL()  解码

encodeURLComponent() 编码(编码多,若编码网址,都会进行编码)
decodeURLComponent() 解码

parseInt() 字符串转换为数字
  字符串 逐一 查找数字内容,直到非数字内容

isNaN() 判断是否为NaN
eval() 将js中字符串 作为脚本执行



DOM
文档对象模型
控制html文档的内容
获取页面标签(元素)对象: Element

Element
1. 修改属性值     <a herf= 属性值> 内容 </a>
2. 修改标签体内容   
   先获取,再用 innerHTML 方法调用


事件

绑定事件
方式1: 在html标签上,指定事件属性(操作),属性值就是js代码
方式2: 通过js获取元素对象,指定事件属性, 设置一个函数


BOM
浏览器对象模型

Window
Navigator
Screen
History
Location

Window对象
alert()
confirm() 点击确定,返回ture  点击取消,返回false

打开/关闭方法
open()     
字符串参数可输入打开指定网址  
close()
谁调用关闭谁

定时器
setTimeout()  指定毫秒后执行函数
1.js代码或方法对象  2.毫秒值

返回值: 唯一标识, 用于取消该定时器

clearTimeout()  取消由setTimeout()设置的timeout 参数传setTimeout()的标示

setInterval() 周期性执行..
clearInterval()


属性:
获得其他BOM对象:
获得DOM对象: document


Location
方法:   reload() 刷新
属性:   href 获取返回值(设置或返回url)


History
back()   forward()   go()   
属性: length



DOM
文档对象模型
核心DOM
Document   文档
Element    元素
Attribute  属性
Text       文本
Comment    注释

Node      节点对象

核心DOM模型
方法:
获取Element对象
1.getElementById()            id属性值
2.getElementsByTargetName()   元素名称
3.getElementsByClassName()    Class属性值
4.getElementsByName()                  Name属性值

创建其他BOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()

Element: 元素对象
通过document来获取或创建

方法: removeAttribute() 删除属性   setAttribute() 设置属性

Node: 节点对象,其他5个的父对象
所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild()
removeChild()
replaceChild()

属性:
parentNode  返回节点的父节点


HTML DOM


事件
常见事件:
1. onclick 单击       ondblclick 双击
2. onfocus 获得焦点   onblur 失去焦点
3. onload 加载事件  页面或图像完成加载
4. 鼠标事件: onmousedown  按下
                     onmouseup    松开
                         onmousemove  移动        
                         onmouseover  鼠标移到某元素上
                         onmouserout  从某元素移开

方法内传入参数可接收值( 左中右--> 0,1,2 )
                        
                        
5.键盘事件
  onkeydown   键盘按下
  onkeyup     键盘松开
  onkeypress  键盘按下并松开

方法内传入参数,调用参数的 keyCode() 方法可接收值( 回车 --> 13 )

6. 选择和改变
onchange 域内容被改变
onselect  文本被选上

7. 表单事件
onsubmit
可阻止表单提交  由函数内返回值决定
onreset

<xxx   zzz=""> xxx-->标签  zzz-->属性

HTML

value 页面显示的内容  

文件标签
html  head  title  body

文本标签
注释  <h1>to<h6>  <p>  <br> <b>  <i>  <font>  
<center> -->: color size face
<hr> 属性: color width size align-->center left right

属性 color  width (像素或相对于父元素的比例)

列表标签
有序  ol> li
无序  ul> li

链接
a标签
属性  
href 定义url   
target 定义打开方式-->1. _self: 默认值 在当前页面打开
                      2. _blank: 空白页面打开

                                          
div 块级标签
span 行内标签


表格标签
table
        width border bgcolor align
        
tr
  bgcolor align

td
  colspan  rowspan

th
<caption> 标题
<thead> 表格头
<tbody> 体
<tfood> 脚



表单标签form
属性: action 提交地址  
       method 提交方式-->get post {地址栏显示; 字数限制; 安全性  }
         
表单项数据想提交,必须指定其name属性

  input
    type属性: text(placeholder 灰体,输入内容后清除) password  hidden
                        radio  checkbox  file  
                        submit  button  img(src) reset
        select, texteara                                 

     select--><select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>  {selected 默认选择该项}
         </select><br>
     texteara --> cols 列  rows 行

         
         
         
         
CSS

1. 行内  
   标签内使用style属性指定css 代码
   <div  style=" color:red; "> aa </div>
2. 内部
   在head标签内定义style标签
   <style> div{ color:red; } </style>  
   <div> aa </div>
3. 外链
  <link rel="stylesheet" href="css文件的路径.css">

css选择器
  id选择器                                        #ID名{}
  标签选择器                    标签名{}
  类选择器(相同class属性值)                .class后属性值

  并列选择器       选择器1,选择器2{}
  子选择器         选择器1(父) 选择器2(子){}
  父选择器             选择器1(父)>选择器2(子){}
  属性选择器       元素名[属性名="值"]{} / 元素名[属性名]{}
  *{}              选择所有元素

属性
  font-size  color  text-align  line-height  
  background  border  width  height  

盒子模型
  padding  内边距
  margin   外边距
  border   边框

浮动 left/right


JavaScript
与html结合三种方式
1. 行内式    双引号
<元素名 属性名="javascript:js代码;">
<a href="javascript:void(0);">test</a>

2.内联式
3.外链式
<script src="js代码路径"> </script>


数据类型
基本:
number  String  boolean  null  undefined
引用:  对象

转boolean
string  空字符串false
number   0为false
null 和 undefind 为false
对象 为ture

变量
弱类型语言
[强弱之分  在开辟变量存储空间后,是否定义数据类型]
typeof 运算符
   null 运算后返回object

JS中,运算数不是符合要求的运算类型,js引擎会自动转换
string 转 number 按照内容转换, 有非number内容转为NAN
boolean  true 为 1, false 为 0

=== 和 ==区别

定义变量  var 可以不加
加   局部变量
不加 全局变量(不推荐)

正则表达式
^ 开始   $ 结束
\w 单个单词字符 eg:[a-zA-Z0-9]
\d 单个数字字符 eg:[0-9]
? 0次或1次  + 1次或多次  * 0次或多次
{m,n} 最少m次 最多n次

var reg = / 正则表达式 /;  或 new RegExp("正则表达式");
test(参数)  参数字符串是否符合该正则表达式

Global
全局对象  不需对象,直接调用
encodeURL()  编码
decodeURL()  解码

encodeURLComponent() 编码(编码多,若编码网址,都会进行编码)
decodeURLComponent() 解码

parseInt() 字符串转换为数字
  字符串 逐一 查找数字内容,直到非数字内容

isNaN() 判断是否为NaN
eval() 将js中字符串 作为脚本执行



DOM
文档对象模型
控制html文档的内容
获取页面标签(元素)对象: Element

Element
1. 修改属性值     <a herf= 属性值> 内容 </a>
2. 修改标签体内容   
   先获取,再用 innerHTML 方法调用


事件

绑定事件
方式1: 在html标签上,指定事件属性(操作),属性值就是js代码
方式2: 通过js获取元素对象,指定事件属性, 设置一个函数


BOM
浏览器对象模型

Window
Navigator
Screen
History
Location

Window对象
alert()
confirm() 点击确定,返回ture  点击取消,返回false

打开/关闭方法
open()     
字符串参数可输入打开指定网址  
close()
谁调用关闭谁

定时器
setTimeout()  指定毫秒后执行函数
1.js代码或方法对象  2.毫秒值

返回值: 唯一标识, 用于取消该定时器

clearTimeout()  取消由setTimeout()设置的timeout 参数传setTimeout()的标示

setInterval() 周期性执行..
clearInterval()


属性:
获得其他BOM对象:
获得DOM对象: document


Location
方法:   reload() 刷新
属性:   href 获取返回值(设置或返回url)


History
back()   forward()   go()   
属性: length



DOM
文档对象模型
核心DOM
Document   文档
Element    元素
Attribute  属性
Text       文本
Comment    注释

Node      节点对象

核心DOM模型
方法:
获取Element对象
1.getElementById()            id属性值
2.getElementsByTargetName()   元素名称
3.getElementsByClassName()    Class属性值
4.getElementsByName()                  Name属性值

创建其他BOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()

Element: 元素对象
通过document来获取或创建

方法: removeAttribute() 删除属性   setAttribute() 设置属性

Node: 节点对象,其他5个的父对象
所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild()
removeChild()
replaceChild()

属性:
parentNode  返回节点的父节点


HTML DOM


事件
常见事件:
1. onclick 单击       ondblclick 双击
2. onfocus 获得焦点   onblur 失去焦点
3. onload 加载事件  页面或图像完成加载
4. 鼠标事件: onmousedown  按下
                     onmouseup    松开
                         onmousemove  移动        
                         onmouseover  鼠标移到某元素上
                         onmouserout  从某元素移开

方法内传入参数可接收值( 左中右--> 0,1,2 )
                        
                        
5.键盘事件
  onkeydown   键盘按下
  onkeyup     键盘松开
  onkeypress  键盘按下并松开

方法内传入参数,调用参数的 keyCode() 方法可接收值( 回车 --> 13 )

6. 选择和改变
onchange 域内容被改变
onselect  文本被选上

7. 表单事件
onsubmit
可阻止表单提交  由函数内返回值决定
onreset

<xxx   zzz=""> xxx-->标签  zzz-->属性