HTML速查表

欢迎，有抱负的网页开发者们！今天，我们将深入HTML的世界，这是你访问过的每个网站的支柱。作为一个教授HTML超过十年的人，我可以告诉你，它并不像乍看之下那么令人畏惧。实际上，我喜欢把HTML比作互联网的乐高积木——简单的部件，组合在一起就能创造出惊人的东西！

HTML - Cheat Sheet

基本标签

每个HTML文档都以几个基本标签开始。把这些看作是你网页的基础：

<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
Hello, World!
</body>
</html>

让我们分解一下：

<!DOCTYPE html> 告诉浏览器这是一个HTML5文档。
<html> 是页面的根元素。
<head> 包含关于文档的元信息。
<title> 为文档指定一个标题。
<body> 定义文档的正文，所有可见内容都在这里。

Body属性

<body> 标签可以有各种属性来控制内容的显示方式。以下是一些常见的属性：

属性	描述
bgcolor	设置背景颜色
background	设置背景图像
text	设置文本颜色

示例：

<body bgcolor="lightblue" text="navy">
欢迎来到我的蓝色世界！
</body>

这将创建一个有浅蓝色背景和藏青色文本的页面。就像给房间刷漆，但这是在网站上！

文本标签

HTML提供了几个用于格式化文本的标签。以下是一些最常用的：

标签	描述
`<h1>` 到 `<h6>`	标题（h1最大，h6最小）
`<p>`	段落
`<br>`	换行
`<strong>`	加粗文本
`<em>`	斜体文本

示例：

<h1>欢迎来到我的网站</h1>
<p>这是一个<strong>加粗</strong>的陈述。</p>
<p>这是一个<em>强调</em>的观点。</p>

链接

链接让网络成为了真正的“网”！以下是创建链接的方法：

<a href="https://www.example.com">点击我！</a>

href 属性指定链接指向的URL。你也可以使用ID来链接到页面的特定部分：

<h2 id="section2">第2部分</h2>
<a href="#section2">跳转到第2部分</a>

格式化

HTML提供了多种格式化文本的方法，不仅仅是加粗和斜体。以下是一些更多的方法：

标签	描述
`<sup>`	上标文本
`<sub>`	下标文本
`<pre>`	预格式化文本
`<code>`	代码片段

示例：

<p>H<sub>2</sub>O是水。</p>
<p>2<sup>3</sup>等于8。</p>
<pre>
这段文本
是预格式化的。
</pre>
<p>这里有一些<code>内联代码</code>。</p>

列表

列表可以帮助组织信息。HTML中有三种类型的列表：

无序列表 (<ul>)
有序列表 (<ol>)
定义列表 (<dl>)

示例：

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>樱桃</li>
</ul>

<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>

<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>

图形元素

图像可以使你的网站焕发生机。以下是如何添加图像的方法：

<img src="cat.jpg" alt="一只可爱的猫" width="300" height="200">

src 属性指定图像文件，alt 提供屏幕阅读器的替代文本或图像加载失败时的文本，width 和 height 设置尺寸。

表单

表单允许用户输入数据。以下是一个简单的表单：

<form action="/submit-form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>

<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>

<input type="submit" value="提交">
</form>

这会创建一个带有姓名和邮箱字段以及提交按钮的表单。

表格

表格用于以行和列的形式显示数据：

<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>行1，单元格1</td>
<td>行1，单元格2</td>
</tr>
<tr>
<td>行2，单元格1</td>
<td>行2，单元格2</td>
</tr>
</table>

表格属性

表格可以用各种属性进行自定义：

属性	描述
border	设置边框的宽度
cellpadding	设置单元格内容与边框之间的空间
cellspacing	设置单元格之间的空间
width	设置表格的宽度

HTML5输入标签属性

HTML5引入了新的输入类型和属性：

类型/属性	描述
type="email"	用于电子邮件地址
type="date"	用于日期选择器
type="number"	用于数值输入
placeholder	输入字段中的提示文本
required	使字段成为必填

示例：

<input type="email" placeholder="输入你的邮箱" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">

HTML编辑器和格式化工具

虽然你可以在任何文本编辑器中编写HTML，但使用专门的HTML编辑器可以使你的生活更轻松。一些流行的选项包括：

Visual Studio Code
Sublime Text
Atom

这些编辑器提供了诸如语法高亮和自动完成等功能，可以为你节省大量时间和避免头痛！

结论

就这样，伙计们！这个HTML速查表涵盖了开始创建自己网页所需的基础知识。记住，HTML只是一个开始。随着你的进步，你将想要学习CSS来进行样式设计，学习JavaScript来实现交互性。

学习HTML就像学习一门新语言——需要练习。不要害怕实验和犯错误。我们都是这样学习的！谁知道呢？也许下一个大型网站就是你建造的！

快乐编码，愿你的标签总是正确关闭！

Credits: Image by storyset