HTML教程6——列表标签

简介: 无序列表用<ul>标签表示,无序列表的每一项前默认都是用圆点标识,<ul>标签中比较重要的属性为type(列表前的符号),默认为disc(圆点),还有circle(空心圆),square(实心正方形),<ul>标签中只能有<li>标签,<li>标签的元素代表列表每一行的内容,<ul>标签中可以允许有任意个<li>标签。

HTML教程6——列表标签


HTML教程6——列表标签


列表可以嵌套,并且可以多层嵌套!!!


无序列表


无序列表用<ul>标签表示,无序列表的每一项前默认都是用圆点标识,<ul>标签中比较重要的属性为type(列表前的符号),默认为disc(圆点),还有circle(空心圆),square(实心正方形),<ul>标签中只能有<li>标签,<li>标签的元素代表列表每一行的内容,<ul>标签中可以允许有任意个<li>标签。

image.png


有序列表


有序列表用<ol>标签表示,有序列表的每一项前都默认显示序号标识,<ol>标签中同样只能有<li>标签,并且允许有任意个<li>标签,<ol>标签中比较重要的属性有type,其属性值默认值为1(阿拉伯数字),还有A(大写字母)、a(小写字母)、I(大写罗马数字)、i(小写罗马数字),属性start(列表标识的开始位置),例如type="A" start="4"即该有序列表以大写字母标识并且以第四个字母D开始以此类推。

1.png


自定义列表


自定义列表用<dl>并且表示,<dl>标签中有<dt>标签和<dd>标签并且只允许有这两种标签,这两种标签数量同样为任意,<dt>标签为自定义列表的表头,<dd>标签为自定义列表的主体内容,一个<dd>标签只会对应一个<dt>标签,但是一个<dt>标签可以对应多个<dd>标签,其格式为一个<dt>标签后跟的所有<dd>标签都属于这一个级别的例如: <dl><dt>班级</dt><dd>一班</dd><dd>二班</dd><dd>三班</dd><dt>成绩</dt><dd>50</dd><dd>90</dd></dl>中班级为第一个头对应的内容为三个班级,成绩为第二个头对应的内容为两个成绩。

1.png

一般来说自定义列表中<dt>标签为列表主体,<dd>标签表示针对主体的每一项内容。


相关文章
|
17天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
26 0
|
2天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
32 19
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
1天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
15天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
29 4
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法
|
18天前
|
移动开发 前端开发 开发者
从 HTML4 到 HTML5 的迁移标签
【8月更文挑战第24天】
27 0
|
18天前
|
移动开发 搜索推荐 索引
HTML5 中 article 标签的含义与作用
【8月更文挑战第24天】
239 0
|
18天前
|
自然语言处理 前端开发 开发者