小白前端入门笔记（15），设置有序序列
点击上方蓝字，关注并星标，和我一起学技术。
大家好，欢迎来到freecodecamp HTML专题第15篇。
今天的挑战关于有序序列。
背景知识
HTML当中除了无序的序列之外，还有一种特殊的元素是有序序列。
有序序列通过标签来设置序列当中的元素。最后，通过closing tag来表示结束。
比如：
<ol>
<li>Garfieldli>
<li>Sylvesterli>
ol>
它展示出来的效果是这样的：
我们可以看到这两个元素之前标上了序号，这也正是有序序列的含义。
题意
创建一个有序序列，包含猫咪最喜欢的三件物品。
要求
你需要有一个有序序列包含猫咪最讨厌的三件物品 你需要有一个无序序列包含猫咪最喜欢的物品 你只能有一个 ul元素你只能有一个 ol元素你需要在 ul元素当中包含三个li标签你需要在 ol元素当中包含三个li标签你的 ul元素需要有closing tag你的 ol元素需要有closing tag你的 li元素需要有closing tag你在 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>
想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~
文章就到这里，给个三连再走吧~
评论