什么是HTML？

HTML，全称为HyperText Markup Language，即超文本标记语言。它是用于创建网页的标准标记语言。HTML通过一系列的标签（Tags）来描述网页的内容结构，使得网页可以在浏览器中正确地展示出来。

HTML标签基础

HTML标签大致可以分为三大类：结构标签、表现标签和语义标签。

结构标签

结构标签主要用来定义文档的结构，它们告诉浏览器哪些是标题、哪些是段落、哪些是列表等。

  • <html>：根元素，所有的其他标签都包含在它里面。
  • <head>：包含关于文档的元数据，如页面的标题、样式信息、脚本链接等。
  • <body>：包含页面的实际内容。
  • <title>：定义页面标题，显示在浏览器的标签页上。
  • <h1> 至 <h6>：定义标题，<h1> 是最大的标题，<h6> 是最小的标题。
  • <p>：定义段落。
  • <div>：定义一个通用的文档区域。
  • <span>：定义行内内容的一个区域。

表现标签

表现标签用来定义页面内容的样式，这些标签在HTML5中已经很少使用，因为样式通常是通过CSS来控制的。

  • <b> 或 <strong>：加粗文本。
  • <i> 或 <em>：斜体文本。
  • <u>：下划线文本。
  • <font>：定义字体大小、颜色等，已不再推荐使用。

语义标签

语义标签提供额外意义，有助于搜索引擎更好地理解网页内容。

  • <header>：定义网页或区域的页眉。
  • <nav>：定义导航链接。
  • <footer>：定义页脚内容。
  • <section>：定义文档中的一个区段。
  • <article>：定义页面中的一篇文章。
  • <aside>：定义侧边栏内容。

如何使用HTML标签搭建网页基础结构

下面是一个简单的HTML文档结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>
<body>
    <header>
        <h1>网页标题</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">部分1</a></li>
            <li><a href="#section2">部分2</a></li>
        </ul>
    </nav>
    <main>
        <section id="section1">
            <h2>部分1</h2>
            <p>这里是部分1的内容。</p>
        </section>
        <section id="section2">
            <h2>部分2</h2>
            <p>这里是部分2的内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

逐步解析

  1. <!DOCTYPE html>：声明文档类型为HTML。
  2. <html lang="zh-CN">：根元素，并设置语言为简体中文。
  3. <head>：包含元数据和标题。
  4. <body>：页面内容主体。
  5. <header>：页面头部，包含标题。
  6. <nav>：导航区域，包含链接。
  7. <main>：主内容区域，包含两个部分。
  8. <section>：每个部分，包含标题和内容。
  9. <footer>：页面底部，包含版权信息。

通过学习和使用这些基本HTML标签，你就可以搭建一个具有基本结构的网页了。随着你的不断实践和深入学习，你可以掌握更多高级技巧，创造出更加丰富多彩的网页内容。