小白前端入门笔记（15），设置有序序列

大家好，欢迎来到freecodecamp HTML专题第15篇。

今天的挑战关于有序序列。

背景知识

HTML当中除了无序的序列之外，还有一种特殊的元素是有序序列。

有序序列通过

标签作为opening tag，然后和
标签一样，通过
• 标签来设置序列当中的元素。最后，通过

比如：

<ol>
  <li>Garfieldli>
  <li>Sylvesterli>
ol>

它展示出来的效果是这样的：

我们可以看到这两个元素之前标上了序号，这也正是有序序列的含义。

题意

创建一个有序序列，包含猫咪最喜欢的三件物品。

要求

1. 你需要有一个有序序列包含猫咪最讨厌的三件物品
2. 你需要有一个无序序列包含猫咪最喜欢的物品
3. 你只能有一个ul元素
4. 你只能有一个ol元素
5. 你需要在ul元素当中包含三个li标签
6. 你需要在ol元素当中包含三个li标签
7. 你的ul元素需要有closing tag
8. 你的ol元素需要有closing tag
9. 你的li元素需要有closing tag
10. 你在ul和ol序列中的li元素内容不能为空

编辑器

<h2>CatPhotoApph2>
<main>
  <p>Click here to view more <a href="#">cat photosa>.p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">a>

  <p>Things cats love:p>
  <ul>
    <li>cat nipli>
    <li>laser pointersli>
    <li>lasagnali>
  ul>
  <p>Top 3 things cats hate:p>
main>

解法

题目当中其实已经为我们写好了现成的ul标签的内容了，我们可以忽略关于ul标签的要求。

其实只需要把它给的ol标签的样例复制粘贴过来，然后再加上一项凑成三个即可。挑战没什么难度，主要是让大家熟悉一下HTML的ol有序序列这个标签。

<h2>CatPhotoApph2>
<main>
  <p>Click here to view more <a href="#">cat photosa>.p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">a>

  <p>Things cats love:p>
  <ul>
    <li>cat nipli>
    <li>laser pointersli>
    <li>lasagnali>
  ul>
  <p>Top 3 things cats hate:p>


  <ol>
    <li>Garfieldli>
    <li>Sylvesterli>
    <li>Tomli>
  ol>
main>

想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~

文章就到这里，给个三连再走吧~