HTML基础教程（三十七）常用标签整理：《码农福音！HTML标签全家桶爆笑开席：从＜html＞到＜footer＞，一次吃到撑！》-优快云博客

想象一下，你要建造一座宏伟的城堡（网页）。光有一堆砖头（文本、图片）是不够的，你需要不同形状的积木来定义哪里是城墙、哪里是窗户、哪里是城门。HTML标签就是这些积木。

<div>和<span>就像是万能的基础方块，啥都能干，但缺乏个性。而HTML5带来的一众新标签，如<header>、<nav>、<article>等，则是精心设计的特种积木：城门积木、窗户积木、塔楼积木。它们不仅让代码更清晰易读，更对搜索引擎（SEO）和无障碍访问无比友好。

本篇文章将带你系统性地逛遍HTML标签的“大全超市”，让你以后需要什么，就能精准地从货架上拿走它，而不是永远只会说：“老板，再来一打<div>！”

为了更好地理解和记忆，我们把HTML标签分门别类。这就像把工具放进不同的抽屉，用的时候才不会手忙脚乱。

下面我们将以列表形式，遍历最常用和重要的HTML标签。请注意，这是一个“大全”，但并非每一个都每天用到，了解它们的存在就是强大的开始！

标签	定义	示例
`<!DOCTYPE>`	文档类型声明，必须是HTML文档的第一句。告诉浏览器：“请用HTML5标准来解析我！”	`<!DOCTYPE html>`
`<html>`	根元素，包裹整个HTML文档的所有内容。`lang` 属性很重要，用于声明语言。	`<html lang="zh-CN">` ... `</html>`
`<head>`	头部容器，包含文档的元数据（meta）、标题（title）、引入文件（link）等不直接显示的内容。	`<head><title>我的网站</title></head>`
`<title>`	文档标题，定义浏览器工具栏的标题、收藏网页时的默认名称，对SEO极重要。	`<title>深度分析HTML标签大全</title>`
`<base>`	基底URL，为页面上所有相对URL规定默认地址或默认打开方式（target）。	`<base href="https://example.com/images/" target="_blank">`
`<link>`	引入外部资源，最常见的是引入CSS样式表。	`<link rel="stylesheet" href="style.css">`
`<meta>`	元数据，提供关于页面的信息，如字符集、视图窗口、描述、关键词等。功能强大！	`<meta charset="UTF-8">` `<meta name="viewport" content="width=device-width, initial-scale=1.0">` `<meta name="description" content="这是一篇关于HTML标签的幽默深度文章">`
`<style>`	内嵌CSS样式，用于在文档内部书写CSS代码。	`<style> body { color: red; } </style>`