程序员都必掌握的前端教程之HTML基础教程(下)
xsobi 2024-11-27 22:27 1 浏览
阅读本文约需要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管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
相关推荐
- 好用的云函数!后端低代码接口开发，零基础编写API接口
-
前言在开发项目过程中，经常需要用到API接口，实现对数据库的CURD等操作。不管你是专业的PHP开发工程师，还是客户端开发工程师，或者是不懂编程但懂得数据库SQL查询，又或者是完全不太懂技术的人，通过...
- 快速上手:Windows 平台上 cURL 命令的使用方法
-
在工作流程中，为了快速验证API接口有效性，团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间，而且促进了团队效率的提升。对于使用Windows系统的用户来说，这里有一套详细...
- 使用 Golang net/http 包:基础入门与实战
-
简介Go的net/http包是构建HTTP服务的核心库，功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持，可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...
- #小白接口# 使用云函数，人人都能编写和发布自己的API接口
-
你只需编写简单的云函数，就可以实现自己的业务逻辑，发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程，进入开放平台我的接口-在线接口编程，设计一个新接口，设计和配置好接口参...
- 极度精神分裂:我家没有墙面开关，但我虚拟出来了一系列开关
-
本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：iN在之前和大家说过，在iN的家里是没有墙面开关的。...
- window使用curl命令的注意事项 curl命令用法
-
cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...
- Linux 系统curl命令使用详解 linuxctrl
-
curl是一个强大的命令行工具，用于在Linux系统中进行数据传输。它支持多种协议，包括HTTP、HTTPS、FTP等，用于下载或上传数据，执行Web请求等。curl命令的常见用法和解...
- Tornado 入门:初学者指南 tornados
-
Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...
- PHP Curl的简单使用 php curl formdata
-
本文写给刚入PHP坑不久的新手们，作为工具文档，方便用时查阅。CURL是一个非常强大的开源库，它支持很多种协议，例如，HTTP、HTTPS、FTP、TELENT等。日常开发中，我们经常会需要用到cur...
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
-
本章涵盖使用Actix提供静态网页...
- 我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些
-
这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话，这是一次比较曲折的Bug跟踪之旅。10月28日，我们在GitHub上提...
- linux文件下载、服务器交互(curl)
-
基础环境curl命令描述...
- curl简单使用 curl sh
-
1.curl--help#查看关键字2.curl-A“（添加user-agent<name>SendUser-Agent<name>toserver）”...
- 常用linux命令:curl 常用linux命令大全
-
//获取网页内容//不加任何选项使用curl时，默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...
- 三十七，Web渗透提高班之hack the box在线靶场注册及入门知识
-
一.注册hacktheboxHackTheBox是一个在线平台，允许测试您的渗透技能和代码，并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战，并且模拟真实场景，其风格更倾向于CT...
- 一周热门
- 最近发表
-
- 好用的云函数!后端低代码接口开发，零基础编写API接口
- 快速上手:Windows 平台上 cURL 命令的使用方法
- 使用 Golang net/http 包:基础入门与实战
- #小白接口# 使用云函数，人人都能编写和发布自己的API接口
- 极度精神分裂:我家没有墙面开关，但我虚拟出来了一系列开关
- window使用curl命令的注意事项 curl命令用法
- Linux 系统curl命令使用详解 linuxctrl
- Tornado 入门:初学者指南 tornados
- PHP Curl的简单使用 php curl formdata
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- webgl开发 (24)
- parse (24)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)