文章目录

• • • 1. 标题元素标签
    • 2. `p`元素用于在网站上创建一段文本
    • 3. 注释让你在不影响浏览器显示内容的情况下，留下信息，它也能让你的代码失效
    • 4. 页面主要部分标识标签
    • 5. 通过使用`img`元素来为你的网站添加图片
    • 6. 使用锚点元素`(a)`链接到另一个页面
    • 7. 使用 `section` 元素将照片内容与未来的内容分开
    • 8. 无序列表`(ul)`元素，列表项`(li)`元素在列表中创建项目
    • 9. `figure` 元素代表独立的内容，并允许将图像与标题相关联
    • 10. 图像标题`(figcaption)`元素用于添加标题以描述 figure 元素中包含的图像
    • 11. 将 `figcaption` 元素中的单词包裹在强调 `em` 元素中来强调它(斜体)
    • 12. 有序列表`(ol)`的代码类似于无序列表，但有序列表中的列表项在显示时会被编号
    • 13. 将添加一个 Web 表单来收集来自用户的信息
    • 14. `input` 元素允许通过多种方式从 Web 表单中收集数据
    • 15. `button` 元素创建一个可点击的按钮
    • 16. 对于需要从多个选项中获得一个答案的问题，可以使用单选按钮 ``
    • 17. `label` 元素用于帮助将 `input` 元素的文本与 `input` 元素本身关联起来（尤其是对于屏幕阅读器等辅助技术）。

1. 标题元素标签

h1到h6标题元素用于表明其下方内容的重要性。 数字越低，重要性越高，所以h2元素所具有的重要性要低于h1元素。 每页只使用一个h1元素，并将重要性较低的标题放在重要性较高的标题之下。

Hello World
Cat Photos

2. p元素用于在网站上创建一段文本

See more cat photos in our gallery.

3. 注释让你在不影响浏览器显示内容的情况下，留下信息，它也能让你的代码失效

4. 页面主要部分标识标签

HTML5 有些元素能够指明不同的内容区域， 这些元素能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍访问。

5. 通过使用img元素来为你的网站添加图片

img元素只有一个开始标签，没有结束标签。 一个没有结束标签的元素，它的标签被称为自闭合标签。
在img元素中的src属性明确了一个图片的URL(图片所在的位置)

所有的img元素都应该有一个alt属性。alt属性的文本（值）有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本

6. 使用锚点元素(a)链接到另一个页面

链接的文本必须放置在锚点元素(a)的起始和闭合标签之间

click here to go to freeCodeCamp.org

在p元素的文本中，将单词 cat photos 转换为指向 https://freecatphotoapp.com 的链接，通过把这些单词放到开始和结束锚点标签(a)内来实现

See more cat photos in our gallery.

向锚点元素(a)的起始标签中添加值为 _blank 的 target 属性，用以在新的标签页中打开链接

See more cat photos in our gallery.

锚点元素也可以把其他类型的内容放在锚标签中，将其转换成一个链接；用必要的元素标签包裹图片，把它变成一个链接

7. 使用 section 元素将照片内容与未来的内容分开

8. 无序列表(ul)元素，列表项(li)元素在列表中创建项目

milk
cheese

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

10. 图像标题(figcaption)元素用于添加标题以描述 figure 元素中包含的图像

在嵌套在 figure 元素中的图像之后，添加一个 figcaption 元素

11. 将 figcaption 元素中的单词包裹在强调 em 元素中来强调它(斜体)

12. 有序列表(ol)的代码类似于无序列表，但有序列表中的列表项在显示时会被编号

flea treatment
thunder
other cats

13. 将添加一个 Web 表单来收集来自用户的信息

action 属性指示应该将表单数据发送到哪里,例如告诉浏览器应该将表单数据发送到路径/submit-url

14. input 元素允许通过多种方式从 Web 表单中收集数据

与 img 元素一样，input 元素是自闭合的，并且不需要结束标签
使用 type 属性创建多种输入，可以创建密码字段、重置按钮或控件，让用户从他们的计算机中选择文件
例如，创建一个文本字段以从用户那里获取文本输入

为了通过 action 属性中指定的位置访问表单的数据，必须给文本字段一个 name 属性，并为其分配一个值来表示数据正在提交

placeholder占位符文本用于提示人们在输入框中输入什么样的信息（起提示作用，并不是在框内输入内容）

为了防止用户在缺少所需信息时提交表单，需要将 required 属性添加到 input 元素。 无需为 required 属性设置值。 只需将单词 required 添加到 input 元素，确保它和其他属性之间有空格

id 属性用于标识特定的 HTML 元素， 每个 id 属性的值必须不同于整个页面的所有其他 id 值
当元素具有多个属性时，属性的顺序无关紧要

 Indoor

为了使选择一个单选按钮自动取消选择另一个，两个按钮必须有具有相同值的 name 属性

 Indoor
 Outdoor

为两个单选按钮添加 value 属性
如果选择 Indoor 单选按钮并提交表单，则该按钮的表单数据基于其 name 和 value 属性。 由于单选按钮没有 value 属性，因此表单数据将包含 indoor-outdoor=on，这在有多个按钮时没有用处
为两个单选按钮添加 value 属性。 为方便起见，将按钮的 value 属性设置为与其 id 属性相同的值

15. button 元素创建一个可点击的按钮

例如，创建一个带有文本 Click Here 的按钮

Click Here

在 input 元素下方添加带有文本 Submit 的 button 元素。 单击没有任何属性的表单按钮的默认行为会将表单提交到表单的 action 属性中指定的位置
即使你在文本输入下方添加了按钮，它们也会在页面上彼此相邻。 这是因为 input 和 button 元素都是内联元素，它们不会出现在新的行上

添加的按钮将默认提交表单， 而依赖默认行为可能造成混乱。 将值为 submit 的 type 属性添加到 button 以明确它是一个提交按钮

Submit

16. 对于需要从多个选项中获得一个答案的问题，可以使用单选按钮

17. label 元素用于帮助将 input 元素的文本与 input 元素本身关联起来（尤其是对于屏幕阅读器等辅助技术）。

例如， cat 使得点击单词 cat 也会选择相应的单选按钮