logo
🎨 前端开发

HTML

HTML Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。

📂 分类 · 前端开发🧭 Markdown 速查🏷️ 2 个标签
#html#markup
向下滚动查看内容
返回全部 Cheat Sheets

Getting Started

hello.html
HTML
滚动查看更多
<!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 CheatSheets.zip!</h1>
	</body>
</html>

Or try it out in the jsfiddle

Comment
HTML
滚动查看更多
<!-- this is a comment -->

<!--
    Or you can comment out a
    large number of lines.
-->
Paragraph
HTML
滚动查看更多
<p>I'm from CheatSheets.zip</p>
<p>Share quick reference cheat sheet.</p>

See: The Paragraph element

HTML link
HTML
滚动查看更多
<a href="https://cheatsheets.zip">CheatSheets</a>
<a href="mailto:jack@abc.com">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
hrefThe URL that the hyperlink points to
relRelationship of the linked URL
targetLink target location: <br/>_self, _blank, _top, _parent

{.left-text}

See: The <a> Attributes

Image Tag
HTML
滚动查看更多
<img loading="lazy" src="https://xxx.png" alt="Describe image here" width="400" height="400" />
srcRequired, Image location (URL | Path)
altDescribe of the image
widthWidth of the image
heightHeight of the image
loadingHow the browser should load

{.left-text}

See: The Image Embed element

Text Formatting Tags
HTML
滚动查看更多
<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>This text is emphasized</em>
<u>Underline Text</u>
<pre>Pre-formatted Text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Highlighted text (HTML5)</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub>Makes text subscripted</sub>
<small>Makes text smaller</small>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>
Headings
HTML
滚动查看更多
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

You should only have one h1 on your page

Section Divisions
<div></div>Division or Section of Page Content
<span></span>Section of text within other content
<p></p>Paragraph of Text
<br>Line Break
<hr>Basic Horizontal Line

These are the tags used to divide your page up into sections

Inline Frame
HTML
滚动查看更多
<iframe
	title="New York"
	width="342"
	height="306"
	id="gmap_canvas"
	src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
	scrolling="no"
>
</iframe>

↓ Preview

<iframe title="New York" width="342" height="306" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" scrolling="no"> </iframe>

See: The Inline Frame element

JavaScript in HTML
HTML
滚动查看更多
<script type="text/javascript">
	let text = 'Hello CheatSheets.zip';
	alert(text);
</script>

External JavaScript

HTML
滚动查看更多
<body>
	...

	<script src="app.js"></script>
</body>
CSS in HTML
HTML
滚动查看更多
<style type="text/css">
	h1 {
		color: purple;
	}
</style>

External stylesheet

HTML
滚动查看更多
<head>
	...
	<link rel="stylesheet" href="style.css" />
</head>

HTML5 Tags

Document
HTML
滚动查看更多
<body>
	<header>
		<nav>...</nav>
	</header>
	<main>
		<h1>CheatSheets.zip</h1>
	</main>
	<footer>
		<p>©2023 CheatSheets.zip</p>
	</footer>
</body>
Header Navigation
HTML
滚动查看更多
<header>
	<nav>
		<ul>
			<li><a href="#">Edit Page</a></li>
			<li><a href="#">Twitter</a></li>
			<li><a href="#">Facebook</a></li>
		</ul>
	</nav>
</header>
HTML5 Tags
articleContent that’s independent
asideSecondary content
audioEmbeds a sound, or an audio stream
bdiThe Bidirectional Isolate element
canvasDraw graphics via JavaScript
dataMachine readable content
datalistA set of pre-defined options
detailsAdditional information
dialogA dialog box or sub-window
embedEmbeds external application
figcaptionA caption or legend for a figure
figureA figure illustrated
footerFooter or least important
headerMasthead or important information
mainThe main content of the document
markText highlighted
meterA scalar value within a known range
navA section of navigation links
outputThe result of a calculation
pictureA container for multiple image sources
progressThe completion progress of a task
rpProvides fall-back parenthesis
rtDefines the pronunciation of character
rubyRepresents a ruby annotation
sectionA group in a series of related content
sourceResources for the media elements
summaryA summary for the <details> element
templateDefines the fragments of HTML
timeA time or date
trackText tracks for the media elements
videoEmbeds video
wbrA line break opportunity
HTML5 Video
HTML
滚动查看更多
<video controls="" width="100%">
	<source
		src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
		type="video/mp4"
	/>
	Sorry, your browser doesn't support embedded videos.
</video>

↓ Preview

<video controls="" width="100%"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos. </video>
HTML5 Audio
HTML
滚动查看更多
<audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
	Your browser does not support the audio element.
</audio>

↓ Preview

<audio controls class="w-full" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"> Your browser does not support the audio element. </audio>

HTML5 Ruby
HTML
滚动查看更多
<ruby> 汉 <rp>(</rp><rt>hàn</rt><rp>)</rp> 字 <rp>(</rp><rt>zì</rt><rp>)</rp> </ruby>

↓ Preview

<ruby class="mt-4 text-center text-5xl"> 汉 <rp>(</rp><rt>hàn</rt><rp>)</rp> 字 <rp>(</rp><rt>zì</rt><rp>)</rp> </ruby>
HTML5 kdi
HTML
滚动查看更多
<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>

↓ Preview

<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>
HTML5 progress
HTML
滚动查看更多
<progress value="50" max="100"></progress>

<progress value="50" max="100" class="w-full"></progress>

HTML5 mark
HTML
滚动查看更多
<p>I Love <mark>CheatSheets.zip</mark></p>
<p>I Love <mark>CheatSheets.zip</mark></p>

HTML Tables

Table Example
HTML
滚动查看更多
<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>
HTML Table Tags
TagDescription
<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<caption>Defines a table caption
<colgroup>Defines a group of columns
<col>Defines a column within a table
<thead>Groups the header content
<tbody>Groups the body content
<tfoot>Groups the footer content
\<td> Attributes
AttributeDescription
colspanNumber of columns a cell should span
headersOne or more header cells a cell is related to
rowspanNumber of rows a cell should span

See: td#Attributes

\<th> Attributes
AttributeDescription
colspanNumber of columns a cell should span
headersOne or more header cells a cell is related to
rowspanNumber of rows a cell should span
abbrDescription of the cell's content
scopeThe header element relates to

See: th#Attributes

HTML Lists

Unordered list
HTML
滚动查看更多
<ul>
	<li>I'm an item</li>
	<li>I'm another item</li>
	<li>I'm another item</li>
</ul>

See: The Unordered List element

Ordered list
HTML
滚动查看更多
<ol>
	<li>I'm the first item</li>
	<li>I'm the second item</li>
	<li>I'm the third item</li>
</ol>

See: The Ordered List element

Definition list
HTML
滚动查看更多
<dl>
	<dt>A Term</dt>
	<dd>Definition of a term</dd>
	<dt>Another Term</dt>
	<dd>Definition of another term</dd>
</dl>

See: The Description List element

HTML Forms

Form tags
HTML
滚动查看更多
<form method="POST" action="api/login">
	<label for="mail">Email: </label>
	<input type="email" id="mail" name="mail" />
	<br />
	<label for="pw">Password: </label>
	<input type="password" id="pw" name="pw" />
	<br />
	<input type="submit" value="Login" />
	<br />
	<input type="checkbox" id="ck" name="ck" />
	<label for="ck">Remember me</label>
</form>

↓ Preview

<form method="POST" action="api/login" style="padding: 20px;"> <label for="email">Email: </label> <input type="email" id="email" name="email" class="border border-slate-400 mt-2"> <br/> <label for="pwd">Password: </label> <input type="password" id="pwd" name="pwd" class="border border-slate-400 mt-2"> <br/> <input type="submit" value="Login" class="mt-2"> <br/> <input type="checkbox" id="ck" name="ck" class="mt-2"> <label for="ck">Remember me</label> </form>

The HTML <form> element is used to collect and send information to an external source.

Form Attribute
AttributeDescription
nameName of form for scripting
actionURL of form script
methodHTTP method, POST / GET (default)
enctypeMedia type, See enctype
onsubmitRuns when the form was submit
onresetRuns when the form was reset
Label tags
HTML
滚动查看更多
<!-- Nested label -->
<label
	>Click me
	<input type="text" id="user" name="name" />
</label>
HTML
滚动查看更多
<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name" />

for in a label references an input's id attribute

Input tags
HTML
滚动查看更多
<label for="Name">Name:</label> <input type="text" name="Name" id="" />

↓ Preview

<form style="padding: 20px;"> <label for="username">Username:</label> <input type="text" name="username" id="username" class="border border-slate-400"> </form>

See: HTML input Tags

Textarea tags
HTML
滚动查看更多
<textarea rows="2" cols="30" name="address" id="address"></textarea>

↓ Preview

<form style="padding: 20px;"> <textarea rows="2" cols="30" name="address" id="address" class="border border-slate-400"style="width: 100%"></textarea> </form>

Textarea is a multiple-line text input control

Radio Buttons
HTML
滚动查看更多
<input type="radio" name="gender" id="m" />
<label for="m">Male</label>
<input type="radio" name="gender" id="f" />
<label for="f">Female</label>

↓ Preview

<form style="padding: 20px;"> <input type="radio" name="gender" id="m"> <label for="m">Male</label> <input type="radio" name="gender" id="f"> <label for="f">Female</label> </form>

Radio buttons are used to let the user select exactly one

Checkboxes
HTML
滚动查看更多
<input type="checkbox" name="s" id="soc" />
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas" />
<label for="bas">Baseball</label>

↓ Preview

<form style="padding: 20px;"> <input type="checkbox" name="sports" id="soccer"> <label for="soccer">Soccer</label> <input type="checkbox" name="sports" id="baseball"> <label for="baseball">Baseball</label> </form>

Checkboxes allows the user to select one or more

Select tags
HTML
滚动查看更多
<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>

↓ Preview

<form style="padding: 20px"> <label for="city">City:</label> <select name="city" id="city" class="border border-slate-400"> <option value="1">Sydney</option> <option value="2">Melbourne</option> <option value="3">Cromwell</option> </select> </form>

A select box is a dropdown list of options

Fieldset tags
HTML
滚动查看更多
<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>

↓ Preview

<form style="padding: 20px"> <fieldset class="border border-slate-400" style="padding: 20px"> <legend>Your favorite monster</legend> <input type="radio" id="kra" name="monster"> <label for="kra">Kraken</label><br/> <input type="radio" id="sas" name="monster"> <label for="sas">Sasquatch</label> </fieldset> </form>
Datalist tags(HTML5)
HTML
滚动查看更多
<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser" />
<datalist id="list">
	<option value="Chrome"></option>
	<option value="Firefox"></option>
	<option value="Internet Explorer"></option>
	<option value="Opera"></option>
	<option value="Safari"></option>
	<option value="Microsoft Edge"></option>
</datalist>

↓ Preview

<form style="padding: 20px"> <label for="myBrowser">Choose a browser:</label> <input list="browsers" id="myBrowser" name="myBrowser" class="border border-slate-400"/> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist> </form>
Submit and Reset Buttons
HTML
滚动查看更多
<form action="register.php" method="post">
	<label for="foo">Name:</label>
	<input type="text" name="name" id="foo" />
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset" />
</form>

↓ Preview

<form action="register.php" method="post" style="padding: 20px"> <label for="name">Name:</label> <input type="text" name="name" id="name" class="border border-slate-400"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form>

Submit the data to server; Reset to default values

HTML input Tags

Input Attributes

The input tag is an empty element, identifying the particular type of field information to obtain from a user.

HTML
滚动查看更多
<input type="text" name="?" value="?" minlength="6" required />
-
type="…"The type of data that is being input
value="…"Default value
name="…"Used to describe this data in the HTTP request
id="…"Unique identifier that other HTML elements
readonlyStops the user from modifying
disabledStops any interaction
checkedThe radio or checkbox select or not
requiredBeing compulsory, See required
placeholder="…"Adds a temporary, See ::placeholder
autocomplete="off"Disable auto completion
autocapitalize="none"Disable auto capitalization
inputmode="…"Display a specific keyboard, See inputmode
list="…"The id of an associated datalist
maxlength="…"Maximum number of characters
minlength="…"Minimum number of characters
min="…"Minimum numerical value on range & number
max="…"Maximum numerical value on range & number
step="…"How the number will increment in range & number
pattern="…"Specifies a Regular expression, See pattern
autofocusBe focused
spellcheckPerform spell checking
multipleWhether to allow multiple values
accept=""Expected file type in file upload controls

{.left-text}

Also see: Attributes for the <input> element

Input types
type="checkbox"<input type="checkbox" class="border border-slate-400">
type="radio"<input type="radio" class="border border-slate-400">
type="file"<input type="file" class="border border-slate-400">
type="hidden"<input type="hidden" class="border border-slate-400">
type="text"<input type="text" class="border border-slate-400">
type="password"<input type="password" class="border border-slate-400">
type="image"<input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70">
type="reset"<input type="reset" class="border border-slate-400">
type="button"<input type="button" class="border border-slate-400" value="button">
type="submit"<input type="submit" class="border border-slate-400">

New Input Types in HTML5

type="color"<input type="color" value="#0FB881" class="border border-slate-400">
type="date"<input type="date" class="border border-slate-400">
type="time"<input type="time" class="border border-slate-400">
type="month"<input type="month" class="border border-slate-400">
type="datetime-local"<input type="datetime-local" class="border border-slate-400">
type="week"<input type="week" class="border border-slate-400">
type="email"<input type="email" class="border border-slate-400">
type="tel"<input type="tel" class="border border-slate-400">
type="url"<input type="url" class="border border-slate-400">
type="number"<input type="number" class="border border-slate-400">
type="search"<input type="search" class="border border-slate-400">
type="range"<input type="range" class="border border-slate-400">
Input CSS selectors
input:focusWhen its keyboard focused

See: Input pseudo classes

HTML meta Tags

Meta tags

The meta tag describes meta data within an HTML document. It explains additional material about the HTML.

HTML
滚动查看更多
<meta charset="utf-8" />
HTML
滚动查看更多
<!-- title -->
<title>···</title>
<meta property="og:title" content="···" />
<meta name="twitter:title" content="···" />
HTML
滚动查看更多
<!-- url -->
<link rel="canonical" href="https://···" />
<meta property="og:url" content="https://···" />
<meta name="twitter:url" content="https://···" />
HTML
滚动查看更多
<!-- description -->
<meta name="description" content="···" />
<meta property="og:description" content="···" />
<meta name="twitter:description" content="···" />
HTML
滚动查看更多
<!-- image -->
<meta property="og:image" content="https://···" />
<meta name="twitter:image" content="https://···" />
HTML
滚动查看更多
<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
HTML
滚动查看更多
<!-- viewport -->
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=1024" />
Open Graph
HTML
滚动查看更多
<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://cheatsheets.zip/html" />
<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" />

Used by Facebook, Instagram, Pinterest, LinkedIn, etc.

Twitter Cards
HTML
滚动查看更多
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@FechinLi" />
<meta name="twitter:title" content="HTML cheatsheet" />
<meta name="twitter:url" content="https://cheatsheets.zip/html" />
<meta name="twitter:description" content="Description of this page" />
<meta name="twitter:image" content="https://xxx.com/image.jpg" />

See: Twitter Card Documentation

Geotagging
HTML
滚动查看更多
<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" />

See: Geotagging

Also see

相关 Cheat Sheets

React

reacthooks

Vue.js

vueframework

Svelte

svelte

CSS 3

cssstyling

Sass

sassscss
1v1免费职业咨询
logo

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-airwallex.png/image/layout/pay-alipay.png

关于公司

关于我们元宇宙课堂新闻资讯匠人工作成为导师匠人导师联系我们匠人商店J3.Club

匠人资源

工作内推匠人活动1对1私教行业白皮书线上学习平台分享面试经验Internship

大学资源

墨尔本大学昆士兰大学新南威尔士大学悉尼大学莫那什大学阿德莱德大学RMITQUTUTS

移民服务

澳洲移民技术移民189/190/491雇主担保482/186/494投资移民188/888英国移民美国移民加拿大移民

企业合作

P3职业孵化器Enterprise (EN)企业培训实习合作招聘合作申请合作

求职代理

岗位代投职位监控LinkedIn代运营LinkedIn人脉代加了解P3项目

匠人支持

FAQsTerms & ConditionsPrivacy PolicyCancellation & Refund PolicySite map

Top Categories

Web全栈班DevOps项目班数据工程全栈班数据分析项目班编程入门班Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 2, 171 La Trobe St, Melbourne VIC 3000
四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号
Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au0421-672-555

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容，包括课程材料、徽标和匠人学院网站上提供的信息，均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站，您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利，包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2025 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572