整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。
HTML基礎教程上篇介紹了HTML的基礎知識及一些常用的標簽，本篇文章主要介紹HTML的樣式、表單、Table、框架等內容。下面我們就一起來了解吧！
所有的HTML可以通過設置其style屬性來設置標簽的樣式，下面我們就來演示幾個常用的HTML樣式設置。
1）設置標簽寬度與高度
我們創建一個div標簽，然后設置其高度與寬度，但由于div標簽默認沒有顏色我們看不到效果，所以在設置其高度與寬度時，同時為其設置一個背景顏色，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- 給div寬度設置為一個長寬都為400px的正方形塊，同時背景色代碼塊為#46a6ff -->
9. <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>
10. </body>
11. </html> 2）設置字體類型與大小
我們在上面div塊中加入文字，并給加入的文字設置字體類型與大小，同時為其加粗，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- font-family是設置字體類型；font-size是設置字體大小；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）設置字體水平與垂直居中
上面我們給div加了字體樣式但并沒有居中，現在我們來看看怎么設置字體居中
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- text-align給文字設置水平居中；line-height將其值設為與height一致，文字內容就可以垂直居中 -->
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> 在HTML頁面開發時我們經常會用到表格進行數據展示，HTML的表格是由標簽<table>來定義的，每個表格均有若干行（<tr> 標簽定義），每行被分割為若干單元格（由<td> 標簽定義）。表格中常用的標簽與樣式屬性如下：
下面我們創建兩個表格示列，分別設置上述屬性具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</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為一行的起始與結束 -->
12. <th>Column 1</th> <!-- 表格頭 -->
13. <th>Column 2</th>
14. <th>Column 3</th>
15. </tr>
16.
17. <tr bgcolor="cyan"> <!-- 設置表格背景色 -->
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> <!-- 設置該單元格合并這一行上的兩列 -->
25. <td>New Data 2</td>
26. </tr>
27. </table>
28.
29. <!-- 表格示列2 -->
30. <table border="1" bordercolor="black" width="80%" height="100"> <!-- 設置單元格寬與高為百分比 -->
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> <!-- 設置該單元格合并這一列上的兩行 -->
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> HTML 表單是一個包含表單元素的區域，用于搜集不同類型的用戶輸入。HTML表單在我們日常瀏覽網頁時很常見，比如各網站的登錄頁面，就是典型的HTML表單應用。HTML表單常用的標簽元素有如下幾種：
1）Text input：字符輸入框，一般賬戶與密碼輸入都是用的該標簽
2）Text area：文本輸入框，一般需要輸入較多文本內容使用
3）Radio button：單選框
4）Checkbox：多選框
5）Select box：選擇框
6）File select：文件選擇框
7）Buttons：按鈕
表單元素常用的屬性及值設置如下表所示：
結合上表我們創建一個表單示列，按照上表的屬性值進行設置，具體操作如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</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值設置時必須一致）</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值設置時必須不一樣）</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個，其它的選擇內容需要通過鼠標滾動 -->
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基礎教程
39. 表單示列
40. </textarea>
41. </form>
42. </body>
43. </html>下面我們再創建一個button的表單示列，具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 設置表單提交方式為get, 跳轉的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. <!-- 點擊跳轉到百度 -->
17. <input type="submit" name="b_submit" value="百度走起"/>
18. <!-- 點擊重置會重置表單內輸入的內容 -->
19. <input type="reset" name="b_reset" value="重置"/><br>
20. </form>
21.
22. </body>
23. </html> 使用HTML框架可以在同一個瀏覽器窗口中顯示多個頁面，iframe的語法格式如下所示
1. <iframe src="URL">
2. <!-- URL指向不同的頁面 -->
3. </iframe>
我們現在創建一個iframe框架使用示列具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>iframe使用示列一(簡單的iframe使用)</h4>
10. <!-- 給iframe顯示區域設置寬度為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> 至此我們《HTML基礎教程》就全部講完了，有任何問題都可以在文章后面留言。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。
文章推薦：
登錄是前端做全棧的必修課】
---
**一、引言：為何登錄功能對于前端全棧開發者至關重要**
在Web開發領域，尤其對于希望成為全棧開發者的前端工程師來說，掌握用戶登錄功能的實現機制是不可或缺的一環。登錄系統作為每個應用的基礎模塊，它不僅涉及到用戶體驗的設計，還涵蓋了前后端數據交互、安全驗證等多個核心知識點。通過構建一個完善的登錄系統，前端開發者可以深入理解全棧開發中的狀態管理、身份認證、API接口設計等關鍵概念，從而提升自身的技術廣度和深度。
---
**二、基礎篇：前端登錄界面構建與HTML實現**
**2.1 用戶登錄界面設計**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登錄頁面</title>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="login-form">
<input type="text" id="username" placeholder="用戶名" required>
<input type="password" id="password" placeholder="密碼" required>
<button type="submit">登錄</button>
</form>
</div>
</body>
</html>
```
以上代碼展示了基本的登錄表單HTML結構，包括用戶名和密碼輸入框以及提交按鈕。
**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('請填寫用戶名和密碼');
return;
}
// 這里模擬發送登錄請求，實際項目中會使用fetch或axios等庫向后端API發起POST請求
authenticateUser(username, password);
});
function authenticateUser(username, password) {
// 這部分通常會包含加密密碼、發起HTTP請求等操作
// ...
}
```
這段JavaScript代碼負責捕獲表單提交事件，驗證用戶輸入并調用`authenticateUser`函數模擬向服務器發送登錄請求。
---
**三、進階篇：與后端通信及安全驗證**
**3.1 使用Fetch API實現前后端數據交互**
```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、跳轉頁面等
} else {
console.error('登錄失敗');
// 處理登錄失敗的邏輯
}
}
```
此段代碼展示了如何使用Fetch API向后端發起POST請求，并根據響應結果處理登錄成功或失敗的情況。
**3.2 安全驗證與Token管理**
在登錄過程中，前端需要與后端協作，確保密碼安全傳輸（例如采用HTTPS），并處理好身份驗證過程。登錄成功后，后端通常會返回一個JWT（JSON Web Token）或其他形式的令牌，前端需妥善保存并在后續請求中攜帶此令牌以證明用戶身份。
```javascript
// 假設登錄成功后從響應中獲取到token
const token = 'your_jwt_token';
// 將token存儲在瀏覽器（如localStorage或cookie）
localStorage.setItem('userToken', token);
// 在后續請求頭中添加Authorization字段
fetch('/api/protected_resource', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('userToken')}`
}
});
```
---
**四、實戰篇：基于JWT的登錄流程實戰**
**4.1 JWT生成與解析**
- 后端生成JWT并返回給前端。
- 前端接收到JWT后，將其妥善存儲并在每次請求時附加到Authorization頭部。
**4.2 無狀態登錄驗證**
- 前端在每個請求中附帶JWT。
- 后端通過驗證JWT的有效性判斷用戶身份。
**4.3 JWT過期處理與刷新**
- 當JWT即將過期時，前端可以通過refresh token向后端請求新的JWT，保持用戶登錄狀態。
---
**五、總結與展望**
學習并實踐登錄功能的全棧開發，不僅能幫助前端工程師了解并掌握前后端數據交互的基本原理，更能深入理解Web應用的安全機制，這對于成長為一名優秀的全棧開發者至關重要。在未來，隨著Web技術的發展，前端全棧開發者還需要關注更高級的身份驗證策略（如OAuth2.0）、更嚴格的安全標準（如CORS、CSRF保護等）以及新興的認證方式（如WebAuthn）。讓我們一起，在實踐中不斷深化對登錄這一核心功能的理解，為用戶提供更安全、更流暢的體驗。
https://connect.qq.com/
<script type="text/javascript" charset="utf-8"
src="//connect.qq.com/qc_jssdk.js"
data-appid="APPID" // 審核通過的APPID
data-redirecturi="REDIRECTURI" // 網站回調地址。回調地址必須以http或https開頭。騰訊目前業務線都已切至https.所以建議此處都填寫https.如果網站不支持，請自行升級
></script>在html頁面需要插入QQ登錄按鈕的位置，粘貼如下代碼：
<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按鈕的節點id
});
</script>注：如需自定義按鈕。則將上面代碼生成的html（即<span id="qqLoginBtn"></span>節點里面的代碼）粘貼在對應位置即可。
? ?<script type="text/javascript"
src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>注：如果回調地址頁與加入QQ登錄按鈕是同一個頁面，則只需要引用一次腳本文件。頁面URL地址中會在hash值部分加入access_token&expires_id=7776000。注意官網文檔上面說可以拿到openid.其實是不可以的。需要登錄后通過api拿到openid。
if(QC.Login.check()){ //如果已登錄
QC.Login.getMe(function(openId, accessToken){ // 注意業務中依賴openId和accessToken的需要寫入在回調里面
console.log(openId, accessToken)
});
}到此QQ互聯登錄的基本流程已結束。
https://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
