HTML 快速参考手册 (2025版)
基本结构
Head 元素
</code> – 页面标题</li>
<li><code><meta></code> – 元数据 (charset, viewport, 等)</li>
<li><code><link></code> – 外部样式表</li>
<li><code><style></code> – 内部 CSS</li>
<li><code><script></code> – JavaScript</li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-paragraph"></i>文本格式化</h2>
<ul>
<li><code><h1></code> 到 <code><h6></code> – 标题</li>
<li><code><p></code> – 段落</li>
<li><code><br></code> – 换行</li>
<li><code><hr></code> – 水平线</li>
<li><code><strong></code> – 粗体</li>
<li><code><em></code> – 斜体</li>
<li><code><mark></code> – 高亮</li>
<li><code><small></code> – 小号文本</li>
<li><code><blockquote></code> – 引用</li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-list-ul"></i>列表</h2>
<ul>
<li><code><ul></code> – 无序列表</li>
<li><code><ol></code> – 有序列表</li>
<li><code><li></code> – 列表项</li>
<li><code><dl></code> – 定义列表</li>
<li><code><dt></code> – 定义术语</li>
<li><code><dd></code> – 定义描述</li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-link"></i>链接</h2>
<ul>
<li><code><a href=""></code> – 锚标签</li>
<li>属性: <code>target</code>, <code>download</code>, <code>rel</code>, <code>mailto:</code></li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-image"></i>图像</h2>
<ul>
<li><code><img src="" alt=""></code></li>
<li>属性: <code>width</code>, <code>height</code>, <code>loading</code></li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-table"></i>表格</h2>
<ul>
<li><code><table></code> – 表格容器</li>
<li><code><tr></code> – 表格行</li>
<li><code><td></code> – 表格数据单元格</li>
<li><code><th></code> – 表格头单元格</li>
<li><code><thead></code>, <code><tbody></code>, <code><tfoot></code> – 表格区段</li>
</ul>
</section>
<section class="content-section">
<h2><i class="fab fa-wpforms"></i>表单</h2>
<ul>
<li><code><form></code> – 表单容器</li>
<li><code><input></code> – 输入字段</li>
<li><code><label></code> – 字段标签</li>
<li><code><textarea></code> – 多行输入</li>
<li><code><select></code>, <code><option></code> – 下拉列表</li>
<li><code><button></code> – 按钮</li>
<li>属性: <code>action</code>, <code>method</code>, <code>required</code>, <code>placeholder</code>, <code>type</code></li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-photo-video"></i>媒体</h2>
<ul>
<li><code><video></code>, <code><audio></code>, <code><source></code></li>
<li>控件属性: <code>controls</code>, <code>autoplay</code>, <code>loop</code>, <code>muted</code></li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-puzzle-piece"></i>语义化元素</h2>
<ul>
<li><code><header></code>, <code><footer></code></li>
<li><code><nav></code></li>
<li><code><main></code></li>
<li><code><section></code></li>
<li><code><article></code></li>
<li><code><aside></code></li>
<li><code><figure></code>, <code><figcaption></code></li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-exchange-alt"></i>内联 vs 块级元素</h2>
<ul>
<li>块级: <code>div</code>, <code>p</code>, <code>section</code>, <code>article</code>, 等.</li>
<li>内联: <code>span</code>, <code>a</code>, <code>strong</code>, <code>em</code>, 等.</li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-globe"></i>全局属性</h2>
<ul>
<li><code>id</code>, <code>class</code>, <code>style</code>, <code>title</code>, <code>data-*</code>, <code>hidden</code>, <code>lang</code>, <code>dir</code></li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-ban"></i>已弃用元素</h2>
<ul>
<li>避免使用: <code><center></code>, <code><font></code>, <code><bgsound></code>, <code><applet></code></li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-universal-access"></i>可访问性 & SEO</h2>
<ul>
<li>使用语义化标签</li>
<li>为图像添加 <code>alt</code> 属性</li>
<li>使用正确的标题结构</li>
<li>在需要时使用 ARIA roles</li>
</ul>
</section>
<section class="content-section">
<h2><i class="fas fa-book-open"></i>推荐资源</h2>
<p><a href="#" target="_blank" rel="noopener noreferrer">学习 HTML, CSS & JavaScript 成为 Web 开发者 <i class="fas fa-external-link-alt text-xs ml-1"></i></a></p>
<!-- Note: The original content didn't provide a URL, so '#' is used as a placeholder. -->
</section>
</main>
<footer class="text-center text-gray-500 text-sm py-6">
内容基于 HTML Cheat Sheet Summary (2025 Edition)
</footer>
</body>
</html>