当前位置: 首页 > news >正文

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>
View Code

 

转载于:https://www.cnblogs.com/Wll-Fss/p/9221985.html

相关文章:

  • docker基础
  • jstack
  • linux常用命令与终端快捷键总结
  • 别让程序员停止在35岁,如何让我们走得更远?
  • jQuery获取URL中的参数
  • try{ } catch (e){ }的理解
  • jQuery = 1.11.3 DomXSS漏洞
  • EOS多节点组网:商业场景分析以及节点启动时序
  • maven与sbt修改国内镜像
  • U盘安装Linux CentOS 6.8 系统
  • 5.20界面初步完成
  • spring mvc 文件上传 ajax 异步上传
  • react-native
  • C语言学习(42)
  • 21.拉取删除远程分支
  • 《Javascript数据结构和算法》笔记-「字典和散列表」
  • 【159天】尚学堂高琪Java300集视频精华笔记(128)
  • 10个确保微服务与容器安全的最佳实践
  • IndexedDB
  • JavaScript实现分页效果
  • Java教程_软件开发基础
  • Java精华积累:初学者都应该搞懂的问题
  • Java知识点总结(JavaIO-打印流)
  • node和express搭建代理服务器(源码)
  • passportjs 源码分析
  • Python socket服务器端、客户端传送信息
  • Python学习笔记 字符串拼接
  • React 快速上手 - 07 前端路由 react-router
  • vue数据传递--我有特殊的实现技巧
  • 从零到一:用Phaser.js写意地开发小游戏(Chapter 3 - 加载游戏资源)
  • 每天10道Java面试题,跟我走,offer有!
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • Android开发者必备:推荐一款助力开发的开源APP
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • #HarmonyOS:基础语法
  • #pragam once 和 #ifndef 预编译头
  • #ubuntu# #git# repository git config --global --add safe.directory
  • #Z0458. 树的中心2
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • (1)SpringCloud 整合Python
  • (2022 CVPR) Unbiased Teacher v2
  • (4)通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (超详细)语音信号处理之特征提取
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (转)项目管理杂谈-我所期望的新人
  • .bashrc在哪里,alias妙用