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>标签表示针对主体的每一项内容。


相关文章
|
29天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
21天前
HTML_表单标签
HTML_表单标签
16 0
|
8天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
10天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
10天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
10天前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`&lt;table&gt;`)用于展示结构化数据,通过`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
|
11天前
|
移动开发 数据安全/隐私保护 HTML5
Html零基础入门教程(非常详细)
Html零基础入门教程(非常详细)
|
12天前
|
区块链
html网页title旁边的小图标制作教程
html网页title旁边的小图标制作教程
|
12天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
21天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0