头部与主页布局

HTMLHTMLBeginner
立即练习

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

介绍

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

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

头部动画示例

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-271712{{"`头部与主页布局`"}} html/head_elems -.-> lab-271712{{"`头部与主页布局`"}} html/lang_decl -.-> lab-271712{{"`头部与主页布局`"}} html/layout -.-> lab-271712{{"`头部与主页布局`"}} html/nav_links -.-> lab-271712{{"`头部与主页布局`"}} html/doc_flow -.-> lab-271712{{"`头部与主页布局`"}} end

HTML 文档结构

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

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

图片描述

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

图片描述

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

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

  1. 超文本(Hyper):与“线性”相对。早期的计算机程序大多是线性的,意味着它们必须从上到下按顺序执行。而使用 HTML 创建的网页则允许通过超链接从一个页面导航到另一个页面。
  2. 文本(Text):与 C、C++ 或 Java 等编译型编程语言不同,HTML 是一种基于文本的脚本语言。它的源代码直接在浏览器中解释运行,无需编译。
  3. 标记(Markup):HTML 的基本原理是使用标记(由成对的尖括号组成的标签)来描述网页内容在浏览器中的显示方式。
  4. 语言(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 目前为空。当我们学习更多标签后,可以看到页面的效果。

✨ 查看解决方案并练习

语义化元素

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

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

添加语义化元素(headermainfooter)以逻辑化地组织内容。

<!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 教程