HTML 速查表

上一页
下一页

这份 HTML 速查表是 HTML 教程 的摘要。在这里，您可以找到有关 HTML 概念的快速信息，从基本结构到高级元素。

基本的 HTML 结构

以下是 HTML 文档的基本结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage's Page Title</title>
  </head>
  <body>
    <!-- Webpage's content goes here -->
  </body>
</html>

标题标签

以下是六个 HTML 标题标签，其中<h1>是网页的主标题，<h6>是最小的标题，字体最小

标题 1 (<h1> 标签)

<h1>Heading 1</h1>

标题 2 (<h2> 标签)

<h2>Heading 2</h2>

标题 3 (<h3> 标签)

<h3>Heading 3</h3>

标题 4 (<h4> 标签)

<h4>Heading 4</h4>

标题 5 (<h5> 标签)

<h5>Heading 5</h5>

标题 6 (<h6> 标签)

<h6>Heading 6</h6>

段落

<p>标签用于将内容放在 段落 中。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis mattis nisi, at facilisis nunc tempus sed. Duis sagittis odio ac neque tempor iaculis. Fusce et arcu consequat, pretium lectus ut, venenatis leo. Phasellus libero enim, semper ut luctus a, pretium in turpis. Donec eget ultricies arcu, et suscipit nisi. Ut et neque posuere, lacinia dui vitae, varius tellus. Mauris placerat, leo sed pretium viverra, massa ante ultricies orci, quis vehicula ex elit et ligula. Nullam ac lectus semper, aliquet neque sit amet, cursus urna. Aenean faucibus dignissim orci sed malesuada. Maecenas arcu erat, aliquam eget lacus non, malesuada consectetur tellus. Fusce non eros et dui ultrices consequat. Vivamus rutrum lobortis purus, ut cursus massa malesuada vel.</p>
<p>Morbi sollicitudin luctus velit, eget maximus ex accumsan at. Sed interdum felis a erat tempor, et hendrerit sapien lacinia. Maecenas imperdiet lacinia ante ut congue. Vestibulum vehicula vulputate dolor non hendrerit.</p>

文本格式化标签

1. <b>

此标签使包含的文本显示为粗体。

<p><b>This is bold text</b></p>

2. <i>

此标签用于使包含的文本显示为斜体。

<p><i>This is italic text</i></p>

3. <u>

<u>标签为文本添加下划线。

<p><u>This is underlined text</u></p>

4. <strong>

<strong>标签用于语义上重要的文本。

<p><strong>This is important bold text</strong></p>

5. <em>

<em>标签用于强调文本。

<p><em>This is emphasized italic text</em></p>

5. <sub>

<sub>标签用于下标文本。

<p>H<sub>2</sub>O</p>

6. <sup>

<sup>标签用于上标文本。

<p>x<sup>2</sup> (x squared)</p>

7. <strike>

<strike>标签显示带有删除线的文本。

<p><strike>This is strikethrough text</strike></p>

8. <mark>

<mark>标签用于高亮显示或标记文本。

<p><mark>This text is highlighted</mark></p>

列表标签

HTML 提供了两种列表标签：<ul> 和 <ol>。<ul>标签显示无序列表（显示项目符号），<ol>标签显示有序列表（显示数字）。

无序列表

<ul>标签定义一个 无序列表，它用项目符号显示列表项。

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

有序列表

<ol>标签定义一个 有序列表，它用数字显示列表项。

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

链接 (锚点) 标签

要使用文本、图片或任何其他 HTML 元素链接不同的内部或外部网页，请使用<a>标签。<a>标签定义锚点链接。

<a>标签的属性：

  • href：用于定义目标页面的链接。
  • title：用于放置鼠标悬停在链接上时要显示的文本。
  • target：用于定义要在何处打开链接（在同一标签页或在新标签页中）。
<p>Open TutorialsPoint by clicking on the following link:</p>
<p><a href="https://tutorialspoint.com/" target="_blank" title="Open TutorialsPoint">Open TutorialsPoint</a></p>

容器标签

HTML 容器标签用作父元素以包含其他 HTML 标签。这些标签用于在网页上定义多个部分。

有很多容器标签，例如<div>、<span>、<p>等。

<div> 标签

<div> 标签定义网页上的分区（或块）。

<div>
  <p>Paragraph inside div</p>
  <ul>
    <li>Item 1</li>
    <li>Item 1</li>
 </ul>
</div>

<span> 标签

<span> 标签可以在其中包含各种元素。当您想将特定样式应用于文本的一部分时，可以使用它。

<p>Hello, World: This is <span style="background-color:#f40;color:#fff;padding:8px;">HTML Cheatsheet</span>.</p>

<p> 标签

<p> 标签也可以用作容器标签，您可以在其中使用其他标签，例如<span>、<a>、<button>等。

<p>Take a variable <span class="tp-codespan">x</span> and assign <strong>100</strong> in it.</p>

<pre> 标签

<pre> 标签用于保留格式，也可以用于在网页上显示编程代码。

<pre>
Hello World
    Hello World
        Hello World
            Hello World
        Hello World
    Hello World
Hello World    
</pre>

<code> 标签

<code> 标签用于显示源代码。

<code>#include <stdio.h></code>

图片

<img> 标签在网页上插入图片。以下是<img>标签的属性：

  • src：定义图片的源（路径）。
  • alt：定义当找不到图片时要在网页上显示的替代文本。
  • title：定义鼠标悬停在图片上时显示的标题。

阅读更多： HTML 图片

<img src="/html/images/html-mini-logo.jpg" alt="logo" title="logo"/>

表格

HTML <table> 标签用于以表格格式显示数据。以下标签与<table>标签一起使用：

  • <thead>：定义表头。
  • <tbody>：定义表体。
  • <tr>：定义表格中的一行。
  • <th>：定义<tr>标签内的表格单元格（称为表头）。
  • <td>：定义<tr>标签内的表格单元格（称为表格数据）。
  • <caption>：定义表格的标题。

表格结构

表格结构如下：

<table>
    <caption>Table Structure</caption>
    <thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  </tbody>
</table>

表格标签属性

以下是可与<table>标签一起使用的常用属性。

注意：这些属性在 HTML5 中已被弃用。

属性 描述 示例 状态
border 定义表格边框的粗细。 <table border="1"> 已弃用
cellpadding 定义表格单元格内的填充。 <table cellpadding="10"> 已弃用
cellspacing 定义表格单元格之间的间距。 <table cellspacing="5"> 已弃用
width 定义表格的宽度。 <table width="100%"> 已弃用
height 定义表格的高度。 <table height="300"> 已弃用
align 定义表格的对齐方式。 <table align="center"> 已弃用
bgcolor 定义表格的背景颜色。 <table bgcolor="#f0f0f0"> 已弃用
summary 提供表格用途的摘要。 <table summary="Sales data for Q1"> 已弃用
bordercolor 定义表格边框的颜色。 <table border="1" bordercolor="blue"> 已弃用

引用和引文元素

以下是引用和引文标签：

1. <blockquote> 和 <cite> 标签

<blockquote>定义引用文本，<cite>定义作品的标题。

<blockquote>
Education is the most powerful weapon which you can use to change the world.
</blockquote>

<p><cite>Programming in ANSI C</cite> was written by E. Balagurusamy.</p>

2. <q> 标签

<q> 标签用于定义简短的引用。

<p>Here is: <q>Live as if you were to die tomorrow</q></p>

3.<abbr> 标签

<abbr> 标签用于定义缩写或首字母缩写。

<p>The <abbr title="HyperText Markup Language">HTML</abbr> was founded in 1993.</p>

4. <address> 标签

<address> 标签用于定义联系信息。

<address>
Written by SUDHIR SHARMA.<br>
Visit us at:<br>
tutorialspoint.com<br>
Madhapur, Hyderabad<br>
India
</address>

5. <bdo> 标签

<bdo> 标签用于覆盖当前文本方向。

<bdo dir="rtl">HTML stands for Hyper Text Markup Language</bdo>

注释

使用<!--和-->在 HTML 文档中添加注释。

<!--This is comment-->

实体

1. 字符实体

HTML 字符实体可以与&（&号）一起使用。

<p>This is RIGHT ARROW: →</p>
<p>This is LEFT ARROW: ←</p>
<p>This is BLACK SUN WITH RAYS: ☀</p>
<p>This WHITE UP POINTING INDEX: ☝</p>

2. 不换行空格

使用&nbsp;实体显示不换行空格。

<p>ABC        XYZ</p>

3. 小于号和大於号

要显示小于号和大於号字符，可以使用&lt;和&gt;。

<p>The <BODY> tag defines body of the webpage.</p>

HTML 快速参考

查找不同 HTML 标签、元素、属性等的快速参考。

   

基本标签

以下是HTML文档的基本必备标签

标签 描述 示例
<html>..</html> 此标签用作HTML文档的根元素，将所有其他元素封装在其中。
<head>..</head> 'head'标签包含有关文档的元信息，这些信息不会直接显示在页面上。
<body>..</body> 设置文档的可见部分。
<title>..</title> 将文档名称放在标题栏中，在收藏页面时，这就是被收藏的内容，并在浏览器的标签页上显示。

主体属性

众所周知，body部分是任何网站的主要部分。一些属性可以应用于<body>标签。强烈建议不要将这些属性用于开发实际网站，而只用于电子邮件简报。

属性 描述 示例
<body bgcolor=""> HTML bgcolor 设置文档的背景颜色，使用颜色名称或十六进制值。
<body text=""> HTML text 属性用于定义正文内文本的颜色，默认值为黑色。
<body link=""> 用于设置正文内超链接的颜色，使用颜色名称或十六进制值。
<body vlink=""> 用于指定已访问超链接的颜色，使用颜色名称或十六进制值。
<body alink=""> 定义活动链接的颜色（鼠标点击时）。

文本标签

以下是使文本美观易读的不同文本标签

标签和属性 描述 示例
<pre>..</pre> HTML pre 标签用于创建预格式化的文本。
<h1>..</h1> 到 <h6>..</h6> 创建不同大小的标题——H1=最大，H6=最小
<b>..</b> b 标签用于创建粗体文本（应使用<strong>代替）。
<i>..</i> 创建斜体文本（应使用<em>代替）。
<tt>..</tt> 用于创建打字机风格的文本。
<code>..</code> 用于定义源代码，通常是等宽字体。
<cite>..</cite> 创建引用，通常以斜体处理。
<address>..</address> 创建地址部分，通常以斜体处理。
<em>..</em> 强调一个词（通常以斜体处理）。
<strong>..</strong> 强调一个词（通常以粗体处理）
<font size="">..</font> 设置字体大小 - 1 到 7（建议使用 CSS 代替）。
<font color="">..</font> 用于定义字体颜色（应使用 CSS 代替）。
<font face="">..</font> 定义使用的字体（应使用 CSS 代替）。

HTML链接，也称为超链接，是万维网的一项基本功能。它们允许用户在不同的网页、网站或同一文档的不同部分之间导航。

属性 描述 示例
<a href="URL">可点击文本</a> 创建一个指向统一资源定位符的超链接。
<a href="mailto:email_address">可点击文本</a> 创建一个指向指定电子邮件地址的超链接。
<a name="NAME"> 在文档中创建一个目标位置
<a href="#NAME">可点击文本</a> 创建一个指向该目标位置的链接。

文本和布局

HTML中的文本和布局涉及使用各种标签来定义文本的结构、外观和语义含义。以下是一些最常用的HTML文本格式化标签。

标签 描述 示例
<p>..</p> P标签用于在文档中定义一个新段落
<br> br标签用于在两行之间插入换行符。
<blockquote>..</blockquote> 将内容放在引号中 - 从两侧缩进文本。
<div>..</div> div标签用于使用CSS格式化块内容。
<span>..</span> span标签用于使用CSS格式化内联内容和块内容。

列表

在HTML中，列表用于对一组相关项目进行分组。主要有三种类型的列表：**有序列表**、**无序列表**和**描述列表**。每种列表都有不同的用途，并使用特定的HTML标签进行标记。

标签 描述 示例
<ul>..</ul> HTML中的ul标签用于创建无序列表，即没有编号的列表。
<ol start="">..</ol> ol标签用于创建有序列表（start=xx，其中xx是一个计数数字）。
<li>..</li> li标签定义无序列表和有序列表中的每个项目。
<dl>..</dl> dl标签用于创建一个定义列表，一个标题及其定义。
<dt> dt标签定义定义列表的标题元素。
<dd> dd标签定义定义列表的定义元素。

水平线和图像属性

以下是自定义水平线（例如大小、宽度）和图像（包括源、对齐方式、边框、尺寸等）的属性。

属性 描述 示例
<hr> Hr标签用于在文档中插入水平线。
<hr size=""> 设置水平线的大小（高度）。
<hr width=""> 定义规则的宽度（百分比或绝对像素长度）。
<hr noshade> 创建没有阴影的水平线（此属性在HTML5中已弃用）。
<img src="URL" /> 添加图像，它是一个位于URL的单独文件。
<img src="URL" align=""> 将图像左/右/中/下/上/中对齐（使用CSS）。
<img src="URL" border=""> 设置围绕图像的边框大小（使用CSS）。
<img src="URL" height=""> 设置图像的高度，以像素或屏幕宽度的百分比表示。
<img src="URL" width=""> 定义图像的宽度，以像素或屏幕宽度的百分比表示。
<img src="URL" alt=""> 为无法处理图像的浏览器设置替代文本（ADA 规定）。

表单

HTML表单是Web开发中最重要的组件之一。下表包含与在HTML中设计表单相关的常用标签和属性

标签和属性 描述 示例
<form>..</form> HTML中的form标签用于定义用户可提交的应用程序表单。
<select multiple name="" size=""> </select> 创建一个可滚动的选择菜单。Size设置在用户需要滚动之前可见的菜单项数量。
<select name=""> </select> 创建一个下拉菜单，默认大小为0。
<option> Option标签用于定义下拉列表中的每个项目。
<textarea name="" cols="x" rows="y"></textarea> 创建一个文本框区域。Columns设置宽度，rows设置高度。
<input type="checkbox" name="" value=""> 带有checkbox的input type用于创建一个复选框，允许用户从一组选项中选择一个或多个选项。
<input type="checkbox" name="" value="" checked> 创建一个预先选中的复选框，用于某些值。
<input type="radio" name="" value=""> 带有radio属性的input type用于在HTML中创建单选按钮。
<input type="radio" name="" value="" checked> 创建一个预先选中的单选按钮。
<input type="text" name="" size=""> 定义一个单行文本区域。Size设置长度（以字符为单位）。
<input type="submit" value=""> 用于在表单末尾添加提交按钮。Value设置提交按钮中的文本。
<input type="image" name="" src="" border="" alt=""> 使用图像创建提交按钮。它有助于将按钮隐藏在图像中。
<input type="reset"> 重置按钮用于表单中，清除所有用户输入并将表单字段重置为其默认值。

表格

表格用于以结构化形式呈现数据。使用表格进行数据布局，使用CSS进行页面布局。

标签 描述 示例
<table>..</table> HTML中的表格用于以表格格式组织和显示数据，由行和列组成。
<tr>..</tr> table标签内的tr标签用于定义表格中的每一行。
<td>..</td> tr标签内的td标签用于定义行中的每个单元格。
<th>..</th> 设置表格标题（一个带有粗体居中文本的普通单元格）。

表格属性

有时普通的表格不足以表示我们想要呈现的数据。因此，需要在表格元素上使用一些属性，以便表格看起来更好。将这些属性用于电子邮件简报，并使用CSS装饰表格以获得更好的效果。

属性 描述 示例
<table border=""> 设置表格单元格周围边框的宽度。
<table cellspacing=""> 定义表格单元格之间的间距。
<table cellpadding=""> 设置单元格边框与其内容之间的间距。
<table width=""> 指定表格的宽度，以像素或百分比表示。
<tr align=""> 设置行内单元格的对齐方式（左/中/右）。
<td align=""> 设置单元格的对齐方式（左/中/右）。
<tr valign=""> 定义行内单元格的垂直对齐方式（上/中/下）。
<td valign=""> 设置单元格的垂直对齐方式（上/中/下）。
<td rowspan=""> 定义单元格应跨越的行数（默认值=1）。
<td colspan=""> 设置单元格应跨越的列数。
<td nowrap> 防止单元格内的行被换行以适应。

HTML5输入标签属性

这些属性是在HTML5发布后新添加的，input标签起着重要的作用。并非所有浏览器都支持这些属性。因此，最好在使用之前进行验证。

属性 描述 示例
<input type="email" name=""> input type email用于接受电子邮件地址格式的文本。
<input type="url" name=""> 带有值url的input type用于专门接受URL。
<input type="number" name=""> input type number用于接受单行数字。
<input type="range" name=""> 为一系列数字定义单行文本框。
<input type="date/month/week/time" name=""> 生成一个单行文本框，其中显示日期/月份/星期/时间的日历。
<input type="search" name=""> 设置用于搜索的单行文本框。
<input type="color" name=""> 定义用于选择颜色的单行文本框。

打印页面
上一页
下一页
广告