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

news2024/9/20 2:56:11

文章目录

  • 二、学习开始
    • 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.coloradmin.cn/o/1612219.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

时序分析基础（6）——input delay时序分析

时序分析基础（6）——input delay时序分析

1 简介 FPGA对于外部的时钟以及数据的延时信息是不知道的&#xff0c;在低速时钟且时钟发射沿在数据正中心的时候&#xff0c;一般可以不做约束来直接使用。但是到了高速时钟或者双沿采样或者发射沿和数据对齐的情况下&#xff0c;这时候就需要告诉VIVADO外部的时钟与数据情况来…
阅读更多...
[2021最新]大数据平台CDH存储组件kudu之启用HA高可用(添加多个master)

[2021最新]大数据平台CDH存储组件kudu之启用HA高可用(添加多个master)

今天在做kudu高可用的时候没有参考官网&#xff0c;直接按照常规方式&#xff08;添加角色—>编辑属性—>启动&#xff09;结果发现报错&#xff1f;然后参考了一下文档之后发现这玩意儿还有点玄学&#xff0c;做一下记录。 1.添加两个master。kudu master有leader和foll…
阅读更多...
革命性创新，实景AI无人自动直播系统，轻松实现24小时日不落直播卖券。

革命性创新，实景AI无人自动直播系统，轻松实现24小时日不落直播卖券。

革命性创新&#xff01;实景AI无人自动直播系统&#xff0c;轻松实现24小时日不落直播卖券&#xff01; 最近&#xff0c;越来越多的朋友纷纷关注到了AI自动直播带货的新玩法&#xff0c;并且也都想要开设自己的自动直播间。然而&#xff0c;对于这种自动讲解、自动回复的直播…
阅读更多...
docker-003镜像制作

docker-003镜像制作

步骤 使用docker commit提交容器使之成为镜像以ubuntu安装vim后的容器为例 1 ubuntu安装vim 启动容器 docker run -it --nameubuntu-vim ubuntu /bin/bash安装vim apt-get update apt-get install vim2 提交容器作为镜像 查看容器 docker ps -a提交容器作为镜像 命令格式&…
阅读更多...
js 打印网页时没有背景色，window.print打印背景色丢失

js 打印网页时没有背景色，window.print打印背景色丢失

页面效果 打印效果 需要在打印的容器里增加下面代码 /*webkit 为Google Chrome、Safari等浏览器内核*/ -webkit-print-color-adjust: exact; /*解决火狐浏览器打印*/ print-color-adjust: exact; color-adjust: exact; 完整写法 我为了方便直接写*&#xff0c;这样所有元素都…
阅读更多...
如何设置unbuntu时间及同步时间

如何设置unbuntu时间及同步时间

文章目录 时区时间同步与服务 时间同步的重要性Ubuntu系统中设置时间和同步时间方法一&#xff1a;通过图形界面设置查看当前时间设置时间和时区设置时区&#xff08;假设设置为UTC&#xff09;&#xff1a;设置本地时间&#xff08;例如&#xff0c;设置时间为2024年4月21日 1…
阅读更多...
23.组件注册方式

23.组件注册方式

组件注册方式 一个 Vue 组件在使用前需要先被“注册”&#xff0c;这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式&#xff1a;全局注册和局部注册 全局注册 import { createApp } from vue import App from ./App.vue import GlobalComponent from ".…
阅读更多...
【C++】STL：vector常用接口的使用和模拟实现

【C++】STL：vector常用接口的使用和模拟实现

Hello everybody!这篇文章主要给大家讲讲vector常用接口的模拟实现&#xff0c;STL库中的实现一层套着一层&#xff0c;十分复杂&#xff0c;目前阶段还不适合看源代码。而模拟实现可以让我们从底层上了解这些接口的原理从而更好的使用这些接口。另外我还会讲一些在vector使用过…
阅读更多...
OSPF的学习笔记

OSPF的学习笔记

1.OSPF &#xff08;1&#xff09;链路状态路由协议的路由信息并不是像距离矢量路由协议那样(邻居告诉的)&#xff0c;通过收集自身以及邻居发出的LSA(原材料)&#xff0c;并LSA放到指定仓库里面(LSDB)&#xff0c;通过SPF算法&#xff0c;以自己为根计算到达网络每个节点的最优…
阅读更多...
LeetCode刷题实战5：最长回文子串

LeetCode刷题实战5：最长回文子串

题目内容 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba"…
阅读更多...
虚拟线程的定义及使用

虚拟线程的定义及使用

0.前言 长期以来&#xff0c;虚拟线程是 Java 中最重要的创新之一。 它们是在 Project Loom 中开发的&#xff0c;自 Java 19 作为预览功能以来一直包含在 JDK 中&#xff0c;自 Java 21 作为最终版本 (JEP 444) 以来&#xff0c;它们已包含在 JDK 中。 1.虚拟线程的作用 任…
阅读更多...
深入OceanBase内部机制：资源隔离实现的方式总结

深入OceanBase内部机制：资源隔离实现的方式总结

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 1. 为何HTAP需要资源隔离2. OceanBase的资源隔离机制概述租户间资源隔离租户内资源隔离物理资源隔离大查询请求的隔离优先级…
阅读更多...
如何批量给Word文件增加前缀序号？“汇帮批量重命名”帮助你批量给word文件增加前缀序号。

如何批量给Word文件增加前缀序号？“汇帮批量重命名”帮助你批量给word文件增加前缀序号。

批量给Word文件增加前缀序号的过程&#xff0c;对于经常处理大量文档的人来说&#xff0c;是一项既繁琐又必要的任务。首先&#xff0c;我们需要明确为什么要给Word文件增加前缀序号。在很多情况下&#xff0c;当我们需要按照一定的顺序对多个文档进行管理和归档时&#xff0c;…
阅读更多...
【CSS】CSS实现元素逐渐消失（实现元素透明逐渐消失/模糊）

【CSS】CSS实现元素逐渐消失（实现元素透明逐渐消失/模糊）

mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%);mask-image 属性用于定义一个遮罩&#xff0c;它可以隐藏元素的一部分或全部内容。在这个示例中&#xff0c;我们使用 mask-image 属性来定义一个线性渐变的遮罩&#xff0c;使得列表项的内…
阅读更多...
适配器模式【结构型模式C++】

适配器模式【结构型模式C++】

1.概述 适配器模式是一种结构型设计模式&#xff0c; 又称为变压器模式、包装模式&#xff08;Wrapper&#xff09; 将一个类的接口变换成客户端所期待的另一种接口&#xff0c;从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。 2.结构 Target&#xff1a;适配…
阅读更多...
Https网站接口被黑被恶意调取

Https网站接口被黑被恶意调取

背景&#xff1a; 维护的一个网站最近短信接口被黑&#xff0c;发送大量短信。起初以为是在网站内部操作&#xff0c;优化了发送短信前的操作&#xff0c;如添加图形验证码&#xff0c;屏蔽国外IP等。但后续还存在被调取情况&#xff0c;定位排查到是该接口在外部被恶意调取。 …
阅读更多...
Pod 状态 Bsck Off，是什么情况？

Pod 状态 Bsck Off，是什么情况？

k8s项目运维中&#xff0c;相信各位都遇到过 Pod 状态 Bsck Off 的情况&#xff0c;如上图&#xff1a;该情况主要原因是我们 Pod 中没有任何容器运行成功&#xff0c;而能容器能成功运行的前提是&#xff0c;容器内部是有进程的&#xff0c;只要容器中的进程不停止&#xff0c…
阅读更多...
ATM第二弹~~~

ATM第二弹~~~

昨天发现自己电脑的运行速度太慢的问题后&#xff0c;在autodl租了个4090 &#xff08;本来跑了4个小时快好了&#xff0c;但由于没有续上费&#xff0c;断了。。。。&#xff09; ( 2.58 每小时&#xff0c;贵死我了。。。。&#xff09; 又重新开了个4090d&#xff08;409…
阅读更多...
论文笔记：Large Language Model for Participatory Urban Planning

论文笔记：Large Language Model for Participatory Urban Planning

202402 arxiv 大模型城市规划 引入了一个基于LLM的多代理协作框架&#xff0c;模拟规划师和数千名具有不同特征和背景的居民&#xff0c;用于参与式城市规划——>生成考虑居民多样化需求的城市区域土地利用规划为了提高讨论的效率&#xff0c;论文采用了鱼缸讨论机制&#…
阅读更多...
二维码门楼牌管理应用平台建设：网格化管理的新篇章

二维码门楼牌管理应用平台建设：网格化管理的新篇章

文章目录 前言一、二维码门楼牌管理应用平台的建设背景二、二维码门楼牌管理应用平台的功能特点三、二维码门楼牌管理应用平台的实际应用四、二维码门楼牌管理应用平台的前景展望 前言 随着信息技术的飞速发展&#xff0c;二维码门楼牌管理应用平台的建设已成为城市网格化管理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023