前端三剑客
HTML

HTML 速查列表

# HTML 速查列表

# 1. HTML 基本文档

基本的 HTML 文档结构包括以下元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
    可见文本...
</body>
</html>

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html> 声明文档类型为 HTML5。
<html> 是根元素，包含所有 HTML 内容。
<head> 包含元数据（meta）、标题（title）和链接到样式表等资源。
<body> 包含网页的可见内容。

# 2. 基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2>次大的标题</h2>
<h3>中等的标题</h3>
<h4>稍小的标题</h4>
<h5>更小的标题</h5>
<h6>最小的标题</h6>

<p>这是一个段落。</p>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<!-- 这是注释 -->

1
2
3
4
5
6
7
8
9
10
11

<h1> 到 <h6> 定义了六个不同级别的标题，<h1> 为最高级别，<h6> 为最低级别。
<p> 定义一个段落。
<br> 插入一个换行。
<hr> 插入一个水平线。
 注释，不会在浏览器中显示。

# 3. 文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>

<abbr title="World Wide Web">WWW</abbr> <!-- 缩写 -->
<address>1234 Street Name, City, Country</address> <!-- 联系信息 -->
<bdo dir="rtl">This text will be displayed right-to-left</bdo> <!-- 文字方向 -->
<blockquote cite="https://www.example.com">从另一个源引用的部分</blockquote> <!-- 引用 -->
<cite>引用的工作名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<b> 和 <strong> 用于加粗文本，区别在于 <strong> 表示重要性。
<i> 和 <em> 用于斜体文本，区别在于 <em> 表示强调。
<code> 显示计算机代码。
<kbd> 表示用户输入。
<pre> 保持文本的格式化（如空格和换行）。
<small> 表示小号文本。
<abbr> 表示缩写，可以提供完整的标题。
<address> 表示联系信息。
<bdo> 改变文本的显示方向。
<blockquote> 用于引用长段落。
<cite> 表示引用的来源。
<del> 和 <ins> 表示删除和插入的文本。
<sub> 和 <sup> 表示下标和上标文本。

# 4. 链接（Links）

<a href="http://www.example.com/">普通的链接</a>
<a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> <!-- 图像链接 -->
<a href="mailto:webmaster@example.com">发送 e-mail</a> <!-- 邮件链接 -->

<!-- 书签链接 -->
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

1
2
3
4
5
6
7

<a href="URL">链接文本</a> 创建一个超链接。
<a href="mailto:email@example.com">发送 e-mail</a> 创建一个邮件链接。
<a id="name"> 和 <a href="#name"> 创建页面内部的书签链接。

# 5. 图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

<img> 标签用于在网页中嵌入图像。
src 属性定义图像的 URL。
alt 属性定义图像的替换文本，图像无法显示时显示。
height 和 width 属性定义图像的高度和宽度。

# 6. 样式/区块（Styles/Sections）

<style type="text/css">
h1 {color: red;}
p {color: blue;}
</style>

<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

1
2
3
4
5
6
7

<style> 标签用于定义 CSS 样式。
<div> 是块级元素，用于分组其他 HTML 元素。
<span> 是内联元素，用于分组文本或其他内联元素。

# 7. 无序列表（Unordered List）

<ul>
    <li>项目 1</li>
    <li>项目 2</li>
</ul>

1
2
3
4

<ul> 标签定义无序列表，列表项使用 <li> 标签定义。

# 8. 有序列表（Ordered List）

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

1
2
3
4

<ol> 标签定义有序列表，列表项使用 <li> 标签定义。

# 9. 定义列表（Definition List）

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

1
2
3
4
5
6

<dl> 定义定义列表。
<dt> 定义项目。
<dd> 定义项目描述。

# 10. 表格（Tables）

<table border="1">
  <tr>
    <th>表格标题 1</th>
    <th>表格标题 2</th>
  </tr>
  <tr>
    <td>表格数据 1</td>
    <td>表格数据 2</td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9
10

<table> 标签定义表格。
<tr> 定义表格行。
<th> 定义表格头单元格。
<td> 定义表格数据单元格。
border 属性定义表格的边框。

# 11. 框架（Iframe）

<iframe src="demo_iframe.htm" width="300" height="200"></iframe>

<iframe> 标签用于在网页中嵌入另一个 HTML 页面。
src 属性定义嵌入页面的 URL。
width 和 height 属性定义 iframe 的宽度和高度。

# 12. 表单（Forms）

<form action="demo_form.php" method="post">
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" size="40" maxlength="50" required>
    <br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <br>
    <label for="fruit">喜欢的水果:</label>
    <input type="checkbox" id="apple" name="fruit" value="apple">
    <label for="apple">苹果</label>
    <input type="checkbox" id="banana" name="fruit" value="banana">
    <label for="banana">香蕉</label>
    <br>
    <label for="gender">性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    <br>
    <label for="fruit">选择你喜欢的水果:</label>
    <select id="fruit" name="fruit">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="cherry">樱桃</option>
    </select>
    <br>
    <label for="comments">评论:</label>
    <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<form> 标签定义表单。
action 属性定义提交表单的 URL。
method 属性定义提交表单的 HTTP 方法（GET 或 POST）。
<label> 标签定义表单元素的标签，提高可访问性。
<input> 标签定义各种类型的输入字段（文本、密码、复选框、单选按钮等）。
<select> 标签定义下拉列表，<option> 标签定义下拉列表中的选项。
<textarea> 标签定义多行文本

输入区域。

<input type="submit"> 定义提交按钮。
<input type="reset"> 定义重置按钮。

# 13. 实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&amp; 等同于 &
&quot; 等同于 "
&apos; 等同于 '
&nbsp; 等同于 （空格）
&#169; 等同于 ©

1
2
3
4
5
6
7

&entity_name; 或 &#entity_number; 用于表示 HTML 实体，防止特殊字符被浏览器解析为 HTML 标签或其他元素。

通过这些基本元素和示例，您可以快速创建和编辑 HTML 文档。速查这些列表能够帮助你更轻松地编写和理解 HTML 代码。

编辑此页

上次更新: 2025/01/25, 22:32:05

← HTML URL HTML5 新特性→