前言
HTML(HyperText Markup Language,超文本标记语言)是构建网页的基石,是每一位前端开发者踏入 Web 世界的关键钥匙。它通过一系列语义化与功能性的标签,为网页搭建起清晰的结构骨架,让文本、图片、表单等各类内容得以有序呈现,是网页与用户交互的第一层语言。
对于想要系统学习 HTML 的初学者,或是需要回顾基础的开发者而言,本文将围绕 HTML 的核心标签体系展开讲解。
我们会从最基础的初始 HTML 结构标签入手,逐步深入到文本标签(标题、段落、强调类等)、媒体与交互标签(图片、超链接)、表格标签、列表标签(无序、有序、自定义)、表单标签(容器、输入控件、辅助标签等)的使用方法与场景,最后也会涉及无语义标签的相关知识。通过对这些内容的学习,你将全面掌握 HTML 构建网页结构的核心能力,为后续学习 CSS(美化网页样式)、JavaScript(实现网页交互)奠定坚实的基础。
一。HTML 结构
1.1 初始 HTML 标签
- HTML 代码都是由标签组成的。
标签就是类似于 <body>内容</body>,这种形式的字段,比如百度的主页:
可以看到就是由众多标签组成的。
关于标签可以分为两类:
- 双标签:有开始,有结束;比如
<body>内容....</body>,其中的<body>就是开始标签,而</body>就是结束标签; - 单标签:只有开始,比如,图片标签
<img>
- 在双标签之间放的是标签对应的内容,而在标签内部则可以设置标签的属性;
关于有哪些标签以及如何进行使用,在后面会详细进行介绍。
1.2 标签的层次
标签之间的结构关系,组成了一颗 DOM 树的结构,就是一颗多叉树。
- 因此多叉树的节点中有哪些关系,标签就有那些关系。
其中有几个规定:
html标签是根标签,所有标签都是它的子标签;<head>是网页属性,配置标签,<body>是网页主体内容标签,他们是父子标签。
在进行前端编写时,我们通常会采用 vscode 作为我们的开发工具,此处推荐几个好用的插件:
Auto Rename Tag:可以自动将双标签进行对称修改处理,修改一侧另一侧会自动修改;Live Server:可以让我们修改后的 HTML 界面,直接在网页中查看变化,不再需要手动刷新网页了;view-in-browser:让我们一键打开浏览器,查看 HTML 网页效果。
通过输入 ! 然后按回车,可以让我们快速自动生成 HTML 代码框架:
下面我将对其中的字段进行一个简单的介绍:
<!DOCTYPE html>:一个文档类型说明,告诉浏览器当前 HTML 文档使用的是 HTML5 规范;<html lang="en">:告诉浏览器,当前文档中主要内容是英文;<meta charset="UTF-8">:文档的字符编码采用的是 UTF-8;<meta name="viewport" content="width=device-width, initial-scale=1.0">:是关于移动设备适配使用的。
二。HTML 文本标签
以下是一张关于常见文本标签的列表:
| 名称 | 说明 |
|---|---|
| 标题 | <h1>标题名</h1> 通过修改数字,来指定标签级别 |
| 段落 | <p>内容</p> |


