HTML备忘单

此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。

开始

hello.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 QuickRef.ME!</h1>
</body>
</html>

注释

<!-- this is a comment -->

这段代码将会被注释掉。

段落

<p>I'm from QuickRef.ME</p>
<p>Share quick reference cheat sheet.</p>

请参阅：<p>标签

链接

<a href="https://quickref.me">QuickRef</a>
<a href="mailto:jack@abc.com">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>

`href`	超链接指向的 URL
`rel`	链接网址的关系
`target`	链接目标位置： `_self`, `_blank`, `_top`,`_parent`

请参阅：<a> 标签

图片

<img loading="lazy" src="https://xxx.png" alt="Describe image here" width="400" height="400">

`src`	必需，图像位置（URL \| 路径）
`alt`	图像描述
`width`	图像的宽度
`height`	图像的高度
`loading`	浏览器应该如何加载

请参阅：<img>标签

文本格式

<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>Emphasis - This text is emphasized</em>
<u>Underline Text</u>
<pre>Preformatted text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Marked/highlighted text</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub> Makes text subscripted</sub>
<small>Makes text smaller</small>
<pre>Pre-formatted Text</pre>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>

标题

<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>

您的页面上应该只有一个 h1

分区

`<div></div>`	页面内容的部分或部分
`<span></span>`	其他内容中的文本部分
`<p></p>`	文字段落
`<br>`	换行
`<hr>`	基本水平线

这些是用于将您的页面划分为多个部分的标签

JavaScript在HTML中

<script type="text/javascript">
    alert("Hello QuickRef.ME");
</script>

外部JavaScript

<head>
    ...
    <script src="app.js"></script>
</head>

CSS在HTML中

<style type="text/css">
    h1 {
        color: purple;
    }
</style>

外部CSS

<body>
...
<link rel="stylesheet" href="style.css"/>
</body>

内联框架

<iframe id="inlineFrameExample"
    title="YouTube video player"
    width="560"
    height="215"
    src="https://www.youtube.com/embed/HmZKgaHa3Fg"
    allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;">
</iframe>

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>

表格标签

<table>	定义一个表
<th>	定义表格中的标题单元格
<tr>	定义表格中的一行
<td>	定义表格中的单元格
<caption>	定义表格标题
<colgroup>	定义一组列
<col>	定义表中的列
<thead>	分组标题内容
<tbody>	将正文内容分组
<tfoot>	将页脚内容分组

<td> 属性

`colspan`	单元格应跨越的列数
`headers`	一个或多个与单元格相关的标题单元格
`rowspan`	单元格应跨越的行数

请参阅：<td>属性

<th> 属性

`colspan`	单元格应跨越的列数
`headers`	一个或多个与单元格相关的标题单元格
`rowspan`	单元格应跨越的行数
`abbr`	单元格内容的描述
scope	标题元素涉及

请参阅：tth>属性

HTML 列表

无序列表

<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>

请参阅：描述列表元素

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>

HTML<form>元素用于收集信息并将其发送到外部源。

表单属性

`name`	脚本形式的名称
`action`	表单脚本的 URL
`method`	HTTP 方法，`POST`/ `GET` （默认）
`enctype`	媒体类型，请参见enctype
`onsubmit`	在提交表单时运行
`onreset`	当表单被重置时运行

标签标签

<!-- Nested label -->
<label>Click me 
<input type="text" id="user" name="name"/>
</label>

<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>

for在标签中引用输入的id属性

输入标签

<label for="Name">Name:</label>
<input type="text" name="Name" id="">

请参阅：HTML 输入标签

文本区域标签

<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="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">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>Choose your favorite monster</legend>
    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>
    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>
</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="Submit">
  <input type="reset" value="Reset">
</form>

Submit到服务器的数据；Reset默认值

HTML 输入标签

输入属性

输入标签是一个空元素，标识要从用户那里获取的特定类型的字段信息。

<input type="text" name="?" value="?" minlength="6"	 required />

`type="…"`

输入的数据类型

`value="…"`

默认值

`name="…"`
用于在 HTTP 请求中描述此数据

`id="…"`
其他 HTML 元素的唯一标识符

`readonly`
阻止用户修改

`disabled`
停止任何交互

`checked`
单选或复选框选择与否

`required`
强制性

`placeholder="…"`
添加临时

`autocomplete="off"`
禁用自动完成

`autocapitalize="none"`
禁用自动大写

`inputmode="…"`
显示特定的键盘。见输入模式

`list="…"`
关联数据列表的 id

`maxlength="…"`
最大字符数

`minlength="…"`
最少字符数

`min="…"`
范围和数字上的最小数值

`max="…"`
范围和数字上的最大数值

`step="…"`
数字如何在范围和数字中递增

`pattern="…"`
指定正则表达式。查看模式

`multiple`
多个条目

`autofocus`
专注

`spellcheck`
执行拼写检查

输入类型

`type="date"`
`type="time"`
`type="month"`
`type="datetime-local"`
`type="week"`
`type="checkbox"`
`type="radio"`
`type="color"`
`type="file"`
`type="hidden"`
`type="number"`
`type="range"`
`type="text"`
`type="search"`
`type="password"`
`type="email"`
`type="tel"`
`type="url"`
`type="image"`
`type="reset"`
`type="button"`	Button
`type="submit"`

输入 CSS 选择器

:focus 当它的键盘聚焦时

另请参阅：CSS 备忘单的选择器

HTML 元标签

元标签

元标记描述 HTML 文档中的元数据。它解释了有关 HTML 的附加材料。

<meta charset='utf-8'>

<!-- title -->
<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://···'>

<!-- description -->
<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'>

OpenGraph

<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="Title of this page, same as title tag">
<meta property="og:url" content="http://fullurl.com/to-this/page/">
<meta property="og:image" content="http://fullurl.com/to-this/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page, same as meta description">

被 Facebook、Instagram、Pinterest、LinkedIn 等使用。

Twutter Cards 推特卡片

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:title" content="Title of this page, same as title tag">
<meta name="twitter:url" content="http://fullurl.com/to-this/page/">
<meta name="twitter:description" content="Description of this page, same as meta description">
<meta name="twitter:image" content="http://fullurl.com/to-this/image.jpg">

请参阅：推特卡片文档

Geotagging 地理标记

<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">

请参阅：地理标记

另见

HTML 4.01 规范 (w3.org)

`type="…"`	输入的数据类型
`value="…"`	默认值
`name="…"`	用于在 HTTP 请求中描述此数据
`id="…"`	其他 HTML 元素的唯一标识符
`readonly`	阻止用户修改
`disabled`	停止任何交互
`checked`	单选或复选框选择与否
`required`	强制性
`placeholder="…"`	添加临时
`autocomplete="off"`	禁用自动完成
`autocapitalize="none"`	禁用自动大写
`inputmode="…"`	显示特定的键盘。见输入模式
`list="…"`	关联数据列表的 id
`maxlength="…"`	最大字符数
`minlength="…"`	最少字符数
`min="…"`	范围和数字上的最小数值
`max="…"`	范围和数字上的最大数值
`step="…"`	数字如何在范围和数字中递增
`pattern="…"`	指定正则表达式。查看模式
`multiple`	多个条目
`autofocus`	专注
`spellcheck`	执行拼写检查

w3cschool 编程狮，随时随地学编程

HTML备忘单

开始

hello.html

注释

段落

链接

图片

文本格式

标题

分区

JavaScript在HTML中

外部JavaScript

CSS在HTML中

外部CSS

内联框架

<iframe id="inlineFrameExample" title="YouTube video player" width="560" height="215" src="https://www.youtube.com/embed/HmZKgaHa3Fg" allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"> </iframe>

HTML 表格

表格示例

表格标签

<td> 属性

<th> 属性

HTML 列表

无序列表

有序列表

定义列表

HTML 表单

表单标签

表单属性

标签标签

输入标签

文本区域标签

单选按钮

复选框

选择标签

字段集标签

数据列表标签

提交和重置按钮

HTML 输入标签

输入属性

输入类型

输入 CSS 选择器

HTML 元标签

元标签

OpenGraph

Twutter Cards 推特卡片

Geotagging 地理标记

另见

HTML 教程

HTML XHTML

HTML 媒体

HTML 实例/测验

HTML 相关教程

HTML 拓展阅读

`<iframe id="inlineFrameExample" title="YouTube video player" width="560" height="215" src="https://www.youtube.com/embed/HmZKgaHa3Fg" allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"> </iframe>`