HTML的学习-通过创建相册WEB学习HTML-第二部分

文章目录

  • 二、学习开始
    • 3.6、form元素
      • 示例：添加form元素
      • 示例：action属性添加到form属性中
    • 3.7、input元素
      • 示例：在input属性中添加参数
    • 3.8、button元素
      • 示例：在button中添加type元素
      • 示例：定义单选按钮radio
    • 3.9、id属性
      • 示例：将值为 indoor 的 id 属性添加到单选按钮
      • 示例：添加value属性
    • 4.1、fieldset 元素
      • 示例：将 Indoor 和 Outdoor 单选按钮嵌套在 fieldset 元素中
      • 示例：在fieldest元素中添加legend元素
      • 示例：通过仅给 label 元素添加文本 Loving，并给它添加适当的 for 属性值，将文本 Loving 与复选框相关联
      • 示例：完善复选框与单选框
    • 4.2、footer元素
    • 示例：在main后添加footer元素
  • 三、最终代码

二、学习开始

3.6、form元素

form元素在HTML中的作用主要是负责数据采集，它定义了一个包含表单元素的区域，用户输入的信息都需要包含在form标签中。当用户点击提交按钮后，form标签内的数据将被发送到服务器或电子邮件地址。服务器上的处理程序（如ASP或PHP）会处理这些数据，然后将用户所需的信息返回到客户端的浏览器上，从而实现网页的交互性。

使用form元素的一般方式如下：

定义表单：使用form标签来定义一个表单的开始和结束。例如，form表示表单的开始，/form表示表单的结束。

指定表单提交的目的地：通过action属性指定表单数据提交到的URL地址。例如，form action=“url地址”。

指定表单数据的提交方式：通过method属性指定数据提交的方式，通常有GET和POST两种方式。例如，form method=“提交方式”。

添加表单域：表单域是用户输入信息的地方，可以通过各种input元素来实现，如文本框、复选框、单选按钮等。每个input元素都有一个type属性，用于指定输入字段的形式。

添加提示信息：为了提高用户体验，可以在表单中添加提示信息，帮助用户理解每个字段的含义和填写要求。

示例：添加form元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form>
          
        </form>
      </section>
    </main>
</body>
</html>

示例：action属性添加到form属性中

action属性定义了当用户提交表单时，数据将被发送到的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          
        </form>
      </section>
    </main>
</body>
</html>

3.7、input元素

input元素是创建交互式表单的基石，它有多种类型（type属性），每种类型决定了输入控件的外观和行为。以下是一些常见的input类型：

input type=“text”：用于单行文本输入，用户可以输入文字、数字或字符。

input type=“password”：用于密码输入，输入内容会以圆点或星号显示，以隐藏实际输入的字符。

input type=“button”：定义一个按钮，通常与JavaScript一起使用来执行某些操作。

input type=“checkbox”：定义复选框，允许用户从一组选项中选择多个。

input type=“radio”：定义单选按钮，通常用于提供互斥的选项。

input type=“file”：让用户能够上传文件。

input type=“submit”：定义提交按钮，用户点击后会提交表单

示例：在input属性中添加参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述

3.8、button元素

button标签用于创建可点击的按钮，通常用于表单提交或执行某些JavaScript函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button>Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述
注：即使你在文本输入下方添加了按钮，它们也会在页面上彼此相邻。 这是因为 input 和 button 元素都是内联元素，它们不会出现在新的行上。

示例：在button中添加type元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

示例：定义单选按钮radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <input type="radio">Indoor
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述

3.9、id属性

id 属性用于标识特定的 HTML 元素。 每个 id 属性的值必须不同于整个页面的所有其他 id 值

示例：将值为 indoor 的 id 属性添加到单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <label><input id="indoor" type="radio"> Indoor</label>
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

示例：添加value属性

value属性用于定义元素的具体值，其具体作用依赖于它所属的元素类型。

以下是不同场景下value属性的作用：

按钮类型：当input标签的type属性为"button"、"reset"或"submit"时，value属性定义了按钮上显示的文本。

文本输入类型：对于"text"、"password"和"hidden"类型的input元素，value属性设置了输入字段的初始（默认）值。

选择类型：在"checkbox"、"radio"和"image"类型的input元素中，value属性定义了与输入相关联的值，这个值会在表单提交时发送到服务器。

提交数据：当表单被提交到服务器时，服务器获取的是各个控件的value值，而不是用户在界面上看到的内容。

其他元素：value属性还可以与其他元素一起使用，如button、meter、li、option、progress和param，在这些元素中，它也是用来指定元素的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

4.1、fieldset 元素

fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起。

fieldset 元素是块级元素，这意味着它们出现在新的一行上。

示例：将 Indoor 和 Outdoor 单选按钮嵌套在 fieldset 元素中

fieldset 元素在HTML中起到了组织和描述表单控件的作用，使得表单更加结构化、易用和可访问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset></fieldset>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述

示例：在fieldest元素中添加legend元素

legend元素一般用于描述该组控件的用途或相关信息。当用户将鼠标悬停在 fieldset元素上时，浏览器通常会显示 legend元素的内容作为提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述

示例：通过仅给 label 元素添加文本 Loving，并给它添加适当的 for 属性值，将文本 Loving 与复选框相关联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox">
            <label for="loving">Loving</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述

示例：完善复选框与单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <footer></footer>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked>
            <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy">
            <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> 
            <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述

4.2、footer元素

footer元素在HTML中用于表示一个页面或者一个区域的页脚。它通常包含版权信息、作者信息、链接列表或者其他关于文档的信息。

示例：在main后添加footer元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
      <footer>
        <p>No Copyright - freeCodeCamp.org</p>
      </footer>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com">
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">
        </a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol start="1">
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked>
            <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy">
            <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> 
            <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="at photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
</body>
</html>

在这里插入图片描述

三、最终代码

<!DOCTYPE html> <!-- 声明文档类型为HTML -->
<html lang="en"> <!-- 设置页面语言为英语 -->
<head> <!-- 头部信息 -->
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度等于设备宽度，初始缩放比例为1 -->
    <title>CatPhotoApp</title> <!-- 设置页面标题为CatPhotoApp -->
</head>
<body> <!-- 页面主体内容 -->
    <main> <!-- 主要内容区域 -->
      <footer> <!-- 页脚区域 -->
        <p>No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a></p> <!-- 版权信息和链接 -->
      </footer>
      <h1>CatPhotoApp</h1> <!-- 页面主标题 -->
      <section> <!-- 第一个内容区域 -->
        <h2>Cat Photos</h2> <!-- 子标题 -->
        <!-- TODO: Add link to cat photos --> <!-- 待办事项：添加猫照片的链接 -->
        <p>See more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a> in our gallery.</p> <!-- 查看更多猫照片的链接 -->
        <a href="https://freecatphotoapp.com"> <!-- 图片链接 -->
          <img  alt="A cute orange cat lying on its back"> <!-- 图片描述 -->
        </a>
      </section>
      <section> <!-- 第二个内容区域 -->
        <h2>Cat Lists</h2> <!-- 子标题 -->
        <h3>Things cats love:</h3> <!-- 列表标题 -->
        <ul> <!-- 无序列表 -->
          <li>cat nip</li> <!-- 列表项 -->
          <li>laser pointers</li> <!-- 列表项 -->
          <li>lasagna</li> <!-- 列表项 -->
        </ul>
        <figure> <!-- 图文关联 -->
          <img  alt="A slice of lasagna on a plate."> <!-- 图片描述 -->
          <figcaption>Cats <em>love</em> lasagna.</figcaption> <!-- 图片说明 -->
        </figure>
        <h3>Top 3 things cats hate:</h3> <!-- 列表标题 -->
        <ol start="1"> <!-- 有序列表 -->
          <li>flea treatment</li> <!-- 列表项 -->
          <li>thunder</li> <!-- 列表项 -->
          <li>other cats</li> <!-- 列表项 -->
        </ol>
        <figure> <!-- 图文关联 -->
          <img  alt="Five cats looking around a field."> <!-- 图片描述 -->
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption> <!-- 图片说明 -->
        </figure>
      </section>
      <section> <!-- 第三个内容区域 -->
        <h2>Cat Form</h2> <!-- 子标题 -->
        <form action="https://freecatphotoapp.com/submit-cat-photo"> <!-- 表单提交地址 -->
          <fieldset> <!-- 表单分组 -->
            <legend>Is your cat an indoor or outdoor cat?</legend> <!-- 分组标题 -->
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label> <!-- 单选按钮：室内猫 -->
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label> <!-- 单选按钮：户外猫 -->
          </fieldset>
          <fieldset> <!-- 表单分组 -->
            <legend>What's your cat's personality?</legend> <!-- 分组标题 -->
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <!-- 复选框：爱猫 -->
            <label for="loving">Loving</label> <!-- 复选框标签：爱猫 -->
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <!-- 复选框：懒猫 -->
            <label for="lazy">Lazy</label> <!-- 复选框标签：懒猫 -->
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <!-- 复选框：活跃猫 -->
            <label for="energetic">Energetic</label> <!-- 复选框标签：活跃猫 -->
          </fieldset>
          <input type="text" name="catphotourl" placeholder="at photo URL" required> <!-- 文本输入框：猫照片URL -->
          <button type="submit">Submit</button> <!-- 提交按钮 -->
        </form>
      </section>
    </main>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/570831.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

交换式网络捕获网络流量的方法

交换式网络捕获网络流量的方法

交换式网络捕获网络流量的方法 参考资料&#xff1a; https://blog.csdn.net/weixin_44143678/article/details/107559329 # 一.端口镜像 端口镜像&#xff0c;又称为“端口监视”或“端口抄送”&#xff0c;是一种网络管理技术&#xff0c;旨在将网络设备上的特定端口的流…
阅读更多...
伙伴匹配（后端）-- 数据库表设计

伙伴匹配（后端）-- 数据库表设计

文章目录 用户表标签表队伍表用户队伍表sql语言分类&#xff08;题外话&#xff09;待更新... 在后端开发中&#xff0c;数据库表设计真的是非常重要的一环了&#xff0c;进入公司熟悉业务第一个要看的也是数据库的表,接下来就让我们看看本项目的数据库表有哪些吧&#xff08;暂…
阅读更多...
LoRA: 大模型的低秩适配

LoRA: 大模型的低秩适配

笔记整理&#xff1a;陈一林&#xff0c;东南大学硕士&#xff0c;研究方向为不确定知识图谱规则学习 链接&#xff1a;https://arxiv.org/abs/2106.09685 1、动机 自然语言处理的一个重要范式包括在通用领域数据上进行大规模预训练&#xff0c;然后对特定任务或领域进行适应性…
阅读更多...
Go语言中通过数据对齐降低内存消耗和提升性能

Go语言中通过数据对齐降低内存消耗和提升性能

数据对齐是一种安排数据分配方式以加速 CPU 访问内存的方法。 不了解这个概念会导致额外的内存消耗甚至性能下降。 要了解数据对齐的工作原理&#xff0c;让我们首先讨论没有它会发生什么。假设我们分配两个变量&#xff0c;一个 int32 类型的 &#xff08;32 B&#xff09; 和…
阅读更多...
【上海大学计算机组成原理实验报告】四、指令系统实验

【上海大学计算机组成原理实验报告】四、指令系统实验

一、实验目的 了解指令结构、PC寄存器的功能和指令系统的基本工作原理。 学习设计指令的方法。 二、实验原理 根据实验指导书的相关内容&#xff0c;对于部分使用频率很高&#xff0c;且只用几条微指令即可完成的简单操作&#xff0c;可以把这部分简单操作的微指令序列固定下…
阅读更多...
安装esxi 7 对硬件资源的需求

安装esxi 7 对硬件资源的需求

安装VMware vSphere ESXi 7.0 虚拟化平台对硬件资源的基本需求如下&#xff1a; 处理器&#xff1a; 必须是64位x86架构的CPU。至少需要两个物理核心&#xff08;不过对于生产环境&#xff0c;建议更多的核心数以支持更多虚拟机并保证性能&#xff09;。支持并启用硬件辅助虚拟…
阅读更多...
SpringMvc(2)RequestMapping注解

SpringMvc(2)RequestMapping注解

RequestMapping注解 1 、RequestMapping的作用2、RequestMapping的出现位置3、类上与方法上结合使用4、RequestMapping注解的value属性4.1 value属性的使用4.2 Ant风格的value4.3 value中的占位符&#xff08;重点&#xff09; 5、RequestMapping注解的method属性5.2衍生Mappin…
阅读更多...
k8s集群CD工具-ArgoCD

k8s集群CD工具-ArgoCD

ArgoCD是什么 Argo CD 是 Kubernetes 的声明式 GitOps 持续交付工具。应用程序定义、配置和环境应该是声明性的和版本控制的。应用程序部署和生命周期管理应该是自动化的、可审计的且易于理解。 官方文档 CD工作流&#xff08;无ArgoCD&#xff09; 假设有一个微服务应用程序…
阅读更多...
＜计算机网络自顶向下＞

＜计算机网络自顶向下＞

在计算机网络中&#xff0c;网络层包括数据平面和控制平面&#xff0c;它们分别负责网络数据转发和网络路由控制。以下是它们之间的区别&#xff1a; 数据平面&#xff08;Data Plane&#xff09;&#xff1a; 数据平面负责实际的数据传输和转发&#xff0c;它处理网络中的数据…
阅读更多...
AI-数学-高中-40法向量求法

AI-数学-高中-40法向量求法

原作者视频&#xff1a;【空间向量】【考点精华】3法向量求法稳固&#xff08;基础&#xff09;_哔哩哔哩_bilibili 注意&#xff1a;法向量对长度没有限制&#xff0c;求法向量时&#xff0c;可以假设法向量z为任意一个取非0的值。 示例1&#xff1a; 示例2&#xff1a;
阅读更多...
Transformer - 特征预处理

Transformer - 特征预处理

Transformer - 特征预处理 flyfish 原始数据 train_data.values [[ 5.827 2.009 1.599 0.462 4.203 1.34 30.531][ 5.76 2.076 1.492 0.426 4.264 1.401 30.46 ][ 5.76 1.942 1.492 0.391 4.234 1.31 30.038][ 5.76 1.942 1.492 0.426 4.234 1.31…
阅读更多...
AndroidStudio中虚拟机(AVD)无法启动,出现unable to locate adb错误

AndroidStudio中虚拟机(AVD)无法启动,出现unable to locate adb错误

1.检查Android SDK Platform-Tools是否安装(个人是通过这个方法解决的) 首先通过File-Project Structure-Project SDK检查SDK有没有被选中 步骤&#xff1a;打开file -> settings &#xff0c;搜索SDK 之后点击"-",在点击Apply进行安装 2.可能是驱动的问题 电脑…
阅读更多...
牛客NC179 长度为 K 的重复字符子串【simple 哈希，滑动窗口 C++、Java、Go、PHP】

牛客NC179 长度为 K 的重复字符子串【simple 哈希，滑动窗口 C++、Java、Go、PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/eced9a8a4b6c42b79c95ae5625e1d5fd 思路 哈希统计每个字符出现的次数。没在窗口内的字符要删除参考答案C class Solution {public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c…
阅读更多...
python(一)

python(一)

一、字面量 字面量:在代码中&#xff0c;被写下来的固定的值&#xff0c;称之为字面量。 Python中常用的有6种值(数据)的类型&#xff1a; 二、注释 注释的分类: 单行注释&#xff1a;以#开头&#xff0c;#右边的所有文字当作说明&#xff0c;而不是真正要执行的程序&#…
阅读更多...
2024新算法爱情进化算法（LEA）和经典灰狼优化器（GWO）进行无人机三维路径规划设计实验

2024新算法爱情进化算法（LEA）和经典灰狼优化器（GWO）进行无人机三维路径规划设计实验

简介&#xff1a; 2024新算法爱情进化算法&#xff08;LEA&#xff09;和经典灰狼优化器&#xff08;GWO&#xff09;进行无人机三维路径规划设计实验。 无人机三维路径规划的重要意义在于确保飞行安全、优化飞行路线以节省时间和能源消耗&#xff0c;并使无人机能够适应复杂环…
阅读更多...
多模态模型

多模态模型

转换器成功作为构建语言模型的一种方法&#xff0c;促使 AI 研究人员考虑同样的方法是否对图像数据也有效。 研究结果是开发多模态模型&#xff0c;其中模型使用大量带有描述文字的图像进行训练&#xff0c;没有固定的标签。 图像编码器基于像素值从图像中提取特征&#xff0c;…
阅读更多...
C++笔记：类和对象(一)-＞封装

C++笔记：类和对象(一)-＞封装

类和对象 认识类和对象 先来回忆一下C语言中的类型和变量&#xff0c;类型就像是定义了数据的规则&#xff0c;而变量则是根据这些规则来实际存储数据的容器。类是我们自己定义的一种数据类型&#xff0c;而对象则是这种数据类型的一个具体实例。类就可以理解为类型&#xff0c…
阅读更多...
vue2知识点————(父子通信)

vue2知识点————(父子通信)

vue2的知识点&#xff0c;更多前端知识在主页&#xff0c;还有其他知识会持续更新 vue组件 在Vue.js 2.x中&#xff0c;父子组件之间的通信是非常常见的情况&#xff0c;Vue提供了多种方法来实现这种通信。 Props 父向子通信 Props 是父组件向子组件传递数据的一种方式。通过…
阅读更多...
Java的八大基本数据类型和 println 的介绍

Java的八大基本数据类型和 println 的介绍

前言 如果你有C语言的基础&#xff0c;这部分内容就会很简单&#xff0c;但是会有所不同~~ 这是我将要提到的八大基本数据类型&#xff1a; 注意&#xff0c;Java的数据类型是有符号的&#xff01;&#xff01;&#xff01;和C语言不同&#xff0c;Java不存在无符号的数据。 整…
阅读更多...
【电控笔记5.8】数字滤波器设计流程频域特性

【电控笔记5.8】数字滤波器设计流程频域特性

数字滤波器设计流程&频域特性 2HZ ： w=2pi2=12.56 wc=2*pi*5; Ts=0.001; tf_lpf =
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站