Web全栈-无序列表-练习

Posted yindanny

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web全栈-无序列表-练习相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表练习</title>
</head>
<body>
<!--
前面我们说过ul中最好只放li标签, 但是在企业开发中, li标签中的内容可能会很复杂, 所以我们可以继续在li标签中添加其它的标签来丰富我的界面
总结:
1.一定更要记住ul标签中最好只放li标签
2.但是li标签中还可以继续放其它的标签
-->
<h1>四大名著</h1>
<ul>
    <li>
        <h2>《三国演义》</h2>
        <p>《三国演义》故事开始黄巾兵起义,结束于司马氏灭吴开晋,以描写战争为主,反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争,展现了从东汉末年到西晋初年之间近一百年的历史风云,并成功塑造了一批叱咤风云的英雄人物。</p>
    </li>
    <li>
        <h2>《水浒传》</h2>
        <p>《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说,以宋江领导的起义军为主要题材,通过一系列梁山英雄反抗压迫、英勇斗争的生动故事,暴露了北宋末年统治阶级的腐朽和残暴,揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。</p>
    </li>
    <li>
        <h2>《西游记》</h2>
        <p>《西游记》前七回叙述孙悟空出世,有大闹天宫等故事。此后写孙悟空随唐僧西天取经,沿途除妖降魔、战胜困难的故事。书中唐僧、孙悟空、猪八戒、沙僧等形象刻画生动,规模宏大,结构完整,并且《西游记》富有浓厚的佛教色彩,其隐含意义非常深远,众说纷纭,见仁见智。可以从佛、道、俗等多个角度欣赏,是中国古典小说中伟大的浪漫主义文学作品。</p>
    </li>
    <li>
        <h2>《红楼梦》</h2>
        <p>《红楼梦》讲述的是发生在一个虚构朝代的封建大家庭中的人事物,其中以贾宝玉、林黛玉、薛宝钗三个人之间的感情纠葛为主线通过对一些日常事件的描述体现了在贾府的大观园中以金陵十二钗为主体的众女子的爱恨情愁。而在这同时又从贾府由富贵堂皇走向没落衰败的次线反映了一个大家族的没落历程和这个看似华丽的家族的丑陋的内在。</p>
    </li>
</ul>


<!--
无序列表中的li标签中除了可以添加其它标签来丰富我们的界面以外, 还可以添加ul标签来丰富我的界面
也就是说ul中有li, li中又可以有ul

在webstorm中如何快速编写一个ul的格式
ul>li
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签

ul>li*3
含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签
-->

<h1>物品清单</h1>
<ul>
    <li>
        <h2>蔬菜</h2>
        <ul>
            <li>白菜</li>
            <li>萝卜</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>
        <h1>水果</h1>
        <ul>
            <li>苹果</li>
            <li>桃子</li>
            <li>香蕉</li>
        </ul>
    </li>
</ul>
</body>
</html>

以上是关于Web全栈-无序列表-练习的主要内容,如果未能解决你的问题,请参考以下文章

Java全栈web网页技术:14.书城项目实战三:EL和JSTL练习

Java全栈web网页技术:14.书城项目实战三:EL和JSTL练习

Java全栈web网页技术:14.书城项目实战三:EL和JSTL练习

Java全栈web网页技术:14.书城项目实战三:EL和JSTL练习

PHP全栈开发:CSS Ⅵ 列表 style

Web全栈-选择器练习