从0开始学前端第三课：结构化内容元素

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135817200

第三课：结构化内容元素

学习目标

在本课中，我们将深入了解HTML的结构化内容元素。掌握这些元素是前端开发的基础，可以帮助我们创建出清晰、易于理解的网页布局。我们将专注于以下内容元素：

理解并使用<header>元素。
掌握<footer>元素的用途和实现方式。
学习<nav>元素的结构和用法。
学习<article>元素的意义和使用场景。
掌握<section>元素以及它如何帮助组织内容。
了解<aside>元素的作用和适用情境。

学习内容

<header>元素

<header>元素通常位于页面或区块的顶部，用于介绍内容或包含导航链接。
- 概念：代表一组引导性的帮助内容，可以包含标题、作者名字、logo、搜索表单等。
- 用法：通常用作页面的全局头部，也可以用于文章或其他区块的头部。
代码示例：
```
<header>
    <h1>我的网站</h1>
    <p>欢迎来到我的个人网站</p>
</header>
```
预计输出效果：

网页顶部会显示一个大标题“我的网站”和一段欢迎文字。
<footer>元素

<footer>元素位于页面或区块的底部，用于包含版权信息、联系信息和其他链接。
- 概念：表示最末尾的内容，通常包含版权声明、法律信息、作者联系方式等。
- 用法：可以用在页面底部，也适用于<article>或<section>等元素的底部。
代码示例：
```
<footer>
    <p>版权所有 &copy; 2024 我的网站</p>
</footer>
```
预计输出效果：

页面底部会展示版权信息。
<nav>元素

<nav>元素定义一组导航链接。
- 概念：用来创建页面的主导航部分，包括链接列表，通常用于菜单、目录、索引等。
- 用法：可以是简单的链接列表，或者是复杂的菜单结构。
代码示例：
```
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
    </ul>
</nav>
```
预计输出效果：

一个包含三个链接的导航菜单。
<article>元素

<article>元素定义一个独立的内容片段，通常是一篇文章或博客。
- 概念：表示可以独立分发或复用的完整结构，如帖子、论坛帖子或新闻文章。
- 用法：每篇文章或帖子都应该用一个<article>元素来包裹。
代码示例：
```
<article>
    <h2>文章标题</h2>
    <p>这里是文章内容...</p>
</article>
```
预计输出效果：

一个带有标题和内容的文章结构。
<section>元素

<section>元素定义文档中的一个区段，通常带有标题。
- 概念：表示一个主题分组的内容区块，每个<section>应该包含一个标题。
- 用法：适合用来划分页面内容的不同部分，如章节、标签页内容等。
代码示例：
```
<section>
    <h2>章节标题</h2>
    <p>这是一些介绍该章节的内容...</p>
</section>
```
预计输出效果：

页面中会出现一个带有标题和相关内容的区块。
<aside>元素

<aside>元素定义与页面内容略微相关的部分，如侧边栏、广告或者小组件。
- 概念：用于包裹一些并非主要内容，但又与页面内容相关的信息。
- 用法：可以用作侧边栏，或者包含解释性内容、引用等。
代码示例：
```
<aside>
    <h2>相关信息</h2>
    <p>这部分内容与文章主题相关...</p>
</aside>
```
预计输出效果：

页面的旁边会出现一个包含标题和文本内容的区块。

课后练习

创建一个包含<header>, <nav>, <article>, <section>, <aside>, 和 <footer>的网页框架。
在<header>中加入一个网站logo（使用<img>标签）和网站标题。
在<nav>中创建一个水平导航菜单。
使用<article>来写一个简短的博客帖子。
创建一个<section>来描述你的个人爱好或者简历的一部分。
使用<aside>来放置一些相关链接或者引用。
在<footer>中加入版权声明和联系信息。

课后练习答案示例

下面是一个网页框架的示例，它使用了本课学习的结构化内容元素。请记住，这只是一个简单的示例，实际的内容应更加丰富和具体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
    <style>
        /* 简单的CSS样式，用于美化页面  后续css章节会讲 可以无视*/
        body { font-family: Arial, sans-serif; line-height: 1.6; }
        header, footer, article, nav, section, aside { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
        header { background: #e3e3e3; }
        nav ul { list-style-type: none; padding: 0; }
        nav ul li { display: inline; margin-right: 10px; }
        footer { background: #e3e3e3; text-align: center; }
    </style>
</head>
<body>

<header>
    <img src="logo.png" alt="网站Logo" width="50" height="50">
    <h1>我的网站</h1>
</header>

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
    </ul>
</nav>

<article>
    <h2>我的第一个博客帖子</h2>
    <p>这是我的第一个博客帖子的内容，我将在这里分享一些有趣的事情。</p>
</article>

<section>
    <h2>个人爱好</h2>
    <p>我喜欢阅读、旅行和摄影。在这个部分，我会详细介绍这些爱好。</p>
</section>

<aside>
    <h2>相关链接</h2>
    <ul>
        <li><a href="#">外部资源1</a></li>
        <li><a href="#">外部资源2</a></li>
    </ul>
</aside>

<footer>
    <p>版权所有 &copy; 2024 我的网站</p>
    <p>联系邮箱：info@mywebsite.com</p>
</footer>

</body>
</html>