模仿百度新闻的一部分
原创
模仿百度新闻的一部分
原创
我们先来复习一下前面的知识，一些常见的标签，和一些不太常用到的标签，以及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>是无序列标签，英文单词为“unordered list”，是闭合标签，尾巴为</ul>。如果还不是很明白的，可以按我前面一章讲的方法，打开后台管理器，去看看各个部分的效果，这里我都写出来放在下面了，大家可以自取。
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属性写出来的效果
从图中我们可以看出来，当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>运行出来的结果
我想会有小伙伴会问，代码里写的并没有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的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属性的时候，页面你的效果不会根据默认的来了
有无序列表，肯定也会有另外一个和它相反的列表，没错就是有序列表。关于有序列表，它是有一定顺序的，就比如说1，2，3，4这种形式的顺序。ol标签对应的就是有序列表，同样的ol和li标签和一起使用，是ordered lists的缩写，我们先来感受一下：
<ol>
<li>100分</li>
<li>90分</li>
<li>80分</li>
</ol>
有序列表具体的样子就和例子写出来的效果一样，如果想了解的更清楚的话，可以打开后台，这里我也同样的把图放在下面
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属性就比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属性，表示的就是自己规定从哪一个开始，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>
要提醒一句的就是start属性要注意的，它的属性值代表的是从第几个开始，不是说你写c就是从c开始，这个浏览器是识别不出来的。
我上面说的新的加进去的属性就是reversed属性，翻译一下的意思差不多就是倒叙的意思，它表示指定列表倒序 (9,8,7...)，直接来试验：
<ol reversed="reversed">
<li>100分</li>
<li>90分</li>
<li>80分</li>
</ol> 
就是倒叙，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> 
那么会有小伙伴会提出疑问，那我能不能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>
<li>100分
<ul>
<li>70分</li>
<li>60分</li>
</ul>
</li>
<li>90分</li>
<li>80分</li>
</ol>
小提示，为什么是空心圆，之前讲的规律记住了，第一个在外面的，是默认的实心圆，第二个，嵌套在里面的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除了是自定义列表，它呢还有一个作用，，就是可以图文混排，具体可以参考淘宝网的列表，传送门：https://www.taobao.com/。
<dl>
<dt>
<img src="images/phone.jpg" alt="">
<dd>这是华为mate30的一些信息.....</dd>
</dt>
</dl>
到这里关于所有列表的标签就讲完了，ul无序列表，ol有序列表，这两个比较常用，至于自定义列表的dl标签了解就行了。关于之前的文章，其实有很多，不太常用的标签或者是属性，W3C或者说是别的作者写的文章有提及，但是我这里没有说，是因为，从我自己学习到现在工作，我并没有怎么遇到过，所以我觉得不怎么使用就没说，但这不代表着，这些标签或者是可选属性就不需要去了解，还是那句话，如果你是那种特别爱钻研，喜欢写代码的人的话，可以去了解，说实在的，从某种意义上来说，本章ul标签的可选属性type和ol标签的可选属性type是比较常见的，这是重点，其余的了解就行了。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
