HTML 是一种标记语言，负责绘制网页。系统介绍了 HTML 的基础结构，包括 DOCTYPE、html、head 和 body 标签的作用。详细讲解了常用标签分类，涵盖文本结构、修饰、列表、通用标签，以及 header、nav、main 等语义化标签。此外还包含图片、视频、音频等媒体资源标签，表单元素如 input、select、button 的使用，以及表格和页面跳转标签。最后补充了实体符号、网页图标设置及焦点控制等知识点，适合初学者建立 HTML 开发基础认知。
HTML 是一种标签语言，负责绘制网页。标签的形态大多为 <标签></标签> 或 <标签>。整个 HTML 文件的内容实际上是由 <html></html> 标签包裹起来的。
标签如同手册，浏览器通过识别开发者写下的标签将内容渲染为不同的样式和功能。早期不同浏览器有各自的手册，导致代码不兼容。后来万维网联盟 (W3C) 统一了标准，HTML 与 CSS 由其组织管理。
目前 HTML 标签种类近百种，但平时常用的不过 20 多种。HTML 编写对环境要求几乎为零，只要有浏览器即可运行，编辑器只是方便编写。
一个 HTML 文件的后缀名为 .html，通常命名为 index.html。在编辑器中输入 ! 或 html5 并回车即可生成基础结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
结构中包含了 DOCTYPE, html, head, body, meta, title 等标签。像 <html lang="en"> 这样的左标签包含的属性（如 lang="en"）称为属性，用于补充信息。
比喻：浏览器是公司，开发者是求职者，HTML 文件是简历。标签说明求职意向，属性补充具体岗位，帮助浏览器更好地理解文档。
<!DOCTYPE html>: 告知浏览器使用 HTML5 标准解析。不区分大小写。<html lang="en">: 根标签，设置语言 (en 英语，zh-CN 简体中文等)。<head>: 头标签，包含非可视化内容，为浏览器提供指导。<title>: 网页标题，影响搜索引擎推荐结果。<meta>: 元数据，如字符集 (charset)、视窗设置 (viewport)、关键字描述等。<body>: 体标签，包含会被渲染为可视化的内容。<link>: 引入外部文件（如 CSS、JS）。<style>: 内部 CSS 样式。<script>: 内部 JavaScript 脚本。| 标签 | 作用 |
|---|---|
<h1>~<h6> | 一级至六级标题 |
<p> | 段落 |
| 标签 | 作用 |
|---|---|
<em>, <i> | 强调/斜体 |
<strong>, <b> | 加粗 |
<u> | 下划线 |
<ins>, <del>, <s> | 插入/删除/删除线 |
<sup>, <sub> | 上标/下标 |
<blockquote>, <q> | 引用 |
<ul><li>...</li></ul><ol><li>...</li></ol><span>: 无特殊渲染，常用于添加属性或配合 CSS。<br>: 换行。<hr>: 横线。<!-- -->: 注释。结构化标签在未设置样式前无视觉效果，主要用于语义化和嵌套管理。
| 标签 | 作用 |
|---|---|
<header> | 页面头部 |
<nav> | 导航链接区域 |
<main> | 主要内容区域 |
<footer> | 页脚 |
| 标签 | 作用 |
|---|---|
<article> | 独立文章/博客帖子 |
<section> | 文档区块 |
<aside> | 附加区块（侧边栏等） |
<div>: 分区，类似 span，用于布局。通过 src 属性访问资源。支持绝对路径和相对路径（. 当前目录，.. 上级目录）。
常见后缀：.jpg (有损), .png (无损透明), .gif (动图), .svg (矢量), .webp (高效)。
标签：<img src="..." alt="..." title="..." width="..." height="...">
注意：
width和height只写一个可保持比例，都写可能导致变形。
常见后缀：.mp4, .webm 等。
标签：<video controls muted autoplay loop poster="...">...
常用属性：width, height, volume, muted, autoplay, loop, controls, poster, preload。
常见后缀：.mp3, .wav, .ogg。
标签：<audio>...
标签：<iframe>。常用属性：width, height, frameborder。
标签：<svg>。原理是根据参数绘制图形，优化更好。
标签：<canvas>。默认不可见，常用于动画，需配合 JS 操作。
标签：<a href="...">。
常用属性：
target: _self(当前页), _blank(新页), _top, _parent。href="#id" 跳转到页面内特定位置。表单用于用户输入数据并与服务器交互。
标签：<form method="GET/POST" action="...">。
<input>: 重要属性 type (text, password, radio, checkbox, file, submit 等)。<textarea>: 多行输入。<label for="id">: 绑定文字与输入框。常用属性：name, value, placeholder, required, disabled, readonly, maxlength, min, max, pattern。
<select> + <option>: 单选下拉。<optgroup>: 分组选项。<datalist>: 配合 input 实现建议列表。<button>: 提交按钮 (type="submit")。<fieldset> + <legend>: 划分区块及名称。标签：<table>。
子标签：<caption>, <thead>, <tbody>, <tr>, <th>, <td>。
属性：rowspan (跨行), colspan (跨列)。
焦点状态可通过 tab 键切换。
可获焦点元素：a, button, input, select, textarea, iframe, contenteditable=true。
属性：
autofocus: 页面加载时自动聚焦。tabindex: 决定 tab 键切换顺序。用于表示特殊字符，例如：
& -> &< -> <> -> >" -> "© -> ©® -> ®¥ -> ¥浏览器标题栏左侧的小图标，通常为 .ico 格式。
获取方式：准备 1:1 图片转换为 ICO，放入项目根目录命名为 favicon.ico，或在 <head> 中使用 <link rel="icon" href="..."> 引入。
刷新后未显示可能是缓存原因，需清除浏览器缓存。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online