该篇文章为 freecodecape Learn HTML by Building a Cat Photo App 学习笔记

查看效果：cat-photo-app

void element（空元素）

没有关闭标签的元素，叫做 void element。比如 <br>、<hr>、<img>。

HTML5 TAGS

HTML5 新增了一些新的元素，用来标识不同的区域，这些元素使你的页面更易于阅读，并有助于搜索引擎优化（SEO）和 可访问性（accessibility）。

main

main 用于表示 HTML 文档正文的主要内容，元素内的内容对于文档来说应该是唯一的，并且不应该在文档的其它部分中重复。

section

section 元素用于定义文档中的部分，例如章节、页眉、页脚或文档的任何其它部分。它是一个有助于搜索引擎优化（SEO）和可访问性（accessibility）的语义元素。

em

要强调特定的单词或短语，可以使用 em 元素。见下面 figure 示例。

figure

figure 元素代表独立的内容，允许你将图像与标题相关联

1
2
3
4
5
<figure>
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
    <!-- 添加figcaption标题描述图片包含的图像 -->
    <figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>

fieldset

fieldset 元素用于在 Web 表单将相关 input 和 label 分组起来，它是块级元素，意味着它会出现在新行上。

1
2
3
4
5
6
7
8
9
10
<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>

legend

legend 元素用于为 fieldset 元素定义标题。它为用户提供有关应该在表单该部分中输入什么内容。

footer 元素用于定义 document 和 section 的页脚。通常包含文档作者、版权数据、使用条款链接、联系信息等信息。

HTML 元素

img

  • src：图片的 URL 地址
  • alt：用于屏幕阅读器以提高可访问性，并在图像加载失败时显示。

示例：

1
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back">

a

  • href：链接的 URL 地址
  • target：打开链接的方式，默认为 _self，表示在当前窗口打开，_blank 表示在新窗口打开。

strong

strong 元素用于指示某些文本非常重要或者紧急。

form

form 元素用于从用户获取信息，例如姓名、电子邮件和其他详细信息。

attributes:

  • action：表单数据要发送的 URL 地址。

input

input 元素允许你通过多种方式从 Web 表单收集数据，和 img 元素一样，它是一个 void element，不需要结束标签。

attributes:

  • type：创建多种输入（text、radio）。可以轻松创建密码字段、重置按钮或控件以让用户从计算机中选择文件。
  • name：为了访问表单的数据，必须为 input 指定一个 name 属性，为其分配一个值来表示正在提交的数据。
  • placeholder：占位符，提示用户输入什么。
  • required：强制用户输入内容，需要将 required 属性添加到 input 元素中。无需为 required 设置值，确保它与其它属性之间有空格就行。
1
<input type="text" name="catphotourl" placeholder="cat photo URL" required>

button

button 元素用于创建可点击的按钮。

attributes:

  • type: submit 表示提交表单，reset 表示重置表单。

label

label 元素帮助将 input 元素的文本与 input 元素本身关联起来（特别是当用户使用屏幕阅读器时）。

1
<label><input type="radio"> Indoor</label>