HTML常用标签之列表标签

2024-04-29 15:21:04

引言：

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

一、无序列表(重点)

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

无序列表的基本语法格式如下∶

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>

注意事项：
1．无序列表的各个列表项之间没有顺序级别之分，是并列的；

2. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；

3. <li> 与</li>之间相当于一个容器，可以容纳所有元素；

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

二、有序列表（理解)

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项.

有序列表的基本语法格式如下:

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>

1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的;

2. <li>与</li>之间相当于一个容器，可以容纳所有元素;

3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

三、自定义列表（重点)

自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

使用场景：

在HTML标签中，<dl>标签用于定义描述列表(或定义列表）)，该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
其基本语法如下:

  <dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>

1. <dl></dl>里面只能包含<dt>和<dd>；

2 .<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

HTML常用标签之列表标签相关推荐

h5列表 php,常用的HTML5列表标签
这次给大家带来常用的HTML5列表标签,使用用HTML5列表标签的注意事项有哪些,下面就是实战案例,一起来看一下. 一.列表标签作用作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数 ...
Web学习第二天——HTML的基本标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
HTML 文字标签、段落标签、列表标签、链接标签和表格
文章目录 HTML 一.文字标签二.段落标签三.列表标签 1.有序列表 2.无序列表 3.插入列表四.链接标签 1.文本链接 2.书签链接五.表格 1.绘制表格 2.行标签属性 3.单元格标签 ...
Web前端开发笔记——第二章 HTML语言第六节区域标签、列表标签
目录一.区域标签 (一)div标签的定义 (二)div标签的属性二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
html标签之列表标签，前端开发资料分享
前言年前准备换工作,总结了一波面试最频繁的面试问题跟大家交流.此文章是关于浏览器的常见问题,大概面试10家遇到6家提问类似问题(主要是大厂和中厂).目前入职滴滴出行成都团队. 一.如何入门,学习建议 ...
day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、转义（实体）字符、基本表格、合并表格
HTML 一 HTML概述超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...

最新文章

热门文章