HTML（超文本标记语言，HyperText Markup Language）是构建网页的核心骨架语言，不属于编程语言，而是用于定义网页结构、内容语义的标记语言。所有网页的文字、图片、链接、表单、布局模块等基础内容，均由HTML标签搭建实现。本文将从基础概念、核心语法、常用标签、语义化规范、表单体系、布局基础、兼容性规范等维度，全方位、体系化梳理HTML核心知识，结合多维度表格汇总核心知识点，帮助建立完整的HTML知识体系。
一、HTML基础核心概念与规范
1.1 核心定义与作用
HTML的核心作用是搭建网页结构、定义内容语义，不负责页面样式（样式由CSS实现）和交互逻辑（交互由JavaScript实现）。其通过一系列预定义的标记标签，对网页内容进行分类、划分层级，让浏览器能够精准解析、渲染页面内容，同时让搜索引擎、辅助设备（读屏器）识别页面结构含义。
HTML历经多个版本迭代，目前主流标准为HTML5，相较于旧版本，新增大量语义化标签、多媒体标签、表单属性，摒弃冗余废弃标签，大幅提升网页规范性、可读性和功能性。
1.2 HTML文档基础结构与语法规则
所有HTML页面都遵循固定的基础骨架结构，包含文档声明、根标签、头部配置、主体内容四大核心模块，同时具备统一的语法规范，是编写合规HTML代码的基础。
| 结构模块 | 核心标签 | 功能说明 | 必备性 |
|---|---|---|---|
| 文档声明 | <!DOCTYPE html> | 告知浏览器当前页面使用HTML5标准解析，无闭合标签，必须置于页面首行 | 必选 |
| 根标签 | <html></html> | 页面所有内容的根容器，包裹头部和主体所有代码 | 必选 |
| 头部配置 | <head></head> | 存放页面配置信息，包括标题、编码、样式引入、关键字等，内容不直接展示在页面 | 必选 |
| 主体内容 | <body></body> | 存放页面所有可见内容，文字、图片、链接、表单、布局模块均在此编写 | 必选 |
HTML核心语法规则：标签分为双标签（闭合标签） 和单标签（自闭合标签）；标签可嵌套不可交叉；标签不区分大小写（推荐小写规范）；属性需写在开始标签内，键值对格式，属性值建议加双引号；代码换行、空格不影响页面渲染，仅用于提升可读性。
二、HTML头部（head）核心标签梳理
<head> 标签内的内容用于配置页面元信息，优化页面渲染、搜索引擎收录、设备适配等，无页面可视化内容，是网页的"配置中心"。核心标签功能汇总如下表：
| 标签名称 | 核心属性 | 功能作用 | 使用场景 |
|---|---|---|---|
| <meta> | charset、name、content、viewport | 定义页面元数据，编码格式、搜索引擎关键字、移动端适配等 | 所有页面必备，设置UTF-8编码、移动端自适应 |
| <title> | 无 | 设置网页标题，展示在浏览器标签栏，影响SEO收录 | 所有页面必备，每个页面唯一标题 |
| <link> | rel、href、type | 引入外部资源，主要用于导入CSS样式表、网页图标 | 页面需要自定义样式、设置 favicon 图标时使用 |
| <style> | type | 编写内嵌CSS样式，仅作用于当前页面 | 局部样式调试、小型页面快速样式编写 |
| <script> | src、defer、async | 引入或编写JS脚本，实现页面交互逻辑 | 页面需要动态交互效果时使用 |
关键配置说明：<meta charset="UTF-8"> 统一页面编码格式，避免中文乱码；<meta name="viewport" content="width=device-width,initial-scale=1.0"> 是移动端适配核心配置，保证网页在手机端正常缩放展示。
三、HTML主体（body）常用基础标签分类梳理
页面所有可见内容均在 <body> 内部编写，根据功能可分为文本标签、排版标签、媒体标签、超链接与列表标签四大类，是页面内容搭建的基础。
3.1 文本与排版标签
| 标签 | 类型 | 功能描述 | 渲染特性 |
|---|---|---|---|
| <h1>-<h6> | 标题标签 | 定义页面层级标题，h1最高级、h6最低级 | 块级元素，自带上下边距，字体逐级缩小 |
| <p> | 段落标签 | 包裹段落文本，划分文本段落 | 块级元素，自带上下边距，文本自动换行 |
| <span> | 行内文本容器 | 包裹局部文本，用于单独设置样式 | 行内元素，无默认边距，不独占一行 |
| <b>/<strong> | 加粗标签 | 文本加粗，strong具备语义强调 | 行内元素，strong优先级高于b |
| <i>/<em> | 斜体标签 | 文本倾斜，em具备语义强调 | 行内元素，常用于注释、引用文本 |
| <br> | 换行标签 | 强制文本换行，单标签 | 无默认样式，仅实现换行效果 |
| <hr> | 分割线标签 | 页面内容水平分割，单标签 | 块级元素，默认灰色横线样式 |
3.2 媒体与链接标签
| 标签 | 核心属性 | 功能作用 | 注意事项 |
|---|---|---|---|
| <a> | href、target、title | 超链接，实现页面跳转、锚点跳转、文件下载 | target="_blank" 新窗口打开链接；href="#" 空链接 |
| <img> | src、alt、width、height | 插入图片，单标签 | alt为图片加载失败备用文本，必备属性；src为图片路径 |
| <audio> | src、controls、autoplay、loop | 插入音频文件，HTML5新增标签 | controls属性必须添加，否则无播放控件 |
| <video> | src、controls、width、autoplay | 插入视频文件，HTML5新增标签 | 支持mp4、webm等格式，autoplay需配合静音属性生效 |
3.3 列表标签
列表用于规整展示结构化数据，分为有序列表、无序列表、自定义列表三类，广泛用于导航、菜单、参数说明等场景。
| 列表类型 | 组合标签 | 展示样式 | 适用场景 |
|---|---|---|---|
| 无序列表 | <ul>+<li> | 默认小圆点标记，无排序 | 导航菜单、功能列表、项目罗列 |
| 有序列表 | <ol>+<li> | 默认数字排序，可自定义序号类型 | 步骤说明、排名列表、有序条目 |
| 自定义列表 | <dl>+<dt>+<dd> | 标题+描述组合，无默认标记 | 名词解释、参数说明、图文介绍 |
四、HTML表格体系深度梳理
HTML表格用于展示结构化二维数据，如数据统计、表单台账、信息对比等，由表格容器、表头、表体、表尾、行、单元格等标签组成，HTML5优化了表格语义化结构，区分表头、主体、底部模块。
4.1 表格核心组成标签
| 标签 | 层级 | 功能说明 | 语义作用 |
|---|---|---|---|
| <table> | 顶级容器 | 整个表格的包裹容器 | 定义表格整体范围 |
| <thead> | 模块容器 | 包裹表格表头内容 | 区分表头模块，提升语义化 |
| <tbody> | 模块容器 | 包裹表格主体数据内容 | 表格核心数据区域 |
| <tfoot> | 模块容器 | 包裹表格底部汇总、备注内容 | 数据总结、注释区域 |
| <tr> | 行标签 | 定义表格中的一行 | 承载单元格内容 |
| <th> | 表头单元格 | 表头单元格，默认居中加粗 | 定义列标题、行标题 |
| <td> | 普通单元格 | 表格数据单元格，默认左对齐 | 存放具体数据内容 |
4.2 表格核心属性与合并规则
表格的核心实用属性为单元格合并属性，可实现跨列、跨行合并，满足复杂表格布局需求，是表格使用的重点难点。
| 属性名 | 作用对象 | 功能说明 | 使用规则 |
|---|---|---|---|
| colspan | <td>、<th> | 跨列合并（水平合并） | 属性值为合并列数，合并后删除同行多余单元格 |
| rowspan | <td>、<th> | 跨行合并（垂直合并） | 属性值为合并行数，合并后删除下方多余单元格 |
| border | <table> | 设置表格边框宽度 | HTML仅基础设置，精细样式推荐CSS实现 |
| cellpadding | <table> | 设置单元格内边距 | 已逐步废弃，替代方案为CSS padding |
| cellspacing | <table> | 设置单元格外边距 | 已逐步废弃，替代方案为CSS border-collapse |
五、HTML5语义化标签核心梳理
HTML5最大的优化亮点为语义化标签，摒弃了旧版本单纯依靠 <div> 布局的无意义写法，通过专属标签定义页面不同功能模块，让代码结构更清晰、搜索引擎更易识别、适配无障碍访问。语义化标签均为块级元素，默认独占一行。
| 语义化标签 | 模块含义 | 适用场景 |
|---|---|---|
| <header> | 头部区域 | 页面头部、模块头部，存放logo、导航、标题 |
| <nav> | 导航区域 | 页面主导航、侧边导航、底部导航链接 |
| <main> | 主体核心区域 | 页面唯一核心内容区域，不可重复使用 |
| <section> | 分区块 | 页面内容分块，如产品板块、资讯板块 |
| <article> | 独立文章块 | 独立完整内容，如新闻、博客、帖子 |
| <aside> | 侧边栏区域 | 侧边推荐、公告、广告、辅助信息 |
| <footer> | 底部区域 | 页面底部、模块底部，存放版权、备案、联系方式 |
语义化核心优势：代码可读性极强，新手可快速看懂页面结构；利于SEO搜索引擎优化，精准抓取页面核心内容；适配读屏器等无障碍设备，提升网页兼容性。
六、HTML表单体系完整梳理
表单是网页与用户交互的核心模块，用于收集用户输入数据（账号、密码、留言、选择项等），并提交至后台服务器，广泛用于登录、注册、留言、订单提交等场景。表单由表单容器、输入控件、按钮、提示文本组成。
6.1 表单核心容器与属性
<form> 是表单的顶级容器，所有表单控件需嵌套在其中，核心属性决定数据提交方式与地址。
| 属性 | 取值 | 功能说明 |
|---|---|---|
| action | 后台接口地址 | 指定表单数据提交的服务器地址 |
| method | get/post | 指定数据提交方式，get参数暴露在地址栏，post隐秘传输 |
| name | 自定义名称 | 表单标识，用于JS获取表单对象 |
| autocomplete | on/off | 开启/关闭输入框自动记忆填充功能 |
6.2 常用表单控件汇总
| 控件标签 | type属性 | 功能样式 | HTML5新增特性 |
|---|---|---|---|
| <input> | text | 单行文本输入框，输入普通文字 | 支持placeholder占位提示、required必填校验 |
| <input> | password | 密码输入框，内容自动隐藏 | 支持maxlength限制输入长度 |
| <input> | radio | 单选按钮，同name组仅选一项 | 支持checked默认选中 |
| <input> | checkbox | 复选框，支持多选 | 支持multiple多选项选择 |
| <textarea> | 无 | 多行文本输入框，用于留言、备注 | rows、cols设置默认行列尺寸 |
| <select> | 无 | 下拉选择框，搭配<option>使用 | 支持默认选中、多选设置 |
| <button> | submit/reset/button | 提交按钮、重置按钮、普通按钮 | 语义更清晰，支持自定义内容 |
七、HTML核心元素分类与布局规则
HTML所有可视化元素可按显示特性分为块级元素 、行内元素 、行内块元素 三类，是网页布局的核心基础，直接决定元素的默认排版特性。除此之外，HTML中还有一类特殊的空元素（空标签/自闭合元素），是页面开发中不可或缺的元素类型，本节统一补充梳理，完善HTML元素知识体系。
7.1 三大布局元素分类
|-------|--------------------------|----------------------------------|---------------|
| 元素类型 | 默认特性 | 代表标签 | 布局用途 |
| 块级元素 | 独占一行，可设置宽高、边距，默认宽度100% | div、p、h1-h6、ul、ol、section、header | 页面大区块布局、内容分块 |
| 行内元素 | 同行排列，不可设置宽高、上下边距，宽高由内容决定 | span、a、b、strong、i、em | 文本局部样式、行内功能标签 |
| 行内块元素 | 同行排列，可设置宽高、边距，兼具两者优势 | img、input、button、video | 媒体展示、表单控件布局 |
7.2 空元素（自闭合元素）详解
空元素也叫空标签、自闭合标签 ，是HTML中一类特殊元素，核心特征为无结束标签、无法嵌套内容、仅通过自身属性实现功能，标签内部没有文本内容和子元素。HTML5规范中，空元素无需手动写闭合斜杠，兼容旧版写法可选择性添加，不影响页面渲染。
|-------------|-------------------|--------------------|-------------------|
| 核心特征 | 常用空元素标签 | 功能说明 | 补充说明 |
| 无闭合标签、无嵌套内容 | <br> | 文本强制换行 | 纯功能标签，无任何默认样式 |
| 仅靠属性实现功能 | <hr> | 页面水平分割线，划分内容区块 | 默认块级渲染，可通过CSS修改样式 |
| 不可嵌套文本/子标签 | <img> | 页面图片引入，依赖src属性加载资源 | 行内块特性，支持设置宽高边距 |
| HTML5规范兼容 | <meta>、<link> | 页面元信息配置、外部资源引入 | 仅用于head头部，无可视化展示 |
| 无内容容器 | <input> | 表单输入控件，通过type区分类型 | 行内块特性，是交互核心空元素 |
7.3 空元素核心注意事项
第一，空元素绝对不能嵌套内容或其他标签，禁止书写闭合标签，例如错误写法：<br></br>、<img>文本</img>，会导致页面解析异常；第二，空元素的所有功能均依赖自身属性实现，无默认文本内容；第三，部分空元素兼具布局特性，如img、input为行内块，hr为块级，br无默认布局特性，使用时需区分场景；第四，HTML5兼容 <br/> 旧式闭合写法，不报错但推荐省略斜杠，遵循新标准规范。
八、HTML编码规范与兼容性总结
8.1 标准化编码规范
规范的HTML代码可提升项目可维护性、适配团队协作，核心规范如下：所有标签统一小写；单标签规范书写（如 <br/>、<img/>）；标签嵌套层级清晰，不交叉嵌套；属性值统一双引号包裹；代码缩进对齐，模块化排版；废弃废弃标签（font、center、strike等），优先使用语义化标签和CSS样式。
8.2 浏览器兼容性要点
HTML5新增语义化标签、多媒体标签在低版本IE浏览器存在兼容问题，实际开发中可通过html5shiv插件实现兼容；表单新增校验属性、输入类型在老旧浏览器存在适配差异，需做好降级处理；统一页面编码为UTF-8，避免跨浏览器乱码问题。
九、整体知识总结
HTML的核心本质是结构化、语义化搭建网页内容骨架，学习核心在于掌握标签分类、语法规范、语义化逻辑、表单与表格核心用法。基础标签实现内容展示，语义化标签优化页面结构与SEO，表格实现结构化数据展示，表单实现用户交互数据收集，元素分类规则支撑页面基础布局。
在前端开发体系中，HTML是底层基础，需配合CSS实现样式美化、配合JavaScript实现动态交互，三者结合才能完成完整的网页开发。熟练掌握本文梳理的核心知识点，可应对绝大多数静态页面、基础交互页面的开发需求，为后续前端进阶学习筑牢基础。