HTML（超文本标记语言）作为 Web 前端开发的基石，是构建网页的基础。从简单的文本标记到复杂的多媒体嵌入，从静态页面到富交互应用，HTML 已经发展成为一套强大而完整的标记语言。本文将系统全面地梳理 HTML 的核心知识点，从基础标签到高级特性，帮助初学者建立完整的知识体系，也为有经验的开发者提供深入的技术参考。

一、HTML 基础

1.1 什么是 HTML
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它不是编程语言，而是一种标记语言，通过标签来描述网页的结构和内容。

核心特性：

超文本：可以链接到其他页面或资源

标记语言：使用标签来标记内容

结构化：定义页面的层次结构

平台无关：可在任何设备上解析显示

1.2 HTML 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 文档结构</title>
    <meta name="description" content="页面描述">
    <meta name="keywords" content="HTML,学习">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
    <header>
        <h1>标题</h1>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>段落内容</p>
        </article>
    </main>
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

文档类型声明：

<!-- HTML5 标准声明（推荐） -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.3 HTML 基本语法

<!-- 标签语法 -->
<!-- 双标签 -->
<p>这是一个段落</p>
<div>块级元素</div>

<!-- 单标签（自闭合标签） -->
<br>
<img src="image.jpg" alt="图片">
<input type="text">
<hr>

<!-- 标签属性 -->
<a href="https://example.com" target="_blank" class="link">链接</a>
<img src="logo.png" alt="Logo" width="100" height="50">

<!-- 注释 -->
<!-- 这是 HTML 注释，不会在页面上显示 -->

<!-- 实体字符 -->
&lt; <!-- 小于号 < -->
&gt; <!-- 大于号 > -->
&amp; <!-- & 符号 -->
&quot; <!-- 双引号 " -->
&apos; <!-- 单引号 ' -->
&nbsp; <!-- 不间断空格 -->
&copy; <!-- 版权符号 © -->
&reg;  <!-- 注册商标 ® -->

二、头部元信息

2.1 meta 标签

<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">

    <!-- 视口设置（移动端适配） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- 页面描述（SEO） -->
    <meta name="description" content="这是一个关于HTML学习的完整指南，涵盖所有核心知识点">

    <!-- 关键词（SEO） -->
    <meta name="keywords" content="HTML,学习,教程,Web开发,前端">

    <!-- 作者 -->
    <meta name="author" content="作者名称">

    <!-- 版权 -->
    <meta name="copyright" content="版权信息">

    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index, follow">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="index, follow">

    <!-- 页面刷新/重定向 -->
    <meta http-equiv="refresh" content="5; url=https://example.com">

    <!-- 兼容性设置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端应用 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="应用名称">

    <!-- 社交分享（Open Graph） -->
    <meta property="og:title" content="页面标题">
    <meta property="og:description" content="页面描述">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/page.html">
    <meta property="og:type" content="website">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="页面标题">
    <meta name="twitter:description" content="页面描述">
    <meta name="twitter:image" content="https://example.com/image.jpg">
</head>

2.2 link 标签

<head>
    <!-- 引入 CSS 样式表 -->
    <link rel="stylesheet" href="styles.css">

    <!-- 预加载资源 -->
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="style.css" as="style">
    <link rel="preload" href="script.js" as="script">

    <!-- 预连接 -->
    <link rel="preconnect" href="https://api.example.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">

    <!-- 预获取 -->
    <link rel="prefetch" href="next-page.html">

    <!-- 图标 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <!-- 规范链接（SEO） -->
    <link rel="canonical" href="https://example.com/page.html">

    <!-- 备用版本 -->
    <link rel="alternate" href="https://example.com/en/page.html" hreflang="en">
    <link rel="alternate" href="https://example.com/zh/page.html" hreflang="zh">

    <!-- RSS 订阅 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">

    <!-- 下一篇/上一篇 -->
    <link rel="prev" href="previous-page.html">
    <link rel="next" href="next-page.html">
</head>

2.3 script 标签

<head>
    <!-- 内部脚本 -->
    <script>
        console.log('Hello HTML');
        document.addEventListener('DOMContentLoaded', function() {
            // DOM 加载完成后执行
        });
    </script>

    <!-- 外部脚本 -->
    <script src="script.js"></script>

    <!-- 异步加载（不阻塞 HTML 解析） -->
    <script src="async-script.js" async></script>

    <!-- 延迟加载（HTML 解析完成后执行） -->
    <script src="defer-script.js" defer></script>

    <!-- 模块化脚本 -->
    <script type="module">
        import { hello } from './module.js';
        hello();
    </script>

    <!-- 无脚本处理 -->
    <noscript>
        <p>您的浏览器不支持 JavaScript，请启用 JavaScript 以获取最佳体验。</p>
    </noscript>
</body>

三、文本内容标签

3.1 标题与段落

<!-- 标题标签 h1-h6 -->
<h1>一级标题（最重要）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最不重要）</h6>

<!-- 段落标签 -->
<p>这是一个段落。段落之间会自动添加间距。</p>
<p>这是另一个段落。HTML 会忽略多余的空格和换行，需要使用特定标签来控制格式。</p>

<!-- 换行 -->
<br> <!-- 换行标签 -->

<!-- 水平分割线 -->
<hr> <!-- 水平线 -->

<!-- 预格式化文本 -->
<pre>
    保留    空格和
    换行
    格式
</pre>

3.2 文本格式化

<!-- 强调标签 -->
<strong>重要文本（语义强调）</strong>
<b>粗体文本（视觉加粗）</b>

<em>强调文本（语义斜体）</em>
<i>斜体文本（视觉斜体）</i>

<!-- 特殊文本 -->
<mark>高亮文本</mark>
<small>小号文本</small>
<del>删除文本</del>
<ins>插入文本</ins>
<u>下划线文本</u>
<s>不推荐文本</s>

<!-- 上标和下标 -->
水分子式：H<sub>2</sub>O
数学公式：E = mc<sup>2</sup>

<!-- 缩写 -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- 引用 -->
<cite>《三国演义》</cite> <!-- 作品标题 -->
<q>这是一句短引用</q> <!-- 行内引用 -->
<blockquote>
    这是一段长引用，会自动缩进。
    可以包含多行内容。
    <footer>— 引用来源</footer>
</blockquote>

<!-- 地址 -->
<address>
    作者：张三<br>
    邮箱：zhang@example.com<br>
    地址：北京市朝阳区
</address>

<!-- 代码 -->
<code>console.log('Hello');</code>
<kbd>Ctrl + C</kbd> <!-- 键盘输入 -->
<samp>输出示例</samp> <!-- 程序输出 -->
<var>x</var> <!-- 变量 -->

<!-- 时间日期 -->
<time datetime="2024-01-01">2024年1月1日</time>
<time datetime="2024-01-01T14:30:00">下午2:30</time>

<!-- 定义术语 -->
<dfn>HTML</dfn> 是一种标记语言。

<!-- 双向文本 -->
<bdo dir="rtl">这段文字从右向左显示</bdo>

来源：
https://app-abdss1rim1oh.appmiaoda.com

HTML学习知识点大全（一）

一、HTML 基础

二、头部元信息

三、文本内容标签

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

HTML学习知识点大全（一）

一、HTML 基础

二、头部元信息

三、文本内容标签

热门文章

最新文章

相关电子书