模仿百度新闻的一部分

时间:2022-07-22
本文章向大家介绍模仿百度新闻的一部分，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

我们先来复习一下前面的知识，一些常见的标签，和一些不太常用到的标签，以及img标签的一些知识点，都是很重要的基础，千万不能忘记。

那么这里我们又要学习新的标签，这章我们要做的就是模仿百度新闻，完成里面的一部分，老样子放个链接传送门：https://news.qq.com/。要做成的效果图，我也放在下面：

百度新闻列表内容

按照惯例，每拿到新的一样东西，我们都要进行分析。首先，抛开那些涉及到字体，大小，颜色的内容，其余的内容，用我们前几章学的知识点，想想看能不能完成。我相信大多数人会觉得就抛开前面的蓝点，其余的内容p标签就能搞定了，我们可以来试试。

    <h1>今日话题</h1>
    <h3>好消息，你小区的房子可能要升值！</h3>
    <p>看电视剧发现女主躺在自己家，谁动了我的房子？</p>
    <p>一周4次抵近广东沿海，美军侦察机想干什么？</p>
    <p>无底线的饭圈和偶像，哪个先糊？</p>
    <p>蚂蚁金服凭什么值2000亿美元？谁将成为千万富豪？</p>
    <p>女子刚生完娃，21天后又生了一个，可信吗？</p>
    <p>45亿砸向暑期大战，在线教育巨头打的不止是价格战</p>
运用基础标签实现效果

h标签加上p标签确实可以达成我们要练习的效果，但是这种效果前面是没有点的，如果你想做出前面带点的，可能就要自己通过css样式画出来，是相当麻烦的。所以像这种呈现列表形式的界面(一行一行有规律的)又可以前面带点的，我们有个更简单的标签就可以实现，那就是ul标签，而在ul列表标签里面会有若干个列表项，那就要用到我们的li标签。

ul标签定义的是表格当中的无序列表，表格当中的无序列表都是在ul标签之中，无序列表都是和li标签在一起使用的。普通的显示数据的时候，ul就是项目列表，li就是列表项。两个合起来就可以用来显示数据。无序列表顾名思义就是没有顺序，只要理解为无序列表就是前面带点的，没有顺序之分的列表就是ul无序列表。至于列表项li就更好理解了，上面每一行内容的p标签，你就用li标签代替它，每一行的内容就是一个li标签。我们可以先来看看下面的示范代码：

<h1>今日话题</h1>
    <h3>好消息，你小区的房子可能要升值！</h3>
    <ul>
        <li>看电视剧发现女主躺在自己家，谁动了我的房子？</li>
        <li>一周4次抵近广东沿海，美军侦察机想干什么？</li>
        <li>一周4次抵近广东沿海，美军侦察机想干什么？</li>
        <li>蚂蚁金服凭什么值2000亿美元？谁将成为千万富豪？</li>
        <li>女子刚生完娃，21天后又生了一个，可信吗？</li>
        <li>45亿砸向暑期大战，在线教育巨头打的不止是价格战</li>
    </ul>
ul标签的使用

此时，我们可以看出运用了无序列表和不用无序列表标签制作出来的效果，就是前面多了个点的图案，我们可以比较官方的总结一下ul标签的作用：<ul>是无序列标签，英文单词为“unordered list”，是闭合标签，尾巴为</ul>。如果还不是很明白的，可以按我前面一章讲的方法，打开后台管理器，去看看各个部分的效果，这里我都写出来放在下面了，大家可以自取。

ul的范围区域
li的范围区域

ul标签有它自己的属性，就是type属性，type字面上理解就是种类的意思，那么意思是不是我们的无序列表有很多的样式呢？我们看下面的代码，感受一下这个type属性的作用：

<ul type="disc">   //实心圆
        <li>网易</li>
        <li>腾讯</li>
        <li>阿里</li>
    </ul>

    <ul type="circle"> //空心圆
        <li>橘子</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

    <ul type="square">   //实心方块
        <li>啤酒</li>
        <li>红酒</li>
        <li>白酒</li>
    </ul>

我们运行代码，看下对应type属性写出来的效果

ul的type属性的效果

从图中我们可以看出来，当type为disc的时候前面是个实心圆，此时就是我们默认的ul无序列表的样式，所以这个我们往往可以省略不写。当type为circle的时候，前面是空心圆。当type为square的时候，前面是实心方块。所以，ul的type属性就这三种，记住就行了。

接下来，我们进行ul无序列表的拓展，关于嵌套列表该怎么写。原理很简单，嵌套列表，都是在<ul>标签下的<li>标签里面嵌套<ul>标签，不能在<ul>里面建一个ul标签。记住这个特性，我们来尝试着写一下代码：

<ul>
      <li>网易
            <ul>
                <li>阴阳师
                    <ul>
                        <li>大天狗</li>
                        <li>茨木童子</li>
                        <li>酒吞童子</li>
                    </ul>
                </li>
                <li>第五人格</li>
                <li>明日之后</li>
            </ul>
        </li>
        <li>腾讯</li>
        <li>阿里</li>
    </ul>

运行出来的结果

ul嵌套

我想会有小伙伴会问，代码里写的并没有type属性加上去，那为什么这三个ul列表不应该前面都是是实心的圆吗？那么，这里呢其实就是有规定的，我们默认第一个ul的前面是实心的圆。嵌套进去的ul，也就是第二个ul，前面是空心的圆，那么之后第三个嵌套进去的ul，前面就是实心的方块。那么，又有小伙伴有疑惑了，那第四个，第五个嵌套进去的ul前面又会是什么？我们不妨来试一下。

 <ul>
        <li>网易
            <ul>
                <li>阴阳师
                    <ul>
                        <li>大天狗
                            <ul>
                                <li>1
                                    <ul>
                                        <li>2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>茨木童子</li>
                        <li>酒吞童子</li>
                    </ul>
                </li>
                <li>第五人格</li>
                <li>明日之后</li>
            </ul>
        </li>
        <li>腾讯</li>
        <li>阿里</li>
    </ul>

这里我又嵌入了两个ul，我们再去看一下效果图：

嵌套五个ul

第四个和第五个ul的type属性都是实心方块，于是乎，结论就出来了，默认的情况下，第一个ul就是实心圆，嵌套进去的第二个ul就是空心圆，再嵌套进去的第三个ul就是实心方块，后面不管你再嵌套多少个，都是实心方块。除非你自己改变ul的type属性就可以根据自己的意愿去选择，请看下面代码：

<ul type="square">
        <li>网易
            <ul type="circle">
                <li>阴阳师
                    <ul type="disc">
                        <li>大天狗
                            <ul type="circle">
                                <li>1
                                    <ul type="disc">
                                        <li>2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>茨木童子</li>
                        <li>酒吞童子</li>
                    </ul>
                </li>
                <li>第五人格</li>
                <li>明日之后</li>
            </ul>
        </li>
        <li>腾讯</li>
        <li>阿里</li>
    </ul>

当我们自己设定ul的type属性的时候，页面你的效果不会根据默认的来了

自己设定type属性

有无序列表，肯定也会有另外一个和它相反的列表，没错就是有序列表。关于有序列表，它是有一定顺序的，就比如说1，2，3，4这种形式的顺序。ol标签对应的就是有序列表，同样的ol和li标签和一起使用，是ordered lists的缩写，我们先来感受一下：

<ol>
    <li>100分</li>
    <li>90分</li>
    <li>80分</li>
</ol>
ol有序列表

有序列表具体的样子就和例子写出来的效果一样，如果想了解的更清楚的话，可以打开后台，这里我也同样的把图放在下面

ol的范围
ol里的li代表某一项

ol和ul标签一样，同样拥有type属性，不过它的type属性就有点多了，我们直接看代码理解吧：

<ol type="1">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
    <ol type="A">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
    <ol type="a">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
    <ol type="I">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
    <ol type="i">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
ol属性type的效果

感觉ol的type属性就比ul的type属性好理解多了，毕竟ul的英文单词可能不太认识，但是这里的type属性值，显然易见，所以这里就不多的bb了，直接总结：ol标签的type属性，到目前为止就五个。第一个，1，2，3这种数字形式的有序，type的属性值就是1，也就是我们ol的默认type属性，一般情况下就可以省略不写了。第二个，A，B，C这种大写字母形式的有序，type的属性值就是A。第三个，a，b，c这种小写字母形式的有序，type的属性值就是a。第四种，I，Ⅱ,Ⅲ这种大写罗马字母的形式的有序，type属性值就是I。第五种，i，ii，iii这种小写罗马字母的形式的有序，type属性值就是i。最后这里提醒一句，type属性值其实就是代表是从哪里开始，是1，那就是从1开始，这是一般默认的写法，不代表你写3，就是从3开始了，切记切记。

那么除了type属性，其实还有一些别的属性，不过，都没有type属性这么出名，甚至有一个还是最新加进去的，我也是查了才知道，老规矩，来看下代码：

<ol start="3">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
ol标签的start属性

ol标签的start属性，表示的就是自己规定从哪一个开始，type和start是可以结合的：

<ol type="A" start="3">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
    <ol type="a" start="3">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol> 
    <ol type="I" start="3">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>  
    <ol type="i" start="3">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
ol标签的start属性和type属性结合

要提醒一句的就是start属性要注意的，它的属性值代表的是从第几个开始，不是说你写c就是从c开始，这个浏览器是识别不出来的。

我上面说的新的加进去的属性就是reversed属性，翻译一下的意思差不多就是倒叙的意思，它表示指定列表倒序 (9,8,7...)，直接来试验：

<ol reversed="reversed">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
ol标签的reversed属性

就是倒叙，reversed的属性值就是reversed，同样的你想结合type属性也可以：

<ol type="A" reversed="reversed">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol> 
    <ol type="a" reversed="reversed">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol> 
    <ol type="i" reversed="reversed">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol> 
    <ol type="I" reversed="reversed">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>
ol标签的reversed属性和type属性结合

那么会有小伙伴会提出疑问，那我能不能start属性也结合进去呢，答案是不能的，浏览器无法进行判断。

其实到这呢，ol和ul标签的属性就差不多讲完了，其实ol和ul还都有一个compact属性，它的意思是规定列表呈现的效果比正常情况更小巧，这个着实是真的用不到，而且HTML5 中不支持，所以你即使写了，也和不写没什么区别，要是实在不相信的话，可以自己去试一下，代码呢，我也附在下面

   <ul compact="compact">
        <li>网易</li>
        <li>腾讯</li>
        <li>阿里</li>
    </ul>
    <ol compact="compact">
        <li>100分</li>
        <li>90分</li>
        <li>80分</li>
    </ol>

但是，如果很严谨或者很喜欢研究代码的小伙伴会说，网上有说ul标签的type属性和ol标签的start，type，reversed属性都是不被支持使用的，但是我想说的是，只要我们写出来有效果，那就是可以用的，即使用不了你拓展了解也好，万一有面试题问道，总不能直接说这个都不支持了，所以你不需要去知道吧，上一章说的img标签，我说的都是比较常用的属性，有些实在用不到的，你也可以去了解，在像之前讲的那些基础标签，有些没必要用到的可选属性，可以去试一下，到底这些属性还能不能有效果，如果实在实在严谨，那就是按照W3C的标准来。

对比ul标签，我还说了它的嵌套，ol标签也能嵌套，原理是一样的，不管你ul标签里面嵌套ol标签，还是ol标签里嵌套ul标签，都是一点问题都没有的，要善于去把学到的知识灵活运用，我就不全部举例子一遍了。

<ol>
        <li>100分
            <ol type="A">
                <li>70分</li>
                <li>60分</li>
            </ol>
        </li>
        <li>90分</li>
        <li>80分</li>
    </ol>
ol标签的嵌套
<ol>
        <li>100分
            <ul>
                <li>70分</li>
                <li>60分</li>
            </ul>
        </li>
        <li>90分</li>
        <li>80分</li>
    </ol>
ol标签里面嵌套ul标签

小提示，为什么是空心圆，之前讲的规律记住了，第一个在外面的，是默认的实心圆，第二个，嵌套在里面的ul就是空心圆，第三个是实心方块。出现这种情况的前提是列表中的嵌套，你要是嵌套在别的不是列表里面的嵌套就没这个效果了，必须是列表，嵌套一个列表，在嵌套一个列表的形式。

最后给大家再拓展一个列表，这个列表叫做自定义列表，一个自定义列表有三个标签组成，第一个：dl标签，标签定义了定义列表。第二个：dt标签，定义列表中的项目。第三个：dd标签，描述列表中的项目。它们三个的属性值都可以自己去了解，W3C最新的标准都有。

<dl>
        <dt>
            中国
        <dd>内蒙古</dd>
        <dd>新疆</dd>
        <dd>陕西</dd>
        <dd>江苏</dd>
        </dt>
        <dt>法国</dt>
        <dt>俄罗斯</dt>
        <dt>英国</dt>
    </dl>
dl标签的作用

那么关于dl标签的具体我就直接把图放在下面，自取

dl标签的范围
dt标签的范围
dd标签的范围

当然了，dl除了是自定义列表，它呢还有一个作用，，就是可以图文混排，具体可以参考淘宝网的列表，传送门：https://www.taobao.com/。

<dl>
        <dt>
            <img src="images/phone.jpg" alt="">
            <dd>这是华为mate30的一些信息.....</dd>
        </dt>
      </dl>
dl标签可以用来图文混排

到这里关于所有列表的标签就讲完了，ul无序列表，ol有序列表，这两个比较常用，至于自定义列表的dl标签了解就行了。关于之前的文章，其实有很多，不太常用的标签或者是属性，W3C或者说是别的作者写的文章有提及，但是我这里没有说，是因为，从我自己学习到现在工作，我并没有怎么遇到过，所以我觉得不怎么使用就没说，但这不代表着，这些标签或者是可选属性就不需要去了解，还是那句话，如果你是那种特别爱钻研，喜欢写代码的人的话，可以去了解，说实在的，从某种意义上来说，本章ul标签的可选属性type和ol标签的可选属性type是比较常见的，这是重点，其余的了解就行了。

随机文章
本站知识点必读
最近更新