HTML+CSS+JS總結

時間 2019-12-01
原文原文鏈接
==================HTML（超文本標記語言）==========


<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

HTML標籤的結構        
    HTML的結構：
            head——>給瀏覽器看的內容
                    存在標籤
                    title—>標籤
                    style—>CSS樣式
                    link—>CSS樣式
                    script—>JS
                    meta—>
            body——>給用戶看的內容
        HTML標籤的語法：
            <head 屬性1=值1 屬性2=值2></head>
            <body></body>
            <mata>
    3.Body標籤中的經常使用標籤
        1.經常使用標籤的分類
            1.獨佔一行的    塊級標籤
                1.h1~h6    標題數越大標題越小
                2.p        段落
                3.div        塊
                4.hr        一條水平線
                5.li          #列表中的一項
                6.tr        表格中的一行
            2.在一行顯示的        行內標籤/內聯標籤
                1.a        超連接
                2.span    行內元素
                3.img    圖片
                4.b/I/u/s    加粗、斜體、下劃線、刪除
            3.其餘
                1.ul        無序列表（其中的行li）
                2.ol        有序列表（其中的行li）
                3.dl dt     標題列表
                4.table    表格        分爲<thead>和<bhead> <tr>爲行名稱<td>爲行內容
                5.lable    標籤
                6.br        換行
                7.textarea    多行文本框

            4.特殊字符
                空格            &nbsp;
                >            &gt;
                <            &lt;
                &            &amp;
                ￥            &yen;
                版權©️        &copy;
                註冊®️        &reg;
        2.標籤的嵌套
            標籤能夠嵌套標籤
            注意事項
                1.儘可能不要用內聯標籤包塊兒級標籤
                2.p標籤不能嵌套p標籤
                3.p標籤不能嵌套div標籤
        3.獲取用戶輸入的標籤
            1.form標籤
                一個容器，包住全部獲取用戶輸入的標籤
                -action屬性
                -method屬性
                -enctype屬性
            2.input屬性
                text            文本框
                password        文本密碼框
                email        email格式文本框
                date            日期
                file            文本選擇框
                
                checkbox    多選框
                radio        單選框
    
                button        普通按鈕    一般用JS給它綁定事件
                submit        提交按鈕    默認將form表單的數據提交
                reset            重置按鈕    將當前form中的輸入框都清空
            3.select標籤    選擇下拉框
            4.textarea標籤    一個大的文本框
            5.form表單提交任務的注意事項：
                {「k1」: 「v1」}
                1.form標籤必須把獲取用戶輸入的標籤包起來
                2.form標籤必須有action屬性和method
                3.form中的獲取用戶輸入的標籤必需要有name屬性
                
                注意：
                    form表單功能：表單用於向服務器傳輸數據，從而實現用戶與web服務器的交互。
                                表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。
                                 表單還能夠包含textarea、select、fieldset和 label標籤。
                    表單屬性：
                            action: 表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理
                              method: 表單的提交方式 post/get默認取值就是get

================CSS（層疊樣式表）==============

1. CSS語法
            選擇器 {屬性1：值1;...;}
        2. CSS導入方式
            1. 行內樣式-->把css樣式寫到標籤的style屬性裏
            2. style標籤中定義
            3. 寫在單獨的css文件中，經過link標籤導入
        3. CSS選擇器
            1. 基本選擇器
                1. ID選擇器      --> HTML標籤都有惟一的ID
                2. 類選擇器      --> HTML標籤能夠設置class屬性
                3. 標籤選擇器    --> 大範圍使用
                4. 通用選擇器 *

            2. 屬性選擇器
                1. div[s14]              找到有s14這個屬性的div標籤
                2. input[type='email']   找到type是email的input標籤

            3 分組和嵌套
                div,  p {}   （找到div和p）
                div .c1 {}    （找到div下的類名爲c1的）

            4. 組合選擇器
                1. div p    後代選擇器（子子孫孫）
                2. div>p    兒子選擇器（子代中只找兒子）
                3. div+p    毗鄰選擇器（緊挨着的兄弟，日後找）
                4. div~p    弟弟選擇器 （不挨着只要是弟弟就行，日後找）

            5. 僞類選擇器
                1. :hover     --> 鼠標移動到標籤上時應用的樣式
                2. :focus     --> input標籤獲取焦點時應用的樣式
                
                瞭解：
        a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。

        a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
        
        a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
        
        a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
        
        僞類選擇器 : 僞類指的是標籤的不一樣狀態:
        
                   a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
        
        a:link {color: #FF0000} /* 未訪問的連接 */
        
        a:visited {color: #00FF00} /* 已訪問的連接 */
        
        a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
        
        a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }
            
            6. 僞元素選擇器
                p:before {    --> 在P標籤內部的最前面追加一個內容
                    content: "*";
                    color: red;
                }
                p:after {     --> 在P標籤內部的最後面追加一個內容
                    
                }
                清除浮動：
                .clearfix:after{
                    content: "";
                    clear: both;
                    display: block;
                }

2.css的優先級
所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。
樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：

1 內聯樣式表的權值最高               style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。       #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1

            1. 樣式名同樣的話
                相似 變量覆蓋 最後加載的那個樣式生效
            2. 樣式名不同
                根據 權重計算
                內聯樣式(1000)>ID選擇器(100)>類選擇器(10)>元素選擇器(1)>繼承(0)
            3. 不講道理的
                !important

3.CSS經常使用屬性
            1. 文字屬性相關
                1. font-family: "字體1", "字體2", 
                1.5 font-heighe: xxpx; 字體行高
                2. font-size        字體大小
                3. font-weight        字體粗細
                4. color            字體顏色
                    1. 英文的顏色名    red
                    2. 16進制顏色代碼  #FF0000
                    3. RGB             rgb(255, 0, 0)
                    4. rgba(255, 0, 0, 0.4)
                5.水平對齊方式
                    text-align 屬性規定元素中的文本的水平對齊方式。
                        left      把文本排列到左邊。默認值：由瀏覽器決定。
                        right    把文本排列到右邊。
                        center 把文本排列到中間。
                        justify 實現兩端對齊文本效果
            2. 寬和高
                1. width             寬
                2. height             高
                    只有塊兒級標籤設置寬和高才有效
            3. 背景
                background（可簡寫）
                
                background-color: red
                background-image: url(...)
                background-repeat: no-repeat;(不平鋪) repeat(平鋪)
                background-position: right left top bottpm (圖片位置)
            4. 文本樣式
                1. 水平居中
                    text-align: center
                2. 單行文本的垂直居中
                    line-height=父標籤的高度
                3. 文本裝飾線
                    text-decoration: none/under-line/over-line/line-through
            5. CSS盒子模型
                內容-->padding-->border-->margin
                    ◦    margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
                    ◦    padding:           用於控制內容與邊框之間的距離；   
                    ◦    Border(邊框):     圍繞在內邊距和內容外的邊框。
                    ◦    Content(內容):   盒子的內容，顯示文本和圖像。
                
                補充：
margin:10px 20px 20px 10px；

        上邊距爲10px
        右邊距爲20px
        下邊距爲20px
        左邊距爲10px

margin:10px 20px 10px;

        上邊距爲10px
        左右邊距爲20px
        下邊距爲10px

margin:10px 20px;

        上下邊距爲10px
        左右邊距爲20px

margin:25px;

        全部的4個邊距都是25px
                    
            6. 浮動
                float: left/right
                浮動的反作用
                清除浮動
                clear語法：
　　                    clear：none |  left  | right  | both
                    1.clear：left 清除的是左邊的浮動
                    2.clear：both :保證左右兩邊都沒有浮動
                注意：
　　                    排序的時候是一個標籤一個標籤的排
　　                    若是上一個是浮動的，就緊貼個上一個
　　                    若是上一個不是浮動的，就和上一個保持垂直不變
            7. 定位
                1. 相對定位     --> 相對本身原來在的位置作定位
                2. 絕對定位     --> 相對本身已經定位過的祖先標籤
                3. 固定定位     --> 相對於屏幕作定位
            position的四種屬性
            1.static：默認位置
            2.fixed：徹底脫離文檔流，固定定位(以可視窗口爲參照物)
            3.relative:相對定位(參照的是本身自己的位置)，沒有脫離文檔流，沒有頂上去，會保持本身的位置不動。可使用top             left  進行定位
            4.absolute:絕對定位：脫離了文檔流（參照的是按已定位的父級標籤訂位，若是找不到會按body的去找）

            注意：將定位標籤設置爲absolute，將他的父級標籤設置爲定位標籤 （relative）    
            float：半脫離文檔流 position：全脫離文檔流        

            8. 溢出
                overflow: hidden/scroll/auto
                解決溢出的方法
                    overflow:auto;
　　　　             overflow: hidden;
                   overflow:scoll; #加上滾動條
            9. 邊框
                border: 1px solid red;
                border-radius: 50%
            10. display
                1. block
                2. inline
                3. inline-block
                4. none
                    display屬性
                    1.將塊級標籤設置成內聯標籤：disply：inline;
                    2.將內聯標籤設置成塊級標籤：disply：block;
                    3.內聯塊級標籤：像塊級同樣可設長寬，也可像內聯同樣在一行顯示：display:inline-block;
                    4.display:none; 吧不想讓用戶看到的給隱藏了（很重要的一個屬性）
                    5.visibility :hiddon； 也是隱藏
 
                注意與visibility:hidden的區別：
　　                    visibility:hidden：能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被                                    隱藏了，但仍然會影響佈局。
　　                    display:none：能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元                                  素本來佔用的空間也會從頁面佈局中消失

CSS一些經常使用屬性
    ********CSS一些經常使用屬性*******
0.去掉下劃線 ：text-decoration:none ;
1.加上下劃線： text-decoration: underline;
2.調整文本和圖片的位置（也就是設置元素的垂直對齊方式）：vertical-align:-20px;
3.外邊距：margin
4.內邊距：padding
5.居中；margin 0 auto;(只是針對盒子居中)
6內聯標籤是不能夠設置長寬的，有時候就得把內聯標籤變成塊級標籤或者塊級內聯標籤，這就用到了display標籤。。
　　1.將內聯標籤轉換成塊級標籤：display:block;
　　2.將塊級標籤轉換成內聯標籤：display:inline;
　　3.塊級內聯標籤：display；inline-block;
　　　塊級內聯標籤能夠像塊級同樣可設長寬，也可像內聯同樣在一行顯示
6.隱藏的兩個方法：display:none; #隱藏了會頂上去
　　　　　　　　　visibility :hidden; #隱藏了不會頂上去
7.隱藏溢出的兩個方法：overflow :auto;
　　　　　　　　　　　overflow :scoll;  #帶滾動條
8.文本水平居中：text-align:center;
   文本垂直居中：line-height;
9.僞類；
　　1.沒訪問以前： a:link{color:red;} 
　　2.鼠標懸浮時： a:hover{color:green;}
　　3.訪問事後： a:visited{color:yellow;}
　　4.鼠標點擊時 a:active{color:blue;}
　　5.在p標籤屬性爲c2的後面加上內容
　　p.c2:after{
　　　　content:'hello';
　　　　color:red;
　　}
6.在p標籤屬性爲c2的錢面加上內容
　　p.c2:before{
　　　　content:'啦啦啦';
　　　　color:red;
　　}
10.position的四種屬性
　　1.static：默認位置
　　2.fixed：徹底脫離文檔流，固定定位(以可視窗口爲參照物)
　　3.relative:相對定位(參照的是本身自己的位置)，沒有脫離文檔流，沒有頂上去，會保持本身的位置不動。可使用top left進行定位
　　4.absolute:絕對定位：脫離了文檔流（參照的是按已定位的父級標籤訂位，若是找不到會按body的去找）
注意！！：將定位標籤設置爲absolute，將他的父級標籤設置爲定位標籤 （relative）

11.float和position的區別
　　float：半脫離文檔流
　　position：全脫離文檔流
12.z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。
13.透明度：opacity:0.4;
14.邊框弧度：border-radius: 50%;#圓
15.去除列表前面的標誌：list-style:none;
16.對齊上面和左邊最頂部：padding:0; margin:0;
17.字體加粗樣式： font-weight: 900; 


==================JavaScript===========
1.大綱：1. JS基礎語法   2. BOM(操做瀏覽器)   3. DOM(操做文檔內容)

2.JS導入方式
        1. 直接寫在頁面的Script標籤內部
        2. 將JS代碼寫在單獨的一個js文件而後經過頁面上的script標籤的src屬性導入
3.基礎語法
    1.
        //註釋
        ；結束符
        $變量聲明可用
    2.數據類型
        1.數字（Number）
            不區分整型數值和浮點型數值;
            parseInt()
            parseFloat()
            NaN      --> Not a Number
        2.字符串（string）
            是由Unicode字符、數字、標點符號組成的序列；
            字符串常量首尾由單引號或雙引號括起；
            JavaScript中沒有字符類型；經常使用特殊字符在字符串中的表達；
            字符串中部分特殊字符必須加上右劃線\；
            經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線
            
            字符串建立(兩種方式)
                       ① 變量 = 「字符串」
                       ② 字串串對象名稱 = new String (字符串)
            屬性：
                length
            方法：
 x.toLowerCase()        －－－－轉爲小寫
 x.toUpperCase()        －－－－轉爲大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引

x.indexOf(index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，若是沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果爲"world"
                        alert(str3);     // 結果爲15
                        

－－－－子字符串處理方法

x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置

x.slice(start, end)     －－－－切片操做字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果爲"cd"
                            
                            alert(str3); //結果爲"efgh"
                            
                            alert(str4); //結果爲"cdefg"
                            
                            alert(str5); //結果爲"fg"

x.replace(findstr,tostr) －－－－    字符串替換

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果爲"二"
                                
x.concat(addstr)         －－－－    拼接字符串
        3.布爾值（boolean）
            Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0
            布爾值也能夠看做on/off、yes/no、1/0對應true/false    
        4.undefined
        5.null
        6對象（數組，字典）
    3. 運算符
        注意強等於和弱等於的區別
        1. 算術運算符        ++和--
        2. 賦值運算符    = += -= *= /=
        3. 比較運算符    === 強等於
        4. 邏輯運算符    &&  ||  !
    4. 流程控制
        1. if else
        2. for 循環
        3. switch
        4. while/do…while
    5.異常處理
        try {
                //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
        }
        catch (e) {
                // 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
                //e是一個局部變量，用來指向Error對象或者其餘拋出的對象
        }
        finally {
             //不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
        }
        注：主動拋出異常 throw Error('xxxx')

4.JS中的函數
        1. 函數的三種形式
            1. 普通函數
            2. 匿名函數
            3. 自執行函數
        2. 函數的注意事項
            1. 參數
            2. 返回值
            3. 變量做用域
            4. 詞法分析
5.內置對象和方法
        1. 日期對象
            var now = new Date()
            注意：
                getMonth()返回數據的取值範圍是 0~11
            獲取日期和時間
                getDate()                 獲取日
                getDay ()                 獲取星期
                getMonth ()               獲取月（0-11）
                getFullYear ()            獲取完全年份
                getYear ()                獲取年
                getHours ()               獲取小時
                getMinutes ()             獲取分鐘
                getSeconds ()             獲取秒
                getMilliseconds ()        獲取毫秒
                getTime ()                返回累計毫秒數(從1970/1/1午夜)
        2. JSON對象
            JSON.parse
            JSON.stringify
        3. RegExp對象
            1. 兩種方式
                1. new RegExp('^1[3-9][0-9]{9}$')
                2. /^1[3-9][0-9]{9}$/
            2. 三個注意事項：
                1. test()不傳值至關於傳了一個undefined，undefined會被當成"undefined"來處理
                2. 增則表達式中間不要加空格
                3. 注意全局匹配模式g的lastIndex屬性
        4. Math對象
                //該對象中的屬性方法 和數學有關.
                abs(x)    返回數的絕對值。
                exp(x)    返回 e 的指數。
                floor(x)對數進行下舍入。
                log(x)    返回數的天然對數（底爲e）。
                max(x,y)    返回 x 和 y 中的最高值。
                min(x,y)    返回 x 和 y 中的最低值。
                pow(x,y)    返回 x 的 y 次冪。
                random()    返回 0 ~ 1 之間的隨機數。
                round(x)    把數四捨五入爲最接近的整數。
                sin(x)    返回數的正弦。
                sqrt(x)    返回數的平方根。
                tan(x)    返回角的正切。
            5.數組對象
1========
2 //        數組對象的屬性和方法
 3           var arr = [11,55,'hello',true,656];
 4 //      1.join方法
 5         var arr1 = arr.join('-'); //將數組元素拼接成字符串，內嵌到數組了，
 6         alert(arr1);                //而python中內嵌到字符串了
 7 //        2.concat方法(連接)
 8         var v = arr.concat(4,5);
 9         alert(v.toString())  //返回11,55,'hello',true,656,4,5
10 //        3.數組排序reserve  sort
11 //        reserve:倒置數組元素
12         var li = [1122,33,44,20,'aaa',2];
13         console.log(li,typeof (li));  //Array [ 1122, 33, 44, 55 ] object
14         console.log(li.toString(), typeof(li.toString())); //1122,33,44,55 string
15         alert(li.reverse());  //2,'aaa',55,44,33,1122
16 //         sort :排序數組元素
17         console.log(li.sort().toString()); //1122,2,20,33,44,aaa  是按照ascii碼值排序的
18 //        若是就想按照數字比較呢?（就在定義一個函數）
19 //        方式一
20         function intsort(a,b) {
21             if (a>b){
22                 return 1;
23             }
24             else if (a<b){
25                 return -1;
26             }
27             else{
28                 return 0;
29             }
30         }
31         li.sort(intsort);
32         console.log(li.toString());//2,20,33,44,1122,aaa
33 
34 //        方式二
35         function Intsort(a,b) {
36             return a-b;
37         }
38         li.sort(intsort);
39         console.log(li.toString());
40         // 4.數組切片操做
41         //x.slice(start,end);
42         var arr1=['a','b','c','d','e','f','g','h'];
43         var arr2=arr1.slice(2,4);
44         var arr3=arr1.slice(4);
45         var arr4=arr1.slice(2,-1);
46         alert(arr2.toString());//結果爲"c,d"
47         alert(arr3.toString());//結果爲"e,f,g,h"
48         alert(arr4.toString());//結果爲"c,d,e,f,g"
49 //        5.刪除子數組
50         var a = [1,2,3,4,5,6,7,8];
51         a.splice(1,2);
52         console.log(a) ;//Array [ 1, 4, 5, 6, 7, 8 ]
53 //        6.數組的push和pop
54 //        push:是將值添加到數組的結尾
55         var b=[1,2,3];
56         b.push('a0','4');
57         console.log(b) ; //Array [ 1, 2, 3, "a0", "4" ]
58 
59 //        pop；是講數組的最後一個元素刪除
60         b.pop();
61         console.log(b) ;//Array [ 1, 2, 3, "a0" ]
62         //7.數組的shift和unshift
63         unshift: 將值插入到數組的開始
64         shift: 將數組的第一個元素刪除
65         b.unshift(888,555,666);
66         console.log(b); //Array [ 888, 555, 666, 1, 2, 3, "a0" ]
67 
68         b.shift();
69         console.log(b); //Array [ 555, 666, 1, 2, 3, "a0" ]
70 //        8.總結js的數組特性
71 //        java中的數組特性：規定是什麼類型的數組,就只能裝什麼類型.只有一種類型.
72 //        js中的數組特性
73 //            js中的數組特性1：js中的數組能夠裝任意類型,沒有任何限制.
74 //            js中的數組特性2： js中的數組,長度是隨着下標變化的.用到多長就有多長.
75     </script>

=================JavaScript BOM對象和DOM對象=======

1.BOM對象
            1. location  --> 瀏覽器URL相關
                1. location.href            --> 獲取當前訪問的URL
                2. location.href="新URl"    --> JS控制頁面跳轉到指定的URL
                3. location.reload()        --> 從新加載當前頁面
            2. 其餘的瞭解便可
            3. 彈出框系列
                1. alert()  ***
                2. confirm()
                3. prompt() 
            4. 計時器
                1. 一段時間以後作某件事
                    - setTimeout(函數, 毫秒數)
                    - clearTimeout(計時器的id)
                2. 每隔一段時間作某件事
                    - setInterval(函數, 毫秒數)
                    - clearInterval(計時器的id)

2.DOM對象
                1. DOM樹的概念 --> JS經過DOM就能夠操做頁面上的標籤和屬性
            2. 查找標籤
                1. 直接查找
                    1. document.getElementById("id值")             --> 找到具體的標籤對象
                    2. document.getElementsByClassName("樣式類名") --> 找到標籤對象的數組
                    3. document.getElementsByTagName("標籤名")     --> 找到標籤對象的數組
                    
                2. 間接查找
                    1. parentElement
                    2. children
                    3. firstElementChild
                    4. lastElementChild
                    5. nextElementSibling
                    6. previousElementSibling
            3. 標籤操做
                1. 建立標籤
                    1. document.createElement("標籤名")   *****
                2. 給標籤添加內容
                    1. .innerText
                    2. .innerHTML="<a href="">a標籤</a>"
                3. 把建立的標籤對象添加到文檔樹中
                    1. 父標籤.appendChild(新標籤)
                    2. 父標籤.insertBefore(新標籤，子標籤)
                4. 刪除標籤
                    1. 父標籤.removeChild(要刪除的子標籤)
                5. 替換
                    1. 父標籤.replaceChild(新標籤，舊標籤)
            4. 屬性操做
                1. getAttribute()
                2. setAttribute()
                3. removeAttribute()
            5. 獲取值（input/select/textarea）
                1. .value
                2. .value="要設置的值"
            6. 操做樣式
                1. 操做class
                    1. className     --> 字符串格式的樣式類
                    2. classList     --> 數組格式的樣式類
                    3. classList.remove()
                    4. classList.add()
                    5. classList.contains()
                    6. classList.toggle()
                2. 直接操做CSS樣式
                    font-size
                    標籤對象.style.fontSize="18px"
            7. 事件
                1. 經常使用事件
                    onlick
                    onfocus
                    onblur
                    onbchange
                2. 事件的綁定方式
                    1. 直接在標籤裏寫obclick="函數名()"
                    2. 經過JS找到標籤給它綁定事件
                        標籤對象.onclick=function(){
                         ...
                        }
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。