HTML元素使用基础入门教程

第一章：HTML简介

HTML，全称HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。它由一系列的元素组成，通过元素，我们可以定义网页的结构和内容。

第二章：HTML元素基础

HTML元素由开始标签、内容和结束标签组成。例如，<p>这是一个段落。</p>。其中，<p>是开始标签，</p>是结束标签，两者之间的“这是一个段落。”就是内容。

第三章：常用HTML元素

标题元素：<h1>到<h6>，数字越小，字体越大。例如：<h1>一级标题</h1>。
段落元素：<p>。例如：<p>这是一个段落。</p>。
链接元素：<a>，用于创建超链接。例如：<a href="https://www.example.com">访问示例网站</a>。
图片元素：<img>，用于插入图片。例如：<img src="image.jpg" alt="描述性文字">。

第四章：HTML语义化标签

HTML5引入了许多语义化标签，它们不仅可以帮助我们更好地描述网页内容，还有助于搜索引擎理解网页的主题和结构。

头部元素：<header>，用于表示页面的头部或页眉。
导航元素：<nav>，用于表示页面的导航链接部分。
主体元素：<main>，用于表示页面的主要内容。
文章元素：<article>，用于表示独立的文章或内容区块。
段落元素：<section>，用于表示页面中的一个独立区块。

示例：

<!DOCTYPE html>
  <html>
  <head>
      <title>我的网页</title>
  </head>
  <body>
      <header>
          <h1>欢迎来到我的网页</h1>
          <nav>
              <a href="home.html">首页</a>
              <a href="about.html">关于我们</a>
          </nav>
      </header>
      <main>
          <article>
              <h2>文章标题</h2>
              <p>这是文章内容...</p>
          </article>
          <section>
              <h2>其他内容区块</h2>
              <p>这是其他内容...</p>
          </section>
      </main>
  </body>
  </html>

第五章：总结

HTML是构建网页的基础，理解并熟练使用HTML元素是每一个网页开发者必备的技能。通过语义化标签，我们可以让网页更加易于理解和维护，同时也提高了用户体验。希望本教程能够帮助你入门HTML，并在后续的学习中不断提升自己的技能。

语义结构最小模板（可直接套用）

如果你在写内容页、教程页、企业介绍页，建议先把结构写对，再考虑视觉样式。

推荐的最小结构：

一个且仅一个 h1
用 h2/h3 表达目录层级（不要跳级）
用 header/main/footer 划分页面语义区
文章正文优先放在 article 中

示例骨架：

<header>...</header>
<main>
    <article>
        <h1>页面主标题</h1>
        <section>
            <h2>章节标题</h2>
            <p>正文内容</p>
        </section>
    </article>
</main>
<footer>...</footer>