通过freecodecamp.org学习 HTML 和 CSS

绪论

在响应式网页设计的认证课程中，你将学习用于构建网页的语言： HTML（超文本标记语言）用于创建内容，CSS（级联样式表）用于样式设计。

首先，你将通过编写一个展示猫咪图片的应用来学习 HTML 和 CSS 的基本知识。 然后，通过构建一只企鹅来学习像 CSS 变量这样的现代技术，并通过搭建网页表单来学习无障碍的最佳实践。

最后，你将通过编写一个 Twitter 卡片，学习如何使用 Flexbox 实现适应不同屏幕大小的网页 ，以及如何用 CSS Grid 实现一个复杂的博客布局。

基本步骤1-6

1、HTML 元素中拥有开始标签，如 <h1>，和结束标签，如 </h1>。元素的文本在元素的开始标签和结束标签之间。

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

在 h1 元素下方，添加带有以下文本的 h2 元素：

3、p 元素用于在网站上创建一段文本。 在你的 h2 元素下方创建一个 p 元素，并为其提供以下文本：

4、注释让你在不影响浏览器显示内容的情况下，留下信息。 它也能让你的代码失效。 在 HTML 中，一个注释以 <!-- 开始，包含数行文本，并以 --> 结束。 例如此注释 <!-- TODO: Remove h1 --> 包含着文本 TODO: Remove h1。

任务：使用以下文本在 p 元素上方添加注释：TODO: Add link to cat photos

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

通过在 h1 元素之前添加 <main> 开始标签和在 p 元素之后添加 </main> 结束标签来标识此页面的主要部分。

以上步骤答案

   <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>Click here to view more cat photos.</p>
    </main>

结果预览 

6.在上一步中，你将 h1 元素、h2 元素、注释和 p 元素嵌套在 main 元素中。 这叫作 嵌套。 嵌套的元素（子元素）的位置应该放在被他们嵌套的元素（父元素）中新的一行并且右侧保留两个空格的间距的后面。 这个间距被称为缩进，它被用来使 HTML 更容易读。

h1 元素、h2 元素和注释比下面代码中的 main 元素多缩进了两个空格。 使用键盘上的空格键在 p 元素前面再添加两个空格，使其缩进得当。

步骤 7-9——img(src/alt)

你可以通过使用 img 元素来为你的网站添加图片。 img 元素只有一个开始标签，没有结束标签。 一个没有结束标签的元素，它的标签被称为自闭合标签。

在 p 元素的下方添加一个 img 元素。 此时，没有图片会出现在浏览器中。

HTML 属性是写在一个元素的开始标签中的特殊词汇，它们用于控制这个元素的行为。 在 img 元素中的 src 属性明确了一个图片的 URL（图片所在的位置）。 使用 src 属性的 img 元素示例：<img src="https:----------.jpg">。

在现有的 img 元素中，添加具有以下 URL 的 src 属性：

relaxing-cat.jpg (281×281) (freecodecamp.org)

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

任务：在 img 元素中，添加一个带有以下文本的 alt 属性：

A cute orange cat lying on its back

步骤 10-16—链接a(href/target)

你可以使用锚点元素（a）链接到另一个页面。 例如 <a href='https://freecodecamp.org'></a> 会链接到 freecodecamp.org。

在段落下方添加一个锚点元素并链接到 https://freecatphotoapp.com。 此时，链接不会出现在预览中。

链接的文本必须放置在锚点元素（a）的起始和闭合标签之间。 例如，<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a> 就是一个包含着文本 click here to go to freeCodeCamp.org 的链接。

将锚点文本 link to cat pictures 添加到锚点元素中。 这将成为链接的文本。

在前一步骤中，你将单词 link to cat pictures 转换为一个链接，将它们放置在开始和结束锚点（a）标签之间。 你可以对元素内的单词做同样的操作，例如 p 元素。

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

 <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</p></a>.
      <!-- 这里发现两种位置都可以，如下所示，第二种方式保留了指定连接 -->
 <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a></p>
      <a href="https://freecatphotoapp.com">link to cat pictures</a>

现在将 p 元素中的文本 cat photos 变成了链接， 已经不需要 p 元素下面的第二个链接了。 删除 p 元素下面的锚点元素。

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

<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>

用必要的元素标签包裹图片（除了p元素），把它变成一个链接。 使用 https://freecatphotoapp.com 作为锚点元素中 href 属性的值。

  <a href="https://freecatphotoapp.com"><img src="https:------.jpg" 
alt="A cute orange cat lying on its back."></a>

在添加任何新内容之前，你应该使用 section 元素将猫咪照片内容与未来的内容分开。

将你的 h2 元素、注释、p 元素和锚点（a）元素嵌套在一个 section 元素中。

    <main>
      <h1>CatPhotoApp</h1>
      <section>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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>
    </main>

步骤 17-19——section

是时候添加一个新部分了。 在现有 section 元素下方添加第二个 section 元素。

在第二个 section 元素中，添加一个带有文本 Cat Lists 的新 h2 元素。

当你向页面添加较低级别的标题元素时，这意味着你正在开始一个新的小节。

在第二个 section 元素的最后一个 h2 元素之后，添加一个带有以下文本的 h3 元素：

Things cats love:

步骤 20-21—无序列表ul(li)

在带有 Things cats love: 文本的 h3 元素之后，添加一个无序列表（ul）元素。 请注意，此时不会显示任何内容。

使用列表项（li）元素在列表中创建项目。 以下是无序列表中列表项的示例：

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

在 ul 元素中嵌套三个列表项以显示猫喜欢的三件事：

cat nip laser pointers lasagna

步骤 22-创造img，为下面介绍figure作用做准备

在无序列表之后，添加一个新图像，它具有 src 属性，值为："https:----.jpg"

而它的 alt 属性值为：

A slice of lasagna on a plate.

步骤 23-25——figure(figcaption(em)图像标题强调)

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

将刚刚添加的图像嵌套在 figure 元素中。

图像标题（figcaption）元素用于添加标题以描述 figure 元素中包含的图像。 例如，<figcaption>A cute cat</figcaption> 添加标题 A cute cat。

在嵌套在 figure 元素中的图像之后，添加一个 figcaption 元素，其文本为：

Cats love lasagna.

通过将 figcaption 元素中的单词 love 包裹在强调 em 元素中来强调它。

    <figcaption>Cats <em>love</em> lasagna.</figcaption>

步骤 26-27—ol(有序列表)

在 figure 元素之后，添加另一个带有文本的 h3 元素：

Top 3 things cats hate:

有序列表（ol）的代码类似于无序列表，但有序列表中的列表项在显示时会被编号。

在第二个 section 元素的最后一个 h3 元素之后，添加一个包含以下三个列表项的有序列表：

flea treatment thunder other cats

  <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>

步骤 28-31—直接把图片嵌入figure

在有序列表之后，添加另一个 figure 元素。

       <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg">
        </figure>

在你刚刚添加的 figure 元素中，嵌套一个 img 元素，其中 src 属性设置为"https://——.jpg"

为了提高你刚刚添加的图像的可访问性，添加具有以下文本的 alt 属性。

Five cats looking around a field.

在最后一个 img 元素之后，添加一个 figcaption 元素，其文本为 Cats hate other cats.。

步骤 32——figcaption(strong)加粗

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

在你刚刚添加的 figcaption 中，通过将 hate 放在 strong 元素中来表明它非常重要。

 整个SECTION2:

     <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>
          <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>

步骤 33-41——form（action/input(type/name/placeholder)）

1、是时候添加一个新部分了。 在第二个 section 元素下方添加第三个 section 元素。

2、在第三个 section 元素内，添加一个文本如下的 h2 元素：

Cat Form

3、现在你将添加一个 Web 表单来收集来自用户的信息。

在 Cat Form 标题之后，添加一个 form 元素

action 属性指示应该将表单数据发送到哪里。 例如，<form action="/submit-url"></form> 告诉浏览器应该将表单数据发送到路径/submit-url。

将值为 Thank You message for Cat Photo App form submission| freeCodeCamp.org 的 action 属性添加到 form 元素。

input 元素允许你通过多种方式从 Web 表单中收集数据。 与 img 元素一样，input 元素是自闭合的，并且不需要结束标签。

在 form 元素中嵌套一个 input 元素

你可以使用 type 属性创建多种输入。 你可以轻松创建密码字段、重置按钮或控件，让用户从他们的计算机中选择文件。

通过将值为 text 的 type 属性添加到 input 元素，创建一个文本字段以从用户那里获取文本输入。

  <input Type=text><!--  Html 不区分大小写-->

为了通过 action 属性中指定的位置访问表单的数据，你必须给文本字段一个 name 属性，并为其分配一个值来表示数据正在提交。 例如，你可以对电子邮件地址文本字段使用以下语法：<input type="text" name="email">。

将值为 catphotourl 的 name 属性添加到你的文本字段。

<input type="text" name="catphotourl">

占位符文本用于提示人们在输入框中输入什么样的信息。 例如，<input type="text" placeholder="Email address">。

将占位符文本 cat photo URL 添加到你的 input 元素中。

  <input type="text" name="catphotourl" placeholder="cat photo URL">

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

 <input type="text" name="catphotourl" placeholder="cat photo URL" required>

步骤 42-43——button（type）

使用 button 元素创建一个可点击的按钮。 例如， <button>Click Here</button> 创建一个带有文本 Click Here 的按钮。

在 input 元素下方添加带有文本 Submit 的 button 元素。 单击没有任何属性的表单按钮的默认行为会将表单提交到表单的 action 属性中指定的位置。

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

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

 <button type="submIT">Submit</button><!-- 再次验证大小写无关，但是注意只有属性的值能这样-->

步骤 44-先介绍radio单选，为label作用做准备

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

下面是一个带有 cat 选项的单选按钮示例：<input type="radio"> cat。 请记住，input 元素是自闭合的。

在文本输入之前，添加一个具有如下选项的单选按钮：

Indoor

<input type="radio">Indoor

步骤 45-47—label

label 元素用于帮助将 input 元素的文本与 input 元素本身关联起来（尤其是对于屏幕阅读器等辅助技术）。 例如，<label><input type="radio"> cat</label> 使得点击单词 cat 也会选择相应的单选按钮(实现效果：点击indoor文字也会选择该单选)。

将 radio 按钮嵌套在 label 元素中。

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

将值为 indoor 的 id 属性添加到单选按钮。 当元素具有多个属性时，属性的顺序无关紧要。

在第一个单选按钮下方创建另一个单选按钮。 将其放在 label 元素内部，label 内的文字为 Outdoor。 单选按钮的 id 属性为 outdoor。

<label><input id="indoor" type="radio"> Indoor</label>
<label><input type="radio" id ="outdoor">Outdoor</label>

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

将值为 indoor-outdoor 的 name 属性添加到两个单选按钮。

<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

步骤 49-value值设置

如果你选择 Indoor 单选按钮并提交表单，则该按钮的表单数据基于其 name 和 value 属性。 由于你的单选按钮没有 value 属性，因此表单数据将包含 indoor-outdoor=on，这在你有多个按钮时没有用处。

为两个单选按钮添加 value 属性。 为方便起见，将按钮的 value 属性设置为与其 id 属性相同的值。

加深理解：1html总结_小赖很可耐的博客-CSDN博客_如果你选择 indoor 单选按钮并提交表单,则该按钮的表单数据基于其 name 和 value这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。

如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中 "indoor" 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。

2小白前端入门笔记（21），表单里如何添加单选按钮？ - 腾讯云开发者社区-腾讯云 (tencent.com)

单选按钮是通过Radio button实现的，radio button是input的一种类型，我们只需要简单的设置即可。

每个单选按钮需要被嵌套在同一个label元素当中，然后所有的单选按钮的name必须相同，这样浏览器才能识别这些单选按钮属于同一个按钮组，这样才能限制用户单选。我们可以来看一个简单的例子：

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>

复制

在label上添加for属性是一个好习惯，当for属性的值和label中input的id的值相同的时候，浏览器就会将这两者关联起来。至于这个关联有什么用处，这是之后的内容，我们可以先放一放。我们来看一个例子：

<label for="indoor"> 

步骤 50-fieldset的理解

fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起。 fieldset 元素是块级元素，这意味着它们出现在新的一行上。

将 Indoor 和 Outdoor 单选按钮嵌套在 fieldset 元素中，不要忘记缩进单选按钮。

fieldset是什么标签 (worktile.com)fieldset是控件组标签，该标签内容的周围将绘制边框，通常使用来将表单内的相关元素分组，在相关表单元素周围绘制边框。我们还可以使用legend标签来为fieldset元素设置标题。 

元素fieldset (shouce.ren)ieldset元素用来将表单区域分组，即将表单中控件、文字、图片等元素划分为若干区域，形成一个逻辑组，显得条例清晰，界面友好 ，语义关系更明确

fieldset元素可以包含legend子元素，若包含legend子元素则legend元素一定要是fieldset元素标签内容中所包含的第一个元素

fieldset元素是块级元素，可以包含其他结构性标记代码（段落、列表等），以便进一步安排和支持各个控件，fieldset元素甚至可以再嵌套fieldset元素。默认情况下，大多数浏览器会在fieldset元素周围显示一条细边框

步骤 51-53-legend

legend 元素充当 fieldset 元素中内容的标题。 它为用户提供了有关他们应该在表单的该部分中输入什么的上下文。

在两个单选按钮上方添加一个 legend 元素，其中包含文本 Is your cat an indoor or outdoor cat?。

接下来，你将添加一些新的表单 input 元素，因此在当前 fieldset 元素的下方添加另一个 fieldset 元素。

在第二个 fieldset 元素中添加一个 legend 元素，其中包含文本 What's your cat's personality?。

步骤 54-checkbox复选

对于可能有多个答案的问题，表单通常使用复选框。 例如，这是一个带有 tacos 选项的复选框：<input type="checkbox"> tacos。

在你刚刚添加的 legend 元素下，添加一个 input，将其 type 属性设置为 checkbox，并为其指定选项：

Loving

注意元素和文本之间要有空格 

 将具有 loving 值的 id 属性添加到复选框输入。

步骤 56-57-for属性

还有另一种方法可以将 input 元素的文本与元素本身相关联。 你可以将文本嵌套在 label 元素中，并添加与 input 元素的 id 具有相同值的 for 属性。

通过仅将文本 Loving 嵌套在 label 元素中，并将其放在复选框 input 元素的右侧，将文本 Loving 与复选框相关联。

  <input id="loving" type="checkbox"> <label for="loving"> Loving </label>

将值为 personality 的 name 属性添加到复选框 input 元素。

虽然你不会在浏览器中注意到这一点，但这样做会使服务器更容易处理你的 Web 表单，尤其是当有多个复选框时。

步骤 58-59-添加其他复选

在你刚刚添加的复选框之后添加另一个复选框。 id 属性值应为 lazy，name 属性值应与最后一个复选框相同。

还要在新复选框的右侧添加一个 label 元素，其中包含文本 Lazy。 确保使用 for 属性将 label 元素与新复选框相关联。

在前一个复选框之后添加最后一个复选框，其 id 属性值为 energetic。 name 属性应该与前面的复选框相同。

还要在包含文本 Energetic 的新复选框的右侧添加一个 label 元素。 确保将 label 元素与新复选框相关联。