html essentials备忘单：标记、属性等

使用此HTML essentials备忘单，立即熟悉HTML标记和属性。...

构建网页从HTML开始。美化它们并使它们具有互动性将在稍后进行。但要开始创建功能性静态网站，您需要了解HTML(想快速介绍一下这种标记语言吗？阅读我们的HTML常见问题。）

作为学习该语言的一部分，有一长串的元素需要添加到HTML词汇表中。这项任务一开始看起来很艰巨，这就是为什么我们提出了下面的备忘单。它为您提供了一种在任何需要时发现/理解/调用HTML元素的简单方法。

备忘单包含用于构建网页、格式化文本、添加表单、图像、列表、链接和表格的标记和属性。它还包括HTML5和HTML代码中为常用特殊字符引入的标记。

免费下载：本备忘单可从我们的分销合作伙伴TradePub下载PDF格式。您必须填写一个简短的表格才能首次访问它。下载HTML要点备忘单。

html要点备忘单

Shortcut	Action
基本标记
<html> ... </html>	HTML文档的第一个和最后一个标记。所有其他标记位于这些开始标记和结束标记之间。
<head> ... </head>	指定文档的元数据集合。
<title> ... </title>	描述页面的标题并显示在浏览器的标题栏中。
<body> ... </body>	包括将显示在网页上的所有内容。
文件信息
<base/>	提及基本URL和文档的所有相关链接。
<meta/>	有关页面的其他信息，如作者、发布日期等。
<link/>	指向外部元素（如样式表）的链接。
<style> ... </style>	包含诸如CSS（层叠样式表）之类的文档样式信息。
<script> ... </script>	包含指向外部脚本的链接。
文本格式
<strong> ... </strong> OR <b> ... </b>	使文本加粗。
<em> ... </em>	将文本斜体化并使其加粗。
<i> ... </i>	将文本斜体化，但不使其加粗。
<strike> ... </strike>	删除文本。
<cite> ... </cite>	引用一段引文的作者。
<del> ... </del>	标记文本中已删除的部分。
<ins> ... </ins>	显示已**到内容中的节。
<blockquote> ... </blockquote>	用于显示引号。通常与标签一起使用。
<q> ... </q>	对于较短的报价。
<abbr> ... </abbr>	缩写和完整表格。
<address> ... </address>	指定联系人详细信息。
<dfn> ... </dfn>	关于定义。
<code> ... </code>	对于代码片段。
<sub> ... </sub>	用于编写下标
<sup> ... </sup>	用来写上标。
<all> ... </all>	用于减少HTML5中的文本大小和标记冗余信息。
文件结构
<h1..h6> ... </h1..h6>	不同级别的标题。H1最大，H6最小。
<div> ... </div>	用于将内容划分为块。
<span> ... </span>	包括内嵌元素，如图像、图标、表情符号，但不会破坏页面格式。
<p> ... </p>	包含纯文本。
<br/>	创建新行。
<hr/>	绘制一个水平条以显示剖面的末端。
列表
<ol> ... </ol>	用于项目的有序列表。
<ul> ... </ul>	对于无序的项目列表。
<li> ... </li>	用于列表中的单个项目。
<dl> ... </dl>	包含定义的项目列表。
<dt> ... </dt>	与正文内容内联的单个术语的定义。
<dd> ... </dd>	已定义术语的描述。
链接
<a href=””> ... </a>	超链接的锚定标记。
<a href=”mailto:”> ... </a>	用于链接到电子邮件地址的标记。
<a href=”tel://###-###”> ... </a>	用于列出联系人号码的锚标记。
<a name=”name”> ... </a>	用于链接到同一页面的另一部分的锚定标记。
<a href=”#name”> ... </a>	导航到网页的div部分(上述标签的变化）
图像
<img />	用于显示图像文件。
&lt；img&gt；标签
src=“url”	链接到图像的源路径。
alt=“text”	鼠标悬停在图像上时显示的文本。
高度=“”	以像素或百分比表示的图像高度。
宽度=“”	以像素或百分比表示的图像宽度。
align=“”	页面上图像的相对对齐方式。
border=“”	图像的边框厚度。
<map> ... </map>	链接到可单击的地图。
<map name=””> ... </map>	地图图像的名称。
<area />	图像地图的图像区域。
&lt；面积&gt；标签
shape=“”	图像区域的形状。
coords=“”	地图图像区域的坐标。
形式
<form> ... </form>	HTML表单的父标记。
&lt；表格&gt；标签
action=“url”	提交表单数据的URL。
method=“”	指定表单提交协议（POST或GET）。
enctype=“”	后期提交的数据编码方案。
自动完成	指定窗体自动完成是打开还是关闭。
诺瓦利达	指定是否应在提交前验证表单。
接受字符集	指定表单提交的字符编码。
目标	显示将显示表单提交响应的位置。
<fieldset> ... </fieldset>	将表单中的相关元素分组/
<label> ... </label>	指定用户应在每个表单字段中输入的内容。
<legend> ... </legend>	字段集元素的标题。
<input />	指定要从用户获取的输入类型。
&lt；输入&gt；标签
type=“”	确定输入的类型（文本、日期、密码）。
name=“”	指定输入字段的名称。
value=“”	指定输入字段中的值。
size=“”	设置输入字段的字符数。
maxlength=“”	设置允许的输入字符的限制。
必修的	强制输入字段。
宽度=“”	以像素为单位设置输入字段的宽度。
高度=“”	以像素为单位设置输入字段的高度。
占位符=“”	描述预期的字段值。
pattern=“”	指定可用于在用户文本中查找模式的正则表达式。
min=“”	输入元素允许的最小值。
max=“”	输入元素允许的最大值。
残废	禁用输入元素。
<textarea> ... </textarea>	用于从用户捕获更长的数据字符串。
<select> ... </select>	指定用户可以从中选择的选项列表。
&lt；选择&gt；标签
name=“”	指定下拉列表的名称。
size=“”	提供给用户的选项数。
倍数	设置用户是否可以从列表中选择多个选项。
必修的	指定表单提交是否需要选择选项。
自动对焦	指定加载页面后下拉列表自动进入焦点。
<option> ... </option>	定义下拉列表中的项。
value=“”	显示任何给定选项的文本。
挑选出来的	设置显示的默认选项。
<button> ... </button>	用于创建表单提交按钮的标记。
对象和iframe
<object> ... </object>	Describes the embedded filetype.
Attributes for the <object> tag
高度=“”	The height of the object.
宽度=“”	The width of the object.
type=“”	The type of media the object contains.
<iframe> ... </iframe>	An inline frame for embedding external information.
name=“”	The name of the iFrame.
src=””	The source URL for the content inside the frame.
srcdoc=””	The HTML content within the frame.
高度=“”	The height of the iFrame.
宽度=“”	The width of the iFrame.
<param />	Adds extra parameters to customize the iFrame.
<embed> ... </embed>	Embeds external application or plugin.
Attributes for the <object> tag
height=” “	Sets the height of the embed.
width=” “	Sets the width of the embed.
type=“”	The type or format of the embed.
src=””	The source path of the embedded file.
Tables
<table> ... </table>	Defines all content for a table.
<caption> ... </caption>	A description of the table.
<thead> ... </thead>	Headers for each column in the table.
<tbody> ... </tbody>	Defines the body data for the table.
<tfoot> ... </tfoot>	Describes the content for the table’s footer.
<tr> ... </tr>	Content for a single row.
<th> ... </th>	The data in a single header item.
<td> ... </td>	Content within a single table cell.
<colgroup> ... </colgroup>	Groups columns for formatting.
<col>	A single column of information.
HTML5 New Tags
<header> ... </header>	Specifies the webpage header.
<footer> ... </footer>	Specifies the webpage footer.
<main>...</main>	Marks main content of the webpage.
<article>...</article>	Specifies an article.
<aside> ... </aside>	Specifies sidebar content of a page.
<section>...</section>	Specifies a particular section in the webpage.
<details> ... </details>	For describing extra information.
<summary> ... </summary>	Used as a heading for the above tag. Is always visible to the user.
<dialog>...</dialog>	Creates a dialog box.
<figure>...</figure>	Used for including charts and figures.
<figcaption> ... </figcaption>	Describes a <figure> element.
<mark>...</mark>	Highlights a specific part of the text.
<nav>...</nav>	Set of navigation links on a webpage.
<menuitem>...</menuitem>	A particular item from a list or a menu.
<meter>...</meter>	Measures data within a given range.
<progress>...</progress>	Places a progress bar and tracks progress.
<rp>...</rp>	Displays text that do not support Ruby annotati***.
<rt>...</rt>	Displays East Asia typography character details.
<ruby>...</ruby>	A Ruby annotation for East Asian typography.
<time>...</time>	Identifies time and date.
<wbr>	A line break within the content.
¹HTML5 Character Objects
" ; OR &quot ;	Quotation marks
< ; OR &lt ;	Lesser than sign (<)
> ; OR &gt ;	Greater than sign (>)
; OR &nbsp ;	Non-breaking space
© ; OR &copy ;	Copyright symbol
™ ; OR &ucirc ;	Trademark symbol
@ ; OR &Uuml ;	“at” symbol (@)
& ; OR &amp ;	Ampersand symbol (&)
• ; OR &ouml ;	Small bullet
¹Ignore space before semicolon while typing HTML character.