释放宠物主人的快乐：探索宠物之家

介绍

我们踏上了一段为宠物爱好者创建温馨在线空间的旅程。我们的场景“宠物天堂”中有一个角色——创新者 Alex，他梦想通过一个充满活力和信息丰富的网站将宠物主人联系起来。Alex 的目标是展示宠物服务、分享故事并建立一个社区。这个场景旨在引人入胜，引导学生将 Alex 的愿景转化为数字现实。

我们将从 HTML 的基础知识开始，通过一个小项目来讲解，重点介绍 3 个实验，这些实验将引导你完成创建一个简单网页的过程。

头部动画示例

在这个实验中，你将创建“宠物之家”的头部部分和主页布局。这个部分对于给人留下深刻的第一印象至关重要。头部将包含导航菜单，主页布局将向访问者介绍网站。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个中级级别的实验，完成率为 66%。获得了学习者 100% 的好评率。

HTML 文档结构

当用户通过互联网浏览网页时，他们会遇到各种形式的内容，包括文本、链接、图表、图片等。

你是否曾想过浏览器是如何显示这些页面内容的？我们可以按下 F12 来查看页面的源代码，如下图所示。

从上图中可以看到，所有的字符内容都被包裹在尖括号 < 和 > 中。这样的内容被称为标签，其中 <> 表示开始标签，</> 表示结束标签。

HTML 是一种由元素组成的语言，这些元素通过标签来表示。

HTML（HyperText Markup Language）是用于结构化网页及其内容的代码。

超文本（Hyper）：与“线性”相对。早期的计算机程序大多是线性的，意味着它们必须从上到下按顺序执行。而使用 HTML 创建的网页则允许通过超链接从一个页面导航到另一个页面。
文本（Text）：与 C、C++ 或 Java 等编译型编程语言不同，HTML 是一种基于文本的脚本语言。它的源代码直接在浏览器中解释运行，无需编译。
标记（Markup）：HTML 的基本原理是使用标记（由成对的尖括号组成的标签）来描述网页内容在浏览器中的显示方式。
语言（Language）：HTML 是一种语言，但它是一种解释型语言而非编译型语言。所有的标记标签都由浏览器翻译成最终的显示结果。

在这一步中，你将开始设置网页的基本结构。你需要在目录 /home/labex/project 下创建一个名为 index.html 的新 HTML 文件，使用命令 touch ~/project/index.html。用你喜欢的文本编辑器打开这个文件，并添加基本的 HTML 文档结构：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!-- 我们将在接下来的步骤中添加内容 -->
  </body>
</html>

<!DOCTYPE html> 声明告诉浏览器期望的文档类型。
<html lang="en"> 元素是 HTML 文档的根元素。
<head> 元素包含元数据（关于文档的数据），例如标题和字符集。
<title> 元素指定网页的标题。
<meta charset="UTF-8"> 元素指定网页的字符编码。
<body> 元素包含网页的可见内容。

点击环境右下角的 Go Live 以打开端口 8080，然后点击环境左上角的 Web 8080 查看页面结果。

浏览器中的网页预览

注意：当前页面没有效果，因为 body 目前为空。当我们学习更多标签后，可以看到页面的效果。

语义化元素

网页布局通常由几个关键部分组成，每个部分都有其独特的作用，以确保用户界面既简洁又功能齐全：

头部（Header）：这是网页的顶部区域，通常包含网站的 Logo、导航菜单、登录/注册链接等。头部是用户首先注意到的部分之一，因此通常设计得较为突出，提供便捷的导航访问。
导航栏（Navigation Bar）：虽然导航栏可以是头部的一部分，但在某些设计中，它也可能是位于页面顶部、侧面或底部的独立部分。导航栏提供了快速访问网站内部链接的功能，帮助用户轻松找到他们感兴趣的内容。
主要内容（Main Content）：这是网页的核心部分，包含用户访问页面时希望看到的主要信息或内容。主要内容可以进一步分为多个部分，例如文章、博客帖子、产品展示等，具体取决于网站的目的和布局。
侧边栏（Sidebar）：侧边栏通常位于主要内容旁边（左侧或右侧），并提供额外的信息或功能，例如相关链接、广告、搜索框、社交媒体链接等。
页脚（Footer）：位于网页的底部，页脚通常包含版权信息、联系方式、网站地图链接、隐私政策、社交媒体图标等。页脚是用户滚动到页面底部时看到的最后一部分，提供基本的网站信息和额外的导航选项。

添加语义化元素（header、main、footer）以逻辑化地组织内容。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header></header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

 是 HTML 中的注释，用于为代码添加注释或描述。它不会影响代码的功能，并且会被浏览器忽略。
<header> HTML 元素表示介绍性内容，通常是一组介绍性或导航辅助内容。
<main> HTML 元素表示文档 <body> 的主要内容区域。主要内容区域包含与文档中心主题直接相关或扩展的内容，或应用程序的核心功能。
<footer> HTML 元素表示其最近祖先分区内容或分区根元素的页脚。页脚通常包含有关该部分的作者信息、版权数据或相关文档的链接。

头部区域

主页部分应包含以下组件：

主页部分组件布局

接下来我们需要实现头部部分的布局，其中包含 Logo 图片和导航栏。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

使用 <div> 和 <nav> 标签将 Logo 和导航栏分为两个区域。
<img> HTML 元素用于将图片嵌入文档中。
<img> 标签中的 src 属性用于指定图片的路径。
<img> 标签中的 alt 属性用于描述图片，当图片无法正常显示时，alt 中的内容将会显示。
标签中的 class 是一个全局属性，等号后的内容相当于为元素赋予的名称，CSS 通过它来识别特定元素并为指定元素设置样式。
<ul> HTML 元素表示一个无序列表，通常呈现为带项目符号的列表。
<li> HTML 元素表示列表中的一个项目。
<a> HTML 元素用于定义超链接，创建不同页面之间的链接。

注意：HTML 用于将内容放置在网页上，而 CSS 对于创建视觉上吸引人的布局至关重要。在本实验中，我们专注于学习 HTML 内容。为了实现更好的页面设计，我还为你提供了完整的 style.css 文件。

主页区域布局

接下来，完成主页的布局，它由三部分组成：标题、文本和图片。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

<section> HTML 元素表示文档中的一个独立部分。
<h1> HTML 元素表示 <section> 元素中内容的标题。
<p> HTML 元素表示一个段落。

总结

在本实验中，你学习了如何构建和设计头部和主页布局，重点是为“Pet's House”创建一个友好且易于导航的界面。本实验强调了第一印象的重要性，并为构建一个用户友好的网站奠定了基础。

头部与主页布局

介绍

HTML 文档结构

语义化元素

头部区域

主页区域布局

总结