四、HTML4~解答列表

一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套?

1、无序列表:无序列表就是列表结构中的列表项没有先后顺序的列表形式。
区别:无序列表也是一个项目列表,无序列表在每个项目前都加上列表符号。默认列表符号由浏览器决定,但一般都是圆点。
disc:表示实心远点项目符号
circle:表示空心圆环符号
square:表示正方形空心符号

<p>无序列表
<ul type="diss">
<li>这是无序列表</li>
<li>这是无序列表</li>
<li>这是无序列表</li>
<li>这是无序列表</li>
</ul>
</p>
FE0A.tmp.jpg

2、有序列表:列表结构中的列表项有先后顺序的列表形式,从上到下可以有各种不同的序列编号,如1、2、3或a、b、c等。
区别:有序列表是一个项目列表,它通过数字或字母编号来组织列表中包含的信息。有序列表的序号可以是数字(默认)、大写或小写字母、大写或小写罗马数字。

<ol> 是有序列表的父标签
<li> 是有序列表的子标签
使用方法:
<ol>
<li>列表的项目 </li>
<li>列表的项目 </li>
<li>列表的项目 </li>
</ol>
Paste_Image.png

3、自定义列表:需要对一些术语进行解释描述的情况下,自定义列表用于组织术语及其定义。
区别:术语单独显示,对它的描述根据需要可以无限长。

<dl>
<dt>姓名</dt>
<dd>小鱼</dd>
<dd>小虾</dd>
<dt>性别</dt>
<dd>男</dd>
<dd>女</dd>
</dl>
56C8.tmp.jpg

样式去除

1、列表横置:display: inline;
2、去除列表前面的点或者数字:list-style-type:none;

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,149评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,323评论 19 139
  • 1.有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    王康_Wang阅读 3,749评论 0 0
  • 你看见了一滴水,以为就可以拥有一片海。你看见了一棵树,以为就可以拥有一片森林,你看见一只鸟,以为就可以拥有一片天空...
    Cheng717阅读 1,261评论 0 0
  • 滴水之恩,不忘相报,感谢之心像地下水一样滋润着我道德观的根基。活着,就要学会感谢。今天阅读了《活法》一书当中的...
    张晓晨z阅读 734评论 0 0