无序列表、有序列表、定义列表

列表是由一组标签组成

一、无序列表

没有顺序的列表结构

由ul和li标签组成

ul：unordered list（无序列表）

li：list item（列表项）

    <h2>四大名著</h2><ul><li>水浒传</li><li>西游记</li><li>红楼梦</li><li>三国演义</li></ul>

ul内部只能嵌套li，li内部可以嵌套任何标签（包括ul）

   <h2>四大名著</h2><ul><li><h1>水浒传</h1><ul><li>宋江</li><ul><li>1</li><li>2</li></ul><li>卢俊义</li><li>李逵</li></ul></li><li><h1>西游记</h1><ul><li>孙悟空</li><li>猪八戒</li></ul></li><li>红楼梦</li><li>三国演义</li></ul>

二、有序列表

有序的列表结构

有ol和li组成

ol：ordered list

li：list item

ol内部只能嵌套li，li内部可以嵌套任何标签（包括ol）

    <h2>三年级1班</h2><ol><li>Tom</li><li>Ben</li><li>Jimmy</li></ol>

实际使用

三、定义列表

定义一个标题和内容自定义的列表

有dl、dt、dd

dl：definition list 创建自定义列表结构

dt：definition term 定义主题，表示一个列表的主题

dd：definition description 定义解释项，对于主题的解释

dl内部只能放dt和dd，dt和dd同级

每个dt主题后可以跟多个dd，dd解释的是上一个最近的dt

    <dl><dt>周杰伦</dt><dd>男</dd><dd>歌手 </dd><dd>作品：稻香、告白气球等</dd></dl>

实际应用中会用到多个dl

 <dl><dt>周杰伦</dt><dd><p>作品：稻香、一路向北等</p><p>性别：男</p><p>职业：歌手</p></dd></dl><dl><dt>薛之谦</dt><dd><p>作品：丑八怪等</p><p>性别：男</p><p>职业：歌手</p></dd></dl>

注释

<!--  -->

<!-- <h2>三年级1班</h2> -->

快捷键 ctrl + /

HTML标签的基本使用：无序列表、有序列表、定义列表相关推荐

html无序站点,html有序无序定义列表详解（案例介绍）
在前面小编已经把html中有序列表.无序列表及定义列表通过单独案例的方式进行讲解,而今天我们来绘制一个将有序无序和自定义结合在一起的案例,方便大家以后在实习过程能运用自如html列表.先来看看效果展示 ...
有序列表、无序列表、定义列表
有序列表.无序列表.定义列表三种列表标签和语义标签语义 <u1></u1> 无序列表 <o1></o1> 有序列表 <d1></ ...
HTML---文本样式---行高---字符间距---文本对齐方式---文本使用线条修饰---文本的大小写---处理元素内的空白---字体样式---无序列表有序列表---表格
文章目录文本样式 color direction line-height letter-spacing text-align text-indent text-decoration text-tra ...
html5列表表格媒体元素,列表、表格与媒体元素
北冥复习html(二) 一.表格的具体组成单位由行和列组成的单元格结构: row1,cell1 row1,cell2 table ==> 定义表格: border ==> 设置表格边粗 ...
html5无序列表，有序列表，定义列表，组合标签，div分区标签
<!DOCTYPE html > <html lang="en"> <head><meta charset="UTF-8&quo ...
6、HTML有序列表+无序列表+定义列表
在网站开发过程中,我们经常会使用到列表(list).列表可以将若干条相关的内容进行整理,让内容看起来更加有条理. HTML 为我们提供了 3 种不同的列表: 有序列表无序列表定义列表 1. 有序列 ...
HTML之创建有序、无序和定义列表
1.无序列表无序列表是一个项目的列表,在默认状态下,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 使用type样 ...
【HTML】HTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )
文章目录一.HTML 列表二.无序列表三.有序列表四.自定义列表一.HTML 列表列表是装载结构 , 样式一致的文字或图表的容器 ; 列表由于其整齐 , 整洁 , 有序 ...
html 有序无序列表,无序列表、有序列表和定义列表
一.html无序列表无序列表是一个没有顺序的列表项目,在各条列前面使用●□◇◆等符号以示区隔. html无序列表始于标签.每个列表项始于 :无序列表的type属性有三个数值可选,这三个选项分别为: ...

HTML标签的基本使用：无序列表、有序列表、定义列表

无序列表、有序列表、定义列表

一、无序列表

二、有序列表

三、定义列表

注释

HTML标签的基本使用：无序列表、有序列表、定义列表相关推荐

最新文章

热门文章