整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML03 - 列表(List)

一、在Html中 列表一共分为三种:

(1)无序列表 :使用 ul 标签来创建,用 li 标签来表示列表项 (较常用)

 <ul>
      <li>结构</li>
      <li>表现</li>
      <li>行为</li>
 </ul>

(2)有序列表 :使用 ol 标签来创建,用 li 标签来表示列表项

 <ol>
      <li>结构</li>
      <li>表现</li>
      <li>行为</li>
 </ol>

(3)定义列表 :使用 dl 标签来创建,用 dt 标签来表示定义的内容 ,dd 标签来对内容进行解释说明

<dl>
    <dt>YYDS</dt>
    <dd>yyds是“永远的神”的缩写 [1]  ,常被粉丝用来赞赏自己的爱豆 </dd>
    <dt>XSWL</dt>
    <dd>XSWL = 笑死我了”,作为当代沙雕青年,每天除了哈哈哈就是“窝窝头一块钱四个</dd>
</dl>

二、列表相互之间可以嵌套:

<ul>
    <li>节日
        <ol>
            <li>中秋</li>
            <li>国庆</li>
            <li>元旦</li>
        </ol>
    </li>
    <li>中国</li>
    <li>世界</li>
</ul>

三、网页展示:

网页效果展示

、列表说明:列表是在页面上有很多列同时存在的信息,分为无序列表和有序列表。

1、无序列表概念:用来放置一些对于顺序无关紧要的内容,例如下面的新闻内容。

2、有序列表概念:有序列表用于存放内容不能错乱的信息,比如下面的阿里云内容。

3、自定义列表:自定义列表用于正文之外的框框栏栏之类的。

二、列表样式:

列表样式2

列表样式3

三、无序列表 <ul> </ul> 和 <li> </li>标签

列表标签是用 ul 表示,但是不是单独使用的,需要和 li 标签配合使用,并且列表标签也有属性,用法:

<ul type="disc"> ,属性有多个值:

disc :小圆点,默认属性

circle :小圆圈

square :实心方块

none :不要任何符号

源码:↓

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!--网页抬头-->

<title>Title</title>

</head>

<body>

<!--列表与列表属性-->

<ul type="disc">

<li>这是列表a</li>

<li>这是列表b</li>

<li>这是列表c</li>

</ul>

</body>

两个菜单按钮系列选项实例("File" 和 "Edit"):

<menutype="toolbar"><li><menulabel="File"><buttontype="button"onclick="file_new()">New...</button><buttontype="button"onclick="file_open()">Open...</button><buttontype="button"onclick="file_save()">Save</button></menu></li><li><menulabel="Edit"><buttontype="button"onclick="edit_cut()">Cut</button><buttontype="button"onclick="edit_copy()">Copy</button><buttontype="button"onclick="edit_paste()">Paste</button></menu></li></menu>


浏览器支持

目前主流浏览器并不支持 <menu> 标签。


标签定义及使用说明

<menu> 标签定义了一个命令列表或菜单。

<menu> 标签通常用于文本菜单,工具条和命令列表选项。


提示和注释

提示: 使用 CSS 来定义菜单列表样式。


HTML 4.01 与 HTML5之间的差异

HTML 4.01的 <menu> 元素已废弃。

HTML5 中 <menu> 元素已被重新定义。


属性

New:HTML5 新属性。

属性描述
labelNewtext描述菜单项的标记。
typeNewcontexttoolbarlist描述显示菜单类型. 默认为 "list"。

全局属性

<menu> 标签支持全局属性,查看完整属性表 HTML全局属性。


事件属性

<menu> 标签支持所有 HTML事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!