亚洲 欧洲 日韩 综合色天使,久久国产Av无码一区二区老太,人妻醉酒被下药迷昏带到诊所 ,亚州老熟女A片AV色欲小说

idea創(chuàng)建web項(xiàng)目沒有webapp，idea創(chuàng)建web項(xiàng)目沒有web文件夾？

投稿用戶 ? ? 創(chuàng)業(yè)雜談 ? 閱讀 1108

前端基礎(chǔ)

  • 前端：我們網(wǎng)站的頁(yè)面，包括網(wǎng)站的樣式、圖片、視頻等一切用戶可見的內(nèi)容都是前端的內(nèi)容。
  • 后端：處理網(wǎng)站的所有數(shù)據(jù)來(lái)源，比如我們之前從數(shù)據(jù)庫(kù)中查詢數(shù)據(jù)，而我們查詢的數(shù)據(jù)經(jīng)過(guò)處理最終會(huì)被展示到前端，而用于處理前端數(shù)據(jù)的工作就是由后端來(lái)完成的。

相當(dāng)于，前端僅僅是一層皮，它直接決定了整個(gè)網(wǎng)站的美觀程度，我們可以自由地編排頁(yè)面的布局，甚至可以編寫好看的特效；而靈魂則是后端，如何處理用戶的交互、如何處理數(shù)據(jù)查詢是后端的職責(zé)所在，我們前面學(xué)習(xí)的都是后端內(nèi)容，而Java也是一門專注于后端開發(fā)的語(yǔ)言。

對(duì)于前端開發(fā)我們需要學(xué)習(xí)一些新的內(nèi)容，只有了解了它們，我們才能編寫出美觀的頁(yè)面。

學(xué)習(xí)前端的目的只是為了讓同學(xué)們了解前后端的交互方式，在進(jìn)行后端開發(fā)時(shí)思路能夠更加清晰，有關(guān)前端的完整內(nèi)容學(xué)習(xí)，可以瀏覽其他前端知識(shí)教程。

我們?cè)谧铋_始講解網(wǎng)絡(luò)編程時(shí)，提到了瀏覽器訪問服務(wù)器，實(shí)際上瀏覽器訪問服務(wù)器就是一種B/S結(jié)構(gòu)（ Browser/Server，瀏覽器/服務(wù)器模式 ），而我們使用Java代碼編寫的客戶端連接服務(wù)器就是一種C/S結(jié)構(gòu)（ Client/Server架構(gòu)，即客戶端/服務(wù)器架構(gòu) ）。

HTML頁(yè)面

我們前面學(xué)習(xí)了XML語(yǔ)言，它是一種標(biāo)記語(yǔ)言，我們需要以成對(duì)標(biāo)簽的格式進(jìn)行填寫，但是它是專用于保存數(shù)據(jù)，而不是展示數(shù)據(jù)，而HTML恰恰相反，它專用于展示數(shù)據(jù)，由于我們前面已經(jīng)學(xué)習(xí)過(guò)XML語(yǔ)言了，HTML語(yǔ)言和XML很相似，所以我們學(xué)習(xí)起來(lái)會(huì)很快。

第一個(gè)HTML頁(yè)面

我們前面知道，通過(guò)瀏覽器可以直接瀏覽XML文件，而瀏覽器一般是用于瀏覽HTML文件的，以HTML語(yǔ)言編寫的內(nèi)容，會(huì)被瀏覽器識(shí)別為一個(gè)頁(yè)面，并根據(jù)我們編寫的內(nèi)容，將對(duì)應(yīng)的組件添加到瀏覽器窗口中。

我們一般使用Chrome、Safari、Microsoft Edge等瀏覽器進(jìn)行測(cè)試，IE瀏覽器已經(jīng)徹底淘汰了！

比如我們可以創(chuàng)建一個(gè)Html文件來(lái)看看瀏覽器會(huì)如何識(shí)別，使用IDEA也能編寫HTML頁(yè)面，我們?cè)贗DEA中新建一個(gè) Web模塊 ，進(jìn)入之后我們發(fā)現(xiàn)，項(xiàng)目中沒有任何內(nèi)容，我們右鍵新建一個(gè)HTML文件，選擇HTML5文件，并命名為index，創(chuàng)建后出現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

我們發(fā)現(xiàn)，它和XML基本長(zhǎng)得一樣，并且還自帶了一些標(biāo)簽，那么現(xiàn)在我們通過(guò)瀏覽器來(lái)瀏覽這個(gè)HTML文件（這里推薦使用內(nèi)置預(yù)覽，不然還得來(lái)回切換窗口）

我們發(fā)現(xiàn)現(xiàn)在什么東西都沒有，但是在瀏覽器的標(biāo)簽位置顯示了網(wǎng)頁(yè)的名稱為 Title ，并且顯示了一個(gè)IDEA的圖標(biāo)作為網(wǎng)頁(yè)圖標(biāo)。

現(xiàn)在我們稍微進(jìn)行一些修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lbw的直播間</title>
</head>
<body>
    現(xiàn)在全體起立
</body>
</html>

再次打開瀏覽器，我們發(fā)現(xiàn)頁(yè)面中出現(xiàn)了我們輸入的文本內(nèi)容，并且標(biāo)題也改為了我們自定義的標(biāo)題。

我們可以在設(shè)置->工具->Web瀏覽器和預(yù)覽中將重新加載頁(yè)面規(guī)則改為 變更時(shí) ，這樣我們使用內(nèi)置瀏覽器或是外部瀏覽器，可以自動(dòng)更新我們編寫的內(nèi)容。

我們還可以在頁(yè)面中添加一個(gè)圖片，隨便將一張圖片放到html文件的同級(jí)目錄下，命名為 image.xxx ，其中xxx是后綴名稱，不要修改，我們?cè)赽ody節(jié)點(diǎn)中添加以下內(nèi)容：

<img width="300" src="image.xxx" alt="劍光如我，斬盡牛雜">
<!--  注意xxx替換成對(duì)應(yīng)的后綴名稱  -->

我們發(fā)現(xiàn)，我們的頁(yè)面中居然能夠顯示我們添加的圖片內(nèi)容。因此，我們只需要編寫對(duì)應(yīng)的標(biāo)簽，瀏覽器就能夠自動(dòng)識(shí)別為對(duì)應(yīng)的組件，并將其展示到我們的瀏覽器窗口中。

我們?cè)賮?lái)看看插入一個(gè)B站的視頻，很簡(jiǎn)單，只需要到對(duì)應(yīng)的視頻下方，找到分享，我們看到有一個(gè)嵌入代碼：

<iframe src="//player.bilibili.com/player.html?aid=333231998&bvid=BV1rA411g7q8&cid=346917516&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="500"> </iframe>

每一個(gè)頁(yè)面都是通過(guò)這些標(biāo)簽來(lái)編寫的，幾乎所有的網(wǎng)站都是使用HTML編寫頁(yè)面。

HTML語(yǔ)法規(guī)范

一個(gè)HTML文件中一般分為兩個(gè)部分：

  • 頭部：一般包含頁(yè)面的標(biāo)題、頁(yè)面的圖標(biāo)、還有頁(yè)面的一些設(shè)置，也可以在這里導(dǎo)入css、js等內(nèi)容。
  • 主體：整個(gè)頁(yè)面所有需要顯示的內(nèi)容全部在主體編寫。

我們首先來(lái)看頭部，我們之前使用的HTML文件中頭部包含了這些內(nèi)容：

<meta charset="UTF-8">
<title>lbw的直播間</title>

首先 meta 標(biāo)簽用于定義頁(yè)面的一些元信息，這里使用它來(lái)定義了一個(gè)字符集（編碼格式），一般是UTF-8，下面的 title 標(biāo)簽就是頁(yè)面的標(biāo)題，會(huì)顯示在瀏覽器的上方。我們現(xiàn)在來(lái)給頁(yè)面設(shè)置一個(gè)圖標(biāo)，圖標(biāo)一般可以在字節(jié)跳動(dòng)的IconPark網(wǎng)站找到： https://iconpark.oceanengine.com/home，選擇一個(gè)自己喜歡的圖標(biāo)下載即可。

將圖標(biāo)放入到項(xiàng)目目錄中，并命名為icon.png，在HTML頭部添加以下內(nèi)容：

<link rel="icon" href="icon.png" type="image/x-icon" />

link 標(biāo)簽用于關(guān)聯(lián)當(dāng)前HTML頁(yè)面與其他資源的關(guān)系，關(guān)系通過(guò) rel 屬性指定，這里使用的是icon表示這個(gè)文件是當(dāng)前頁(yè)面圖標(biāo)。

現(xiàn)在訪問此頁(yè)面，我們發(fā)現(xiàn)頁(yè)面的圖標(biāo)已經(jīng)變成我們指定的圖標(biāo)樣式了。

現(xiàn)在我們?cè)賮?lái)看主體，我們可以在主體內(nèi)部編寫該頁(yè)面要展示的所有內(nèi)容，比如我們之前就用到了img標(biāo)簽來(lái)展示一個(gè)圖片，其中每一個(gè)標(biāo)簽都稱為一個(gè)元素：

<img width="300" src="image.xxx" alt="當(dāng)圖片加載失敗時(shí)，顯示的文本">

我們發(fā)現(xiàn)，這個(gè)標(biāo)簽只存在一個(gè)，并沒有成對(duì)出現(xiàn)，HTML中有些標(biāo)簽是單標(biāo)簽，也就是說(shuō)只有這一個(gè)，還有一些標(biāo)簽是雙標(biāo)簽，必須成對(duì)出現(xiàn)，HTML中，也不允許交叉嵌套，但是出現(xiàn)交叉嵌套時(shí)，瀏覽器并不會(huì)提示錯(cuò)誤，而是仍舊嘗試去解析這些內(nèi)容，甚至?xí)椭覀冞M(jìn)行一定程度的修復(fù)，比如：

<body>

    <iframe src="//player.bilibili.com/player.html?aid=333231998&bvid=BV1rA411g7q8&cid=346917516&page=1" width="800" height="500"
            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</body>
</iframe>

很明顯上面的代碼已經(jīng)出現(xiàn)交叉嵌套的情況了，但是依然能夠在瀏覽器中正確地顯示。

在主體中，我們一般使用div標(biāo)簽來(lái)分割頁(yè)面：

<body>
    <div>我是第一塊</div>
    <div>我是第二塊</div>
</body>

通過(guò)使用 div 標(biāo)簽，我們將整個(gè)頁(yè)面按行劃分，而高度就是內(nèi)部元素的高度，那么如果只希望按元素劃分，也就是說(shuō)元素占多大就劃分多大的空間，那么我們就可以使用 span 標(biāo)簽來(lái)劃分：

<body>
    <div>
        <span>我是第一塊第一個(gè)部分</span>
        <span>我是第一塊第二個(gè)部分</span>
    </div>
    <div>我是第二塊</div>
</body>

我們也可以使用 p 段落標(biāo)簽，它一般用于文章分段：

<body>
    <p>
        你看這個(gè)彬彬啊，才喝幾罐就醉了，真的太遜了。 這個(gè)彬彬就是遜呀！
        聽你這么說(shuō)，你很勇哦？ 開玩笑，我超勇的，超會(huì)喝的啦。
        超會(huì)喝，很勇嘛。身材不錯(cuò)哦，蠻結(jié)實(shí)的嘛。
    </p>
    <p>
        哎，杰哥，你干嘛啊。都幾歲了，還那么害羞！我看你，完全是不懂哦！
        懂，懂什么??？ 你想懂？我房里有一些好康的。
        好康，是新游戲哦！ 什么新游戲，比游戲還刺激！
    </p>
    <p>
        杰哥，這是什么??？ 哎呦，你臉紅啦！來(lái)，讓我看看。
        不要啦??！ 讓我看看嘛。 不要啦，杰哥，你干嘛啊！
        讓我看看你法語(yǔ)正不正常??！
    </p>
</body>

那么如果遇到特殊字符該怎么辦呢？和XML一樣，我們可以使用轉(zhuǎn)義字符：

idea創(chuàng)建web項(xiàng)目沒有webapp，idea創(chuàng)建web項(xiàng)目沒有web文件夾？

注意：多個(gè)連續(xù)的空格字符只能被識(shí)別為一個(gè)，如果需要連續(xù)多個(gè)必須使用轉(zhuǎn)義字符，同時(shí)也不會(huì)識(shí)別換行，換行只會(huì)變成一個(gè)空格，需要換行必須使用 br 標(biāo)簽。

通過(guò)了解了HTML的一些基礎(chǔ)語(yǔ)法，我們現(xiàn)在就知道一個(gè)頁(yè)面大致是如何編寫了。

HTML常用標(biāo)簽

前面我們已經(jīng)了解了HTML的基本語(yǔ)法規(guī)范，那么現(xiàn)在我們就來(lái)看看，有哪些常用的標(biāo)簽吧，首先是換行和分割線：

  • br 換行
  • hr 分割線
<body>
    <div>
        我是一段文字<br>我是第二段文字
    </div>
    <hr>
    <div>我是底部文字</div>
</body>

標(biāo)題一般用h1到h6表示，我們來(lái)看看效果：

<body>
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
<p>我是正文內(nèi)容，真不錯(cuò)。</p>
</body>

現(xiàn)在我們來(lái)看看超鏈接，我們可以添加一個(gè)鏈接用于指向其他網(wǎng)站：

<a href="https://www.bilibili.com">點(diǎn)擊訪問小破站</a>

我們也可以指定頁(yè)面上的一個(gè)錨點(diǎn)進(jìn)行滾動(dòng)：

<body>
<a href="#test">跳轉(zhuǎn)錨點(diǎn)</a>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<div id="test">我是錨點(diǎn)</div>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
</body>

每個(gè)元素都可以有一個(gè)id屬性，我們只需要給元素添加一個(gè)id屬性，就使用a標(biāo)簽可以跳轉(zhuǎn)到一個(gè)指定錨點(diǎn)。

我們接著來(lái)看看列表元素，這是一個(gè)無(wú)需列表，其中每一個(gè) li 表示一個(gè)列表項(xiàng)：

<ul>
    <li>一號(hào)選項(xiàng)</li>
    <li>二號(hào)選項(xiàng)</li>
    <li>三號(hào)選項(xiàng)</li>
    <li>四號(hào)選項(xiàng)</li>
    <li>五號(hào)選項(xiàng)</li>
</ul>

我們也可以使用 ol 來(lái)顯示一個(gè)有序列表：

<ol>
    <li>一號(hào)選項(xiàng)</li>
    <li>二號(hào)選項(xiàng)</li>
    <li>三號(hào)選項(xiàng)</li>
    <li>四號(hào)選項(xiàng)</li>
    <li>五號(hào)選項(xiàng)</li>
</ol>

表格也是很重要的一種元素，但是它編寫起來(lái)相對(duì)有一點(diǎn)麻煩：

<table>
    <thead>
    <tr>
        <th>學(xué)號(hào)</th>
        <th>姓名</th>
        <th>性別</th>
        <th>年級(jí)</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>0001</td>
        <td>小明</td>
        <td>男</td>
        <td>2019</td>
    </tr>
    <tr>
        <td>0002</td>
        <td>小紅</td>
        <td>女</td>
        <td>2020</td>
    </tr>
    </tbody>
</table>

雖然這樣生成了一個(gè)表格，但是這個(gè)表格并沒有分割線，并且格式也不符合我們想要的樣式，那么如何才能修改這些基礎(chǔ)屬性的樣式呢，我們就需要聊聊CSS了。

HTML表單

表單就像其名字一樣，用戶在頁(yè)面中填寫了對(duì)應(yīng)的內(nèi)容，點(diǎn)擊按鈕就可以提交到后臺(tái)，比如登陸界面，就可以使用表單來(lái)實(shí)現(xiàn)：

一個(gè)網(wǎng)頁(yè)中最重要的當(dāng)屬輸入框和按鈕了，那么我們來(lái)看看如何創(chuàng)建一個(gè)輸入框和按鈕：

<label>
    我是輸入框
    <input type="text">
</label>

對(duì)于一個(gè)輸入框，我們一般會(huì)將其包括在一個(gè) lable 標(biāo)簽中，它和span效果一樣，但是我們點(diǎn)擊前面文字也能快速獲取輸入框焦點(diǎn)。

<body>
<div>登陸我們的網(wǎng)站</div>
<hr>
<div>
    <label>
        賬號(hào)：
        <input type="text">
    </label>
</div>
<div>
    <label>
        密碼：
        <input type="password">
    </label>
</div>
</body>

輸入框可以有很多類型，我們來(lái)試試看password，現(xiàn)在輸入內(nèi)容就不會(huì)直接展示原文了。

創(chuàng)建一個(gè)按鈕有以下幾種方式，在學(xué)習(xí)JavaWeb時(shí)，我們更推薦第二種方式，我們后面進(jìn)行登陸操作需要配合表單使用：

<button>登陸</button>
<input type="submit" value="登陸">
<input type="button" value="登陸">

現(xiàn)在我們就可以寫一個(gè)大致的登陸頁(yè)面了：

<body>
    <h1>登陸我們的網(wǎng)站</h1>
    <form>
        <div>
            <label>
                賬號(hào)：
                <input type="text" placeholder="Username...">
            </label>
        </div>
        <div>
            <label>
                密碼：
                <input type="password" placeholder="Password...">
            </label>
        </div>
        <br>
        <a href="https://www.baidu.com">忘記密碼</a>
        <br>
        <br>
        <div>
            <input type="submit" value="登陸">
        </div>
    </form>
</body>

表單一般使用 form 標(biāo)簽將其囊括，但是現(xiàn)在我們還用不到表單提交，因此之后我們?cè)賮?lái)講解表單的提交。

input 只能實(shí)現(xiàn)單行文本，那么如何實(shí)現(xiàn)多行文本呢？

<label>
    這是我們的文本框<br>
    <textarea placeholder="文本內(nèi)容..." cols="10" rows="10"></textarea>
</label>

我們還可以指定默認(rèn)的行數(shù)和列數(shù)，拖動(dòng)左下角可以自定義文本框的大小。

我們還可以在頁(yè)面中添加勾選框：

<label>
    <input type="checkbox">
    我同意本網(wǎng)站的隱私政策
</label>

上面演示的是一個(gè)多選框，那么我們來(lái)看看單選框：

<label>
    <input type="radio" name="role">
    學(xué)生
</label>
<label>
    <input type="radio" name="role">
    教師
</label>

這里需要使用name屬性進(jìn)行分組，同一個(gè)組內(nèi)的選項(xiàng)只能選擇一個(gè)。

我們也可以添加列表讓用戶進(jìn)行選擇，創(chuàng)建一個(gè)下拉列表：

<label>
    登陸身份：
    <select>
        <option>學(xué)生</option>
        <option>教師</option>
    </select>
</label>

默認(rèn)選取的是第一個(gè)選項(xiàng)，我們可以通過(guò) selected 屬性來(lái)決定默認(rèn)使用的是哪個(gè)選項(xiàng)。

當(dāng)然，HTML的元素遠(yuǎn)不止我們所提到的這些，有關(guān)更多HTML元素的內(nèi)容，可以自行了解。

CSS樣式

之前我們編寫的頁(yè)面非?；A(chǔ)，我們只能通過(guò)一些很基本的屬性來(lái)排列我們的頁(yè)面元素，那么如何實(shí)現(xiàn)更高度的自定義呢，我們就需要用到CSS來(lái)自定義樣式，首先我們創(chuàng)建一個(gè)名為 style.css 的文件。

首先在我們HTML文件的頭部添加：

<link href="style.css" rel="stylesheet">

我們?cè)贑SS文件中添加以下內(nèi)容：

body {
    text-align: center;
}

我們發(fā)現(xiàn)，網(wǎng)頁(yè)的內(nèi)容全部變?yōu)榫又酗@示了，這正是css在生效，相當(dāng)于我們現(xiàn)在給頁(yè)面添加了自定義的樣式規(guī)則。

當(dāng)然，我們也可以選擇不使用CSS，而是直接對(duì)某個(gè)元素添加樣式：

<body style="text-align: center;">
  ...

這樣的效果其實(shí)是等同于上面的css文件的，相當(dāng)于我們直接把樣式定義在指定元素上。

也可以在頭部直接定義樣式，而不是使用外部文件：

<style>
    body {
        text-align: center;
    }
</style>

使用以上三種方式都可以自定義頁(yè)面的樣式，我們推薦使用還是第一種，不然我們的代碼會(huì)很繁雜。

樣式的屬性是非常多的，我們不可能一個(gè)一個(gè)全部講完，視頻中用到什么再來(lái)講解什么，如果同學(xué)們感興趣，可以自行下去了解。

CSS選擇器

我們首先來(lái)了解一下選擇器，那么什么是選擇器呢？我們想要自定義一個(gè)元素的樣式，那么我們肯定要去選擇某個(gè)元素，只有先找到要自定義的元素，我們才能開始編寫樣式。

我們上面的例子中使用的就是標(biāo)簽名選擇器，它可以快速選擇頁(yè)面中所有指定的的標(biāo)簽，比如我們之前使用的就是 body 標(biāo)簽，那么就相當(dāng)于頁(yè)面中所有的body元素全都使用此樣式，那么我們現(xiàn)在來(lái)試試看選擇頁(yè)面中所有的 input 標(biāo)簽：

input {
    width: 200px;
}

我們發(fā)現(xiàn)，頁(yè)面中所有的 input 元素寬度全部被設(shè)定為了200個(gè)像素（ px 是單位大小，代表像素，除了 px 還有 em 和 rem ，他們是根據(jù)當(dāng)前元素字體大小決定的相對(duì)大小，一般用于適配各種大小的瀏覽器窗口，這里暫時(shí)不用）

樣式編寫完成后，如果只有一個(gè)屬性，可以不帶 ; 若多個(gè)屬性則每個(gè)屬性后面都需要添加一個(gè) ;

因此，一個(gè)標(biāo)簽選擇器的格式為：

標(biāo)簽名稱 {
  屬性名稱: 屬性值
}

我們還可以設(shè)定輸入框的字體大小、行高等：

input {
    width: 200px;
    font-size: 20px;
    line-height: 40px;
}

我們現(xiàn)在可以通過(guò)選擇器快速地去設(shè)置某個(gè)元素樣式了，那么如何實(shí)現(xiàn)只設(shè)置某個(gè)元素的樣式呢，現(xiàn)在我們來(lái)看看，id選擇器，我們之前已經(jīng)講解過(guò)了，每個(gè)元素都可以有一個(gè)id屬性，我們可以將其當(dāng)做一個(gè)跳轉(zhuǎn)的錨點(diǎn)使用，而現(xiàn)在，我們可以使用css來(lái)進(jìn)行定位：

我們先為元素添加id屬性：

<h1 id="title">登陸我們的網(wǎng)站</h1>

現(xiàn)在使用CSS選擇我們的元素，并設(shè)定一個(gè)屬性，選擇某個(gè)id需要在前面加上一個(gè) # ：

#title {
    color: red;
}

雖然id選擇器已經(jīng)可以很方便的指定某個(gè)元素，但是如果我們希望n個(gè)但不是元素都被選擇，id選擇器就無(wú)法實(shí)現(xiàn)了，因?yàn)槊總€(gè)元素的id是唯一的，不允許出現(xiàn)重復(fù)id的元素，因此接著我們來(lái)講解一下類選擇器。

每個(gè)元素都可以有一個(gè) class 屬性，表示當(dāng)前元素屬于某個(gè)類（注意這里的類和我們Java中的類概念完全不同）一個(gè)元素可以屬于很多個(gè)類，一個(gè)類也可以被很多個(gè)元素使用：

<form>
    <div >
        <label class="test">
            賬號(hào)：
            <input type="text" placeholder="Username...">
        </label>
    </div>
    <div>
        <label class="test">
            密碼：
            <input type="password" placeholder="Password...">
        </label>
    </div>
</form>

上面的例子中，兩個(gè) label 元素都使用了 test 類（類名稱是我們自定義的），現(xiàn)在我們?cè)赾ss文件中編寫以下內(nèi)容來(lái)以類進(jìn)行選擇：

.test{
    color: blue;
}

我們發(fā)現(xiàn)，兩個(gè)標(biāo)簽的文本內(nèi)容都變?yōu)榱怂{(lán)色，因此使用類選擇器，能夠?qū)λ袨榇祟惖脑靥砑訕邮?。注意在進(jìn)行類選擇時(shí)，我們需要在類名前面加上 . 來(lái)表示。

組合選擇器和優(yōu)先級(jí)問題

我們也可以讓多個(gè)選擇器，共用一個(gè)css樣式：

.test, #title {
    color: red;
}

只需要并排寫即可，注意中間需要添加一個(gè)英文的逗號(hào)用于分割，我們也可以使用 * 來(lái)一次性選擇所有的元素：

* {
    color: red;
}

我們還可以選擇位于某個(gè)元素內(nèi)的某個(gè)元素：

div label {
    color: red;
}

這樣的話，就會(huì)選擇所有位于div元素中的label元素。

當(dāng)然，我們這里只介紹了一些常用的選擇器，有關(guān)詳細(xì)的CSS選擇器可以查閱： https://www.runoob.com/cssref/css-selectors.html

我們接著來(lái)看一下選擇器的優(yōu)先級(jí)：

idea創(chuàng)建web項(xiàng)目沒有webapp，idea創(chuàng)建web項(xiàng)目沒有web文件夾？

我們根據(jù)上面的信息，來(lái)測(cè)試一下，首先編寫一下HTML文件：

<body>
    <div class="test" id="simple" style="color: blue">我是測(cè)試文本內(nèi)容</div>
</body>

現(xiàn)在我們來(lái)編寫一下css文件：

.test {
    color: yellow;
}

#simple {
    color: red;
}

* {
    color: palegreen;
}

那么現(xiàn)在我們可以看到，實(shí)際上生效的是我們直接編寫在標(biāo)簽內(nèi)部的內(nèi)聯(lián)屬性，那么現(xiàn)在我們依次進(jìn)行移除，來(lái)看看它們的優(yōu)先級(jí)。

那么如果我們希望某個(gè)屬性無(wú)視任何的優(yōu)先級(jí)，我們可以在屬性后面添加 !important 標(biāo)記，表示此屬性是一個(gè)重要屬性，它的優(yōu)先級(jí)會(huì)被置為最高。

思考：那要是我每個(gè)選擇器的這個(gè)屬性后面都加一個(gè) !important 會(huì)怎么樣？

自定義邊距

我們來(lái)看看，如何使用css控制一個(gè)div板塊的樣式，首先編寫以下代碼，相當(dāng)于一個(gè)div嵌套了一個(gè)div元素：

<div id="outer">
    <div id="inner">
        
    </div>
</div>

現(xiàn)在編寫一下自定義的css樣式，我們將div設(shè)定為固定大小，并且背景顏色添加為綠色：

#outer {
    background: palegreen;
    width: 300px;
    height: 300px;
}

我們發(fā)現(xiàn)左側(cè)快速預(yù)覽頁(yè)面存在空隙，這是因?yàn)闉g覽器給我們添加了一個(gè)邊距屬性，我們只需要覆蓋此屬性并將其設(shè)定為0即可：

body {
    margin: 0;
}

現(xiàn)在我們給內(nèi)部嵌套的div也設(shè)定一個(gè)大小，并將顏色設(shè)定為橙色：

#inner {
    background: darkorange;
    width: 100px;
    height: 100px;
}

現(xiàn)在我們發(fā)現(xiàn)內(nèi)部的div元素位于右上角，我們還可以以百分比的形式來(lái)指定大小：

#inner {
    background: darkorange;
    width: 100%;
    height: 100%;
}

百分比會(huì)依照當(dāng)前可用大小來(lái)進(jìn)行分配，比如當(dāng)前位于一個(gè)div內(nèi)部，并且外部div元素是固定大小300px，因此100%就相當(dāng)于使用了外部的全部大小，也是300px，現(xiàn)在內(nèi)部元素完全將外部元素覆蓋了，整個(gè)元素現(xiàn)在呈現(xiàn)為橙色。

我們可以為一個(gè)元素設(shè)定邊距，邊距分為外邊距和內(nèi)邊距，外部元素內(nèi)邊距決定了內(nèi)部元素與外部元素之間的間隔，我們來(lái)修改一下css樣式：

#outer {
    background: palegreen;
    width: 300px;
    height: 300px;
    padding: 10px;
}

我們發(fā)現(xiàn)，內(nèi)部的div元素小了一圈，這是因?yàn)橥獠縟iv元素設(shè)定了內(nèi)邊距，上下左右都被設(shè)定為10px大小。

而我們發(fā)現(xiàn)，實(shí)際上我們?cè)谝婚_始也是將body的外邊距設(shè)定為了0，整個(gè)頁(yè)面跟瀏覽器窗口直接間隔0px的寬度。

編寫一個(gè)漂亮的登陸界面

現(xiàn)在我們就來(lái)嘗試編寫一個(gè)漂亮的登陸界面吧！

JavaScript語(yǔ)言

也稱為js，是我們整個(gè)前端基礎(chǔ)的重點(diǎn)內(nèi)容，只有了解了JavaScript語(yǔ)言，我們才能了解前端如何與后端交互。

JavaScript與Java沒有毛關(guān)系，僅僅只是名字中包含了Java而已，跟Java比起來(lái)，它更像Python，它是一門解釋型語(yǔ)言，不需要進(jìn)行編譯，它甚至可以直接在瀏覽器的命令窗口中運(yùn)行。

它相當(dāng)于是前端靜態(tài)頁(yè)面的一個(gè)補(bǔ)充，它可以讓一個(gè)普通的頁(yè)面在后臺(tái)執(zhí)行一些程序，比如我們點(diǎn)擊一個(gè)按鈕，我們可能希望執(zhí)行某些操作，比如下載文件、頁(yè)面跳轉(zhuǎn)、頁(yè)面彈窗、進(jìn)行登陸等，都可以使用JavaScript來(lái)幫助我們實(shí)現(xiàn)。

我們來(lái)看看一個(gè)簡(jiǎn)單的JavaScript程序：

const arr = [0, 2, 1, 5, 9, 3, 4, 6, 7, 8]

for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - 1; j++) {
        if(arr[j] > arr[j+1]){
            const tmp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = tmp
        }
    }
}

window.alert(arr)

這段代碼實(shí)際上就是實(shí)現(xiàn)了一個(gè)冒泡排序算法，我們可以直接在頁(yè)面的頭部中引用此js文件，瀏覽器會(huì)在加載時(shí)自動(dòng)執(zhí)行js文件中編寫的內(nèi)容：

<script src="test.js"></script>

我們發(fā)現(xiàn)JS的語(yǔ)法和Java非常相似，但是它還是和Java存在一些不同之處，而且存在很多陰間語(yǔ)法，那么我們來(lái)看看JS的語(yǔ)法。

JavaScript基本語(yǔ)法

在js中，定義變量和Java中有一些不同，定義一個(gè)變量可以使用 let 關(guān)鍵字或是 var 關(guān)鍵字，IDEA推薦我們使用 let 關(guān)鍵字，因?yàn)?var 存在一定的設(shè)計(jì)缺陷（這里就不做講解了，之后一律使用let關(guān)鍵字進(jìn)行變量聲明）：

let a = 10;
a++;
window.alert(a)

上面的結(jié)果中，我們得到了a的結(jié)果是11，也就是說(shuō)自增和自減運(yùn)算在JS中也是支持的，并且JS每一句結(jié)尾可以不用加分號(hào)。

js并不是Java那樣的強(qiáng)類型語(yǔ)言（任意變量的類型一定是明確的），它是一門弱類型語(yǔ)言，變量的類型并不會(huì)在一開始確定，因此我們?cè)诙x變量時(shí)無(wú)需指定變量的確切類型，而是在運(yùn)行時(shí)動(dòng)態(tài)解析類型：

let a = 10;
a = "HelloWorld！"
console.info(a)

我們發(fā)現(xiàn)，變量a已經(jīng)被賦值為數(shù)字類型，但是我們依然在后續(xù)能將其賦值一個(gè)字符串，它的類型是隨時(shí)可變的。

很多人說(shuō)，這種變態(tài)的類型機(jī)制是JS的一大缺陷。

世界上只有兩種語(yǔ)言：一種是很多人罵的，一種是沒人用的。

我們接著來(lái)看看，JS中存在的基本數(shù)據(jù)類型：

  • Number：數(shù)字類型（包括小數(shù)和整數(shù)）
  • String：字符串類型（可以使用單引號(hào)或是雙引號(hào)）
  • Boolean：布爾類型（與Java一致）

還包括一些特殊值：

  • undefined：未定義 – 變量聲明但不賦值默認(rèn)為undefined
  • null：空值 – 等同于Java中的null
  • NaN：非數(shù)字 – 值不是合法數(shù)字，比如：
  • window.alert(100/'xx')

我們可以使用 typeof 關(guān)鍵字來(lái)查看當(dāng)前變量值的類型：

let a = 10;
console.info(typeof a)
a = 'Hello World'
console.info(typeof a)

JavaScript邏輯運(yùn)算和流程控制

我們接著來(lái)看看js中的關(guān)系運(yùn)算符，包括如下8個(gè)關(guān)系運(yùn)算符：大于（>）,小于（<）,小于等于（<=）,大于等于（>=）,相等（），不等（!=），全等（=），不全等（!==）

其實(shí)關(guān)系運(yùn)算符大致和Java中的使用方法一致，不過(guò)它還可以進(jìn)行字符串比較，有點(diǎn)像C++的語(yǔ)法：

console.info(666 > 777)
console.info('aa' > 'ab')

那么，相等和全等有什么區(qū)別呢？

console.info('10' == 10)
console.info('10' === 10)

我們發(fā)現(xiàn)，在Java中，若運(yùn)算符兩邊是不同的基本數(shù)據(jù)類型，會(huì)直接得到false，而JS中卻不像這樣，我們發(fā)現(xiàn)字符串的10居然等于數(shù)字10，而使用全等判斷才是我們希望的結(jié)果。

== 的比較規(guī)則是：當(dāng)操作數(shù)類型一樣時(shí)，比較的規(guī)則和恒等運(yùn)算符一樣，都相等才相等，如果兩個(gè)操作數(shù)是字符串，則進(jìn)行字符串的比較，如果里面有一個(gè)操作數(shù)不是字符串，那兩個(gè)操作數(shù)通過(guò)Number()方法進(jìn)行轉(zhuǎn)換，轉(zhuǎn)成數(shù)字進(jìn)行比較。

因此，我們上面進(jìn)行的判斷實(shí)際上是運(yùn)算符兩邊都進(jìn)行了數(shù)字轉(zhuǎn)換的結(jié)果進(jìn)行比較，自然也就得到了true，而全等判斷才是我們?cè)贘ava中認(rèn)識(shí)的相等判斷。

我們接著來(lái)看邏輯運(yùn)算，JS中包括&&、||、&、|、?:等，我們先來(lái)看看位運(yùn)算符：

console.info(4 & 7)
console.info(4 | 7)

實(shí)際上和Java中是一樣的，那么我再來(lái)看看邏輯運(yùn)算：

console.info(true || false)

對(duì)于boolean變量的判斷，是與Java一致的，但是JS也可以使用非Boolen類型變量進(jìn)行判斷：

console.info(!0)
console.info(!1)

和C/C++語(yǔ)言一樣，0代表false，非0代表true，那么字符串呢？

console.info(!"a")
console.info(!"")

我們發(fā)現(xiàn)，空串為false，非空串為true，我們?cè)賮?lái)看看：

console.info(true || 7)
console.info(7 || true)

我們發(fā)現(xiàn)，前者得到的結(jié)果為true，而后者得到的結(jié)果卻是是7，真是滑天下之大稽，什么鬼玩意，實(shí)際上是因?yàn)?，默認(rèn)非0都是true，而后者又是先判斷的7，因此會(huì)直接得到7而不是被轉(zhuǎn)換為true

那么我們?cè)賮?lái)看看幾個(gè)特殊值默認(rèn)代表什么：

console.info(!undefined)
console.info(!null)
console.info(!NaN)

最后來(lái)使用一下三元運(yùn)算符，實(shí)際上和Java中是一樣的：

let a = true ? "xx" : 20
console.info(a)

得益于JS的動(dòng)態(tài)類型，emmm，三元運(yùn)算符不一定需要固定的返回值類型。

JS的分支結(jié)構(gòu)，實(shí)際上和Java是一樣的，也是使用if-else語(yǔ)句來(lái)進(jìn)行：

if("lbwnb"){   //非空串為true
    console.info("!!!")
} else {
    console.info("???")
}

同理，多分支語(yǔ)句也能實(shí)現(xiàn)：

if(""){
    console.info("!!!")
} else if(-666){
    console.info("???")
} else {
    console.info("O.O")
}

當(dāng)然，多分支語(yǔ)句也可以使用switch來(lái)完成：

let a = "a"
switch (a){
    case "a":
        console.info("1")
        break
    case "b":
        console.info("2")
        break
    case "c":
        console.info("3")
        break
    default:
        console.info("4")
}

接著我們來(lái)看看循環(huán)結(jié)構(gòu)，其實(shí)循環(huán)結(jié)構(gòu)也和Java相差不大：

let i = 10
while(i--){
    console.info("100")
}
for (let i = 0; i < 10; i++) {
    console.info("??")
}

JavaScript函數(shù)定義

JS中的方法和Java中的方法定義不太一樣，JS中一般稱其為函數(shù)，我們來(lái)看看定義一個(gè)函數(shù)的格式是什么：

function f() {
    console.info("有一個(gè)人前來(lái)買瓜")
}

定義一個(gè)函數(shù)，需要在前面加上 function 關(guān)鍵字表示這是一個(gè)函數(shù)，后面跟上函數(shù)名稱和 () ，其中可以包含參數(shù)，在 {} 中編寫函數(shù)代碼。我們只需要直接使用函數(shù)名+ () 就能調(diào)用函數(shù)：

f();

我們接著來(lái)看一下，如何給函數(shù)添加形式參數(shù)以及返回值：

function f(a) {
    console.info("得到的實(shí)參為："+a)
    return 666
}

f("aa");

由于JS是動(dòng)態(tài)類型，因此我們不必指明參數(shù)a的類型，同時(shí)也不必指明返回值的類型，一個(gè)函數(shù)可能返回不同類型的結(jié)果，因此直接編寫return語(yǔ)句即可。同理，我們可以在調(diào)用函數(shù)時(shí)，不傳參，那么默認(rèn)會(huì)使用undefined：

function f(a) {
    console.info("得到的實(shí)參為："+a)
    return 666
}

f();

那么如果我們希望不傳參的時(shí)候使用我們自定義的默認(rèn)值呢？

function f(a = "6666") {
    console.info("得到的實(shí)參為："+a)
    return 666
}

f();

我們可以直接在形參后面指定默認(rèn)值。

函數(shù)本身也是一種類型，他可以被變量接收，所有函數(shù)類型的變量，也可以直接被調(diào)用：

function f(a = "6666") {
    console.info("得到的實(shí)參為："+a)
    return 666
}

let k = f;
k();

我們也可以直接將匿名函數(shù)賦值給變量：

let f = function (str) {
    console.info("實(shí)參為："+str)
}

既然函數(shù)是一種類型，那么函數(shù)也能作為一個(gè)參數(shù)進(jìn)行傳遞：

function f(test) {
    test();
}

f(function () {
    console.info("這是一個(gè)匿名函數(shù)")
})

對(duì)于所有的匿名函數(shù)，可以像Java的匿名接口實(shí)現(xiàn)一樣編寫lambda表達(dá)式：

function f(test) {
    test();
}

f(() => {
    console.info("可以，不跟你多bb")
})
function f(test) {
    test("這個(gè)是回調(diào)參數(shù)");
}

f(param => {
    console.info("接受到回調(diào)參數(shù)："+param)
})

JavaScript數(shù)組和對(duì)象

JS中的數(shù)組定義與Java不同，它更像是Python中的列表，數(shù)組中的每個(gè)元素并不需要時(shí)同樣的類型：

let arr = [1, "lbwnb", false, undefined, NaN]

我們可以直接使用下標(biāo)來(lái)訪問：

let arr = [1, "lbwnb", false, undefined, NaN]
console.info(arr[1])

我們一開始編寫的排序算法，也是使用了數(shù)組。

數(shù)組還可以動(dòng)態(tài)擴(kuò)容，如果我們嘗試訪問超出數(shù)組長(zhǎng)度的元素，并不會(huì)出現(xiàn)錯(cuò)誤，而是得到undefined，同樣的，我們也可以直接往超出數(shù)組長(zhǎng)度的地方設(shè)置元素：

let arr = [1, "lbwnb", false, undefined, NaN]
arr[5] = "???"
console.info(arr)

也可以使用 push 和 pop 來(lái)實(shí)現(xiàn)棧操作：

let arr = [1, "lbwnb", false, undefined, NaN]
arr.push("bbb")
console.info(arr.pop())
console.info(arr)

數(shù)組還包括一些其他的方法，這里就不一一列出了：

let arr = [1, "lbwnb", false, undefined, NaN]
arr.fill(1)
console.info(arr.map(o => {
    return 'xxx'+o
}))

我們接著來(lái)看對(duì)象，JS中也能定義對(duì)象，但是這里的對(duì)象有點(diǎn)顛覆我們的認(rèn)知：

let obj = new Object()
let obj = {}

以上兩種寫法都能夠創(chuàng)建一個(gè)對(duì)象，但是更推薦使用下面的一種。

JS中的對(duì)象也是非常隨意的，我們可以動(dòng)態(tài)為其添加屬性：

let obj = {}
obj.name = "傘兵一號(hào)"
console.info(obj)

同理，我們也可以給對(duì)象動(dòng)態(tài)添加一個(gè)函數(shù)：

let obj = {}
obj.f = function (){
    console.info("我是對(duì)象內(nèi)部的函數(shù)")
}

obj.f()

我們可以在函數(shù)內(nèi)使用this關(guān)鍵字來(lái)指定對(duì)象內(nèi)的屬性：

let name = "我是外部變量"
let obj = {}
obj.name = "我是內(nèi)部變量"
obj.f = function (){
    console.info("name屬性為："+this.name)
}

obj.f()

注意：如果使用lambda表達(dá)式，那么this并不會(huì)指向?qū)ο蟆?/span>

除了動(dòng)態(tài)添加屬性，我們也可以在一開始的時(shí)候指定對(duì)象內(nèi)部的成員：

let obj = {
    name: "我是內(nèi)部的變量",
  	f: function (){
        console.info("name屬性為："+this.name)
    }
}

obj.f()

注意如果有多行屬性，需要在屬性定義后添加一個(gè) , 進(jìn)行分割！

JavaScript事件

當(dāng)我們點(diǎn)擊一個(gè)頁(yè)面中的按鈕之后，我們希望之后能夠進(jìn)行登陸操作，或是執(zhí)行一些JS代碼來(lái)實(shí)現(xiàn)某些功能，那么這個(gè)時(shí)候，就需要用到事件。

事件相當(dāng)于一個(gè)通知，我們可以提前設(shè)定好事件發(fā)生時(shí)需要執(zhí)行的內(nèi)容，當(dāng)事件發(fā)生時(shí)，就會(huì)執(zhí)行我們預(yù)先設(shè)定好的JS代碼。

事件有很多種類型，其中常用的有：

  • onclick：點(diǎn)擊事件
  • oninput：內(nèi)容輸入事件
  • onsubmit：內(nèi)容提交事件

那么如何為事件添加一個(gè)動(dòng)作呢？

<input type="password" oninput="console.info('正在輸入文本')">

我們可以直接為一個(gè)元素添加對(duì)應(yīng)事件的屬性，比如 oninput 事件，我們可以直接在事件的值中編寫js代碼，但是注意，只能使用單引號(hào)，因?yàn)殡p引號(hào)用于囊括整個(gè)值。

我們也可以單獨(dú)編寫一個(gè)函數(shù)，當(dāng)事件發(fā)生時(shí)直接調(diào)用我們的函數(shù)：

function f() {
    window.alert("你輸入了一個(gè)字符")
}
<input type="password" oninput="oninput()">

僅僅了解了事件，還不足以實(shí)現(xiàn)高度自定義，我們接著來(lái)看DOM。

Document對(duì)象

當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（ D ocument O bject M odel），它將整個(gè)頁(yè)面的所有元素全部映射為JS對(duì)象，這樣我們就可以在JS中操縱頁(yè)面中的元素。

idea創(chuàng)建web項(xiàng)目沒有webapp，idea創(chuàng)建web項(xiàng)目沒有web文件夾？

比如我現(xiàn)在想要讀取頁(yè)面中某個(gè)輸入框中的內(nèi)容，那么我們就需要從DOM中獲取此輸入框元素的對(duì)象：

document.getElementById("pwd").value

通過(guò)document對(duì)象就能夠快速獲取當(dāng)前頁(yè)面中對(duì)應(yīng)的元素，并且我們也可以快速獲取元素中的一些屬性。

比如現(xiàn)在我們可以結(jié)合事件，來(lái)進(jìn)行密碼長(zhǎng)度的校驗(yàn)，密碼長(zhǎng)度小于6則不合法，不合法的密碼，會(huì)讓密碼框邊框變紅，那么首先我們先來(lái)編寫一個(gè)css樣式：

.illegal-pwd{
    border: red 1px solid !important;
    box-shadow: 0 0 5px red;
}

接著我們來(lái)編寫一下js代碼，定義一個(gè)函數(shù)，此函數(shù)接受一個(gè)參數(shù)（元素本身的對(duì)象）檢測(cè)輸入的長(zhǎng)度是否大于6，否則就將當(dāng)前元素的class屬性設(shè)定為css指定的class：

function checkIllegal(e) {
    if(e.value.length < 6) {
        e.setAttribute("class", "illegal-pwd")   
    }else {
        e.removeAttribute("class")
    }
}

最后我們將此函數(shù)綁定到 oninput 事件即可，注意傳入了一個(gè)this，這里的this代表的是輸入框元素本身：

<input id="pwd" oninput="checkIllegal(this)" type="password">

現(xiàn)在我們?cè)谳斎氲臅r(shí)候，會(huì)自動(dòng)檢查密碼是否合法。

既然oninput本身也是一個(gè)屬性，那么實(shí)際上我們可以動(dòng)態(tài)進(jìn)行修改：

document.getElementById("pwd").oninput = () => console.info("???")

那么，我們前面提及的window對(duì)象又是什么東西呢？

實(shí)際上Window對(duì)象范圍更加廣闊，它甚至直接代表了整個(gè)窗口，當(dāng)然也包含我們的Document對(duì)象，我們一般通過(guò)Window對(duì)象來(lái)彈出提示框之類的東西。

發(fā)送XHR請(qǐng)求

JS的大致內(nèi)容我們已經(jīng)全部學(xué)習(xí)完成了，那么如何使用JS與后端進(jìn)行交互呢？

我們知道，如果我們需要提交表單，那么我們就需要將表單的信息全部發(fā)送給我們的服務(wù)器，那么，如何發(fā)送給服務(wù)器呢？

通過(guò)使用XMLHttpRequest對(duì)象，來(lái)向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求，下面是一個(gè)最簡(jiǎn)單的請(qǐng)求格式：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com');
xhr.send();

上面的例子中，我們向服務(wù)器發(fā)起了一次網(wǎng)絡(luò)請(qǐng)求，但是我們請(qǐng)求的是百度的服務(wù)器，并且此請(qǐng)求的方法為GET請(qǐng)求。

我們現(xiàn)在將其綁定到一個(gè)按鈕上作為事件觸發(fā)：

function http() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.baidu.com');
    xhr.send();    
}
<input id="button" type="button" onclick="http()">

我們可以在網(wǎng)絡(luò)中查看我們發(fā)起的HTTP請(qǐng)求并且查看請(qǐng)求的響應(yīng)結(jié)果，比如上面的請(qǐng)求，會(huì)返回百度這個(gè)頁(yè)面的全部HTML代碼。

實(shí)際上，我們的瀏覽器在我們輸入網(wǎng)址后，也會(huì)向?qū)?yīng)網(wǎng)站的服務(wù)器發(fā)起一次HTTP的GET請(qǐng)求。

在瀏覽器得到頁(yè)面響應(yīng)后，會(huì)加載當(dāng)前頁(yè)面，如果當(dāng)前頁(yè)面還引用了其他資源文件，那么會(huì)繼續(xù)向服務(wù)器發(fā)起請(qǐng)求，直到頁(yè)面中所有的資源文件全部加載完成后，才會(huì)停止。

本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 sumchina520@foxmail.com 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
如若轉(zhuǎn)載，請(qǐng)注明出處：http://www.qjsdgw.cn/104536.html
贊 (0)
上一篇 2022年9月19日 pm8:06
下一篇 2022年9月19日 pm9:30

相關(guān)推薦