此 HTML 快速參考備忘單以可讀布局列出了常見的 HTML 和 HTML5 標(biāo)記。
<!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/jaywcjlove/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 的關(guān)系 |
target | 鏈接目標(biāo)位置：_self/_blank/_top/_parent |
請參閱：<a> 屬性
<img loading="lazy"
src="https://xxx.png"
alt="在此處描述圖像"
width="400" height="400">
src (URL/路徑) | 必填，圖片位置 | |
alt | 描述圖像 | |
width | 圖像寬度 | |
height | 圖像高度 | |
loading | 瀏覽器應(yīng)該如何加載 |
請參閱：圖像嵌入元素
<b>粗體文字</b>
<strong>這段文字很重要</strong>
<i>斜體文本</i>
<em>這段文字被強調(diào)</em>
<u>下劃線文本</u>
<pre>預(yù)格式化文本</pre>
<code>源代碼</code>
<del>刪除的文字</del>
<mark>突出顯示的文本 (HTML5)</mark>
<ins>插入的文本</ins>
<sup>使文本上標(biāo)</sup>
<sub>使文本下標(biāo)</sub>
<small>使文本變小</small>
<pre>預(yù)格式化文本</pre>
<kbd>Ctrl</kbd>
<blockquote>文本塊引用</blockquote>
<h1> 這是標(biāo)題 1 </h1>
<h2> 這是標(biāo)題 2 </h2>
<h3> 這是標(biāo)題 3 </h3>
<h4> 這是標(biāo)題 4 </h4>
<h5> 這是標(biāo)題 5 </h5>
<h6> 這是標(biāo)題 6 </h6>
您的頁面上應(yīng)該只有一個 h1
| :- | :- |
|---|---|
<div></div> | 頁面內(nèi)容的劃分或部分 |
<span></span> | 其他內(nèi)容中的文本部分 |
<p></p> | 文本段落 |
<br> | 換行 |
<hr> | 水平分割線 |
這些標(biāo)簽用于將頁面劃分為多個部分
<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 | 獨立的內(nèi)容 |
| aside | 次要內(nèi)容 |
| audio | 嵌入聲音或音頻流 |
| bdi | 雙向隔離元件 |
| canvas | 通過JavaScript繪制圖形 |
| data | 機器可讀內(nèi)容 |
| datalist | 一組預(yù)定義選項 |
| details | 其他信息 |
| dialog | 對話框或子窗口 |
| embed | 嵌入外部應(yīng)用程序 |
| figcaption | 圖形的標(biāo)題或圖例 |
| figure | 插圖 |
| footer | 頁腳或最不重要的 |
| header | 刊頭或重要信息 |
| main | 文件的主要內(nèi)容 |
| mark | 突出顯示的文本 |
| meter | 已知范圍內(nèi)的標(biāo)量值 |
| nav | 導(dǎo)航鏈接的一部分 |
| output | 計算的結(jié)果 |
| picture | 用于多個圖像源的容器 |
| progress | 任務(wù)的完成進度 |
| rp | 提供回退括號 |
| rt | 定義字符的發(fā)音 |
| ruby | 表示ruby注釋 |
| section | 一系列相關(guān)內(nèi)容中的組 |
| 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 | 單元格應(yīng)跨越的列數(shù) |
headers | 單元格與一個或多個標(biāo)題單元格相關(guān) |
rowspan | 單元格應(yīng)跨越的行數(shù) |
請參閱：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> 元素用于收集信息并將其發(fā)送到外部源。
| 屬性 | 說明 |
|---|---|
name | 腳本形式的名稱 |
action | 表單腳本的URL |
method | HTTP方法，POST/GET (默認) |
enctype | 介質(zhì)類型，請參見enctype |
onsubmit | 提交表單時運行 |
onreset | 在窗體重置時運行 |
<!-- 嵌套標(biāo)簽 -->
<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在標(biāo)簽中引用輸入的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>
復(fù)選框允許用戶選擇一個或多個
<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>
將數(shù)據(jù)提交到服務(wù)器 重置為默認值
輸入標(biāo)記是一個空元素，用于標(biāo)識要從用戶處獲取的特定類型的字段信息。
<input type="text" name="?" value="?" minlength="6" required />
| :- | :- |
|---|---|
type="…" | 正在輸入的數(shù)據(jù)類型 |
value="…" | 默認值 |
name="…" | 用于在 HTTP 請求中描述此數(shù)據(jù) |
id="…" | 其他 HTML 元素的唯一標(biāo)識符 |
readonly | 停止用戶修改 |
disabled | 停止任何交互 |
checked | 單選或復(fù)選框是否選中 |
required | 是強制性的，參閱必填 |
placeholder="…" | 添加臨時，請參閱::placeholder |
autocomplete="off" | 禁用自動完成 |
autocapitalize="none" | 禁用自動大寫 |
inputmode="…" | 顯示特定鍵盤，請參閱inputmode |
list="…" | 關(guān)聯(lián)的datalist的id |
maxlength="…" | 最大字符數(shù) |
minlength="…" | 最小字符數(shù) |
min="…" | 范圍和編號上的最小數(shù)值 |
max="…" | 范圍和編號上的最大數(shù)值 |
step="…" | 數(shù)字如何在范圍和數(shù)字中遞增 |
pattern="…" | 指定一個正則表達式，請參閱pattern |
autofocus | 集中精力 |
spellcheck | 執(zhí)行拼寫檢查 |
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 | 當(dāng)鍵盤聚焦時 |
meta 標(biāo)記描述 HTML 文檔中的元數(shù)據(jù)。它解釋了關(guān)于 HTML 的其他材料。
<meta charset="utf-8">
<!-- 標(biāo)題 -->
<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 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://jaywcjlove.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://jaywcjlove.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