小白前端入门笔记（15），设置有序序列
大家好，欢迎来到freecodecamp HTML专题第15篇。
今天的挑战关于有序序列。
背景知识
HTML当中除了无序的序列之外，还有一种特殊的元素是有序序列。
有序序列通过<ol>标签作为opening tag，然后和<ul>标签一样，通过<li>标签来设置序列当中的元素。最后，通过</ol>closing tag来表示结束。
比如：
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
它展示出来的效果是这样的：
我们可以看到这两个元素之前标上了序号，这也正是有序序列的含义。
题意
创建一个有序序列，包含猫咪最喜欢的三件物品。
要求
- 你需要有一个有序序列包含猫咪最讨厌的三件物品
- 你需要有一个无序序列包含猫咪最喜欢的物品
- 你只能有一个
ul元素 - 你只能有一个
ol元素 - 你需要在
ul元素当中包含三个li标签 - 你需要在
ol元素当中包含三个li标签 - 你的
ul元素需要有closing tag - 你的
ol元素需要有closing tag - 你的
li元素需要有closing tag - 你在
ul和ol序列中的li元素内容不能为空
编辑器
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</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 nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
</main>
解法
题目当中其实已经为我们写好了现成的ul标签的内容了，我们可以忽略关于ul标签的要求。
其实只需要把它给的ol标签的样例复制粘贴过来，然后再加上一项凑成三个即可。挑战没什么难度，主要是让大家熟悉一下HTML的ol有序序列这个标签。
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</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 nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>Garfield</li>
<li>Sylvester</li>
<li>Tom</li>
</ol>
</main>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-02-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
