JAVA高级工程师课程笔记整理——（六）网页三剑客

（六）网页三剑客
html css js(脚本语言，重点)
一、html标签
    超链接调用js代码
    <a href="javascript:"></a>
    锚链接
    <a href="help.html#register"></a>    
    <a name="register"></a>
    列表标签：
        无序列表
            <ul>
                <li></li>
                <li></li>
            </ul>
        有序列表
            <ol>
                <li></li>
            </ol>
        定义列表
            <dl>
                <dt></dt>  //标题
                <dd></dd>  //标题对应的内容
            </dl>
    *表单：
        <form action="#" method="">
        </form>
            action如果为空或#，提交到本页面
        method   
            get(默认)  方法提交参数在浏览器可见
            post 一般用于多数据，保密数据提交
        <input>标签：
            type属性：
                text(默认)，password,button,
                checkbox,radio,submit,reset,
                file,hidden
        下拉框：
            <select></select>
        文本域标签：
            <textarea></textarea>
        关联表单元素
            <label for=""></label>
        只读：
            readonly="readonly"
        禁用：
            disabled="disabled"
    *表格：
        <table>
            <tr>
                <td></td><td></td>
            </tr>
        </table>
        <caption></caption> 表格标题
        <thead></thead>  
        <tbody></tbody>
        <tfoot></tfoot>
        跨列：
            colspan
        跨行
            rowspan
        内联框架
            iframe
                src 文件路径
            
网页样式css
    div+css       html5+css3
    块元素
        独占一行  div p ul li
    内联元素：
        一行排列显示 span a label img
    css标签：
        <style type="text/css">
            ..css代码
        </style>
        语法：
            选择器{
                样式1
                样式2
            }
        选择器：
            标签选择器
            ID选择器
                #id名{}
            类选择器（重复使用）:
                .类名{}
            优先级：    
            ID选择器>类选择器>标签选择器
            复合选择器：
                并集选择器
                    多个选择器之间可以是多个不同或相同类型；
                    多个选择器之间必须用英文半角输入法逗号“,”隔开；
                交集选择器
                    p#id{}
                后代选择器
                    p .class{}
        css的注释：
            /* 注释*/
        css三种引入方式：
            行内样式：
                style属性
            内部样式
                head标签里
            外部样式
                <link type="text/css" rel="stylesheet" href="ru.css"/>
        优先级：
            行内样式>内部样式>外部样式
    常用：
        font-size 设置字体大小
        color:  字体颜色
            
javascript(弱类型的编程语言)
    javascript的三种引入方式
    往网页输出
    document.write("<br/>")
    弹出框：
        alert(),prompt(),confirm()
    javascript的注释和java一样
    javascript的数据类型：
        undefined,String,number,Boolean,Null
    typeof
    声明变量：var
    1、数据类型转换
        parseInt();  NaN -- not a number
        当字符串首字符是数字就可以转换成number
        强制类型转换：
            Number()
            要求字符串都为数字
    2、比较运算符：
        == js中比较字符串用 ==
        === 判断类型和值都相同才为true
    3、循环：
        for  in
        var array = [3,34,"sdf",12.3,true];
        //for in
        for(var i in array){
            alert(array[i]);
        }    
    4、js中怎么定义一个数组？
        java
        int[] array = new int[2];
        int[] array2 = {3,5,6};
        int[] array3 = new int[]{33,4,54};
        js：
        var array = [3,34,"sdf",12.3,true];
        var arr2 = new Array();
        var arr3 = [];
    5、js的函数：
        系统函数
            parseInt(),Number(),isNaN();
            eval();
                    //将字符串作为脚本来执行
                    var k = eval("12+6*3");
        *自定义函数
            a.
                function 方法名(参数1,参数2...){
                }
            b.
                                    回调函数
                var 方法名 = function(参数1,参数2...){
                }
            有返回值的函数
            匿名函数：
                不需要调用，直接执行
        全局变量和局部变量
            用法和java一样
    6、js代码调试debug
        浏览器debug
    
    7、js常用事件：
        onload   页面加载执行
        onfocus  onblur
        onmouseover onmouseout
    8、try{
        }catch(err){
            err.message //错误信息
        }    
        console.log("");
BOM 浏览器模型
        window:
            history
            location
            Document
    window.alert() ---> alert();
    window.onload = function(){}//页面加载完毕执行
    window.location.href = "url" //设置页面跳转
    window.history
            back()  //返回上一个访问的页面
            forward //跳转到下一个访问的页面
            go(0)  //刷新当前页面
            location.reload();//刷新当前页面
    超链接调用js代码
    <a href="javascript:"></a>
文档对象模型：
        dom解析xml
        DOM文档对象模型
            document对象的属性：
                    title  获取文档的标题head
            document对象的方法：
                   write();// 往网页输出字符串
                    getElementById():返回对拥有指定id的第一个对象的引用
                    getElementsByTagName():返回带有指定名称的对象集合
                    getElementsByName():返回带有指定名称的对象集合
            innerHTML  获取标签体内容
            value   获取input的value值
    window对象常用的方法：
        open();
        打开窗口
            window.open("test2.html","爱好","height:100px,width:100px,toolbar=1");
        setInterval(fn,毫秒值);  //循环执行
        setTimeout(fn,毫秒值);  //只执行一次
    节点操作
        nodeName（节点名称）
        nodeValue（节点值）
        nodeType（节点类型）
            元素 1 、属性 2、 文本 3、 注释 8、 文档 9
    js dom节点操作
    创建节点
    createElement(tagName)
    appendChild   添加子节点
    removeChild   删除节点

js内置对象
    String
        获取字符串长度： length
        indexOf(str)  第一次出现的位置
        substring(index1,index2) 字符串提取
        split(str)  字符串切割
    Math：
        round();四舍五入的方法
    Date：
        var date = new Date();
    Array
        var 数组名称 = new Array();   // 创建空数组对象
        var 数组名称 = new Array(size);// 创建size个undefined成员的数组
        var 数组名称 = new Array(element0, element0, ..., elementn );