HTML 列表

简介: HTML 列表

HTML 列表 表格

列表

列表-建立数字编号的列表

使用<ol>和<li>标签创建带数字编号的列表。
使用<ol>标签中使用start竖向,设置起始的序号。
在<li>标签中使用value属性,改变列表内的编号顺序

列表-制定编号的格式和顺序

在<ol>和<li>标签中,使用type属性指定编号系统的类型。

type竖向的取值如下表:



<ol start="10">
  <li>《和时间做朋友》
  <li>《产品思维30课》
  <li>《增长思维30课》
  <li value="20">《建构主义》
  <li>《高效能人士的七个习惯》
</ol>
<ol type="A">
  <li>《和时间做朋友》
  <li>《产品思维30课》
  <li>《增长思维30课》
  <li>《建构主义》
  <li>《高效能人士的七个习惯》
</ol>
<ol type="I">
  <li>《和时间做朋友》
  <li>《产品思维30课》
  <li>《增长思维30课》
  <li>《建构主义》
  <li>《高效能人士的七个习惯》
</ol>

效果图


列表-建立带有项目符号的列表

使用<ul>和<li>标签创建带有项目符号的列表,<ul>和<li>标签的type属性指定符号的样式,取值如下:

disc——显示为实心的圆圈

square——显示为实心的方块

circle——显示为空心的圆圈

<ul type="disc">
  <li>《和时间做朋友》
  <li>《产品思维30课》
  <li>《增长思维30课》
  <li>《建构主义》
  <li>《高效能人士的七个习惯》
</ul>
<ul type="square">
  <li>《和时间做朋友》
  <li>《产品思维30课》
  <li>《增长思维30课》
  <li>《建构主义》
  <li>《高效能人士的七个习惯》
</ul>
<ul type="circle">
  <li>《和时间做朋友》
  <li>《产品思维30课》
  <li>《增长思维30课》
  <li>《建构主义》
  <li>《高效能人士的七个习惯》
</ul>

效果图



列表-建立无符号的列表

使用<dl>与<dt>标签创建无符号的列表
使用<dd>标签替换<dt>,创建缩进的列表

列表-建立术语列表

在<dl>元素中同时使用<dt>和<dd>标签,建立术语列表。术语列表中的列表项有两部分组成:术语和他的说明。术语有<dt>标签制定,说明有<dd>标签指定。
<dl>
  <dt>《和时间做朋友》
  <dt>《产品思维30课》
  <dt>《增长思维30课》
  <dt>《建构主义》
  <dt>《高效能人士的七个习惯》
</dl>
<dl>
  <dd>《和时间做朋友》
  <dd>《产品思维30课》
  <dd>《增长思维30课》
  <dd>《建构主义》
  <dd>《高效能人士的七个习惯》
</dl>
<dl>
  <dt>HTML
  <dd>超文本标记语言
  <dt>《增长思维30课》
  <dt>《建构主义》
  <dt>《高效能人士的七个习惯》
</dl>

效果图





目录
相关文章
|
27天前
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
27天前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
|
28天前
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
|
28天前
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
|
28天前
HTML 速查列表2
文本格式化包括多种标签
|
28天前
HTML 速查列表1
HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
41 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
HTML 列表4
HTML 列表标签用于创建不同类型的列表。`&lt;ol&gt;` 和 `&lt;ul&gt;` 分别定义有序和无序列表,`&lt;li&gt;` 定义列表项。`&lt;dl&gt;` 用于定义描述列表,其中 `&lt;dt&gt;` 定义术语,`&lt;dd&gt;` 定义术语的描述。
HTML 列表2
HTML 有序列表使用数字标记列表项,以 `&lt;ol&gt;` 开始,每个项目用 `&lt;li&gt;` 标签表示。