HTML、JavaScript总结

一  表单标签
表单：
        * 概念：用于采集用户输入的数据的。用于和服务器进行交互。
        * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        * 属性：
            * action：指定提交数据的URL
            * method:指定提交方式
                * 分类：一共7种，2种比较常用
                   * get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post：
                        2. 请求参数不会在地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。
<form action="#" method="get">
        * 表单项中的数据要想被提交：必须指定其name属性
表单项标签：
                * input：可以通过type属性值，改变元素展示的样式
                        * type属性：
                                * text：文本输入框，默认值
                                        * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
                        * radio:单选框
                                        * 注意：
                                                1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                                                2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                                                3. checked属性，可以指定默认值
                        * checkbox：复选框
                                        * 注意：
                                                1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                                                2. checked属性，可以指定默认值


* label：指定输入项的文字描述信息
                           * 注意：
                                   * label的for属性一般会和 input 的 id属性值 对应。如果对了，则点击label区域，会让input输入框获取焦点。

H:/%E6%9C%89%E9%81%93%E7%AC%94%E8%AE%B0/chibei89@163.com/20e903c4f53742379ac757b07be9b847/clipboard.png

                  * select: 下拉列表
                        * 子元素：option，指定列表项
* textarea：文本域
                        * cols：指定列数，每一行有多少个字符
                        * rows：默认多少行。

file：文件选择框
                        * hidden：隐藏域，用于提交一些信息。
                                * 按钮：
                                        * submit：提交按钮。可以提交表单
                                        * button：普通按钮
                                        * image：图片提交按钮
                                                * src属性指定图片的路径
CSS：页面美化和布局控制
1. 概念： Cascading Style Sheets 层叠样式表
        * 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
        1. 功能强大
        2. 将内容展示和样式控制分离
                * 降低耦合度。解耦
                * 让分工协作更容易
                * 提高开发效率
3. CSS的使用：CSS与html结合方式
        1. 内联样式
                 * 在标签内使用style属性指定css代码
                 * 如：<div style="color:red;">hello css</div>
        2. 内部样式
                * 在head标签内，定义style标签，style标签的标签体内容就是css代码
        3. 外部样式
                1. 定义css资源文件。
                2. 在head标签内，定义link标签，引入外部的资源文件
        * 注意：
                * 1,2,3种方式 css作用范围越来越大
                * 1方式不常用，后期常用2,3
                * 3种格式可以写为：
                        <style>
                        @import "css/a.css";
                    </style>
4. css语法：
        * 格式：
                选择器 {
                        属性名1:属性值1;
                        属性名2:属性值2;
                        ...
                }
        * 选择器:筛选具有相似特征的元素
        * 注意：
                * 每一对属性需要使用；隔开，最后一对属性可以不加；
5. 选择器：筛选具有相似特征的元素
        * 分类：
                1. 基础选择器
                    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
                        * 语法：#id属性值{}
                    2. 元素选择器：选择具有相同标签名称的元素
                        * 语法： 标签名称{}
                        * 注意：id选择器优先级高于元素选择器
                    3. 类选择器：选择具有相同的class属性值的元素。
                        * 语法：.class属性值{}
                        * 注意：类选择器选择器优先级高于元素选择器
                2. 扩展选择器：
                        1. 选择所有元素：
                                * 语法： *{}
                        2. 并集选择器：
                                * 选择器1,选择器2{}
                        3. 后代选择器：筛选选择器1元素下的选择器2元素
                                * 语法：  选择器1 选择器2{}
                        4. 子元素选择器：筛选选择器1的子元素选择器2
                                * 语法：  选择器1 > 选择器2{}
                        5. 属性选择器：选择元素名称，属性名=属性值的元素
                                * 语法：  元素名称[属性名="属性值"]{}
                        6. 伪类选择器：选择一些元素具有的状态
                                * 语法： 元素:状态{}
                                * 如： <a>
                                        * 状态：
                                                * link：初始化的状态
                                                * visited：被访问过的状态
                                                * active：正在访问状态
                                                * hover：鼠标悬浮状态
6. 属性
        1. 字体、文本
                * font-size：字体大小
                * color：文本颜色
                * text-align：对其方式
                * line-height：行高
        2. 背景
                * background：
        3. 边框
                * border：设置边框，符合属性
        4. 尺寸
                * width：宽度
                * height：高度
        5. 盒子模型：控制布局
                * margin：外边距
                * padding：内边距
                        * 默认情况下内边距会影响整个盒子的大小
                        * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小.
                * float：浮动
                        * left
                        * right
JavaScript
一门客户端脚本语言,不需要编译，直接就可以被浏览器解析执行了.
* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
ECMAScript：客户端脚本语言的标准
1. 基本语法：
                1. 与html结合方式
                        1. 内部JS：
                                * 定义<script>，标签体内容就是js代码
                        2. 外部JS：
                                * 定义<script>，通过src属性引入外部的js文件
                        * 注意：
                                1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
                                2. <script>可以定义多个。
                2. 注释
                        与JAVA相同
                3. 数据类型：
                        1. 原始数据类型(基本数据类型)：
                                1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
                                2. string：字符串。 字符串  "abc" "a" 'abc'
                                3. boolean: true和false
                                4. null：一个对象为空的占位符
                                5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined               
                        2. 引用数据类型：对象        
                4. 变量
                        * 变量：一小块存储数据的内存空间
                        * Java语言是强类型语言，而JavaScript是弱类型语言。
                                * 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
                                * 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
                        * 语法：
                                * var 变量名 = 初始化值;
                        * typeof运算符：获取变量的类型。
                                * 注：null运算后得到的是object
                5. 运算符
                        1. 一元运算符：只有一个运算数的运算符
                                * +(-)：正负号
    其余和java一样
                            * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                    * 其他类型转number：
                        * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                        * boolean转number：true转为1，false转为0
                        2. 比较运算符
                         == ===(全等于)
                                * 比较方式
                  1. 类型相同：直接比较
                      * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
                  2. 类型不同：先进行类型转换，再比较
                      * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
                        3. 逻辑运算符
                                && || !
                                * 其他类型转boolean：
                   1. number：0或NaN为假，其他为真
                   2. string：除了空字符串("")，其他都是true
                   3. null&undefined:都是false
                   4. 对象：所有对象都为true
        4.流程控制语句：
                   1. switch:
                                * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
                                        * switch(变量):
                                                case 值:
                                * 在JS中,switch语句可以接受任意的原始数据类型
                   2. JS特殊语法：
                        1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
                        2. 变量的定义使用var关键字，也可以不使用
                        * 用var定义的变量是局部变量
                * 不用：定义的变量是全局变量(不建议)
2. 基本对象：
     1. Function：函数(方法)对象
            1. 创建：
                1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                2.
                    function 方法名称(形式参数列表){
                        方法体
                   }
                3.
                   var 方法名 = function(形式参数列表){
                        方法体
                  }  
            3. 属性：
                length:代表形参的个数
            4. 特点：
                1. 方法定义是，形参的类型不用写,返回值类型也不写。
                2. 方法是一个对象，如果定义名称相同的方法，会覆盖
                3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
                4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
            5. 调用：
                方法名称(实际参数列表);
        2. Array:数组对象
            1. 创建：
                 1. var arr = new Array(元素列表);
var arr1 = new Array(1,2,3);
                 2. var arr = new Array(默认长度);
var arr2 = new Array(5);
                 3. var arr = [元素列表];
var arr = [1,"abc",true];
            2. 方法
                join(参数):将数组中的元素按照指定的分隔符拼接为字符串
arr.join("--")
                push()        向数组的末尾添加一个或更多元素，并返回新的长度。
            3. 属性
                length:数组的长度
            4. 特点：
                1. JS中，数组元素的类型可变的。
                2. JS中，数组长度可变的。
        3. Date：日期对象
            1. 创建：
                var date = new Date();
            2. 方法：
                toLocaleString()：返回当前date对象对应的时间本地字符串格式
                getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
        4. Math：数学对象
            1. 创建：
                * 特点：Math对象不用创建，直接使用。  Math.方法名();
            2. 方法：
                random():返回 0 ~ 1 之间的随机数。 含0不含1
                ceil(x)：对数进行上舍入。
                floor(x)：对数进行下舍入。
                round(x)：把数四舍五入为最接近的整数。
            3. 属性：
                PI
        5. RegExp：正则表达式对象
                        1. 正则表达式：定义字符串的组成规则。
                                1. 单个字符:[]
                                        如： [a] [ab] [a-zA-Z0-9_]
                                        * 特殊符号代表特殊含义的单个字符:
                                                \d:单个数字字符 [0-9]
                                                \w:单个单词字符[a-zA-Z0-9_]
                                2. 量词符号：
                                        ?：表示出现0次或1次
                                        *：表示出现0次或多次
                                        +：出现1次或多次
                                        {m,n}:表示 m<= 数量 <= n
                                                * m如果缺省： {,n}:最多n次
                                                * n如果缺省：{m,} 最少m次
                                3. 开始结束符号
                                        * ^:开始
                                        * $:结束
                        2. 正则对象：
                                1. 创建
                                        1. var reg = new RegExp("正则表达式");
                                        2. var reg = /正则表达式/;
                                2. 方法        
                                        1. test(参数):验证指定的字符串是否符合正则定义的规范        
6. Global
                        1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。  方法名();
                        2. 方法：
                            encodeURI():url编码
                            decodeURI():url解码
                            encodeURIComponent():url编码,编码的字符更多
                            decodeURIComponent():url解码
                            parseInt():将字符串转为数字
                                * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
                            isNaN():判断一个值是否是NaN
                                * NaN六亲不认，连自己都不认。NaN参与的==比较全部问fals
                            eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
            3. URL编码
               传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

HTML、JavaScript总结

一  表单标签
表单：
        * 概念：用于采集用户输入的数据的。用于和服务器进行交互。
        * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        * 属性：
            * action：指定提交数据的URL
            * method:指定提交方式
                * 分类：一共7种，2种比较常用
                   * get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post：
                        2. 请求参数不会在地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。
<form action="#" method="get">
        * 表单项中的数据要想被提交：必须指定其name属性
表单项标签：
                * input：可以通过type属性值，改变元素展示的样式
                        * type属性：
                                * text：文本输入框，默认值
                                        * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
                        * radio:单选框
                                        * 注意：
                                                1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                                                2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                                                3. checked属性，可以指定默认值
                        * checkbox：复选框
                                        * 注意：
                                                1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                                                2. checked属性，可以指定默认值


* label：指定输入项的文字描述信息
                           * 注意：
                                   * label的for属性一般会和 input 的 id属性值 对应。如果对了，则点击label区域，会让input输入框获取焦点。

H:/%E6%9C%89%E9%81%93%E7%AC%94%E8%AE%B0/chibei89@163.com/20e903c4f53742379ac757b07be9b847/clipboard.png

                  * select: 下拉列表
                        * 子元素：option，指定列表项
* textarea：文本域
                        * cols：指定列数，每一行有多少个字符
                        * rows：默认多少行。

file：文件选择框
                        * hidden：隐藏域，用于提交一些信息。
                                * 按钮：
                                        * submit：提交按钮。可以提交表单
                                        * button：普通按钮
                                        * image：图片提交按钮
                                                * src属性指定图片的路径
CSS：页面美化和布局控制
1. 概念： Cascading Style Sheets 层叠样式表
        * 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
        1. 功能强大
        2. 将内容展示和样式控制分离
                * 降低耦合度。解耦
                * 让分工协作更容易
                * 提高开发效率
3. CSS的使用：CSS与html结合方式
        1. 内联样式
                 * 在标签内使用style属性指定css代码
                 * 如：<div style="color:red;">hello css</div>
        2. 内部样式
                * 在head标签内，定义style标签，style标签的标签体内容就是css代码
        3. 外部样式
                1. 定义css资源文件。
                2. 在head标签内，定义link标签，引入外部的资源文件
        * 注意：
                * 1,2,3种方式 css作用范围越来越大
                * 1方式不常用，后期常用2,3
                * 3种格式可以写为：
                        <style>
                        @import "css/a.css";
                    </style>
4. css语法：
        * 格式：
                选择器 {
                        属性名1:属性值1;
                        属性名2:属性值2;
                        ...
                }
        * 选择器:筛选具有相似特征的元素
        * 注意：
                * 每一对属性需要使用；隔开，最后一对属性可以不加；
5. 选择器：筛选具有相似特征的元素
        * 分类：
                1. 基础选择器
                    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
                        * 语法：#id属性值{}
                    2. 元素选择器：选择具有相同标签名称的元素
                        * 语法： 标签名称{}
                        * 注意：id选择器优先级高于元素选择器
                    3. 类选择器：选择具有相同的class属性值的元素。
                        * 语法：.class属性值{}
                        * 注意：类选择器选择器优先级高于元素选择器
                2. 扩展选择器：
                        1. 选择所有元素：
                                * 语法： *{}
                        2. 并集选择器：
                                * 选择器1,选择器2{}
                        3. 后代选择器：筛选选择器1元素下的选择器2元素
                                * 语法：  选择器1 选择器2{}
                        4. 子元素选择器：筛选选择器1的子元素选择器2
                                * 语法：  选择器1 > 选择器2{}
                        5. 属性选择器：选择元素名称，属性名=属性值的元素
                                * 语法：  元素名称[属性名="属性值"]{}
                        6. 伪类选择器：选择一些元素具有的状态
                                * 语法： 元素:状态{}
                                * 如： <a>
                                        * 状态：
                                                * link：初始化的状态
                                                * visited：被访问过的状态
                                                * active：正在访问状态
                                                * hover：鼠标悬浮状态
6. 属性
        1. 字体、文本
                * font-size：字体大小
                * color：文本颜色
                * text-align：对其方式
                * line-height：行高
        2. 背景
                * background：
        3. 边框
                * border：设置边框，符合属性
        4. 尺寸
                * width：宽度
                * height：高度
        5. 盒子模型：控制布局
                * margin：外边距
                * padding：内边距
                        * 默认情况下内边距会影响整个盒子的大小
                        * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小.
                * float：浮动
                        * left
                        * right
JavaScript
一门客户端脚本语言,不需要编译，直接就可以被浏览器解析执行了.
* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
ECMAScript：客户端脚本语言的标准
1. 基本语法：
                1. 与html结合方式
                        1. 内部JS：
                                * 定义<script>，标签体内容就是js代码
                        2. 外部JS：
                                * 定义<script>，通过src属性引入外部的js文件
                        * 注意：
                                1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
                                2. <script>可以定义多个。
                2. 注释
                        与JAVA相同
                3. 数据类型：
                        1. 原始数据类型(基本数据类型)：
                                1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
                                2. string：字符串。 字符串  "abc" "a" 'abc'
                                3. boolean: true和false
                                4. null：一个对象为空的占位符
                                5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined               
                        2. 引用数据类型：对象        
                4. 变量
                        * 变量：一小块存储数据的内存空间
                        * Java语言是强类型语言，而JavaScript是弱类型语言。
                                * 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
                                * 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
                        * 语法：
                                * var 变量名 = 初始化值;
                        * typeof运算符：获取变量的类型。
                                * 注：null运算后得到的是object
                5. 运算符
                        1. 一元运算符：只有一个运算数的运算符
                                * +(-)：正负号
    其余和java一样
                            * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                    * 其他类型转number：
                        * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                        * boolean转number：true转为1，false转为0
                        2. 比较运算符
                         == ===(全等于)
                                * 比较方式
                  1. 类型相同：直接比较
                      * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
                  2. 类型不同：先进行类型转换，再比较
                      * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
                        3. 逻辑运算符
                                && || !
                                * 其他类型转boolean：
                   1. number：0或NaN为假，其他为真
                   2. string：除了空字符串("")，其他都是true
                   3. null&undefined:都是false
                   4. 对象：所有对象都为true
        4.流程控制语句：
                   1. switch:
                                * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
                                        * switch(变量):
                                                case 值:
                                * 在JS中,switch语句可以接受任意的原始数据类型
                   2. JS特殊语法：
                        1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
                        2. 变量的定义使用var关键字，也可以不使用
                        * 用var定义的变量是局部变量
                * 不用：定义的变量是全局变量(不建议)
2. 基本对象：
     1. Function：函数(方法)对象
            1. 创建：
                1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                2.
                    function 方法名称(形式参数列表){
                        方法体
                   }
                3.
                   var 方法名 = function(形式参数列表){
                        方法体
                  }  
            3. 属性：
                length:代表形参的个数
            4. 特点：
                1. 方法定义是，形参的类型不用写,返回值类型也不写。
                2. 方法是一个对象，如果定义名称相同的方法，会覆盖
                3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
                4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
            5. 调用：
                方法名称(实际参数列表);
        2. Array:数组对象
            1. 创建：
                 1. var arr = new Array(元素列表);
var arr1 = new Array(1,2,3);
                 2. var arr = new Array(默认长度);
var arr2 = new Array(5);
                 3. var arr = [元素列表];
var arr = [1,"abc",true];
            2. 方法
                join(参数):将数组中的元素按照指定的分隔符拼接为字符串
arr.join("--")
                push()        向数组的末尾添加一个或更多元素，并返回新的长度。
            3. 属性
                length:数组的长度
            4. 特点：
                1. JS中，数组元素的类型可变的。
                2. JS中，数组长度可变的。
        3. Date：日期对象
            1. 创建：
                var date = new Date();
            2. 方法：
                toLocaleString()：返回当前date对象对应的时间本地字符串格式
                getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
        4. Math：数学对象
            1. 创建：
                * 特点：Math对象不用创建，直接使用。  Math.方法名();
            2. 方法：
                random():返回 0 ~ 1 之间的随机数。 含0不含1
                ceil(x)：对数进行上舍入。
                floor(x)：对数进行下舍入。
                round(x)：把数四舍五入为最接近的整数。
            3. 属性：
                PI
        5. RegExp：正则表达式对象
                        1. 正则表达式：定义字符串的组成规则。
                                1. 单个字符:[]
                                        如： [a] [ab] [a-zA-Z0-9_]
                                        * 特殊符号代表特殊含义的单个字符:
                                                \d:单个数字字符 [0-9]
                                                \w:单个单词字符[a-zA-Z0-9_]
                                2. 量词符号：
                                        ?：表示出现0次或1次
                                        *：表示出现0次或多次
                                        +：出现1次或多次
                                        {m,n}:表示 m<= 数量 <= n
                                                * m如果缺省： {,n}:最多n次
                                                * n如果缺省：{m,} 最少m次
                                3. 开始结束符号
                                        * ^:开始
                                        * $:结束
                        2. 正则对象：
                                1. 创建
                                        1. var reg = new RegExp("正则表达式");
                                        2. var reg = /正则表达式/;
                                2. 方法        
                                        1. test(参数):验证指定的字符串是否符合正则定义的规范        
6. Global
                        1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。  方法名();
                        2. 方法：
                            encodeURI():url编码
                            decodeURI():url解码
                            encodeURIComponent():url编码,编码的字符更多
                            decodeURIComponent():url解码
                            parseInt():将字符串转为数字
                                * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
                            isNaN():判断一个值是否是NaN
                                * NaN六亲不认，连自己都不认。NaN参与的==比较全部问fals
                            eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
            3. URL编码
               传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2