创建基本 HTML 结构和标签

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,学生将学习创建基本 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>
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>

让我们分解关键组件:

  1. <html> 标签:包裹所有其他 HTML 内容的根元素
  2. lang="en" 属性:指定文档的语言(本例中为英语)
  3. 两个主要的子元素:
    • <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 标签及其用途:

  1. <meta charset="UTF-8">:指定文档的字符编码
  2. <meta name="viewport">:确保在不同设备上正确渲染
  3. <meta name="description">:为搜索引擎提供简短的页面描述
  4. <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 标签示例输出

需要记住的关键点:

  • 双标签包裹内容,需要开始标签和结束标签
  • 单标签是自包含的,不包裹内容
  • 始终关闭双标签以保持正确的 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>

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

HTML content structure example output

需要记住的关键点:

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

总结

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

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