如何用Ul标签创建无序List

这篇文章主要介绍“如何用Ul标签创建无序List”，在日常操作中，相信很多人在如何用Ul标签创建无序List问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用Ul标签创建无序List”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

背景知识

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

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

想要递减这样的一个序列，通过

作为opening tag，接着紧跟我们想要摆放的每一个元素。对于每一个元素，我们都用

标签进行包裹，最后在序列的末尾我们加上一个

作为closing tag。

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

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

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

题意

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

要求

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2. 创建一个ul标签

3. 你需要在ul标签当中创建三个li元素

4. 你的ul标签需要有一个closing tag

5. 你的li标签每一个都需要有closing tag

6. 你的li标签不能仅包含空格或为空

编辑器

<h3>CatPhotoApp</h3> <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标签，并且在其中随意写上一项即可。

<h3>CatPhotoApp</h3> <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>

到此，关于“如何用Ul标签创建无序List”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！