小白前端入门笔记（14），ul标签创建无序list

TechFlow-承志

发布于 2021-02-08 10:25:21

1.1K0

文章被收录于专栏：TechFlowTechFlow

大家好，欢迎来到freecodecamp HTML专题，这是专题的第14篇文章。

今天的挑战关于无序数组。

背景知识

HTML当中有一个特殊的元素，它可以用来创建一个无序数组（unordered lists），或者叫做弹孔风格的序列。

比如下图红框当中展示的，就是这样一个list。

想要递减这样的一个序列，通过<ul>作为opening tag，接着紧跟我们想要摆放的每一个元素。对于每一个元素，我们都用<li>标签进行包裹，最后在序列的末尾我们加上一个</ul>作为closing tag。

我们来看一个真实代码的例子：

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

这段代码创建的就是上图当中展示的例子。

题意

去除掉HTML代码当中最后两个p标签，并且创建一个无序数组，包含猫咪最喜欢的三样东西。

要求

创建一个ul标签
你需要在ul标签当中创建三个li元素
你的ul标签需要有一个closing tag
你的li标签每一个都需要有closing tag
你的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>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

解法

这次的挑战主要是教我们学会使用ul标签，ul标签在网页当中非常常用，结合CSS我们可以使用出各种炫酷的效果。包括网页的各种导航栏或者是其他形式的序列都可以用它来实现。

我们只需要依照题目的要求去除掉最后两个段落，然后加上ul标签，并且在其中随意写上一项即可。

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

  <ul>
    <li>milk</li>
    <li>cheese</li>
    <li>rat</li>
  </ul>
</main>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-01-29，如有侵权请联系 cloudcommunity@tencent.com 删除

html

编程算法

小白前端入门笔记（14），ul标签创建无序list

小白前端入门笔记（14），ul标签创建无序list

背景知识

题意

要求

编辑器

解法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐