此 HTML 快速参考备忘单以可读布局列出了常见的 HTML 和 HTML5 标记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Boilerplate</title>
</head>
<body>
<h1>Hello world, hello 备忘清单!</h1>
</body>
</html>
或者在 jsfiddle
<!-- 这是代码注释 -->
<!--
或者你可以注释掉一个
大量的行。
-->
<p>我来自快速参考</p>
<p>分享快速参考备忘单。</p>
请参阅：段落元素
<a href="https://github.com/oxings/reference">
Github
</a>
<a href="mailto:jack@abc.com">邮箱</a>
<a href="tel:+123456789">电话</a>
<a href="sms:+123456789&body=ha%20ha">
短信
</a>
| :- | :- |
|---|---|
href |
超链接指向的 URL |
rel |
链接 URL 的关系 |
target |
链接目标位置：_self/_blank/_top/_parent |
请参阅：<a> 属性
<img loading="lazy"
src="https://xxx.png"
alt="在此处描述图像"
width="400" height="400">
src (URL/路径) |
必填，图片位置 | |
alt |
描述图像 | |
width |
图像宽度 | |
height |
图像高度 | |
loading |
浏览器应该如何加载 |
请参阅：图像嵌入元素
<b>粗体文字</b>
<strong>这段文字很重要</strong>
<i>斜体文本</i>
<em>这段文字被强调</em>
<u>下划线文本</u>
<pre>预格式化文本</pre>
<code>源代码</code>
<del>删除的文字</del>
<mark>突出显示的文本 (HTML5)</mark>
<ins>插入的文本</ins>
<sup>使文本上标</sup>
<sub>使文本下标</sub>
<small>使文本变小</small>
<pre>预格式化文本</pre>
<kbd>Ctrl</kbd>
<blockquote>文本块引用</blockquote>
<h1> 这是标题 1 </h1>
<h2> 这是标题 2 </h2>
<h3> 这是标题 3 </h3>
<h4> 这是标题 4 </h4>
<h5> 这是标题 5 </h5>
<h6> 这是标题 6 </h6>
您的页面上应该只有一个 h1
| :- | :- |
|---|---|
<div></div> |
页面内容的划分或部分 |
<span></span> |
其他内容中的文本部分 |
<p></p> |
文本段落 |
<br> |
换行 |
<hr> |
水平分割线 |
这些标签用于将页面划分为多个部分
<iframe
id="inlineFrameExample"
title="Inline Frame Example"
width="100%"
height="200"
frameborder="0"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
请参阅：内联框架元素
<script type="text/javascript">
let text = "Hello 快速参考";
alert(text);
</script>
<body>
...
<script src="app.js"></script>
</body>
<style type="text/css">
h1 {
color: purple;
}
</style>
<head>
...
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>快速参考</h1>
</main>
<footer>
<p>©2023 快速参考</p>
</footer>
</body>
<header>
<nav>
<ul>
<li><a href="#">编辑页面</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</nav>
</header>
| :- | :- |
|---|---|
| article | 独立的内容 |
| aside | 次要内容 |
| audio | 嵌入声音或音频流 |
| bdi | 双向隔离元件 |
| canvas | 通过JavaScript绘制图形 |
| data | 机器可读内容 |
| datalist | 一组预定义选项 |
| details | 其他信息 |
| dialog | 对话框或子窗口 |
| embed | 嵌入外部应用程序 |
| figcaption | 图形的标题或图例 |
| figure | 插图 |
| footer | 页脚或最不重要的 |
| header | 刊头或重要信息 |
| main | 文件的主要内容 |
| mark | 突出显示的文本 |
| meter | 已知范围内的标量值 |
| nav | 导航链接的一部分 |
| output | 计算的结果 |
| picture | 用于多个图像源的容器 |
| progress | 任务的完成进度 |
| rp | 提供回退括号 |
| rt | 定义字符的发音 |
| ruby | 表示ruby注释 |
| section | 一系列相关内容中的组 |
| source | 媒体元素的资源 |
| summary | 元素的摘要 |
| template | 定义HTML片段 |
| time | 时间或日期 |
| track | 媒体元素的字幕信息 |
| video | 嵌入视频 |
| wbr | 换行机会 |
<video controls="" width="100%">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
很抱歉，您的浏览器不支持嵌入式视频。
</video>
<audio
controls
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
您的浏览器不支持音频元素。
</audio>
<ruby>
汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
字 <rp>(</rp><rt>zì</rt><rp>)</rp>
拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>
音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
</ruby>
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
<progress value="50" max="100"></progress>
<p>我爱<mark>备忘清单</mark></p>
我爱备忘清单
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Roberta</td>
<td>39</td>
</tr>
<tr>
<td>Oliver</td>
<td>25</td>
</tr>
</tbody>
</table>
| 属性 | 说明 |
|---|---|
colspan |
单元格应跨越的列数 |
headers |
单元格与一个或多个标题单元格相关 |
rowspan |
单元格应跨越的行数 |
请参阅：td#属性
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
请参阅：无序列表元素
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>
请参阅：有序列表元素
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
请参阅：描述列表元素
<form method="POST" action="api/login">
<label for="mail">邮箱: </label>
<input type="email" id="mail" name="mail">
<br/>
<label for="pw">密码:</label>
<input type="password" id="pw" name="pw">
<br/>
<input type="submit" value="登录">
<br/>
<input type="checkbox" id="ck" name="ck">
<label for="ck">记住我</label>
</form>
HTML <form> 元素用于收集信息并将其发送到外部源。
| 属性 | 说明 |
|---|---|
name |
脚本形式的名称 |
action |
表单脚本的URL |
method |
HTTP方法，POST/GET (默认) |
enctype |
介质类型，请参见enctype |
onsubmit |
提交表单时运行 |
onreset |
在窗体重置时运行 |
<!-- 嵌套标签 -->
<label>Click me
<input type="text" id="user" name="name"/>
</label>
<!-- 'for' 属性 -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>
for在标签中引用输入的id属性
<textarea rows="2" cols="30" name="address" id="address"></textarea>
Textarea 是一个多行文本输入控件
<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>
单选按钮用于让用户只选择一个
<input type="checkbox" name="s" id="soc">
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas">
<label for="bas">Baseball</label>
复选框允许用户选择一个或多个
<label for="city">City:</label>
<select name="city" id="city">
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
</select>
选择框是选项的下拉列表
<fieldset>
<legend>Your favorite monster</legend>
<input type="radio" id="kra" name="m">
<label for="kraken">Kraken</label><br/>
<input type="radio" id="sas" name="m">
<label for="sas">Sasquatch</label>
</fieldset>
<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser"/>
<datalist id="list">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
<form action="register.php" method="post">
<label for="foo">Name:</label>
<input type="text" name="name" id="foo">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
将数据提交到服务器 重置为默认值
输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。
<input type="text" name="?" value="?" minlength="6" required />
| :- | :- |
|---|---|
type="…" |
正在输入的数据类型 |
value="…" |
默认值 |
name="…" |
用于在 HTTP 请求中描述此数据 |
id="…" |
其他 HTML 元素的唯一标识符 |
readonly |
停止用户修改 |
disabled |
停止任何交互 |
checked |
单选或复选框是否选中 |
required |
是强制性的，参阅必填 |
placeholder="…" |
添加临时，请参阅::placeholder |
autocomplete="off" |
禁用自动完成 |
autocapitalize="none" |
禁用自动大写 |
inputmode="…" |
显示特定键盘，请参阅inputmode |
list="…" |
关联的datalist的id |
maxlength="…" |
最大字符数 |
minlength="…" |
最小字符数 |
min="…" |
范围和编号上的最小数值 |
max="…" |
范围和编号上的最大数值 |
step="…" |
数字如何在范围和数字中递增 |
pattern="…" |
指定一个正则表达式，请参阅pattern |
autofocus |
集中精力 |
spellcheck |
执行拼写检查 |
multiple |
是否允许多个值 |
accept="" |
file 中需要文件类型上载控件 |
请参阅：<input>元素 的属性
type="checkbox" |
|
type="radio" |
|
type="file" |
|
type="hidden" |
|
type="text" |
|
type="password" |
|
type="image" |
|
type="reset" |
|
type="button" |
|
type="submit" |
type="color" |
|
type="date" |
|
type="time" |
|
type="month" |
|
type="datetime-local" |
|
type="week" |
|
type="email" |
|
type="tel" |
|
type="url" |
|
type="number" |
|
type="search" |
|
type="range" |
input:focus |
当键盘聚焦时 |
meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。
<meta charset="utf-8">
<!-- 标题 -->
<title>···</title>
<meta property="og:title" content="···">
<meta name="twitter:title" content="···">
<!-- url -->
<link rel="canonical" href="https://···">
<meta property="og:url" content="https://···">
<meta name="twitter:url" content="https://···">
<!-- 描述 -->
<meta name="description" content="网页描述···">
<meta property="og:description" content="···">
<meta name="twitter:description" content="···">
<!-- image -->
<meta property="og:image" content="https://···">
<meta name="twitter:image" content="https://···">
<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- viewport -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=1024">
<!-- 重定向 -->
<meta http-equiv="refresh" content="5;url=http://example.com/">
<meta name="robots" content="index,follow">
<meta name="generator" content="网站生成工具">
<meta name="csrf-token" content="token值">
<meta name="description" content="网页描述···">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="author" content="作者名">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.jpg" type="image/jpeg">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="HTML cheatsheet">
<meta property="og:url" content="https://oxings.github.io/">
<meta property="og:image" content="https://xxx.com/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page">
Facebook、Instagram、Pinterest、LinkedIn 等使用。
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@QuickRef_ME">
<meta name="twitter:title" content="HTML cheatsheet">
<meta name="twitter:url" content="https://oxings.github.io/">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="https://xxx.com/image.jpg">
请参阅：Twitter 卡片文档
<meta name="ICBM" content="45.416667,-75.7">
<meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">
请参阅：Geotagging
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <header> ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <nav> ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <section> ┆
┆╭┈┈┈┈┈┈┈┈╮╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮┆
┆┆<aside> ┆┆ <main> ┆┆
┆┆ ┆┆╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮┆┆
┆┆ ┆┆┆ <article> ┆ ┆ <aside> ┆┆┆
┆┆ ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ┆ <header> ┆ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ┆ <article> ┆ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ┆ <footer> ┆ ┆ ┆ ┆┆┆
┆┆ ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆┆┆
┆┆ ┆┆╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯┆┆
┆╰┈┈┈┈┈┈┈┈╯╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <footer> ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <header> ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆ ┆ <nav> ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <main> ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆ ┆ <article> ┆ ┆ <aside> ┆ ┆
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ ┆
┆ ┆ ┆ <header> ┆ ┆ ┆ ┆ ┆
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆ ┆
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ ┆
┆ ┆ ┆ <section> ┆ ┆ ┆ ┆ ┆
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆ ┆
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ ┆
┆ ┆ ┆ <footer> ┆ ┆ ┆ ┆ ┆
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <footer> ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮
┆ <main> ┆ ┆ <aside> ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆
┆ ┆ <header> ┆ ┆ ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆
┆ ┆ <section> ┆ ┆ ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆
┆ ┆ <footer> ┆ ┆ ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <header> ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆ ┆ <section> ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆
┆ ┆ <nav> ┆ ┆ <aside> ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆ ┆ <footer> ┆ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯