表单和页脚布局

HTMLHTMLBeginner
立即练习

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

介绍

本实验将指导你创建一个联系表单和页脚部分,这对于交互和提供额外信息至关重要。

联系表单和页脚示例

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/head_elems -.-> lab-271711{{"`表单和页脚布局`"}} html/charset -.-> lab-271711{{"`表单和页脚布局`"}} html/layout -.-> lab-271711{{"`表单和页脚布局`"}} html/nav_links -.-> lab-271711{{"`表单和页脚布局`"}} html/forms -.-> lab-271711{{"`表单和页脚布局`"}} html/form_valid -.-> lab-271711{{"`表单和页脚布局`"}} html/form_access -.-> lab-271711{{"`表单和页脚布局`"}} html/inter_elems -.-> lab-271711{{"`表单和页脚布局`"}} end

联系我们布局

“联系我们”部分由两部分组成:文本段落和表单内容。HTML 提供了多种类型的表单元素,例如文本框表单、多选题表单、提交按钮表单等。

<!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>
        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>
        <section id="display" class="samples">
          <div class="section-text">
            <h2>Display</h2>
          </div>
          <div class="services">
            <div class="service">
              <figure>
                <img src="images/service-1.png" alt="Dog walking services" />
                <figcaption>Provide pet care services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-2.png" alt="Pet check-up services" />
                <figcaption>Provide pet check-up services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-3.png" alt="Pet washing services" />
                <figcaption>Provide pet washing services.</figcaption>
              </figure>
            </div>
          </div>
        </section>
        <section id="contact" class="contact-section">
          <div class="section-text">
            <h2>Contact Us</h2>
            <p>
              Welcome to our pet website! We're thrilled to have you here and
              eager to share with you the array of services we offer for you and
              your beloved pets. Whether you're looking for grooming, boarding,
              training, or any other pet-related service, we've got you covered.
              Our team is passionate about animals and committed to providing
              the best care possible. If you're interested in learning more
              about our services or if you're considering joining our community,
              we encourage you to fill out our form. This will allow us to
              understand your needs better and offer tailored solutions for you
              and your pet. Welcome aboard, and we look forward to serving you!
            </p>
          </div>
          <div class="contact-info">
            <div class="form-box">
              <form id="form" class="contact-form">
                <label for="name" class="form-content"
                  >Name <br />
                  <input
                    name="name"
                    id="name"
                    type="text"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="email" class="form-content"
                  >Email <br />
                  <input
                    name="email"
                    id="email"
                    type="email"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="message" class="form-content"
                  >Demand for services<br />
                  <select name="message" id="message" class="txt-box">
                    <option value="">Feeding pets at home</option>
                    <option value="">Pet play service</option>
                    <option value="">Pet bathing service</option>
                    <option value="">Join us</option>
                  </select>
                  <br /> </label
                ><br />
                <input class="btn" id="submit" type="submit" value="Submit" />
              </form>
            </div>
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>
  • <form> HTML 元素表示包含用于提交信息的交互控件的文档部分。
  • <label> HTML 元素表示用户界面中项目的标签。要将 <label> 元素与 <input> 元素显式关联,首先需要在 <input> 元素中添加 id 属性。接下来,在 <label> 元素中添加 for 属性,其中 for 的值与 <input> 元素中的 id 相同。
  • <input> HTML 元素用于创建基于 Web 表单的交互控件,以接受用户输入的数据;根据设备和用户代理的不同,提供了多种类型的输入数据和控制小部件。
  • <select> HTML 元素表示提供选项菜单的控件。
  • 每个 <option> 元素都应包含一个 value 属性,其中包含选择该选项时要提交到服务器的数据值。如果未包含 value 属性,则值默认为元素中包含的文本。
  • type 属性允许你指定不同类型的输入元素。
    • type="text" 表示这是一个文本输入字段。
    • type="email" 表示这是一个电子邮件输入字段。
    • type="submit" 表示这是一个带有提交按钮的表单元素。

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

联系我们表单预览
✨ 查看解决方案并练习

锚点元素

接下来,我们希望实现点击导航栏中的 HomeAbout UsDisplayContact 时,能够跳转到相应的内容区域。

在导航栏的 ul 列表项中添加 a 标签:

<nav class="navigation-section">
  <ul class="navigation">
    <li><a class="nav-link" href="#home">Home</a></li>
    <li><a class="nav-link" href="#about">About Us</a></li>
    <li><a class="nav-link" href="#display">Display</a></li>
    <li><a class="nav-link" href="#contact">Contact</a></li>
  </ul>
</nav>
  • <a> HTML 元素(或锚点元素)通过其 href 属性创建指向网页、文件、电子邮件地址、同一页面中的位置或任何 URL 可以指向的内容的超链接。

  • 每个 <a> 元素中的内容应指示链接的目标。如果存在 href 属性,当焦点位于 <a> 元素上时按下回车键将激活它。这里我们在 href 属性中添加了相应布局的 id 属性名称。

✨ 查看解决方案并练习

页脚布局

最后,实现页脚部分的内容。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--header-section-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li><a class="nav-link" href="#home">Home</a></li>
          <li><a class="nav-link" href="#about">About Us</a></li>
          <li><a class="nav-link" href="#display">Display</a></li>
          <li><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <!--main section-->
    <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>

        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>

        <!-- display section -->
        <section id="display" class="samples">
          <div class="section-text">
            <h2>Display</h2>
          </div>
          <div class="services">
            <div class="service">
              <figure>
                <img src="images/service-1.png" alt="Dog walking services" />
                <figcaption>Provide pet care services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-2.png" alt="Pet check-up services" />
                <figcaption>Provide pet check-up services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-3.png" alt="Pet washing services" />
                <figcaption>Provide pet washing services.</figcaption>
              </figure>
            </div>
          </div>
        </section>
        <!-- contact section -->
        <section id="contact" class="contact-section">
          <div class="section-text">
            <h2>Contact Us</h2>
            <p>
              Welcome to our pet website! We're thrilled to have you here and
              eager to share with you the array of services we offer for you and
              your beloved pets. Whether you're looking for grooming, boarding,
              training, or any other pet-related service, we've got you covered.
              Our team is passionate about animals and committed to providing
              the best care possible. If you're interested in learning more
              about our services or if you're considering joining our community,
              we encourage you to fill out our form. This will allow us to
              understand your needs better and offer tailored solutions for you
              and your pet. Welcome aboard, and we look forward to serving you!
            </p>
          </div>
          <div class="contact-info">
            <div class="form-box">
              <form id="form" class="contact-form">
                <label for="name" class="form-content"
                  >Name <br />
                  <input
                    name="name"
                    id="name"
                    type="text"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="email" class="form-content"
                  >Email <br />
                  <input
                    name="email"
                    id="email"
                    type="email"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="message" class="form-content"
                  >Demand for services<br />
                  <select name="message" id="message" class="txt-box">
                    <option value="">Feeding pets at home</option>
                    <option value="">Pet play service</option>
                    <option value="">Pet bathing service</option>
                    <option value="">Join us</option>
                  </select>
                  <br /> </label
                ><br />
                <input class="btn" id="submit" type="submit" value="Submit" />
              </form>
            </div>
          </div>
        </section>
      </div>
    </main>
    <footer>
      <span class="contact-us">Contact Us</span>
      <span class="company-info">Created by Lotus</span>
      <span>@Copyright 2024</span>
    </footer>
  </body>
</html>
  • <span> HTML 元素是一个通用的行内容器,用于包裹短语内容,它本身并不表示任何特定含义。它可以用于分组元素以便进行样式设置(使用 class 或 id 属性),或者因为它们共享属性值,例如 lang。只有在没有其他语义元素适用时才应使用 <span><span><div> 元素非常相似,但 <div> 是块级元素,而 <span> 是行内元素。

行内元素:

图片描述

块级元素:

图片描述
✨ 查看解决方案并练习

外部资源链接元素

<link> HTML 元素用于指定当前文档与外部资源之间的关系。该元素最常用于链接样式表,但也用于建立网站图标(包括“favicon”样式的图标以及移动设备主屏幕和应用程序的图标)等。

我们使用了多种 HTML 元素来构建页面的内容,如果想要实现图片中的效果,我们需要使用 CSS。这里准备了一个完整的 CSS 文件(style.css),我们使用 <link> 元素将其引入。

<head>
  <meta charset="UTF-8" />
  <title>Pet's House</title>
  <link rel="stylesheet" href="./style.css" />
</head>

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

HTML 链接元素示例
✨ 查看解决方案并练习

总结

在本实验中,你通过添加联系表单和页脚完成了网站,学习了用户交互和信息可访问性。本实验强化了沟通渠道和一致设计在网页开发中的重要性,完善了网站的结构。

恭喜你完成了 HTML 的入门学习。如果你想了解如何为页面添加样式,可以学习 CSS 的实验!

您可能感兴趣的其他 HTML 教程