HTML5 与 CSS3 速查表：标签、属性及如何使用在线 HTML 查看器预览 HTML 页面
若需快速查阅 HTML 标签或 CSS 属性，本指南提供终极解决方案：这份终极 html 速查表 涵盖了最核心的 HTML5 标签和 CSS3 属性，并附带实用的代码片段。想知道如何预览 HTML 页面而无需本地服务器？通过我们集成的集代码预览与调试于一体的 在线 HTML 查看器 即可即时测试和可视化所有示例，助你实现更快速高效的工作流程。
终极 HTML5 标签列表：构建你的网页内容
HTML（超文本标记语言）是每个网页的核心。HTML5 引入了语义化元素，为你的内容赋予更清晰的含义，从而提升可访问性和 SEO 效果。以下是你最常使用的标签的分类汇总。
核心文档结构与元数据
这些标签构成了任何 HTML 文档的骨架，为浏览器和搜索引擎提供关键信息。
| 标签 | 描述 |
|---|---|
<!DOCTYPE html> | 声明文档类型为 HTML5。 |
<html> | HTML 页面的根元素。 |
<head> | 包含文档的元信息。 |
<title> | 指定浏览器标签页和搜索结果的标题。 |
<meta> | 提供字符集、视口设置和描述等元数据。 |
<link> | 链接到外部资源，最常见的是 CSS 样式表。 |
<script> | 嵌入或链接可执行的 JavaScript 代码。 |
<body> | 包含可见的页面内容。 |
语义化内容划分与分组元素
使用这些标签可以逻辑地组织你的内容，为页面布局的不同部分赋予意义。
| 标签 | 描述 |
|---|---|
<header> | 代表一个区域或整个页面的介绍性内容。 |
<nav> | 包含导航链接。 |
<main> | 指定文档的主要、主导性内容。 |
<article> | 定义一个独立的、自包含的内容（例如，博客文章、论坛帖子）。 |
<section> | 代表文档的一个独立章节。 |
<aside> | 定义与主要内容无关的内容（例如，侧边栏）。 |
<footer> | 代表一个区域或整个页面的页脚。 |
<div> | 用于流内容的通用容器，没有语义含义。 |
行内级语义与超链接
这些标签用于格式化文本并赋予其含义，从标题、段落到链接。
| 标签 | 描述 |
|---|---|
<h1> 到 <h6> | 标题级别，<h1> 最重要。 |
<p> | 定义一个段落。 |
<a> | 创建一个超链接。href 属性指定 URL。 |
<strong> | 表示文本具有强烈的重要性（通常显示为粗体）。 |
<em> | 表示强调的文本（通常显示为斜体）。 |
<span> | 用于短语内容的通用内联容器。 |
<br> | 插入一个单行换行符。 |
<blockquote> | 定义一个引用自其他来源的部分。 |
表单、输入与交互元素
表单对于用户交互至关重要。这些标签允许你收集用户输入。
| 标签 | 描述 |
|---|---|
<form> | 用于创建 HTML 表单以收集用户输入的容器。 |
<input> | 最通用的表单元素；其类型由 type 属性定义（例如，text、password、checkbox、submit）。 |
<textarea> | 定义一个多行文本输入控件。 |
<label> | 为 <input> 元素定义一个标签。 |
<button> | 定义一个可点击的按钮。 |
<select> | 创建一个下拉列表。 |
<option> | 在 <select> 列表中定义一个选项。 |
媒体、嵌入与外部内容
使用图片、视频和其他嵌入式内容让你的页面栩栩如生。
| 标签 | 描述 |
|---|---|
<img> | 嵌入图像。需要 src（源）和 alt（替代文本）属性。 |
<video> | 嵌入视频播放器。 |
<audio> | 嵌入音频内容播放器。 |
<iframe> | 指定一个内联框架，用于在当前 HTML 文档中嵌入另一个文档。 |
列表与表格：有效组织数据
使用列表和表格清晰地组织相关项目或表格数据。
| 标签 | 描述 |
|---|---|
<ul> | 定义一个无序（项目符号）列表。 |
<ol> | 定义一个有序（编号）列表。 |
<li> | 在 <ul> 或 <ol> 中定义一个列表项。 |
<table> | 定义一个表格。 |
<tr> | 在表格中定义一个行。 |
<th> | 在表格中定义一个表头单元格。 |
<td> | 在表格中定义一个标准数据单元格。 |
<caption> | 定义表格标题。 |
必备 CSS3 属性列表：专业级网页样式设计
CSS（层叠样式表）让你的 HTML 活起来，控制布局、颜色、字体以及整体视觉外观。这份 css 速查表 涵盖了你精通任何设计所需的属性。
CSS 选择器与优先级
选择器用于定位你想要应用样式的 HTML 元素。理解它们是有效使用 CSS 的第一步。
| 选择器 | 示例 | 描述 |
|---|---|---|
| 类型 | p | 选择所有 <p> 元素。 |
| 类 | .my-class | 选取所有具有 class="my-class" 的元素。 |
| ID | #my-id | 选取唯一具备 id="my-id" 的元素。 |
| 属性 | [href] | 选取所有带有 href 属性的元素。 |
| 后代 | article p | 选取 <article> 内部的所有 <p> 元素。 |
| 伪类 | a:hover | 选取用户鼠标悬停的链接。 |
盒子模型与尺寸属性
页面上的每个元素都是一个矩形框。盒子模型定义了它的尺寸、内边距、边框和外边距如何协同工作。
| 属性 | 示例值 | 描述 |
|---|---|---|
width | 100px、50%、auto | 设置元素的宽度。 |
height | 100px、50vh（即视窗高度的50%）、auto | 设置元素的高度。 |
padding | 10px、5px 10px | 设置内容与边框之间的空间。 |
border | 1px solid black | 设置边框宽度、样式和颜色的简写属性。 |
margin | 10px、5px 10px | 设置外边距，即边框外部、元素之间的空间。 |
box-sizing | border-box | 改变 width 和 height 的计算方式，包括内边距和边框。 |
排版与文本样式
控制文本的外观，以创建可读且美观的内容。
| 属性 | 示例值 | 描述 |
|---|---|---|
font-family | "Arial", sans-serif | 指定元素的字体。 |
font-size | 16px、1.2em、1rem | 设置文本的大小。 |
font-weight | normal、bold、700 | 设置字体的粗细。 |
color | black、#333、rgb(0,0,0) | 设置文本的颜色。 |
text-align | left、center、right | 对齐元素内的文本。 |
line-height | 1.5 | 设置文本行之间的距离。 |
使用弹性盒子（Flexbox）实现弹性布局
Flexbox 是一种用于在一行或一列中排列项目的二维布局模型。它使创建响应式布局变得直观。
| 属性（容器） | 示例值 | 描述 |
|---|---|---|
display | flex | 启用 Flexbox 布局模型。 |
flex-direction | row、column | 定义主轴的方向。 |
justify-content | center、space-between | 沿主轴对齐项目。 |
align-items | center、stretch | 沿交叉轴对齐项目。 |
flex-wrap | nowrap、wrap | 允许项目换行到多个行。 |
使用 CSS Grid 实现网格布局
CSS Grid 是一个强大的二维布局系统，允许你同时控制列和行。
| 属性（容器） | 示例值 | 描述 |
|---|---|---|
display | grid | 启用 Grid 布局模型。 |
grid-template-columns | 1fr 1fr 100px、repeat(3, 1fr) | 定义网格的列。 |
grid-template-rows | auto 100px | 定义网格的行。 |
gap | 10px | 设置网格单元格之间的间隙大小。 |
背景、边框与阴影
使用这些装饰性属性为你的元素添加深度和风格。
| 属性 | 示例值 | 描述 |
|---|---|---|
background-color | lightblue、#f0f0f0 | 设置元素的背景颜色。 |
background-image | url('image.jpg') | 设置背景图像。 |
border-radius | 5px、50% | 使元素的边框圆角化。 |
box-shadow | 10px 5px 5px black | 为元素的框架添加阴影效果。 |
过渡、变换与动画
通过流畅的视觉效果创建动态和交互式用户界面。
| 属性 | 示例值 | 描述 |
|---|---|---|
transition | all 0.3s ease-in-out | 在给定持续时间内启用属性的平滑变化。 |
transform | rotate(45deg)、scale(1.2) | 对元素应用 2D 或 3D 变换。 |
animation | slide-in 1s forwards | 应用命名动画的简写。 |
为什么 Html Viewer 是你的首选在线 HTML 编辑器与查看器
拥有一个出色的速查表是一方面，但能够即时应用并看到结果才是真正加速学习和开发的关键。这时，像 Html Viewer 这样的 在线 HTML 编辑器 就成了你最有力的助手。
即时实时预览，加速实验
复制本指南中的任何代码片段，粘贴到我们的编辑器中，即可实时查看渲染效果。无需保存文件、切换窗口或刷新浏览器。这种即时反馈循环非常适合精准调试 CSS 属性，或理解新的 HTML 标签如何构建你的内容。你现在就可以 测试这些代码片段 ，亲眼见证奇迹。
轻松编辑、美化和压缩代码
我们的工具不仅仅是查看器。它是一个完整的流程解决方案。如果你从不同来源收集了代码，只需单击“美化”按钮，即可将其格式化为清晰、易读的结构。准备部署时，“压缩”功能可以压缩你的代码，优化以加快页面加载速度。这种一体化功能可以简化你的整个编码流程。
随时随地访问：无需任何设置
忘掉安装重量级 IDE 或配置复杂的本地环境吧。这款在线 HTML 编辑器完全在你的浏览器中运行。无论你是在咖啡馆的笔记本电脑上，还是在实验室的共享计算机上，你强大的 HTML 和 CSS 沙盒始终只需一个 URL 即可访问，随时待命，灵感涌现之时即可使用。
更快掌握 Web 开发：你的必备 HTML & CSS 速查表
将此页面添加书签，作为你掌握 HTML5 和 CSS3 基础知识的最终指南。使用它来快速查找正确的标签或属性，理解其语法，并高效构建项目。更重要的是，将这些知识与我们工具的实用功能相结合。这里的每一个代码片段都是一个实验和学习的机会。访问 HtmlViewer.cc 编辑器 ，让这份速查表焕发生机，并立即改变你的编码工作流程。
关于 HTML & CSS 速查表的常见问题解答
如何快速查看网站或本地文件的 HTML 代码？
最简单的方法是使用在线 HTML 查看器。使用我们的工具，你可以直接粘贴代码、上传 HTML 文件，甚至输入 URL 来获取并查看 HTML 源代码。加载后，你可以并排查看代码及其可视化预览，非常适合学习和调试。
什么是 HTML & CSS 速查表？它有什么用？
HTML & CSS 速查表是一份简洁的参考指南，列出了常用的标签、属性、语法和概念。它对所有级别的开发人员都非常有益，因为它节省时间，无需死记硬背每一个细节，并作为快速、可靠的资源，用于故障排除和高效地构建网页。
我可以在线即时测试这些 HTML5 & CSS3 代码片段吗？
当然可以！这正是我们的平台设计初衷。你可以复制本指南中的任何示例，将其粘贴到 我们主页 的编辑器中，并在实时预览面板中立即看到结果。自由实验，真正掌握不同代码组合如何生效。
如何确保我的 HTML 和 CSS 具有可访问性且结构良好？
首先，正确使用语义化 HTML5 标签（如 <main>、<nav>、<article>），因为它们提供了固有的含义。对于 CSS，请确保有足够的颜色对比度，并使用 rem 等响应式单位来设置字体大小。一个很好的实践是将你的代码粘贴到我们的编辑器中，并使用“美化”功能。这将以正确的缩进格式化你的代码，使其更易于审查结构并发现潜在问题。