程序員都必掌握的前端教程之HTML基礎(chǔ)教程（下）

讀本文約需要10分鐘，您可以先關(guān)注我們，避免下次無法找到。

HTML基礎(chǔ)教程上篇介紹了HTML的基礎(chǔ)知識及一些常用的標簽，本篇文章主要介紹HTML的樣式、表單、Table、框架等內(nèi)容。下面我們就一起來了解吧！

01 HTML樣式

所有的HTML可以通過設(shè)置其style屬性來設(shè)置標簽的樣式，下面我們就來演示幾個常用的HTML樣式設(shè)置。

1）設(shè)置標簽寬度與高度

我們創(chuàng)建一個div標簽，然后設(shè)置其高度與寬度，但由于div標簽?zāi)J沒有顏色我們看不到效果，所以在設(shè)置其高度與寬度時，同時為其設(shè)置一個背景顏色，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- 給div寬度設(shè)置為一個長寬都為400px的正方形塊，同時背景色代碼塊為#46a6ff -->  
9.   <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>  
10. </body>  
11. </html>

2）設(shè)置字體類型與大小

我們在上面div塊中加入文字，并給加入的文字設(shè)置字體類型與大小，同時為其加粗，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- font-family是設(shè)置字體類型；font-size是設(shè)置字體大小；font-weight是給字體加粗  -->  
9.   <div style="width: 400px; height: 400px;  
10.         background-color: #46a6ff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold">  
11.     我是div塊  
12.   </div>  
13. </body>  
14. </html>

3）設(shè)置字體水平與垂直居中

上面我們給div加了字體樣式但并沒有居中，現(xiàn)在我們來看看怎么設(shè)置字體居中

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- text-align給文字設(shè)置水平居中；line-height將其值設(shè)為與height一致，文字內(nèi)容就可以垂直居中   -->  
9.   <div style="width: 400px; height: 400px;  
10.         background-color: #46a6ff; font-family: 'Microsoft YaHei';  
11.         font-size: 40px; font-weight: bold;  
12.         text-align: center; line-height: 400px">  
13.     我是div塊  
14.   </div>  
15. </body>  
16. </html>

02 HTML Table

在HTML頁面開發(fā)時我們經(jīng)常會用到表格進行數(shù)據(jù)展示，HTML的表格是由標簽<table>來定義的，每個表格均有若干行（<tr> 標簽定義），每行被分割為若干單元格（由<td> 標簽定義）。表格中常用的標簽與樣式屬性如下：

下面我們創(chuàng)建兩個表格示列，分別設(shè)置上述屬性具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- 表格示列1 -->  
9.   <table border="1" bordercolor="black" width="450" height="100">  
10.      <caption>表格示列1</caption>  
11.      <tr bgcolor="red" > <!-- tr為一行的起始與結(jié)束 -->  
12.        <th>Column 1</th> <!-- 表格頭 -->  
13.        <th>Column 2</th>  
14.        <th>Column 3</th>  
15.      </tr>  
16.   
17.     <tr bgcolor="cyan"> <!-- 設(shè)置表格背景色 -->  
18.       <td>Data 1</td> <!-- td單元格 -->  
19.       <td>Data 2</td>  
20.       <td>Data 3</td>  
21.     </tr>  
22.   
23.     <tr bgcolor="yellow">  
24.       <td colspan="2">New Data 1</td> <!-- 設(shè)置該單元格合并這一行上的兩列 -->  
25.       <td>New Data 2</td>  
26.     </tr>  
27.   </table>  
28.   
29.   <!-- 表格示列2 -->  
30.   <table border="1" bordercolor="black" width="80%" height="100"> <!-- 設(shè)置單元格寬與高為百分比 -->  
31.      <caption> 表格示列2</caption>  
32.       <tr bgcolor="red" >  
33.         <th>Column 1</th>  
34.         <th>Column 2</th>  
35.         <th>Column 3</th>  
36.      </tr>  
37.   
38.      <tr>  
39.        <td rowspan="2">Data 1</td> <!-- 設(shè)置該單元格合并這一列上的兩行 -->  
40.        <td>Data 2</td>  
41.        <td>Data 3</td>  
42.      </tr>  
43.   
44.      <tr>  
45.       <td>Data 2</td>  
46.       <td>Data 3</td>  
47.      </tr>  
48.   </table>  
49. </body>  
50. </html>

03 HTML表單

HTML 表單是一個包含表單元素的區(qū)域，用于搜集不同類型的用戶輸入。HTML表單在我們?nèi)粘g覽網(wǎng)頁時很常見，比如各網(wǎng)站的登錄頁面，就是典型的HTML表單應(yīng)用。HTML表單常用的標簽元素有如下幾種：

1）Text input：字符輸入框，一般賬戶與密碼輸入都是用的該標簽

2）Text area：文本輸入框，一般需要輸入較多文本內(nèi)容使用

3）Radio button：單選框

4）Checkbox：多選框

5）Select box：選擇框

6）File select：文件選擇框

7）Buttons：按鈕

表單元素常用的屬性及值設(shè)置如下表所示：

結(jié)合上表我們創(chuàng)建一個表單示列，按照上表的屬性值進行設(shè)置，具體操作如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8. <form>  
9.   <h4>Input輸入框</h4>  
10.   用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="10"><br>  
11.   密碼 : <input type="password" name="user_pass" ><br>  
12.   <h4> Radio單選框:（name值設(shè)置時必須一致）</h4>  
13.     <input type="radio" name="r_gender"> Male  
14.     <input type="radio" name="r_gender"> Female  
15.     <input type="radio" name="r_gender" checked> Infant  
16.   <h4> Check box多選框 :（name值設(shè)置時必須不一樣）</h4>  
17.     <input type="checkbox" name="c_male" checked> Male  
18.     <input type="checkbox" name="c_female"> Female  
19.     <input type="checkbox" name="c_infant"> Infant  
20.   <h4> Select box :選擇框（單選）</h4>  
21.     <select name="s_box">  
22.       <option value="s_male">Male</option>  
23.       <option value="s_female" selected>Female</option>  
24.       <option value="s_infant">Infant</option>  
25.     </select>  
26.   <h4> Select box :擇框（多選）</h4>  
27.   <!-- 選擇項默認展示4個，其它的選擇內(nèi)容需要通過鼠標滾動 -->  
28.   <select name="s_box" size="4" multiple>  
29.     <option value="s_male" selected>Male</option>  
30.     <option value="s_female" selected>Female</option>  
31.     <option value="s_infant">Infant 1</option>  
32.     <option value="s_infant" selected>Infant 2</option>  
33.     <option value="s_infant">Infant 3</option>  
34.     <option value="s_infant">Infant 4</option>  
35.   </select>  
36.   <h4> Text文本輸入框</h4>  
37.     <textarea rows="10" cols="80" name="txt_area">文本框  
38.        HTML基礎(chǔ)教程  
39.        表單示列  
40.     </textarea>
41.   </form>
42. </body>
43. </html>

下面我們再創(chuàng)建一個button的表單示列，具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!-- 設(shè)置表單提交方式為get, 跳轉(zhuǎn)的url為"http://www.baidu.com" -->  
10.   <form method="get" action="http://www.baidu.com">  
11.     <h4> Buttons按鈕表單示列</h4>  
12.     用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="16"><br>  
13.     密碼 : <input type="password" name="user_pass" ><br>  
14.     <!-- 點擊在游覽器上方顯示Say Hello -->  
15.     <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>  
16.     <!-- 點擊跳轉(zhuǎn)到百度 -->  
17.     <input type="submit" name="b_submit" value="百度走起"/>  
18.     <!-- 點擊重置會重置表單內(nèi)輸入的內(nèi)容 -->  
19.     <input type="reset" name="b_reset" value="重置"/><br>  
20.   </form>  
21.   
22. </body>  
23. </html>

04 HTML框架iframe

使用HTML框架可以在同一個瀏覽器窗口中顯示多個頁面，iframe的語法格式如下所示

1. <iframe src="URL">  
2.   <!-- URL指向不同的頁面 -->  
3. </iframe>  
我們現(xiàn)在創(chuàng)建一個iframe框架使用示列具體如下
1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>iframe使用示列一(簡單的iframe使用)</h4>  
10.   <!-- 給iframe顯示區(qū)域設(shè)置寬度為800，高度為200，同時去掉其邊框 -->  
11.   <iframe src="http://www.baidu.com" width="800" height="200" frameborder="0"></iframe>  
12.   
13.   <br/>  
14.   <br/>  
15.   
16.   <h4>iframe使用示列二(通過點擊指定鏈接在iframe中顯示)</h4>  
17.   <!-- a標簽中的target名稱必須與iframe的name一致都為qq -->  
18.   <a href="http://www.qq.com" target="qq">點擊我在iframe中顯示qq頁面</a>  
19.   <iframe name="qq" width="800" height="200" frameborder="0"></iframe>  
20. </body>  
21. </html>

05 總結(jié)

至此我們《HTML基礎(chǔ)教程》就全部講完了，有任何問題都可以在文章后面留言。最后如果喜歡本篇文章不要忘了點贊、關(guān)注與轉(zhuǎn)發(fā)哦！

-END-

@IT管理局專注計算機領(lǐng)域技術(shù)、大學(xué)生活、學(xué)習(xí)方法、求職招聘、職業(yè)規(guī)劃、職場感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇，和你一同成長。

文章推薦：

程序員都必掌握的前端教程之HTML基礎(chǔ)教程（上）

登錄是前端做全棧的必修課】

---

**一、引言：為何登錄功能對于前端全棧開發(fā)者至關(guān)重要**

在Web開發(fā)領(lǐng)域，尤其對于希望成為全棧開發(fā)者的前端工程師來說，掌握用戶登錄功能的實現(xiàn)機制是不可或缺的一環(huán)。登錄系統(tǒng)作為每個應(yīng)用的基礎(chǔ)模塊，它不僅涉及到用戶體驗的設(shè)計，還涵蓋了前后端數(shù)據(jù)交互、安全驗證等多個核心知識點。通過構(gòu)建一個完善的登錄系統(tǒng)，前端開發(fā)者可以深入理解全棧開發(fā)中的狀態(tài)管理、身份認證、API接口設(shè)計等關(guān)鍵概念，從而提升自身的技術(shù)廣度和深度。

---

**二、基礎(chǔ)篇：前端登錄界面構(gòu)建與HTML實現(xiàn)**

**2.1 用戶登錄界面設(shè)計**

```html

<!DOCTYPE html>

<head>

</head>

<body>

<h2>Login</h2>

</form>

</div>

</body>

</html>

```

以上代碼展示了基本的登錄表單HTML結(jié)構(gòu)，包括用戶名和密碼輸入框以及提交按鈕。

**2.2 使用JavaScript進行表單驗證與提交處理**

```javascript

document.getElementById('login-form').addEventListener('submit', function(event) {

event.preventDefault(); // 阻止默認提交行為

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

if (!username || !password) {

alert('請?zhí)顚懹脩裘兔艽a');

return;

}

// 這里模擬發(fā)送登錄請求，實際項目中會使用fetch或axios等庫向后端API發(fā)起POST請求

authenticateUser(username, password);

});

function authenticateUser(username, password) {

// 這部分通常會包含加密密碼、發(fā)起HTTP請求等操作

// ...

}

```

這段JavaScript代碼負責(zé)捕獲表單提交事件，驗證用戶輸入并調(diào)用`authenticateUser`函數(shù)模擬向服務(wù)器發(fā)送登錄請求。

---

**三、進階篇：與后端通信及安全驗證**

**3.1 使用Fetch API實現(xiàn)前后端數(shù)據(jù)交互**

```javascript

async function authenticateUser(username, password) {

const response = await fetch('/api/login', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify({ username, password })

});

if (response.ok) {

const user = await response.json();

console.log('登錄成功:', user);

// 處理登錄成功的邏輯，如存儲token、跳轉(zhuǎn)頁面等

} else {

console.error('登錄失敗');

// 處理登錄失敗的邏輯

}

```

此段代碼展示了如何使用Fetch API向后端發(fā)起POST請求，并根據(jù)響應(yīng)結(jié)果處理登錄成功或失敗的情況。

**3.2 安全驗證與Token管理**

在登錄過程中，前端需要與后端協(xié)作，確保密碼安全傳輸（例如采用HTTPS），并處理好身份驗證過程。登錄成功后，后端通常會返回一個JWT（JSON Web Token）或其他形式的令牌，前端需妥善保存并在后續(xù)請求中攜帶此令牌以證明用戶身份。

```javascript

// 假設(shè)登錄成功后從響應(yīng)中獲取到token

const token = 'your_jwt_token';

// 將token存儲在瀏覽器（如localStorage或cookie）

localStorage.setItem('userToken', token);

// 在后續(xù)請求頭中添加Authorization字段

fetch('/api/protected_resource', {

headers: {

'Authorization': `Bearer ${localStorage.getItem('userToken')}`

}

});

```

---

**四、實戰(zhàn)篇：基于JWT的登錄流程實戰(zhàn)**

**4.1 JWT生成與解析**

- 后端生成JWT并返回給前端。

- 前端接收到JWT后，將其妥善存儲并在每次請求時附加到Authorization頭部。

**4.2 無狀態(tài)登錄驗證**

- 前端在每個請求中附帶JWT。

- 后端通過驗證JWT的有效性判斷用戶身份。

**4.3 JWT過期處理與刷新**

- 當(dāng)JWT即將過期時，前端可以通過refresh token向后端請求新的JWT，保持用戶登錄狀態(tài)。

---

**五、總結(jié)與展望**

學(xué)習(xí)并實踐登錄功能的全棧開發(fā)，不僅能幫助前端工程師了解并掌握前后端數(shù)據(jù)交互的基本原理，更能深入理解Web應(yīng)用的安全機制，這對于成長為一名優(yōu)秀的全棧開發(fā)者至關(guān)重要。在未來，隨著Web技術(shù)的發(fā)展，前端全棧開發(fā)者還需要關(guān)注更高級的身份驗證策略（如OAuth2.0）、更嚴格的安全標準（如CORS、CSRF保護等）以及新興的認證方式（如WebAuthn）。讓我們一起，在實踐中不斷深化對登錄這一核心功能的理解，為用戶提供更安全、更流暢的體驗。

、注冊賬號

https://connect.qq.com/

2、創(chuàng)建網(wǎng)站應(yīng)用

資料填寫

完善資料

3、審核通過后拿到appid

4、頁面引入js-sdk

<script type="text/javascript"  charset="utf-8"
    src="//connect.qq.com/qc_jssdk.js"
    data-appid="APPID"    // 審核通過的APPID
    data-redirecturi="REDIRECTURI"    // 網(wǎng)站回調(diào)地址。回調(diào)地址必須以http或https開頭。騰訊目前業(yè)務(wù)線都已切至https.所以建議此處都填寫https.如果網(wǎng)站不支持，請自行升級
></script>

5、放置QQ登錄按鈕

在html頁面需要插入QQ登錄按鈕的位置，粘貼如下代碼：

<span id="qqLoginBtn"></span>
<script type="text/javascript">
    QC.Login({
       btnId:"qqLoginBtn"	//插入按鈕的節(jié)點id
});
</script>

注：如需自定義按鈕。則將上面代碼生成的html（即<span id="qqLoginBtn"></span>節(jié)點里面的代碼）粘貼在對應(yīng)位置即可。

6、回調(diào)地址頁面

? ?<script type="text/javascript"
src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>

注：如果回調(diào)地址頁與加入QQ登錄按鈕是同一個頁面，則只需要引用一次腳本文件。頁面URL地址中會在hash值部分加入access_token&expires_id=7776000。注意官網(wǎng)文檔上面說可以拿到openid.其實是不可以的。需要登錄后通過api拿到openid。

7、通過api獲取access_token和openid

if(QC.Login.check()){ //如果已登錄
    QC.Login.getMe(function(openId, accessToken){ // 注意業(yè)務(wù)中依賴openId和accessToken的需要寫入在回調(diào)里面
        console.log(openId, accessToken)
    });
}

到此QQ互聯(lián)登錄的基本流程已結(jié)束。

8、常用的js-sdk 的api

9、官方參考文檔：

https://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

在線咨詢

上一篇：Stimulus：連接HTML和Javascript的橋梁，實現(xiàn)復(fù)制到粘貼板的按鈕
下一篇：HTML基礎(chǔ)知識之列表和表格的使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

程序員都必掌握的前端教程之HTML基礎(chǔ)教程（下）

01 HTML樣式

02 HTML Table

03 HTML表單

04 HTML框架iframe

05 總結(jié)

、注冊賬號

2、創(chuàng)建網(wǎng)站應(yīng)用

3、審核通過后拿到appid

4、頁面引入js-sdk

5、放置QQ登錄按鈕

6、 回調(diào)地址頁面

7、通過api獲取access_token和openid

8、常用的js-sdk 的api

9、官方參考文檔：

您的項目需求

6、回調(diào)地址頁面