HTML, CSS, JavaScript

一、HTML

1. HTML4常用標簽

1.1 文件標簽

<html>標簽：代表當前書寫的是一個HTML文檔
<head>標簽：存儲的本頁面的一些重要的信息，它不會顯示

該標簽下有一個子標簽<title>用于定義頁面的標題欄的名稱
<body>標簽：該標簽中的書寫的內(nèi)容會顯示出來

該標簽下的屬性：

HTML中標簽的屬性值可以用' '或" "包圍
- text用于設(shè)置文字的顏色
- bgcolor用于設(shè)置頁面的背景色
- background用于設(shè)置頁面的背景圖片
  
  需要在當前項目下創(chuàng)建文件夾存放HTML中調(diào)用的圖片文件，圖片的路徑不能以/開始，必須是以這個文件夾開始

示例Code

<html>
    <head>
        <title>
            this is title
        </title>
    </head>

    <body text="red" bgcolor="pink" background="image/test.JPG">
        
    </body>
</html>

1.2 排版標簽

HTML注釋
```

```
VSCode中注釋的快捷鍵ctrl+/
換行標簽

<br/>標簽就是一個換行（回車）功能標簽，標簽中的/可有可無的。有/是HTML語言的標準化，但是HTML語言是一門不那么嚴謹?shù)恼Z言

段落標簽

在<p>標簽中的內(nèi)容,會在開始與結(jié)束之間產(chǎn)生一個空白行，并且它會自動換行.

常用屬性 align 它的作用是設(shè)置段落中的內(nèi)容對齊方式可取值有 left（默認值是left）、 right 、center

<html>
    <head>
        <title>
            this is title
        </title>
    </head>

    <body text="red" bgcolor="pink" background="image/test.JPG">
        hello <br/>
        hello
        hello
        <p align="center">hello</p>
        <p align="left">hello</p>
        <p align="right">hello</p>
        <p align>hello</p>
    </body>
</html>

水平線標簽

<hr>標簽會在頁面上產(chǎn)生一個水平線

對于hr標簽常用屬性:
1. align：取值有left，right，center代表水平線的位置
2. size：代表水平線厚度（粗細）
3. width：代表水平線寬度
4. color：水平線的顏色
單位：size="5"，單位為"像素"/"像素點"，像素就是構(gòu)成計算機圖片的最小單位，單位也可以使用百分比，如：size="50%"
分區(qū)標簽

<div>是一個塊標簽，用來進行布局的，不加屬性值的<div>并沒有什么效果，肉眼也看不見，但<div>與CSS結(jié)合，就會更好對頁面進行排版

<div>與<span>都是“容器”的作用，區(qū)別：
1. <div>標簽會自動換行，是塊級元素，<span>標簽不會自動換行，是行內(nèi)元素
  div中的屬性：
  - width：設(shè)置div寬
  - height：設(shè)置div高
  - background或background-color：設(shè)置div背景顏色
  - margin：用于設(shè)置本div與其他元素或頁面四周邊框之間的邊距
  - padding: div中元素與本div四周邊框之間的距離
  VSCode快捷鍵：
  
  div*n快速創(chuàng)建n行div
2. <div>：整體劃分區(qū)塊，<span>：局部劃分

1.3 字體標簽

字體標簽

<font>標簽可以設(shè)置字體，字體的大小和顏色，使用該標簽包圍要設(shè)置的內(nèi)容即可

常用屬性：
1. face：設(shè)置字體
2. size：設(shè)置字體的大小
3. color：設(shè)置字體的顏色
  表示字體顏色屬性值的3種方法：
  1. 使用十六進制方式，取值范圍 #000000 ~ #FFFFFF （黑色到白色）
    
    當顏色值為#cc3300 時，可簡化成 #c30 這種方式
  2. RGB顏色表示法：RGB（x,y,z）其中x、y、z是0 ～ 255之間的整數(shù)
  rgb字母大小寫無所謂
  1. 直接使用給定的值：red、blue
  可以使用color屬性的標簽：<font>、<body>等
標題標記

作用：<h數(shù)字>標簽可以給一段文字起一個標題

使用方法：在<h1>到<h6>中標題尺寸遞減

與普通文本的區(qū)別：自動換行，字體加粗，標題與標題之間產(chǎn)生一定的距離
格式化標簽
- <b>：使文本內(nèi)容字體加粗
- <i>：使文本內(nèi)容字體傾斜
- <del>：為文本內(nèi)容添加刪除線
- <u>：為文本內(nèi)容添加下劃線
在HTML中允許標簽進行嵌套的，但是一般都包裹嵌套，而不可以進行交叉嵌套
```
<b> hi how are you doing </b> <br/>
<i><b> hi how are you doing </b></i> <br/>
<del><b> hi how are you doing </b></del> <br/>
<u><del><b> hi how are you doing </b></del></u> <br/>
```

1.4 列表標簽

列表標記中先設(shè)置列表的類型標簽，再用多個子標簽<li>表示列表一行的信息
有序列表

<ol>標簽中的屬性：
1. type：設(shè)置標簽顯示的順序的方式
  
  常用的屬性值：
  - 默認值是數(shù)字
  - 以英文字母順序：A
  - 以羅馬字符順序：I
2. start：給定義一個數(shù)字，設(shè)置序列從這個數(shù)字開始
無序列表

<ul>標簽中的屬性：
1. type：設(shè)置無序列表中的符號形狀
  
  常用的屬性值：
  - 實心圓（默認值）：disc
  - 方塊：square
  - 空心圓：circle

示例Code

<ol type="I">
    <li>this is the first line</li>
    <li>this is the second line</li>
    <li>this is the third line</li>
    <li>this is the fourth line</li>
</ol>

<ul type="circle">
    <li><b>this is the first line</b></li>
    <li>this is the second line</li>
    <li>this is the third line</li>
    <li>this is the fourth line</li>
</ul>

1.5 圖像標簽

作用：<img>：圖像標簽可以在頁面中引入圖片
圖像標簽中的屬性：
- src：用于設(shè)置圖片的路徑
- width：用于設(shè)置圖片的寬度
- height：用于設(shè)置圖片的高度
- border：用于設(shè)置圖片的邊框
- alt：如果圖片不可以顯示時，默認顯示的文本信息
- title：鼠標懸停圖片上，默認顯示的文本信息
- align：圖片附件文字的對齊方式，可取值有
  
  常用的屬性值：left、right、middle、top、bottom

1.6 超鏈接標簽

<a>標簽可以實現(xiàn)鼠標點擊這段內(nèi)容后進行跳轉(zhuǎn)到其它頁面的操作

超鏈接內(nèi)容不僅可以是文本，也可以是圖片等信息

超鏈接標簽的常用屬性：
- href：代表要跳轉(zhuǎn)的路徑
  
  屬性值若是網(wǎng)站的地址，則需要加http://
- target：性規(guī)定在何處打開這個鏈接文檔
  
  常用的屬性值：
  - _blank：在新窗口中打開頁面
  - _self：在本窗口打開頁面

1.7 表格標簽

定義一個表格先定義<table>，再定義多個<tr>表示多行，在每個<tr>中定義多個<td>表示每行中的每列下的數(shù)據(jù)單元

<table border="1" width="250px" align="center" cellspacing="0 ">
    <tr align="center">
        <td align="right">1</td>                
        <td>2</td>                
        <td>3</td>                
    </tr>

    <tr>
        <td>4</td>            
        <td>5</td>                
        <td>6</td>                
    </tr>

    <tr>
        <td>7</td>                
        <td>8</td>                
        <td>9</td>                
    </tr>
</table>

<table>標簽用于定義整個表格

常用的屬性：
- border：邊框，取值是像素為單位
- width：代表表格的寬度，取值是像素為單位
- align：代表該表格在整個頁面中的對其方式
  
  常用的屬性值：
  - left：左對齊
  - right：右對齊
  - center：居中對齊
- cellspacing：每個單元格之間的間距（通常設(shè)置0表示單線表格）
<tr>表示表格中的行 (Table Row)

常用的屬性：
- align：統(tǒng)一設(shè)置表格中行的所有數(shù)據(jù)單元內(nèi)容的對齊方式
  
  常見的屬性值同<table>中的<align>
<td>表示表格中的數(shù)據(jù)單元 (Table DataCell)

常用的屬性：
- colspan：列的合并
  
  屬性值為從當前列起向右一共要合并的列數(shù)
- rowspan：行的合并
  
  屬性值為從當前行起向下一共要合并的行數(shù)
- align：設(shè)置合并后的數(shù)據(jù)單元內(nèi)容在表格中的對齊方式，或者用于單獨設(shè)置表格中數(shù)據(jù)單元內(nèi)容的對齊方式
  
  常見的屬性值同<table>中的<align>
```
<table border="1" width="250px" align="center" cellspacing="0 ">
    <tr align="center">
        <td colspan="2" align="center">row</td>
        <td>3</td>                
    </tr>

    <tr>
        <td>4</td>
        <td rowspan="2" align="center">col</td>               
        <td>6</td>                
    </tr>

    <tr>
        <td>7</td>                
        <td>9</td>                
    </tr>
</table>
```

1.8 表單標簽

表單概念

通過錄入的信息將要提交的信息，即所有的數(shù)據(jù)形成一個整體，一起提交給服務器，提交到指定的位置

常見的登錄頁面、注冊頁面都離不開表單的應用
表單標簽<form>

<form>中的屬性：
- action：將整個表單提交到目的地
- method：表單提交的方式
  
  屬性值：
  - get：提交時，傳輸數(shù)據(jù)量少，明文提交
  - post：提交時，傳輸數(shù)據(jù)量大，密文提交
- 表單標簽常規(guī)寫法
  
  使用段落標簽，標簽中的內(nèi)容，會在開始與結(jié)束之間產(chǎn)生一個空白行，并且它會自動換行
```
<form>
    <p>
        <input type="xxx"> 
    </p>
    
    <p>
        <input type="xxx"> 
    </p>
    
    <p>
        <input type="xxx"> 
    </p>
</form>
```
表單標簽<form>中的子標簽
- 所有表單中的元素都要具有名稱（否則提交到服務器之后，服務器無法區(qū)識別多個元素之間的不同）
- <intput>：提供指定的輸入模式
  
  屬性type的常見屬性值：
  - text：type屬性的默認值，普通的文本輸入框
    
    當type為text時，還可以加入以下屬性
    - placeholder：提示用戶輸入文本的信息
    - maxlength：設(shè)置最多能輸入的字符數(shù)量
```
<p>帳號：<input name="a" type="text" placeholder="請輸入帳號..." maxlength="5" ></p>
```
  - password：密碼輸入框
```
<p>密碼：<input name="b" type="password"></p>
```
  - checkbox：多選框/復選框
    
    每個帶checkbox屬性的input標簽都代表一個選項，要使這些選項成為一組必須要同時給input加入屬性值相同的name屬性
    
    所有的復選框以組為單位，組內(nèi)的每個復選框都應該具有相同的name值
    
    type屬性值為checkbox的input標簽，可以加入屬性值為checked的checked屬性，來實現(xiàn)默認選擇一個選項
```
<p>愛好：
    <input type="checkbox" name="gender"> 抽煙
    <input type="checkbox" name="gender"> 喝酒
    <input type="checkbox" name="gender" checked="checked"> 燙頭
    <input type="checkbox" name="gender" checked="checked"> 泡澡
</p>
```
  - radio：單選按鈕
    
    每個帶radio屬性的input標簽都代表一個選項，要使這些選項成為一組必須要同時給input加入屬性值相同的name屬性
    
    單選框要想可以一次只選擇一個，要具有相同的name值
    
    type屬性值為radio的input標簽，可以加入屬性值為checked的checked屬性，來實現(xiàn)默認選擇一個選項
```
<p>性別：
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender" checked="checked"> 女
</p>
```
  - file：上傳文件
```
<p>頭像： <input type="file"> </p>
```
  - reset：重置按鈕：重置當前表單的所有子標簽的內(nèi)容
  - submit：提交按鈕：提交當前表單的所有子標簽的內(nèi)容
  - button：普通按鈕：可以用作取消的按鈕，用于返回上一個頁面或退出
```
<p> 
    <input type="reset" value="清空">
    <input type="submit" value="提交"> 
    <input type="button" value="取消">
    <button>保存</button>
</p>
```
    value屬性代表按鈕上顯示的內(nèi)容
- <select>：下拉列表
  
  子標簽<option>：列表中的項
  
  常見的屬性：
  - selected：被選中
```
<p>血型： 
    <select> 
        <option>A型</option> 
        <option>B型</option> 
        <option>C型</option> 
        <option selected="selected">O型</option> 
    </select> 
</p>
```
- <textarea>：文本域（多行文本框）
  
  可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性
```
<p>個人簡介： <textarea cols="10" rows="5"></textarea> </p>
```
- <button>：按鈕
  
  在<form>表單中，作用和submit一樣
```
<p> 
    <input type="submit" value="提交"> 
    <button>保存</button>
</p>
```
  不在<form>表單中，就是普通按鈕（配合后期的JavaScript，可擴展性更高）

1.9 框架標簽

框架標簽<frameset>

作用：用多個界面拼接成一個界面

使用方法：每個frameset下的子標簽可以是frame也可以還是一個frameset

在html標簽中frameset標簽不能與body標簽共存

常用屬性
- rows：用于將頁面分為幾行內(nèi)容
  
  屬性值可以按照需求自定義每部分的百分比，剩下的一部分可以使用*
- cols：用于將頁面分為幾列內(nèi)容
  
  屬性值可以按照需求自定義每部分的百分比，剩下的一部分可以使用*
框架標簽子標簽<frame>

常用屬性
- src：表示當前行或列的資源路徑

示例Code

<frameset rows="10%,*,13%">
    <frame src="top.html"></frame>
    <frameset cols="15%,*">
        <frame src="left.html"></frame>
        <frame src="right.html"></frame>
    </frameset>
    <frame src="foot.html"></frame>
</frameset>

1.10 其他標簽與特殊字符

<meta>標簽

常見的作用：
1. 指定頁面的字符編碼方案
  
  常見的編碼表：
  
  ASCII：美國標準信息交換碼，使用一個字節(jié)的低7位二位進制進行表示
  
  ISO8859-1：拉丁碼表，歐洲碼表，使用一個字節(jié)的8位二進制進行表示
  
  GB2312：中國的中文編碼表，最多使用兩個字節(jié)16位二進制為進行表示
  
  GBK：中國的中文編碼表升級，融合了更多的中文文字符號，最多使用兩個字節(jié)16位二進制位表示
  
  Unicode：國際標準碼，融合了目前人類使用的所有字符，為每個字符分配唯一的字符碼。所有的文字都用兩個字節(jié)16位二進制位來表示
  
  Unicode只是定義了一個龐大的、全球通用的字符集，并為每個字符規(guī)定了唯一確定的編號，具體存儲成什么樣的字節(jié)流，取決于字符編碼方案
  
  推薦的Unicode編碼是UTF-8和UTF-16
  
  UTF-8：變長的編碼方式，可用1-4個字節(jié)來表示一個字符
2. 指定頁面的顯示參數(shù)，如：顯示窗口的寬度、顯示文字和圖形的初始比例
3. 設(shè)置頁面加載后在指定的時間后跳轉(zhuǎn)到指定的頁面
<meta>標簽必須寫在<head>標簽中
<link>標簽

作用：一般通過該標簽來導入CSS

<link>標簽必須寫在<head>標簽中
特殊字符

作用：在HTML中標簽的內(nèi)容有時需要某些特殊字符

如：每個空格需要使用 來表示

2. HTML5新特性

2.1 HTML4和HTML5主要區(qū)別

HTML5包含了HTML4的標簽
H5中大小寫不敏感

可以在標簽、屬性、屬性值中隨機使用大小寫字母
屬性值的引號可以省略
可以省略結(jié)尾標簽（不推薦）

查看源代碼，瀏覽器會自動補全結(jié)尾標簽

2.2 新增語義化標簽

HTML4中，所有的容器標簽95%都會使用div，div過多的話，很難區(qū)分彼此，新增許多語義化標簽，讓div“見名知意”

2.3 媒體標簽

想在網(wǎng)頁上播放視頻，可以使用<video>標簽

2.4 新增表單控件

新增了表單<form>標簽下的<input>標簽下的type屬性值，代表顯示不同的工具
新增了表單<form>標簽下的新標簽

二、CSS

1. CSS概述

CSS是指層疊樣式表 cascading style sheets
通過CSS可以讓開發(fā)者定義HTML元素如何顯示，而且CSS可以讓原本HTML不能描述的效果，通過CSS描述出來

2. CSS與HTML結(jié)合的三種方式

內(nèi)聯(lián)/行內(nèi)樣式

實現(xiàn)方式：HTML標簽上通過style屬性來引用CSS代碼

優(yōu)缺點：直接通過屬性簡單方便，但是只能對一個標簽進行修飾
```
<body>
    <div style="color:pink">hello, world</div>
    
    <font color="pink">hello, world</font>
</body>
```
內(nèi)部樣式表

通過<style>標簽來聲明我們的CSS，通常<style>標簽推薦寫在<head>和<body>之間

格式： 選擇器 {屬性:值;屬性:值}

優(yōu)缺點：可以通過多個標簽進行統(tǒng)一的樣式設(shè)置，但是它只能在本頁面上進行修飾
```
<style>
    div {
        color:blue;
    }
</style>

<body>
    <div>have a good day</div>
</body>
```
外部樣式表

需要單獨定義一個CSS文件，注意CSS文件的后綴名就是.css

實現(xiàn)方式1：在項目根目錄下，創(chuàng)建css目錄，在css目錄中創(chuàng)建css文件，在<head>中使用<link>標簽引用外部的css文件

需要將<link>中屬性rel的值設(shè)置為stylesheet，屬性href為.css文件的目錄
```
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="../CSS/css_test.css">
</head>
```
實現(xiàn)方式2：類似于內(nèi)部樣式表，@import 'CSS文件所在地址'
```
<style>
@import '../CSS/css_test.css'
</style>
```
兩種實現(xiàn)方式的區(qū)別：加載順序不同，@import方式導入會先加載html，然后才導入css樣式；如果使用link方式，它會先加載樣式表
三種樣式表的優(yōu)先級：內(nèi)聯(lián) > 內(nèi)部 > 外部

3. CSS選擇器、基本屬性、定位

3.1 CSS選擇器

作用：在style標簽中，通過指定的標簽名或標簽內(nèi)的屬性值選定某個或多個標簽，通過設(shè)定屬性值來修改對應標簽的樣式
元素（標簽）選擇器

它可以對頁面上相同的標簽進行統(tǒng)一的設(shè)置，它描述的就是標簽的名稱
類選擇器

類選擇器在使用時使用.來描述，它描述的是元素上的class屬性值

需要在元素添加class屬性，選擇器前加. 若選擇器不加任何符號，會先去找與選擇器同名的標簽而不是class屬性值

VSCode快捷鍵:

div.xxx快速生成div標簽和class屬性值為xxx，<div class="xxx"></div>
id選擇器

它只能選擇一個元素，使用 # 引入，引用的是元素的id屬性值。id選擇器，比類選擇器更具有唯一性

需要在元素添加id屬性，選擇器前加# 若選擇器不加任何符號，會先去找與選擇器同名的標簽而不是id屬性值

VSCode快捷鍵:

div#xxx快速生成div標簽和id屬性值為xxx，<div id="xxx"></div>
```
<style>
    .a {
        color:purple;
    }

    #b {
        color:red;
    }
</style>

<body>
    <div class="a">have a good day</div>
    <div class="a">have a good day</div>
    <div id="b">have a good day</div>
    <div>have a good day</div>
</body>
```

選擇器組

作用：合并相同內(nèi)容的選擇器

使用方法：不同選擇器名之間使用,進行分隔

<style>
    #b,.a {
        color:purple;
    }
</style>

<body>
    <div class="a">have a good day</div>
    <div class="a">have a good day</div>
    <div id="b">have a good day</div>
    <div>have a good day</div>
</body>

派生選擇器

兩個標簽選擇器同時寫在一個內(nèi)容上時(或只寫一個)，這兩個標簽下的所有內(nèi)容樣式會被修改

<style>
    div p {
        color:purple;
    }
</style>

<body>
    <div>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <span>
            <p>444444</p>
            <p>555555</p>
            <p>666666</p>
        </span>
    </div>
</body>

當設(shè)置div > p時，就只會使得div子標簽內(nèi)容樣式被修改，而div子標簽下子標簽的內(nèi)容樣式不被修改

<style>
    div > p {
        color:purple;
    }
</style>

<body>
    <div>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <span>
            <p>444444</p>
            <p>555555</p>
            <p>666666</p>
        </span>
    </div>
</body>

CSS偽類
- CSS偽類可對css的選擇器添加一些特殊效果
- 超鏈接偽類的四種狀態(tài)：
  
  :active 向被激活的元素添加樣式（鼠標長按時）
  
  :hover 當鼠標懸浮在元素上方時，向元素添加樣式
  
  :link 向未被訪問的鏈接添加樣式
  
  :visited 向已被訪問的鏈接添加樣式
  
  超鏈接的偽類：要遵守使用順序，愛恨原則 LoVeHAte，lvha
```

<style>
  a:hover{
      color:red;
      font-size: small;
  }

  a {
      font-size: large;
  }
</style>

<body>
  <a >baidu</a>
</body>
```
  超鏈接偽類的四種狀態(tài)測試：
  
  重復查看:link 效果，需要清除瀏覽器瀏覽數(shù)據(jù)和緩存
```
<style>
    a:link{
        color:blue;
        font-size: small;
    }

    a:visited{
        color:yellow;
        font-size: small;
    }

    a:hover{
        color:red;
        font-size: small;
    }

    a:active{
        color:green;
        font-size: small;
    }

    a {
        font-size: large;
    }
</style>

<body>
    <a >dubai</a>
</body>
```
- 其他偽類
  
  :first-child 向元素的第一個子元素添加樣式。作用等同于使用class屬性的標簽，用類選擇器來指定這個標簽的樣式，只是使用偽類更加便捷

3.2 CSS基本屬性

文本屬性

單位：px：像素、em：倍數(shù)

line-height的屬性值表示當前文本上方和下方的所占空間大小

<style>

    #title{
        font-family:"隸書";
        font-size:5em;  /* 默認字體大小的5倍 */
        font-weight: bold;  /*字體加粗*/
        color:red;  /*字體顏色*/
        text-align: center;  /*居中對齊*/
        text-decoration: underline;   /*下劃線*/
        line-height: 30px; /* 行高*/
    }

    .content{
        text-indent:2em;   /*首行縮進*/
    }

</style>

<body>
    
    <p id="title">中華人民共和國萬歲！</p>
    <p style="text-align: right;">作者：AAA</p>
    <p class="content">我們相親相愛，是一家人！</p>
    <p>我們相親相愛，是一家人！</p>
</body>

背景屬性
- CSS 允許應用純色作為背景，也允許使用背景圖像創(chuàng)建相當復雜的效果
- 一般使用<div>標簽定義好寬高后，不指定background-color屬性則默認是白色，為了區(qū)分可以設(shè)置background-color屬性的顏色
  
  background-color和background作用相同可相互替換使用
  
  color屬性是指div中的文本顏色，不是背景
- 添加background-image屬性后，原背景會被覆蓋，若添加的圖片尺寸小于背景尺寸，則默認使用全背景平鋪效果
- 添加background-repeat屬性，修改屬性值為no-repeat，則平鋪方式為只是本圖片不重復的效果
  其他的平鋪方式：
  - repeat-x：表示橫向平鋪到整個背景上
  - repeat-y：表示縱向平鋪到整個背景上
- 添加background-position屬性，屬性值中第一個數(shù)字參數(shù)表示圖片的左側(cè)與背景左側(cè)的距離，第二個數(shù)字參數(shù)表示圖片的上方與背景上方的距離
  
  兩個參數(shù)都可以是負數(shù)，表示圖片進入到背景邊界外的長度（這部分不顯示）；當數(shù)字參數(shù)為正數(shù)超過背景范圍后也不顯示超過的圖片部分
- 添加background-attachment屬性，屬性值為fixed，表示當頁面在在滾動時，圖片位置不隨頁面滾動（在div范圍中），該屬性的默認值是scroll
- 示例Code
```
<style>
    div {
        /*設(shè)置基本的背景屬性*/
        width: 500px;
        height: 500px;/*高度可以不指定，不指定時需要div中有帶內(nèi)容的其他標簽，不指定時背景顏色height根據(jù)div中內(nèi)容的長度變化而變化（內(nèi)容會覆蓋背景）；指定height時，背景顏色的height不會隨div中內(nèi)容變化（內(nèi)容同樣會覆蓋背景）*/
        background-color: pink; /* 背景顏色 */
        /*添加一張圖片到背景中*/
        background-image: url("img/cat.gif");
        background-repeat: no-repeat; /* 平鋪方式*/
        background-position: 0px 100px; /*背景的位置（移動）*/
        background-attachment: fixed; /* 固定的背景*/
    }
</style>

<body>
    <div></div>
</body>
```

列表屬性

通過ul或ol的選擇器來設(shè)置列表的標記形狀

設(shè)置不同的列表項標記為有序列表
設(shè)置不同的列表項標記為無序列表
設(shè)置列表項標記為圖像

示例code

<style>
    .a {
      list-style-type: none;/* 無序列表無標記 */
    }
    .b {
      list-style-type: decimal-leading-zero;/* 有序列表中以0開頭的數(shù)字標記 */
    }
    .c {
      list-style-type: upper-roman;/* 有序列表中標記是大寫羅馬數(shù)字(I, II, III, IV, V, 等 */
    }
    .d {
      list-style-type: upper-alpha;/* 有序列表中標記是大寫英文字母The marker is upper-alpha (A, B, C, D, E,等 */
    }
    .e {
      list-style-image: url('img/list-img-2.gif');/* 設(shè)置列表項標記為圖像 */
    }
</style>

<body>
    <ul class="a">
        <li>曹操</li>
        <li>劉備</li>
        <li>孫權(quán)</li>
    </ul>

    <ol class="b">
        <li>呂布</li>
        <li>趙云</li>
        <li>典韋</li>
    </ol>

    <ol class="c">
        <li>關(guān)羽</li>
        <li>馬超</li>
        <li>張飛</li>
    </ol>

    <ol class="d">
        <li>黃忠</li>
        <li>夏侯惇</li>
        <li>姜維</li>
    </ol>

    <ol class="e">
        <li>老孫</li>
        <li>老楊</li>
        <li>老西</li>
    </ol>
</body>

將縱向列表設(shè)置為橫向的顯示效果

為列表中的每個li添加屬性和屬性值float: left;，一般也會添加屬性和屬性值list-style-type: none;來去除列表項標記
設(shè)置每個列表項li中文字的對齊方式text-align、字體大小font-size、顏色color
設(shè)置每個列表項li中背景顏色background-color、行高line-height
設(shè)置每個列表項li中鼠標指向時的顯示樣式cursor
設(shè)置每個列表項li中的width，若不設(shè)置則背景顏色會填充整行

列表案例：導航條

<style>

    li{
        list-style-type: none;
        color:white;
        background-color: black;
        width: 150px;
        text-align: center;
        float: left; /* 將li實現(xiàn)水平方向顯示*/
        line-height: 40px;
        font-size: 1.3em;

        cursor: pointer; /* 鼠標光標顯示樣式 */
    }

    li:hover{
        background-color: orange; /* 當鼠標在此懸浮時，顯示背景顏色為橙色 */
        line-height: 50px; /* 當鼠標在此懸浮時，顯示的行高變大 */
    }

</style>

<body>
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>peach</li>
    </ul>
</body>

邊框?qū)傩?/p>

CSS邊框?qū)傩栽试S指定一個元素邊框的樣式和顏色
設(shè)置邊框的樣式必要的三個屬性border-width、border-color、border-style

若缺少border-style屬性則不顯示邊框
```
border-width: 2px;
border-color:red;
border-style: solid;
```
可以向?qū)傩灾屑尤胛恢?，就可以指定邊框具體某個邊的樣式
```
border-right-color:green; /* 設(shè)置右邊框的顏色 */
border-bottom-style: dashed;  /* 設(shè)置下邊框的樣子 */
```
或使用簡化寫法：為border屬性指定屬性值線寬、線條形狀、顏色
```
border:10px solid red;
```

示例Code

<style>
    div {
        width: 400px;
        height: 40px;
        margin: 10px;   /* div和div彼此之間產(chǎn)生10像素的距離*/
    }
    .a {
        /* 設(shè)置四個邊 */
        border-width: 2px;
        border-color:red;
        border-style: solid;

        border-right-color:green; /* 設(shè)置右邊框的顏色 */
        border-bottom-style: dashed;  /* 設(shè)置下邊框的樣子 */
    }

    /* 以下是邊框的簡化寫法 */
    .b1{
        border:10px solid red;
    }
    .b2{
        border:10px dotted red;
    }
    .b3{
        border:10px dashed red;
    }
    .b4{
        border:10px double red;
    }
    .b5{
        border:10px groove red;
    }
    .b6{
        border:10px ridge red;
    }
    .b7{
        border:10px inset red;
    }
    .b8{
        border:10px outset red;
    }

</style>
<body>
    <div class="a"></div>
    <div class="b1">實心線</div>
    <div class="b2">點線</div>
    <div class="b3">虛線</div>
    <div class="b4">雙線</div>
    <div class="b5">3D效果的凹槽</div>
    <div class="b6">3D脊邊框</div>
    <div class="b7">嵌入邊框</div>
    <div class="b8">突出邊框</div>
</body>

輪廓屬性

輪廓是在邊框外的一層線條，使用方法為outline屬性指定屬性值線寬、線條形狀、顏色（與邊框border的屬性值寫法相同）
```
<style>
div{
    width: 400px;
    height: 200px;
    border: 30px solid  darkcyan;
    outline: 5px dashed red;   /*輪廓*/
}
</style>

<body>
    <div></div>
</body>
```
盒子模型

CSS盒子模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容
- margin(外邊距) - 盒子與盒子之間的距離
margin使用場景：一般通過margin設(shè)置div在頁面中的位置；div中的元素通過margin可以設(shè)置該元素在div中的位置

當div內(nèi)元素的margin超過div的height和width時，該元素可以顯示超出的部分，這是與div中添加背景圖片的不同

更具體的屬性：margin-top、margin-left
- border(邊框) - 盒子的保護殼
- padding(內(nèi)邊距/填充) - 內(nèi)填充，盒子邊與內(nèi)容之間的距離
更具體的屬性：padding-top、padding-left
- content(內(nèi)容) - 盒子的內(nèi)容，顯示的文本或圖像
```
<style>

    div{
        width: 200px;
        height: 200px;
        border:2px solid greenyellow;
        margin-top: 50px;   /*上外邊距*/
        margin-left: 100px;  /*左外邊距*/
        padding-top:20px; /*上內(nèi)邊距*/
        padding-left:40px; /*左內(nèi)邊距*/
    }

</style>

<body>
    
    <div>
        <img src="img/cat.gif">
    </div>
    
</body>
```

3.3 CSS定位

默認定位

塊級元素：h1~h6，p, div 等，自上而下，垂直排列（自動換行）；可以改變寬高
行內(nèi)元素：a, b, span,等，從左向右，水平排列（不會換行）；不能改變寬高，若在這些標簽的選擇器下更改width和height屬性，則無法識別寬高

行內(nèi)元素通過加入 display 屬性設(shè)置屬性值inline-block可以轉(zhuǎn)換為行內(nèi)塊元素，從而改變寬高
行內(nèi)塊元素：input, img等，從左向右，水平排列（自動換行）；可以改變寬高

示例Code

<style>
    div{
        width: 100px;
        height: 50px;
        border :1px solid red;
    }
    span{
        width: 100px;
        height: 100px;
        border :1px solid red;
    }
    input{
        width: 50px;
        height: 50px;
        border :1px solid red;
    }

    a {
        width: 50px;
        height: 50px;
        border :1px solid red;
        /* a標簽是行內(nèi)元素，無法改變寬高。但只要轉(zhuǎn)換成行內(nèi)塊元素，就可以改變寬高了。 */
        display: inline-block;  /* 將a元素，顯示成  行內(nèi)塊 */
    }
</style>
<body>
    <a href="">aaa</a>
    <a href="">bbb</a>
    <a href="">ccc</a>
</body>

浮動定位
- 不僅可以使塊級元素靠著左邊或右邊。還可以消除塊級元素的獨自占一行的特性
- float屬性的取值：
  
  none ：不浮動
  
  left：貼著左邊浮動
  
  right：貼著右邊浮動
- 示例Code
  
  如圖所示，c1，c2向右浮動直到本行堆滿，c3換行繼續(xù)向右堆
  
  如圖所示，若不指定float屬性，默認從左上角開始從上至下堆；所有未指定float屬性的元素為一列從左上第一個位置進行向下堆疊
相對定位
- 和原來的位置進行比較，進行移動定位（偏移）
- 使用方法：設(shè)定屬性和屬性值position: relative、top: xxxpx、left: xxxpx
  
  top和left可以為負值表示向左上移動，正值時表示向右下移動
- 示例Code

絕對定位

選定一個當前元素position: absolute與它的父元素中設(shè)定有position: relative的元素按偏移量top和left的屬性值進行偏移

如果父級元素定位了，就以父級為參照物；

如果父級沒定位，找爺爺級，爺爺定位了，以爺爺為參照物。

如果爺爺沒定位，繼續(xù)向上找，都沒定位的話，body是最終選擇
必須找當前元素的父元素作為參照物進行絕對定位，不可用與當前元素處于同一并列位置的元素作為參照物（位置保持不變，不會以偏移值進行偏移）

示例Code

<style>
    .parent{
        width: 250px;
        height: 300px;
        border: 2px solid red;
        
        /* 設(shè)定屬性值為parent的元素是參照物 */
        position: relative;
    }

    .child{
        width: 150px;
        height: 280px;
        border: 2px solid green;
        margin: 15px;

        /* 設(shè)定屬性值為child的元素是參照物 */
        /* position: relative; */
    }
    
    .mod01{
        width: 50px;
        height: 60px;
        border: 2px dashed gold;

        /* 有父元素的時候，設(shè)定屬性值為mod1的元素是參照物, 此時是無效的*/
        /* position: relative; */
    }

    .mod02{
        width: 50px;
        height: 60px;
        border: 2px dashed orange;

        /* 設(shè)定當前的絕對位置元素為mod2 */
        position: absolute;
        /* 設(shè)置偏移值 */
        top: 50px;
        left: 50px;
    }

    .mod03{
        width: 50px;
        height: 60px;
        border: 2px dashed blueviolet;

        /* 有父元素的時候，設(shè)定屬性值為mod3的元素是參照物, 此時是無效的*/
        /* position: relative; */
    }

</style>

<body>
    <div class="parent">
        <div class="child">
            <div class="mod01"></div>
            <div class="mod02"></div>
            <div class="mod03"></div>
        </div>
    </div>
</body>

固定定位
- 將元素的內(nèi)容固定在頁面的某個位置，當用戶向下滾動頁面時元素框并不隨著移動
- 使用方法：設(shè)定屬性和屬性值position: fixed、width: xxxpx 、height: xxxpx
  
  固定定位同時可以設(shè)定當前元素距離頁面左和上的邊距
z-index
- 如果有重疊元素，使用z軸屬性，定義上下層次
- z軸屬性，要配合相對或絕對定位來使用
- z值沒有額定數(shù)值（整型就可以，具體用數(shù)字幾，悉聽尊便）
- 使用方法：為兩個重疊的標簽同時設(shè)定屬性和屬性值position: relative、z-index: xxx
  
  其中z-index的屬性值較大的顯示在上層
- 示例Code

4. CSS3

圓角與盒子陰影
漸變
背景
過渡
動畫

三、JavaScript

1. JavaScript概述

JavaScript的特點
- 解釋執(zhí)行：事先不編譯，逐行執(zhí)行
- 基于對象：內(nèi)置大量現(xiàn)成對象
JavaScript的組成
- ECMAScript：定義核心語法，關(guān)鍵字，運算符，數(shù)據(jù)類型等系列標準
- DOM：文檔對象模型，將一個html頁面的所有節(jié)點看成是一個一個的對象，更有層次感的管理每一個節(jié)點
- BOM：瀏覽器對象模型，是對瀏覽器窗口進行訪問和操作

2. HTML與JavaScript結(jié)合方式

行內(nèi)腳本

作為屬性值來使用，一般只寫方法調(diào)用或return 方法調(diào)用
內(nèi)部腳本
- 使用<script></script>
- 標準是寫在head和body之間（脖子位置）
外部腳本

使用script標簽中的屬性src添加.js文件來引入腳本

3. JavaScript的使用

變量
- 在定義變量的時候，所有的數(shù)據(jù)類型都是var
- 聲明變量： var x、var x,y
- 實際的變量類型
  - number：不區(qū)分整型數(shù)值和浮點型數(shù)值
  - string：首尾由單引號或雙引號括起
  - boolean：true和false也代表1和0
- 自動類型轉(zhuǎn)換
- 數(shù)據(jù)類型相關(guān)函數(shù)
  - parseInt
  - parseFloat
  - typeof：查詢變量的當前類型
- null和undefined
  - null：在程序中代表“無值”或者“無對象”，可以通過給一個變量賦值 null 來清除變量的內(nèi)容
  - undefined：聲明了變量但從未賦值或者對象屬性不存在
- 算數(shù)運算符特殊用法
  - -可以表示減號，也可以表示負號，如：x = -y
  - +可以表示加法，也可以用于字符串的連接
- 關(guān)系運算符
  - ===：類型相同，數(shù)值相同
  - !==：非嚴格相等，與==類似
  - 示例Code
```
<script>
    var a = "10";
    var b = 10;

    if (a == b) {
        alert("a == b");//成立
    }
    if (a !== b) {
        alert("a !== b");//成立
    }
    if (a === b) {
        alert("a === b");//不成立
    }
</script>
```
- 邏輯運算符
- 流程控制語句
字符串處理API
數(shù)組
- 創(chuàng)建數(shù)組
  
  var arr1 = new Array();
- 初始化數(shù)組的三種方式：
  - 利用索引進行初始化
  - 使用Array構(gòu)造方法傳參進行初始化
  - 利用方括號[]進行初始化
  數(shù)組類型的返回值類型通常也是用var
- 獲取數(shù)組長度的字段length
- 對數(shù)組進行操作的常用方法
  - 轉(zhuǎn)字符串：tostring()、join()
  - 利用現(xiàn)有數(shù)組創(chuàng)建新數(shù)組：conact()、slice()
  - 更改當前數(shù)組：反轉(zhuǎn)reverse()、排序sort()
Math對象

無需創(chuàng)建Math對象，直接把 Math 作為對象使用就可以調(diào)用其所有屬性和方法
Number對象

對數(shù)值進行四舍五入操作
正則表達式

對字符串執(zhí)行模式匹配
日期對象
函數(shù)
- 使用關(guān)鍵字 function 定義函數(shù)，形參列表中不要加數(shù)據(jù)類型；函數(shù)不寫返回值類型，但是可以有返回值
```
function 函數(shù)名( 形參列表 ) { 
  // 函數(shù)體 return 返回值; 
}
```
- 參數(shù)對象arguments是參數(shù)列表內(nèi)容的一個數(shù)組對象，可以使用length獲取參數(shù)列表長度，使用索引下標訪問數(shù)組中的元素，參數(shù)數(shù)組索引也是從0開始
- 構(gòu)造函數(shù)
  
  將函數(shù)的返回值直接寫入原來的參數(shù)列表中，參數(shù)和返回值都用字符串表示
```
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); //使用構(gòu)造函數(shù)
console.log(x);
```
- 匿名函數(shù)
```
var fn = function(a, b) {// 沒有名字的函數(shù)，應該用一個變量來接收 
    return a * 10 + b; 
};

console.log( fn(3, 4) );
```
- 全局函數(shù)：直接使用函數(shù)，無需創(chuàng)建對象
  - isNaN
  - eval
  - encodeURI和decodeURI
- 閉包
  - 閉包的概念：指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)，一般情況就是在一個函數(shù)中包含另一個函數(shù)
  - 閉包的作用：訪問函數(shù)內(nèi)部變量、保持函數(shù)在環(huán)境中一直存在，不會被垃圾回收機制處理
  - JavaScript中的全局變量可以不加var聲明，不使用var聲明的變量默認是全局變量，作用范圍是整個script標簽
  - 使用全局變量有時不安全，容易改變變量的值；使用閉包可以實現(xiàn)全局變量的效果，較為安全，但不推薦大量使用閉包
  - 閉包直觀的說就是形成一個不銷毀的棧環(huán)境。在函數(shù)中嵌套一個子函數(shù)，通過父函數(shù)返回值調(diào)用子函數(shù)，在父函數(shù)外可以使用返回值這個變量單獨調(diào)用子函數(shù)的內(nèi)容，而這個過程中父函數(shù)沒有被銷毀
  - 閉包的使用：利用子函數(shù)將父函數(shù)中局部變量改變值
  - 應用示例：統(tǒng)計一個函數(shù)被執(zhí)行的次數(shù)
```
<script>
    function parent() {
        var cnt = 0;
        function child() {
            return cnt++;
        }
        return child;
    }
    var fun = parent();
    fun();//0
    fun();//1
    alert(fun());//輸出2
</script>
```
```
<script>
    function parent() {
        var cnt = 0;
        function child() {
            return cnt += 1;
        }
        return child;
    }
    var fun = parent();
    alert(fun);
    // 輸出結(jié)果：
    // function child() {
    //         return cnt++;
    //     }
    alert(fun());//輸出結(jié)果：1
    alert(fun());//輸出結(jié)果：2
    alert(parent);
    // 輸出結(jié)果：
    // function parent() {
    //     var cnt = 0;
    //     function child() {
    //         return cnt++;
    //     }
    //      return child;
    // }
    alert(parent());
    // 輸出結(jié)果：
    // function child() {
    //         return cnt++;
    //     }
</script>
```
JavaScript幾種輸出方式（其中alert、confirm、prompt都是全局方法直接使用）
- 普通彈框
  
  alert("hello，拉勾");
- 控制臺日志輸出
  
  console.log("谷歌瀏覽器按F12進入控制臺");
- 頁面輸出
  
  將<h2>元素輸出到<body>中:
  
  document.write("<h2>我愛你中國</h2>");
  
  輸出內(nèi)容可以加標簽，制作不同的頁面輸出效果
- 確認框
  
  confirm("確定刪除嗎？");頁面輸出會顯示確認和取消按鈕
  
  傳參是彈框提示語句的字符串
  
  一般用var接收boolean類型的返回值，選擇確認返回true，選擇取消返回false
- 提示輸入框
  
  prompt("請輸入姓名：");頁面輸出會顯示輸入框和確認、取消按鈕
  
  傳參是彈框提示語句的字符串
  
  一般用var接收返回值，返回值內(nèi)容為輸入框輸入的字符串內(nèi)容

4. DOM操作

4.1 DOM訪問

document對象：表示當前整個HTML頁面
```
<!DOCTYPE html>
```
HTML頁面中通常在最上方進行聲明文檔類型

!表示聲明，DOCTYPE表示文檔類型，html表示是HTML類型的文檔

通過標簽的id屬性獲取元素節(jié)點對象

方法getElementById

<body>
    <form action="" onsubmit="login()">
        <p>賬號：<input id="username"></p>
        <p>電話：<input id="phone"></p>
        <p><button>登錄</button></p>
    </form>

    <script>
        function login(){
            var id = document.getElementById("username");
            alert(id);
        }
    </script>
</body>

onsubmit屬性可以在本表單提交后調(diào)用login方法，方法調(diào)用后彈框打印[object HTMLInputElement]，表示getElementById方法獲取的對象類型

對該對象調(diào)用value字段可以獲取具體數(shù)值或字符串

<body>
    <form action="xxx" onsubmit="return login()">
        <p>賬號：<input id="username"></p>
        <p>電話：<input id="phone"></p>
        <p><button>登錄</button></p>
    </form>

    <script>
        function login(){
            var id = document.getElementById("username").value;
            if (id == "") {
                alert("賬號不能為空");
                return false;
            }
            return true;
        }
    </script>
</body>

本表單提交后，屬性onsubmit獲取返回值，若為true則以繼續(xù)執(zhí)行，若為false則停在此處

通過標簽的多個相同name屬性獲取元素節(jié)點對象數(shù)組

onchange屬性可以在復選框選擇時，調(diào)用checkAllBox方法，其中傳入的this參數(shù)代表本input標簽（type為checkbox的復選框）對象

通過getElementsByName方法可以獲取同一name屬性的所有標簽對象，方法返回值為由這些對象組成的數(shù)組

type屬性值為checkbox的input標簽，可以加入屬性值為checked的checked屬性，若不定義這個屬性，checkbox類型的input也會默認有這個屬性

<body>
    <table border="1" cellspacing="0">
        <tr align="left">
            <td><input type="checkbox" name="cb" onchange="checkAllBox(this)">全選</td>
            <td>生產(chǎn)日期</td>
            <td>價格</td>
        </tr>

        <tr align="center">
            <td><input type="checkbox" name="cb">商品1</td>
            <td>1990</td>
            <td>25d</td>
        </tr>

        <tr align="center">
            <td><input type="checkbox" name="cb">商品2</td>
            <td>1991</td>
            <td>30d</td>
        </tr>

        <tr align="center">
            <td><input type="checkbox" name="cb">商品3</td>
            <td>1996</td>
            <td>67d</td>
        </tr>
    </table>

    <p><button>提交訂單</button></p>
        
    <script>
        function checkAllBox(all) {
            var arr = document.getElementsByName("cb");
            for (var n = 0; n < arr.length; n++) {
                arr[n].checked = all.checked;
            }
        }
    </script>
</body>

通過標簽名稱獲得元素節(jié)點對象集，通常拿到元素節(jié)點對象可以使用.style.屬性值的方式的修改元素節(jié)點的樣式（類似于使用CSS中style標簽下的選擇器）

使用方法：使用element對象調(diào)用getElementsByTagName方法取得返回值是數(shù)組，對數(shù)組進行遍歷，其中每個數(shù)組元素為相同標簽名的元素節(jié)點

4.2 DOM修改

獲取或改變HTML中的內(nèi)容

主要是通過獲取到的元素節(jié)點對象調(diào)用innerHTML字段來獲取或修改標簽的內(nèi)容
獲取或改變HTML中的樣式

主要是通過獲取到的元素節(jié)點對象調(diào)用style字段來獲取節(jié)點的style對象，再通過調(diào)用標簽的樣式字段來獲取或修改標簽的樣式（類似于使用CSS中style標簽下的選擇器）
添加元素節(jié)點

使用createElement創(chuàng)建節(jié)點，對節(jié)點對象調(diào)用方法setAttribute設(shè)置屬性和屬性值

插入節(jié)點一般用父節(jié)點對象調(diào)用方法appendChild(子節(jié)點對象)

使用getElementsByTagName獲取當前頁面的節(jié)點對象數(shù)組，通過索引下標來訪問某個父節(jié)點
刪除元素節(jié)點

通過parentNode來獲取該節(jié)點的父節(jié)點，通過父節(jié)點方法removeChild(子節(jié)點對象)來刪除子節(jié)點
替換元素節(jié)點
- 獲取當前節(jié)點對象old
- 創(chuàng)建新節(jié)點對象new
- 當前節(jié)點對象調(diào)用parentNode方法獲取當前節(jié)點的父節(jié)點，通過父節(jié)點方法replaceChild(new,old)進行替換

4.3 事件

事件：JavaScript通過捕獲頁面上的操作而做出反饋，事件一般是標簽中的屬性，一般將事件屬性的屬性值設(shè)定為JavaScript方法調(diào)用或return 方法調(diào)用

屬性值是return xxx()，方法返回值為布爾值時有效，方法返回true為執(zhí)行，false為阻止當前標簽事件發(fā)生（如<a>中會阻止頁面跳轉(zhuǎn)）
窗口事件

在body和frameset元素中添加onload屬性，將其屬性值設(shè)定為一個JavaScript方法，每當頁面加載完成后自動調(diào)用這個方法
表單元素事件

表單標簽<form>的子標簽中可以添加屬性onblur（失去焦點時執(zhí)行）、onfocus（獲得焦點時執(zhí)行）

獲取焦點：通過點擊輸入框、復選框選項
鼠標事件

對執(zhí)行腳本進行如：單擊、雙擊、移出元素、懸停元素
鍵盤事件
事件冒泡
事件捕獲

4.4 面向?qū)ο驩OP

使用Object創(chuàng)建通用對象
使用構(gòu)造函數(shù)
使用直接量

4.5 JSON

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式
作用：互聯(lián)網(wǎng)上來回傳遞數(shù)據(jù)，如果沒有一個統(tǒng)一的格式，解析起來的難度很大，

使用JSON易于人閱讀和編寫，同時也易于機器解析和生成

格式：

{
屬性1：值1，
屬性2：值2，
。。。。
}

使用JavaScript可以將JSON看作一個對象，通過對象.屬性值名的方式獲取JSON對象屬性值

常見的用法：JSON數(shù)組（以JSON為元素類型的數(shù)組），同樣可以使用索引下標訪問每個JSON對象
復雜的JSON對象

JSON對象的屬性值可以是字符串數(shù)組，屬性的訪問方式JSON對象.屬性名[索引]

5. BOM操作

BOM操作就是JavaScript對瀏覽器的一些常規(guī)操作的方法
window對象：window是全局的可以直接調(diào)用相應的字段
- screen屏幕對象
  
  window.screen屏幕對象，屏幕對象常用字段：width、height
- navigator對象包含有關(guān)訪問者瀏覽器的信息
  
  window.navigator
- location通常用來做頁面跳轉(zhuǎn)，是內(nèi)置的對象可以直接使用該對象調(diào)用字段或方法
  
  location.href：href字段可以指定URL進行跳轉(zhuǎn)
  
  location.reload()：reload方法可以重新加載當前頁面（相當于刷新頁面）
- history對象會記錄瀏覽器的痕跡，是內(nèi)置的對象可以直接使用該對象調(diào)用字段或方法
  
  history.go(-1)：跳回上一級頁面
  
  history.back()：跳回上一級頁面
- 存儲對象
  - 兩種存儲對象的存儲方式：和Java中map很相似，都是鍵值對的方式存數(shù)據(jù)
  - localStorage:本地存儲，在關(guān)閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)
    
    常用方法：getItem、setItem、removeItem
  - sessionStorage:會話存儲，就是保持瀏覽器別關(guān)閉，關(guān)閉瀏覽就等于結(jié)束了一次會話，
    
    開啟瀏覽器就意味著創(chuàng)建了一次會話。
    
    常用方法：getItem、setItem、removeItem、clear
  - 兩種存儲對象的使用方式：先set再get，若沒有set就get，get方法返回false
計時操作（常用3個方法都是全局方法可以直接調(diào)用）
- setInterval：指定時間間隔去執(zhí)行某個方法，該方法返回定時器對象
  
  setInterval(方法名, 毫秒數(shù))
- clearInterval：和setInterval配合使用，向clearInterval傳入定時器對象，停止定時器
  
  clearInterval(定時器對象)
- setTimeout：設(shè)定指定時間倒計時完成后執(zhí)行某個方法
  
  setTimeout(方法名, 毫秒數(shù))

本文摘自：https://www.cnblogs.com/

HTML, CSS, JavaScript2022-02-14 14:14:46

HTML, CSS, JavaScript

一、HTML

1. HTML4常用標簽

1.1 文件標簽

1.2 排版標簽

1.3 字體標簽

1.4 列表標簽

1.5 圖像標簽

1.6 超鏈接標簽

1.7 表格標簽

1.8 表單標簽

1.9 框架標簽

1.10 其他標簽與特殊字符

2. HTML5新特性

2.1 HTML4和HTML5主要區(qū)別

2.2 新增語義化標簽

2.3 媒體標簽

2.4 新增表單控件

二、CSS

1. CSS概述

2. CSS與HTML結(jié)合的三種方式

3. CSS選擇器、基本屬性、定位

3.1 CSS選擇器

3.2 CSS基本屬性

3.3 CSS定位

4. CSS3

三、JavaScript

1. JavaScript概述

2. HTML與JavaScript結(jié)合方式

3. JavaScript的使用

4. DOM操作

4.1 DOM訪問

4.2 DOM修改

4.3 事件

4.4 面向?qū)ο驩OP

4.5 JSON

5. BOM操作

HTML, CSS, JavaScript
2022-02-14 14:14:46

二、CSS

3. CSS選擇器、基本屬性、定位

三、JavaScript