本章通过实例向您演示最常用的 HTML 标签。
提示：不要担心本章中您还没有学过的例子，您将在下面的章节中学到它们。
提示：学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。
在HTML中，标题是通过<h1>到<h6>的标签来表示的，其中<h1>表示最高级别的标题，通常用于主标题，而<h6>表示最低级别的标题，通常用于表示较小的子标题。这些标题标签不仅定义了文本的大小，还帮助搜索引擎和屏幕阅读器理解页面的结构和内容的重要性。
下面是一个示例，展示了如何使用HTML标题标签：
<!DOCTYPE html>
<html>
<head>
<title>HTML 标题示例</title>
</head>
<body>
<h1>这是主标题</h1>
<p>这是一段介绍性的文本。</p>
<h2>二级标题</h2>
<p>与二级标题相关的内容。</p>
<h3>三级标题</h3>
<p>与三级标题相关的内容。</p>
<!-- 可以继续添加到 h6 的更低级别标题 -->
</body>
</html>
在这个例子中，<h1>标签用于表示页面的主标题，<h2>用于二级标题，通常是章节或者主要部分的标题，<h3>则用于更低一级的子标题，以此类推，直到<h6>。
标题标签对于搜索引擎优化（SEO）和网页的可访问性都很重要，因为它们帮助定义了页面的结构，使搜索引擎能够更好地理解内容，并且对于使用屏幕阅读器的用户来说，这些标题可以提供导航的线索。
注意：虽然<h1>标签在视觉上通常显示为最大的标题，但这并不是由其标签本身决定的，而是由CSS样式来控制的。开发者可以通过CSS来自定义每个标题标签的显示样式，包括字体大小、颜色、间距等。
在HTML中，段落是通过<p>标签来定义的。<p>标签用于创建文本段落，浏览器会自动在每个段落前后添加空行，以区分不同的段落。
下面是一个简单的HTML段落示例：
<!DOCTYPE html>
<html>
<head><title>HTML 段落示例</title></head>
<body><p>这是一个HTML段落。</p> <p>这是另一个HTML段落。</p></body>
</html>
在这个例子中，我们使用了两个<p>标签来创建两个不同的段落。每个段落都被<p>和</p>包围，其中<p>是开始标签，</p>是结束标签。
浏览器渲染这段代码时，会在每个段落之间添加垂直间距，使得段落之间更加清晰易读。
你可以通过CSS来样式化段落，例如改变字体样式、颜色、大小、行高等。例如：
<!DOCTYPE html> <html> <head> <title>HTML 段落样式示例</title> <style> p { font-family: Arial, sans-serif; color: #333; font-size: 16px; line-height: 1.5; } </style> </he> <body><p>这是一个带有样式的HTML段落。</p> <p>这是另一个带有样式的HTML段落。</p></body> </html>
在这个示例中，我们添加了一个<style>标签来定义CSS样式，指定了段落的字体、颜色、大小和行高。这样，所有的<p>标签都会应用这些样式。
HTML 链接
在HTML中，链接是通过 <a> 标签来创建的，它代表 “anchor”（锚点）。<a> 标签通常用于创建指向其他网页、文件、电子邮件地址或同一页面内的某个位置的超链接。
下面是一些创建HTML链接的基本示例：
创建指向其他网页的链接：
<a href=“/”>访问示例</a>在这个例子中，href 属性指定了链接的目标URL，即用户点击链接后将被重定向到的网页地址。
创建指向电子邮件的链接：
<a href=”mailto:someone@example.com”>发送邮件给我</a>使用 mailto: 协议可以创建一个链接，当用户点击该链接时，他们的默认邮件客户端会打开并自动填写收件人地址。
创建页面内的锚链接：
如果你想在同一页面内跳转到特定的部分，你可以使用锚链接。首先，你需要为目标位置设置一个ID：
<h2 id=“section1”>第一部分</h2>
<p>这里是第一部分的内容…</p>然后，你可以创建一个链接指向这个ID：
<a href=“#section1”>跳转到第一部分</a>在新窗口或标签页中打开链接：
默认情况下，点击链接会在当前窗口或标签页中打开目标页面。如果你想在新窗口或标签页中打开链接，你可以添加 target=“_blank” 属性：
<a href=“/course/6664.html”/ target=“_blank”>在新窗口中打开示例网站</a>请注意，出于用户体验和可访问性的考虑，应谨慎使用 target=“_blank”，因为它会中断用户的浏览流程。如果必须使用，建议添加 rel=“noopener noreferrer” 属性以增强安全性：
<a href=“/course/6664.html”/ target=“_blank” rel=“noopener noreferrer”>安全地在新窗口中打开示例网站</a>
这些就是HTML中创建链接的基本方法。
HTML 图像
在HTML中，图像可以通过<img>标签来插入。<img>标签是一个空元素，意味着它没有结束标签，并且必须包含src属性来指定图像文件的路径。
以下是一个简单的HTML图像示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML 图像示例</title>
</head>
<body>
<img src=“image.jpg” alt=“一个描述性的文字”>
</body>
</html>在这个例子中，<img>标签用于插入图像，src属性指定了图像文件的路径（在这个例子中是”image.jpg”）。alt属性提供了图像的替代文本，这在图像无法显示时非常有用，比如由于网络问题或图像文件不存在。替代文本也有助于提高网站的可访问性，特别是对于使用屏幕阅读器的视障用户。
除了src和alt属性外，<img>标签还可以接受其他属性，如：
例如：
<img src=“image.jpg” alt=“一个描述性的文字” width=“300” height=“200” title=“这是图像的标题”>请注意，为了保持网页的加载速度和用户体验，应该优化图像文件的大小和格式。此外，确保使用的图像符合版权法规定，避免侵犯他人的知识产权。
如果你希望图像成为链接的一部分，可以将<img>标签放在<a>标签内部：
<a href=“/course/6664.html”>
<img src=“image.jpg” alt=“点击访问示例网站”>
</a>在这个例子中，点击图像将会跳转到指定的链接地址。