基础 HTML 标签：标题、段落、链接、图片

1. 标题

HTML 提供了许多用于格式化和组织文本内容、图片、链接和列表的标签。主要的 HTML 标签可以创建一个 易于阅读且逻辑清晰的页面，同时让页面显得更吸引人并便于理解。让我们来看看最常用的基础标签及其用途。

标题（或 header）用于定义页面上的不同级别的标题。HTML 提供了六个级别的标题——从 <h1> 到 <h6>，其中 <h1> 是最大和最重要的标题， 而 <h6> 是最小的标题。

                      
                        <h1>页面的主要标题</h1>
                        <h2>第一层级子标题</h2>
                        <h3>第二层级子标题</h3>
                        ...
                        <h6>最小的标题</h6>
                      
                    

使用标题可以帮助结构化文本信息，还能提升 SEO（搜索引擎优化），因为搜索引擎在分析页面内容时会考虑标题。

2. 文本样式

为了美化文本，HTML 提供了一些简单但功能强大的标签。

段落/段落

现在我们已经了解了标题，是时候将注意力转向文本内容了。HTML 中的段落是通过标签 <p> 创建的。 你可以把它看作你熟悉的文字处理器，在那里按下 "Enter" 来开始一个新段落。以下是一个例子：

<p>这是我们页面上的第一段，它会告诉你更多关于我们的主题。</p>
<p>而这已经是第二段了，因为有时候一个段落不足以表达所有的想法！</p>

文本块

别忘了 <span> 和 <div>。<span> 是你在 HTML 代码中对 文本片段进行样式化的好帮手，而 <div> 是创建块和容器的真正冠军。

<div>这个块可以包含很多有趣的内容！</div>
<span>而这个文本可以通过颜色或字体效果来突出显示。</span>

粗体文本

粗体文本 — <b>：标签 <b> 使用加粗字体突出显示文本。 这个标签经常用于强调某些单词或短语的重要性。

              
                <p>这是 <b>重要的文本</b>，它吸引了注意力。</p>
              
            

斜体文本

斜体 — <i>：标签 <i> 将文本变为斜体。适合用于引用、外来词或需要强调的 其他元素。

              
                <p>这是斜体文本：<i>斜体文本示例</i>。</p>
              
            

3. 图片

要将图片添加到页面上使用标签 <img>。这是一个单标签，为了使其起作用，需要借助 src 属性指定图片路径。还建议使用 alt（备用文本）属性添加图片描述，这样即使图片加载失败或用户有视觉障碍， 他们也能知道图片的内容。

<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg"" alt="图片的描述">

<img src="image.jpg" alt="图片的描述">

标签 <img> 的其他实用属性：

• width — 图片宽度（例如，width="200"）。
• height — 图片高度（例如，height="150"）。

带有 width 和 height 属性的示例：

  <img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
  src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="图片的描述" width="200" height="150">

  <img src="http://google.com/image.jpg" alt="图片的描述" width="200" height="150">

4. 超链接

链接是 HTML 中的重要元素，允许用户跳转到其他页面或资源。链接使用标签 <a> 创建， 其中关键属性是 href，它指定目标的 URL。'A' 代表 'anchor'（锚点）， 因为链接需要绑定到文档层次结构中的某个点：

              
                <a href="https://example.com">跳转到示例站点</a>
              
            

链接的实用属性：

• target="_blank" — 在新标签中打开链接。
• title="提示信息" — 添加鼠标悬停在链接上的提示信息。

带有附加属性的链接示例：

              
                <a href="https://example.com" target="_blank" title="将在新标签中打开">访问我们的网站</a>
              
            

5. 列表

列表有助于将信息组织成便于理解的块。HTML 支持两种类型的列表：

点列表

无序列表（带点） — <ul>：这样的列表中的项由点标记。

              
              <ul>
                <li>列表的第一个元素</li>
                <li>列表的第二个元素</li>
                <li>列表的第三个元素</li>
              </ul>
              
            

数字列表

有序列表（带数字） — <ol>：这样的列表中的项会自动编号。

              
              <ol>
                <li>列表的第一个元素</li>
                <li>列表的第二个元素</li>
                <li>列表的第三个元素</li>
              </ol>
              
            

列表中的项是通过标签 <li> 创建的，并嵌套在 <ul> 或 <ol> 中。 列表常用于菜单、操作步骤、目录和其他结构化数据。

6. 使用所有基础标签的示例

现在让我们把所有描述过的标签组合在一个 HTML 片段中：