创建基本 HTML 结构和标签 - 入门教程

介绍

在本实验中，学生将学习创建基本 HTML 文档结构的基础技能，并理解关键的 HTML 标签。实验将引导参与者通过设置带有正确 DOCTYPE 声明的 HTML 文档、添加 HTML 根标签、配置 head 部分以及探索不同类型的 HTML 标签来完成学习。

参与者将从创建 HTML5 文档开始，学习如何声明文档类型、构建基本的页面布局，并理解关键元素如 <html>、<head> 和 <body> 的作用。在实验结束时，学生将全面掌握如何创建一个格式良好的 HTML 文档，并使用各种 HTML 标签来构建网页内容。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451029{{"创建基本 HTML 结构和标签"}} html/head_elems -.-> lab-451029{{"创建基本 HTML 结构和标签"}} html/charset -.-> lab-451029{{"创建基本 HTML 结构和标签"}} html/lang_decl -.-> lab-451029{{"创建基本 HTML 结构和标签"}} html/viewport -.-> lab-451029{{"创建基本 HTML 结构和标签"}} html/text_head -.-> lab-451029{{"创建基本 HTML 结构和标签"}} html/doc_flow -.-> lab-451029{{"创建基本 HTML 结构和标签"}} html/inter_elems -.-> lab-451029{{"创建基本 HTML 结构和标签"}} end

使用 DOCTYPE 声明设置 HTML 文档

在这一步中，你将学习如何通过添加 DOCTYPE 声明来设置 HTML 文档的基本基础。DOCTYPE 声明至关重要，因为它告诉 Web 浏览器你的文档使用的是哪个版本的 HTML，从而确保正确的渲染和兼容性。

首先，打开 WebIDE 并在 ~/project 目录中创建一个名为 index.html 的新文件。

HTML5 的 DOCTYPE 声明非常简单明了。你需要将其作为 HTML 文档的第一行添加：

<!doctype html>

这个声明告诉浏览器你正在使用 HTML5，这是 HTML 的最新版本。它不区分大小写，但建议使用小写版本以确保一致性和可读性。

让我们创建一个包含 DOCTYPE 声明的基本 HTML 文档结构：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>

注意：了解更多关于如何在 WebIDE 中预览 HTML 文件。

浏览器中的示例输出将显示：

Welcome to HTML!

需要记住的关键点：

DOCTYPE 声明必须是 HTML 文档的第一行
它帮助浏览器理解你使用的是哪个版本的 HTML
对于现代 Web 开发，使用 <!DOCTYPE html> 表示 HTML5
该声明不是 HTML 标签，而是对浏览器的指令

添加 HTML 根标签和基本结构

在这一步中，你将学习 HTML 文档的基本结构，重点是 HTML 根标签和文档的基本结构。<html> 标签是所有其他 HTML 元素的容器，并作为 HTML 页面的根元素。

打开你在上一步中在 WebIDE 中创建的 index.html 文件。让我们通过添加完整的根标签及其基本组件来扩展之前的 HTML 结构：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML Structure</h1>
    <p>This is the basic structure of an HTML document.</p>
  </body>
</html>

让我们分解关键组件：

<html> 标签：包裹所有其他 HTML 内容的根元素
lang="en" 属性：指定文档的语言（本例中为英语）
两个主要的子元素：
- <head>：包含文档的元数据
- <body>：包含网页的可见内容

在 Web 浏览器中的示例输出如下：

Welcome to HTML Structure
This is the basic structure of an HTML document.

需要记住的关键点：

每个 HTML 文档都必须有一个 <html> 根标签
lang 属性有助于提高可访问性和搜索引擎优化
文档分为 <head> 和 <body> 部分
标签的正确嵌套对于有效的 HTML 至关重要

使用 Meta 和 Title 标签配置 Head 部分

在这一步中，你将学习 HTML 文档的 <head> 部分，以及如何使用 meta 标签和 title 标签为你的网页提供重要信息。

在 WebIDE 中打开你的 index.html 文件，并使用以下示例更新 <head> 部分：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A simple HTML learning page" />
    <title>My HTML Learning Journey</title>
  </head>
  <body>
    <h1>Welcome to HTML Metadata</h1>
    <p>This page demonstrates head section configuration.</p>
  </body>
</html>

让我们分解关键的 meta 标签及其用途：

<meta charset="UTF-8">：指定文档的字符编码
<meta name="viewport">：确保在不同设备上正确渲染
<meta name="description">：为搜索引擎提供简短的页面描述
<title>：设置显示在浏览器标签页中的页面标题

浏览器标签页中的示例输出：

My HTML Learning Journey

需要记住的关键点：

<head> 部分包含 HTML 文档的元数据
Meta 标签为浏览器和搜索引擎提供额外信息
<title> 标签对于页面标识和 SEO 至关重要
始终包含字符编码和 viewport meta 标签

理解单标签和双标签 HTML 标签

在这一步中，你将学习两种类型的 HTML 标签：单标签（自闭合标签）和双标签。理解这些标签之间的区别对于创建结构良好的 HTML 文档至关重要。

在 WebIDE 中打开你的 index.html 文件，并使用以下示例更新 body 部分：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Tags Exploration</title>
  </head>
  <body>
    <!-- Double Tags (Opening and Closing) -->
    <h1>Welcome to HTML Tags</h1>
    <p>This is a paragraph with <strong>bold text</strong>.</p>

    <!-- Single (Self-Closing) Tags -->
    <img src="example.jpg" alt="Example Image" />
    <br />
    <input type="text" placeholder="Enter your name" />
  </body>
</html>

让我们分解不同类型的标签：

双标签（成对标签）：

有一个开始标签 <tag> 和一个结束标签 </tag>
内容放置在开始标签和结束标签之间
示例：<h1>、<p>、<strong>、<div>

单标签（自闭合标签）：

没有单独的结束标签
在标签内部自行闭合
示例：<img>、<br>、<input>

浏览器中的示例输出将显示：

Welcome to HTML Tags
This is a paragraph with bold text.
[此处将显示一张图片]
[将显示一个文本输入框]

需要记住的关键点：

双标签包裹内容，需要开始标签和结束标签
单标签是自包含的，不包裹内容
始终关闭双标签以保持正确的 HTML 结构
一些单标签可以具有属性以提供额外信息

探索 Body 标签和页面内容布局

在这一步中，你将学习 <body> 标签以及如何在 HTML 文档中结构化内容。body 标签是网页所有可见内容的放置位置。

在 WebIDE 中打开你的 index.html 文件，并使用以下示例更新 body 部分：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Content Placement Example</title>
  </head>
  <body>
    <!-- Headings -->
    <h1>Welcome to HTML Content Placement</h1>
    <h2>Subheading Level 2</h2>
    <h3>Subheading Level 3</h3>

    <!-- Paragraphs -->
    <p>This is a paragraph explaining the importance of content structure.</p>

    <!-- Lists -->
    <h4>Key HTML Elements:</h4>
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
      <li>Lists</li>
    </ul>

    <!-- Div for grouping content -->
    <div>
      <p>This paragraph is inside a div container.</p>
    </div>

    <!-- Links and Images -->
    <a href="https://example.com">Visit Example Website</a>
    <img src="example.jpg" alt="Example Image" width="300" />
  </body>
</html>

浏览器中的示例输出将显示：

需要记住的关键点：

<body> 标签包含所有可见的页面内容
使用标题标签（<h1> 到 <h6>）创建内容层级
段落、列表和其他元素有助于组织信息
<div> 标签可以分组和结构化内容
包含链接和图片以增强页面的交互性

总结

在本实验中，参与者学习了创建基本 HTML 文档结构的基础步骤。实验从设置 DOCTYPE 声明开始，这对于确保浏览器正确渲染和与 HTML5 兼容至关重要。学习者探索了关键的 HTML 标签，包括根标签 <html>、<head> 和 <body> 部分，理解了它们在文档组织中的具体作用。

实验引导学生创建了一个完整的 HTML 文档，演示了如何添加 meta 标签、设置字符编码、定义页面标题以及在 body 标签中放置内容。参与者通过实践构建了一个结构良好的 HTML 页面，学习了单标签和双标签、正确的标签嵌套以及语义化标记在 Web 开发中的重要性等关键概念。