HTML_列表标签

列表就相当于去超市购物时的那个购物清单,
                在HTML也可以创建列表,在网页中一共有三种列表:
                    1.无序列表
                    2.有序列表
                    3.定义列表
无序列表
                - 使用ul标签来创建一个无序列表
                - 使用li在ul中创建一个一个的列表项,
                    一个li就是一个列表项
                    
            通过type属性可以修改无序列表的项目符号
                可选值:
                    disc,默认值,实心的圆点
                    square,实心的方块
                    circle,空心的圆
                    
            注意:默认的项目符号我们一般都不使用!!
                如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置
             ul和li都是块元素   
有序列表

有序列表和无序列表类似,只不过它使用ol来代替ul
            有序列表使用有序的序号作为项目符号
            type属性,可以指定序号的类型
                可选值:1,默认值,使用阿拉伯数字
                        a/A 采用小写或大写字母作为序号
                        i/I 采用小写或大写的罗马数字作为序号
                        
            ol也是块元素

列表之间都是可以互相嵌套,可以在无序列表中放个有序列表,也可以在有序列表中放一个无序列表
定义列表

义列表用来对一些词汇或内容进行定义
            使用dl来创建一个定义列表
                dl中有两个子标签
                    dt : 被定义的内容
                    dd : 对定义内容的描述
            同样dl和ul和ol之间都可以互相嵌套

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7
 8             /*
 9                  去掉项目符号
10              * */
11             /*ul{
12                 list-style: none;
13             }*/
14
15         </style>
16     </head>
17     <body>
18
19         <!--
20             列表就相当于去超市购物时的那个购物清单,
21                 在HTML也可以创建列表,在网页中一共有三种列表:
22                     1.无序列表
23                     2.有序列表
24                     3.定义列表
25         -->
26
27         <!--
28             无序列表
29                 - 使用ul标签来创建一个无序列表
30                 - 使用li在ul中创建一个一个的列表项,
31                     一个li就是一个列表项
32
33             通过type属性可以修改无序列表的项目符号
34                 可选值:
35                     disc,默认值,实心的圆点
36                     square,实心的方块
37                     circle,空心的圆
38
39             注意:默认的项目符号我们一般都不使用!!
40                 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置
41
42             ul和li都是块元素
43         -->
44         <ul>
45             <li>西门大官人</li>
46             <li>柴大官人</li>
47             <li>许大官人</li>
48             <li>唐僧大官人</li>
49         </ul>
50
51         <!--
52             有序列表和无序列表类似,只不过它使用ol来代替ul
53             有序列表使用有序的序号作为项目符号
54             type属性,可以指定序号的类型
55                 可选值:1,默认值,使用阿拉伯数字
56                         a/A 采用小写或大写字母作为序号
57                         i/I 采用小写或大写的罗马数字作为序号
58
59             ol也是块元素
60         -->
61         <ol type="I">
62             <li>结构</li>
63             <li>表现</li>
64             <li>行为</li>
65         </ol>
66
67         <!--
68             列表之间都是可以互相嵌套,可以在无序列表中放个有序列表
69                 也可以在有序列表中放一个无序列表
70         -->
71
72         <p>菜谱</p>
73         <ul>
74             <li>
75                 鱼香肉丝
76                 <ol>
77                     <li>鱼</li>
78                     <li>香</li>
79                     <li>肉丝</li>
80                 </ol>
81             </li>
82             <li>
83                 宫保鸡丁
84                 <ul>
85                     <li>宫保</li>
86                     <li>鸡丁</li>
87                 </ul>
88             </li>
89             <li>青椒肉丝</li>
90         </ul>
91
92     </body>
93 </html>

原文地址:https://www.cnblogs.com/Wll-Fss/p/9221985.html

时间: 2024-10-27 05:51:42

HTML_列表标签的相关文章

&lt;ul&gt;-&lt;li&gt;无序列表标签

概念:多个并列的列表项之间没有先后顺序 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

HTML的列表标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

&lt;ol&gt;-&lt;li&gt;有序列表标签

概念:多个并列的列表项,它们之间有明显的先后顺序 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

html中有序列表标签ol,li的高级应用

本文主要介绍html中有序列表标签ol,li的高级应用, 在网页设计时我们设计有序列表内容时,经常会在每个ITEM前手工加上一个数值,或是由程序加上这个数值. 而如果使用有序列表标签ol和li,则不需要这么麻烦,根本不用自行去填写序数,当单层列表的时候这种特性似乎并不明显,而当使用多层的时候其特性就很明显了. 一般的标签ol和li有序列表应用代码如下: <ol> <li>列表内容一</li> <li>列表内容二</li> <li>列表

初学HTML 常见的标签(二) 列表标签

上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> <li>列表2</li> </ul> ul-li在网页中显示的默认样式一般为:每项li前都带一个圆点, 所以ul-li是没有序号的信息列表, 不存在前面的1, 2, 3等等的序号为其排序. ol-li 列表标签 <ol> <li>有序列表1</l

(三)HTML中的列表标签、框架集及表单标签

一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> 例子:<ul type="??"> // type的属性值可以为:disc---->实心黑色圆:circle---->空心圆:square---->实心正方形. <li>河南理工大学</li> <li>河南工业大学<

如何设置iMatrix平台中列表标签(gridjqGrid)实现动态列表

动态列表 以demo中"订单(动态列表)"为例说明:此列表显示的信息包括订单主表的信息和订单子表的信息,其中主表信息是编号为ES_ORDER对应列表的信息,子表的信息是从后台动态取得: 1.列表标签中需增加属性dynamicColumn="": <grid:jqGrid gridId="dynamicOrder" url="${ctx}/order/dynamic-order.htm" code="ES_ORD

07.24 HTML 实体标签 列表标签 本文标签 超链接 锚点

实体标签 &nbsp 空格 &lt < &gt  > &quot 引号 列表标签 文本标签 em 强调 表现为斜体 strong 强调 表现为加粗 q 引用 sup 上标 sub 下标 超链接  URL 统一资源定位符   万维网的每一个文件都有一个URL 标签 download 下载 H5 新增 路径 相对路径 ./../ 绝对路径& 锚点 <a name ="锚点的名字"></a> 图像 img标签 属性

HTML5列表标签和表格标签

一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体 无序列表---unordered-list(最多):新闻列表.导航.商品列表作用:给一堆数据添加列表语义里面所有数据没有优先之分只是列举出来可以列举图片文字视频 ```<ul><li></li></ul>```ul里面有属性 type="circle/square/disc"  清除前面符号 list-style:none: