第5章_HTML网页结构

授课语音

HTML 基本结构标签

一、HTML概述

1. 什么是HTML结构标签？

HTML结构标签用于定义网页的不同区域和内容的层次结构。这些标签帮助我们组织和标记网页的内容，使得浏览器能够正确解析和展示这些内容。

2. 常见的HTML结构标签

HTML的基本结构由几个关键部分组成，包括：

<html>：网页的根元素。
<head>：定义文档的元数据（如标题、字符集、样式表链接等）。
<body>：网页的主体部分，包含显示给用户的内容。

这些标签构成了HTML文档的基本框架。

二、HTML文档的基本结构

一个基本的HTML文档的结构如下：

<!DOCTYPE html> <!-- 文档类型声明，告知浏览器使用HTML5标准 -->
<html lang="zh"> <!-- 根元素，指定语言为中文 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计，适配不同设备 -->
    <title>我的网页</title> <!-- 网页标题，显示在浏览器标签上 -->
</head>
<body>
    <header> <!-- 页头部分 -->
        <h1>欢迎来到我的网站！</h1> <!-- 主标题 -->
    </header>

    <nav> <!-- 导航栏部分 -->
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>

    <main> <!-- 主内容区域 -->
        <section id="home">
            <h2>首页内容</h2>
            <p>欢迎访问我的网站！</p>
        </section>

        <section id="about">
            <h2>关于我</h2>
            <p>这是关于我的一些信息。</p>
        </section>

        <section id="contact">
            <h2>联系我们</h2>
            <p>联系方式：123-456-7890</p>
        </section>
    </main>

    <footer> <!-- 页脚部分 -->
        <p>© 2024 我的个人网站</p>
    </footer>
</body>
</html>

中文注释：

<!DOCTYPE html>：声明文档类型为HTML5，让浏览器知道这是一个HTML5文档。
<html lang="zh">：HTML文档的根元素，lang="zh"指定页面使用中文。
<head>：包含网页的元数据，如字符集、标题、样式等。
<meta charset="UTF-8">：设置网页的字符编码为UTF-8，确保可以正确显示中文字符。
<title>：设置网页的标题，通常会显示在浏览器的标签页中。
<body>：包含页面的主要内容，所有展示给用户的内容都放在这里。

三、HTML常见的结构标签

1. `<html>` 标签

<html> 是HTML文档的根元素，所有网页内容都应该在<html>标签内。它包含<head>和<body>部分。

<html lang="en"> <!-- 定义语言为英语 -->
    <!-- 网页的内容 -->
</html>

2. `<head>` 标签

<head> 用来包含页面的元数据（如字符编码、网页标题、外部文件的链接等），浏览器不直接显示这些内容。

常见的 <head> 中的子标签：

<meta>：设置网页的字符编码、视口信息等。
<title>：网页的标题，会显示在浏览器标签页上。
<link>：用于链接外部资源（如CSS样式表）。
<style>：用于内部CSS样式定义。

<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计 -->
    <title>我的网页</title> <!-- 设置网页标题 -->
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS样式 -->
</head>

3. `<body>` 标签

<body> 包含网页的主体内容，是用户可见的部分。所有显示给用户的内容（如文本、图像、链接、表格等）都应该放在 <body> 中。

<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是我的第一个网页。</p>
</body>

4. `<header>` 标签

<header> 标签用于定义网页的头部区域，通常包含网站的标题、导航栏等。

<header>
    <h1>我的网站</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>
</header>

5. `<footer>` 标签

<footer> 标签用于定义网页的页脚区域，通常包含版权信息、联系方式等。

<footer>
    <p>© 2024 我的个人网站</p>
</footer>

6. `<main>` 标签

<main> 标签用于定义网页的主要内容区域。每个页面通常只有一个<main>区域，里面包含页面的核心内容。

<main>
    <section>
        <h2>关于我</h2>
        <p>这里是关于我的介绍。</p>
    </section>
</main>

7. `<section>` 标签

<section> 标签用于定义页面中的独立内容区块，通常包含一个标题和相关内容。

<section>
    <h2>我们的团队</h2>
    <p>团队成员介绍。</p>
</section>

8. `<nav>` 标签

<nav> 标签用于定义导航区域，通常包含网站的菜单和链接。

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#services">服务</a></li>
    </ul>
</nav>

9. `<article>` 标签

<article> 标签用于定义页面中的独立内容块，通常是可以独立分发或重用的内容。

<article>
    <h2>最新新闻</h2>
    <p>这里是新闻内容。</p>
</article>

四、总结

HTML文档的基本结构包含：

<!DOCTYPE html>：文档类型声明。
<html>：根元素，包含整个页面内容。
<head>：包含元数据，如字符集、标题、外部文件链接等。
<body>：网页的主体内容，展示给用户的部分。

常见的结构标签包括：

<header>：页面头部区域。
<footer>：页面底部区域。
<main>：页面的主要内容区域。
<section>、<article>：内容区块标签。
<nav>：导航栏。

掌握这些基本结构标签，能够帮助学生构建结构清晰、语义明确的HTML文档，并为后续的CSS样式和JavaScript交互提供良好的基础。

去1:1私密咨询

系列课程：

免费

VIP会员

第3课_HTML基本结构标签

第5章_HTML网页结构

授课语音

HTML 基本结构标签

一、HTML概述

1. 什么是HTML结构标签？

2. 常见的HTML结构标签

二、HTML文档的基本结构

三、HTML常见的结构标签

1. <html> 标签

2. <head> 标签

3. <body> 标签

4. <header> 标签

5. <footer> 标签

6. <main> 标签

7. <section> 标签

8. <nav> 标签

9. <article> 标签