web基礎2

HTML    標籤 屬性    <!-- aaa -->    標籤分類        自閉合標籤            <meta charset="UTF-8"/>            <link>        主動閉合            <title>$Title$</title>    各類符號        &nbsp;&gt;&lt;        www.cnblogs.com/web-d/archive/2010/04/16/1713298.html    20標籤        html        head        body        p  段落，每一個標籤之間有空行        br 換行，沒有間距        h1-h6 標題        span  行內標籤，白板，        div   塊級標籤，白板， id, style='height:600px;'        input type=text/password/button/submit  value=登錄 name='xxx'/'query'自閉合  行內標籤        from  action='url' method='GET/POST'        input type='radio' name='name同樣互斥' value='xx'  checked='checked'        input type='checkbox' name='name相同，key相同發送時在一塊兒', value='xx', checked='checked'        input type='file' name='filename'        from enctype='multipart/form-data'        input type="reset" value='重置'        textarea name='xx' 非自閉合，默認值寫中間        select name='classify' size=10(默認爲1) multiple='multiple'            option value='xxx' selected='selected' xxx /option            optgroup label='xxxx'        a a標籤，href='url' target='_blank 跳轉  行內標籤            錨，href='#id3            img src='path/*.jpg' style='height:200px;width:200px;' alt='xxx' title='girl'        ul 符號            li xxx /li            li xxx /li        /ul        ol 序號            li xxx /li            li xxx /li        /ol        dl 分層            dt xxx /dt  標題            dd xxx /dd  內容        /dl        table 表格 border = 1 邊框            thead/ 表頭/            tr 行                th 列 /th            tbody/  表內容/            tr 行                td 列 /td  colspan='2' rowspan='2'        label 用戶名 /label for='username'與input標籤id=username關聯        fieldset            legend 登錄 /legend        /fieldsetCSS    顏色 RGB    位置    style='backgroud-color:#2459a2;'    style='height:48px;'    style='width:48px;'    style=''    style=''    style=''    style=''    CSS樣式  / CSS文件        -id選擇器        -class選擇器        -div標籤選擇器        -關聯選擇器/層級選擇器        -組合選擇器        -屬性選擇器    link rel='stylesheet' href='commons.css'    註釋        /*  */    邊框        border='1' solid:red dotted red            border-top-color            border-top-style            border-top-width            border-right-color/style/width            border-bottom-color/style/width            border-left-color/style/width    背景色        background-color    float        float:left        div style='clear: both;'    display 行內標籤轉換， 行內標籤沒法設置 高度/寬度/邊距margin        display:inline/block        display:inline-block        display:none 標籤消失    padding margin(0,auto)  內邊距 外邊距        body margin:0 auto        margin-top:1px  外邊到top的距離        padding-top:1px  內部到top的距離    text-align        text-align:center 內容水平居中        vertical-align:middle 上下居中    height,width,line-height,color,font-size,font-weight        line-height:48px 上下左右範圍內水平居中，垂直方向        font-weight: bold 加粗        font-size：48px 字體大小        color： 字體顏色    自適應        定義小於xx px , 使用其餘樣式        media    頁面變形        外層div限制像素寬度，內層定義百分比        小於像素寬度，會出現滾動條    position        <div style='width:50px;height:50px;position:fixed;right:0px;top:1px;bottom:1px;'></div>        absolute 絕對位置，不能隨網頁移動，通常和relative一塊兒使用時，相對於父類標籤的固定位置            <div style='position:relative;'>                <div style='position:absolute;top:0;left:0;'></div>            </div>    opacity:0.5 透明度（0-1）    z-index:10 分層次優先級         <div style='z-index:10;position:fixed;top:50%;bottom:50%;left:50%;right:50%;margin-left:-200px;margin-top:-200px;'>    overflow 圖片超過div隱藏或滾動條        <div style='height:200px;width:300px;overflow:auto/hidden'>            <img src='1.jpg'>        </div>    hover 當鼠標移動到標籤上時生效        background-color:blue    background        background-image:url('image/4.jpg');若是div大於圖片，默認圖片重複置放        background-repeat:no-repeat/repeat-x/repeat-y 不堆疊/橫向/縱向        background-position-x/y:10px;請求頭/請求體get方法，打包成一個字典提交submit    數據拼接到URL中發送post方法    數據放到內容發送javascript基本語法    IE是JS的解釋器，代碼存在於HTML中    執行順序先執行head,後執行body的JS    //    /*  */    <script src='commons.js'> #連接外部文件    <script type='text/javascript'>        function func(){            func..        }        alert(123)    </script>    www.cnblogs.com/wupeiqi/articles/5602773.html    變量        全局變量 name = 'xx'        局部變量 var name = 'xx'    基本數據類型        數字            age = 18;            parseInt(string)            parseFloat(string)        字符串            x.charAt() #根據索引取值            x.substring(1,4) 1-3字符            x.length  總長度            x.trim()            x.concat(y) # 拼接            x.indexof('le')   #返回            x.slice(start,end) 切片            x.toLowerCase()            x.toUpperCase()            x.split()            x.search(regexp)            x.match(regexp)            x.replace(regexp,replacement)            setInterval("",2000); 每2秒執行''內容  定時器            console.log(xx)            tag = document.getElementById("i1")  # id值            content = tag.innerText            f = content.charAt(0)            l = content.substring(1,content.length)            new_content = l + f            tag.innerText = new_content        布爾boolean           true/false        數組            a=[11,22,33]            length            push(xx)  #尾部追加            pop()   #尾部獲取一個            unshift(xx)  # 頭部插入            shift(xx)   # 頭部移除            splice(start,deleteCount,value,...) 起始位置，刪除個數，插入的值            slice()  #切片            reverse() #反轉            join(sep) #            concat(val,...)            sort()        字典(對象類型)            a ={'k1':'v1',"k2":"v2"}    for循環        1，循環索引        a=[11,22,33] / 字典        for(var item in a){            console.log(a[item])                    }        2，            for(var i=0;i<10;i++){                ...                break;                continue;            }        3, while (codition){               ...        }    條件 ==  !=  === #值和類型都相等 !== #嚴格比較  && ||        if(){            ....        }        else if(){        }        else{        }        switch(name){            case: '1':                console.log(123);                break;            case: '2':                console.log(456);                break;            ...            default:                console,log(999);        }    函數：        function func(arg){            return arg+1        }        匿名函數：            setInterval(function(){                console.log(123)            },5000)        自執行函數：            (function(arg){                console.log(arg)            }(1)    序列化：        JSON.stringify(list1)        JSON.parse(string1)    轉義：cookies  服務端發來的字符串，確認以前的登錄狀態        decodeURI( )                   URl中未轉義的字符        decodeURIComponent( )           URI組件中的未轉義字符        encodeURI( )                   URI中的轉義字符        encodeURIComponent( )             轉義URI組件中的字符        escape( )                         對字符串轉義        unescape( )                     給轉義字符串解碼        URIError                         由URl的編碼和解碼方法拋出    eval:        val = eval(表達式'1+1')        exec(執行代碼，解釋代碼if,for,...)        eval = eval + exec    時間        Date類        var d = new Date() 時間對象        d 爲當前時間        d.get...()        n = d.getMinutes() + 4        d.setMinutes(n)    做用域：        JS默認以函數做爲做用域        函數的做用域，在函數未調用前，就已經建立        函數的做用域存在做用域鏈，而且也在做用域以前建立        xo = 'alex'        function func(){            var xo = 'eric'            function inner(){                var xo = 'tony'                console.log(xo)            }            inner()        }        xo = 'alex'        function func(){            var xo = 'eric'            function inner(){                console.log(xo)            }            return inner        }        var  ret = func()        ret()        xo = 'alex'        function func(){            var xo = 'eric'            function inner(){                console.log(xo)            }            var xo = 'tony';            return inner        }        var  ret = func()        ret()        JS函數內部局部變量提早聲明        function func(){            console.log(xxoo)            var xxoo = 'alex'        }        func()  # 輸出undefined        面向對象：            function Foo(n){                this.name = n;                this.sayName = function(){                    console.log(this.name);                }            }            # Foo的原型            Foo:prototype = {                'sayName': function(){                    console.log(this.name)                }            }            var obj = new foo('we');            obj.name            obj.sayName()            this代指對象（python self)            建立對象時用new關鍵字 函數（）    DOM        HTML的文檔對象        document.getElementById()      # 當個元素        document.getElementsByTagName()  # 經過標籤，數組多個元素        document.getElementsByClassName() # 經過class屬性        document.getElementsByName()   # 經過name屬性        間接查找            tag = document.getElementById()            tag.parentElement   # 父標籤            tag.children        # 全部子標籤            tag.firstElementChild  # 第一個子標籤            tag.lastElementChild   #最後一個子標籤            tag.nextElementSibling  # 下一個兄弟標籤            tag.previousElementSibling # 上一個兄弟標籤        標籤.innerText  / =  # 獲取（只獲取文本）/修改            obj innerText = <a href='#'>百度</a> 已字符串的形式修改        標籤.innerHTML  獲取的是所有內容            obj innerHTML = <a href='#'>百度</a>        標籤.value            input/select/textarea標籤生效， 獲取選中的value值        標籤.selectIndex            select標籤的索引操做        樣式操做：        tag.className = 'c1'  #tag標籤的className = 'c1'        tag.classList  # 返回class列表        tag.classList.add()  # 添加class指定樣式        tag.classList.remove() # 刪除class指定樣式        修改當個樣式        tag.style.fontSize = '16px';        tag = document.getElementById("test")//checkbox.checked        tag.checked = true/false        <div onclick="func();">點我</div>        <script>            function func(){                ....            }        </script>        屬性操做        obj.setAttribute('xxx','alex')        obj.removeAttribute('xxx')        obj.attributes        建立標籤到HTML中        <input type='button' onclick='AddEle():' value="+"/>        <input type='button' onclick='AddEle2():' value="+"/>        <div id='i1>            <input type='text' />        </div>        <script>            function AddEle(){                //建立標籤                //將標籤添加到i1裏面                var tag = '<p><input type='text' /></p>                //注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'                document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);            }        </script>        <script> # 第二種方式            function AddEle2(){                var tag = document.createElement('input');                tag.setAttribute('type','text');                tag.style.fontSize ='16px';                tag.style.color = 'red';                document.getElementById('i1').appendChild(tag);            }        </script>    提交表單        <form id='f1' action="http://www.oldboyedu.com">            <input type='text' />            <input type='submit' value='提交' />            <a onclick="submitForm():">提交吧</a>  # 任何標籤均可以經過DOM提交表單        </form>        <script>            function submitForm(){                document.getElementById('f1').submit()            }    其餘        console.log  輸出        alert    彈窗        confirm  確認返回true , 取消返回false        location.href  # 獲取當前url ， 也能夠賦值        location.reload()        obj = setInterval(func(),5000ms)  # 定時器        clearInterval(obj);        setTimeout(function() {            console.log('timeout')        },5000)  #定時器只執行一次,顯示log5秒        clearTimeout(obj)    事件        onclick        onblur        onfocus        行爲 樣式 結構 分離？        onmouseover='t1(0)  # 鼠標移入        onmouseout='t2(0)''   # 鼠標移出        <script>            var myTrs = doucument.getElementByTagName('tr');            var len = myTrs.length;            for(var i=0;i<len;i++){                myTrs[i].onmouseover = function(){                    this.style.backgroundColor = 'red';                }                myTrs[i].onmouseout = function(){                    this.style.backgroundColor = '';                }            }            function t1(n){                var mtTrs = document.getElementsByTagName('tr')[n];                mtTrs.style.backgroundColor = 'red';            }            function t2(n){                var mtTrs = document.getElementsByTagName('tr')[n];                mtTrs.style.backgroundColor = '';            }        </script>