动力节点首页 全国咨询热线:400-8080-105

绑定手机号,登录
手机号

验证码

微信登录
手机号登录
手机号

验证码

30天自动登录
微信登录与注册
微信扫码登录与注册

扫码关注微信公众号完成登录与注册
手机号登录
首页 > 文章

一文搞懂HTML中的列表

04-23 09:27 1241浏览
举报 T字号
  • 大字
  • 中字
  • 小字

随着移动端技术的发展,前端开发逐渐迎头赶上后端开发,成为了目前的众多开发项目的主流。在使用HTML进行前端开发的网站网页中,漂亮的导航、整齐规范的文章标题列表和图片列表都是网页设计的重要内容。这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表、有序列表和定义列表3种类型。其中,无序列表应用最为广泛,每种HTML列表的实现都不是难事,难就难在我们如何正确地使用它们。

列表在文档编辑中也是十分常见的,我们可以结合word里的列表来对比学习HTML的列表元素。在word中有符号列表、编号列表、多级列表。在HTML中也提供了三种类型的列表,分别是无序列表、有序列表和定义列表。无序列表没有先后顺序之分,类似word中的符号列表,有序列表用数字或字母作为顺序,类似word中的编号列表,注意:定义列表是不同于word中的多级列表。简单说来,定义列表项可分为上下两部分,上面列出一个项目,下面是该项目的详细内容。至于个性化的列表则需要我们自己去添加更多的元素,来增加列表的可读性和观赏性 。

1.有序列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
    </ol>
    </body>
    </html>

2.无序列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
<li>西瓜</li>
</ul>
</body>
</html>

3.定义列表

定义列表以<dl>标签开始,</dl>标签结束,中间插入的每个列表项都分为两个部分,<dt> </dt>里面添加项目名称,<dd> </dd>里面添加项目内容或描述。定义列表语法格式如下:

<dl>
<dt>项目名称</dt>
<dd>项目内容</dd>
……
</dl>

无序列表和有序列表的列表项前面都有标记,无序列表的项目前是符号(实心圆、空心圆或实心正方形),有序列表的项目前是编号(可以是数字、字母或罗马数字)。我们有两种方式来设置列表项前的符号类型,一种是直接在HTML的列表标签中设置type属性,另一种是用CSS的方式,设置CSS属性list-style-type。有了CSS,在HTML中设置type属性已经被抛弃了,推荐使用CSS属性list-style-type来设置列表项的标记类型。

示例如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        p{
            font-family:微软雅黑;
            font-size:14pt;
            color:red;
            background-color:gray;
        }
        ol{ /*设置有序列表的编号为小写罗马数字*/
            list-style-type:lower-roman;
        }
    </style>
</head>
<body>
    <p>WEB开发教程(无序列表)</p>
    <!--利用type属性设置无序列表项目符号为实心正方形-->
    <ul type="square"><!--这种方式已抛弃,建议使用CSS属性list-style-type-->
        <li>HTML&CSS</li>
        <li>JavaScript</li>
        <li>ASP.NET</li>
    </ul>
    <p>B/S三层结构(有序列表)</p>
    <ol><!--已在CSS中用list-style-type属性设置列表项编号为小写罗马数字-->
        <li>界面展示层</li>
        <li>业务逻辑层</li>
        <li>数据操纵层</li>
    </ol>
    <p>B/S与C/S(定义列表)</p>
    <dl>
        <dt>B/S模式</dt>
        <dd>浏览器/服务器模式,只要安装一个浏览器。</dd>
        <dt>C/S模式</dt>
        <dd>客户端/服务器模式,需要安装客户端软件。</dd>
    </dl>
</body>
</html>

3种Html列表:有序列表,无序列表,定义列表。无序列表使用最为广泛,常用于导航、文章标题列表、图片列表等有规律列表类内容的排版布局。在CSS属性list-style-type中,还可以设置值为none,表示去除列表项前的符号。HTML列表的广泛应用使得HTML列表的HTML文本成为我们必须要掌握的几个HTML文本标签,只有这样我们才能设计出优秀的HTML页面。

0人推荐
共同学习,写下你的评论
0条评论
代码小兵498
程序员代码小兵498

153篇文章贡献528999字

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

JavaWeb的3大组件

代码小兵49806-11 15:28

全面解析Cookie技术

代码小兵49806-11 15:51

浅谈JavaWeb架构演变

代码小兵49806-11 16:22

探讨Web开发中的Session存储与管理

代码小兵51603-29 17:28

JavaScript基础知识

 04-06 20:49

发评论

举报

0/150

取消