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 );