程序员都必掌握的前端教程之HTML基础教程（下）

读本文约需要10分钟，您可以先关注我们，避免下次无法找到。

HTML基础教程上篇介绍了HTML的基础知识及一些常用的标签，本篇文章主要介绍HTML的样式、表单、Table、框架等内容。下面我们就一起来了解吧！

01 HTML样式

所有的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>

02 HTML Table

在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>

03 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>

04 HTML框架iframe

使用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>

05 总结

至此我们《HTML基础教程》就全部讲完了，有任何问题都可以在文章后面留言。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

程序员都必掌握的前端教程之HTML基础教程（上）

登录是前端做全栈的必修课】

---

**一、引言：为何登录功能对于前端全栈开发者至关重要**

在Web开发领域，尤其对于希望成为全栈开发者的前端工程师来说，掌握用户登录功能的实现机制是不可或缺的一环。登录系统作为每个应用的基础模块，它不仅涉及到用户体验的设计，还涵盖了前后端数据交互、安全验证等多个核心知识点。通过构建一个完善的登录系统，前端开发者可以深入理解全栈开发中的状态管理、身份认证、API接口设计等关键概念，从而提升自身的技术广度和深度。

---

**二、基础篇：前端登录界面构建与HTML实现**

**2.1 用户登录界面设计**

```html

<!DOCTYPE html>

<head>

</head>

<body>

<h2>Login</h2>

</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/

2、创建网站应用

资料填写

完善资料

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"    // 网站回调地址。回调地址必须以http或https开头。腾讯目前业务线都已切至https.所以建议此处都填写https.如果网站不支持，请自行升级
></script>

5、放置QQ登录按钮

在html页面需要插入QQ登录按钮的位置，粘贴如下代码：

<span id="qqLoginBtn"></span>
<script type="text/javascript">
    QC.Login({
       btnId:"qqLoginBtn"	//插入按钮的节点id
});
</script>

注：如需自定义按钮。则将上面代码生成的html（即<span id="qqLoginBtn"></span>节点里面的代码）粘贴在对应位置即可。

6、回调地址页面

   <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。

7、通过api获取access_token和openid

if(QC.Login.check()){ //如果已登录
    QC.Login.getMe(function(openId, accessToken){ // 注意业务中依赖openId和accessToken的需要写入在回调里面
        console.log(openId, accessToken)
    });
}

到此QQ互联登录的基本流程已结束。

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的桥梁，实现复制到粘贴板的按钮
下一篇：HTML基础知识之列表和表格的使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

程序员都必掌握的前端教程之HTML基础教程（下）

01 HTML样式

02 HTML Table

03 HTML表单

04 HTML框架iframe

05 总结

、注册账号

2、创建网站应用

3、审核通过后拿到appid

4、页面引入js-sdk

5、放置QQ登录按钮

6、 回调地址页面

7、通过api获取access_token和openid

8、常用的js-sdk 的api

9、官方参考文档：

您的项目需求

6、回调地址页面