分组元素（列表、无序列表示例、有序列表示例）

分组元素

div

div元素是没有语义的通用分组元素，早期设计中常用div标签进行网页布局。

blockquote

blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙，在左右两边缩进（增加外边距）。

pre

pre元素用来定义预格式化文本，在

标签内容中的文本通常会保留空格和换行符，显示为等宽字体。

figure/figcaption

figure元素代表一个和文档相关的图，figcaption是这个图的标题。

ul/li

ul可创建无序列表，在这个标签中可以用li标签设置多个列表项。基本格式如下：

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

• 无序列表项1
• 无序列表项2
• 无序列表项3

无序列表<ul>有一个可选属性type，用来规定列表里项目符号的类型,其取值可以是disk(实心圆）、circle（圆）或square（实心正方形）。

ol/li

ol可创建有序列表，在这个标签中可以用li标签设置多个列表项，显示时每个列表项独占一行。基本格式如下：

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

1. 有序列表项1
2. 有序列表项2
3. 有序列表项3

在HTML5中，有序列表<ol>有三个可选属性，type用来规定列表里项目编号的类型，start属性用于指定列表的开始编号，reversed属性用于将列表反向进行编号。

dl/dt,dd
dl可创建定义列表，在这个标签中可以用dt标签设置需要定义的术语，每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下：

<dl>
  <dt>术语</dt>
    <dd>术语解释1</dd>
    <dd>术语解释2</dd> 
</cl>

术语

术语解释1

术语解释2

应用时注意，一个列表中不允许含有相同名字的术语，也不允许有重复的术语解释。

定义列表

dl元素用于设置定义列表，它由两部分组成：定义名词和定义描述。dt元素设置定义名词，dd元素设置定义的描述。示例例如：

<dl>
	<dt><strong>Web前端开发</strong></li> 
	<dd>Web前端开发是从<mark>网页制作</mark>演变而来的,名称上有很明显的时代特征。</dd>
	<dd>前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</dd>
  </dl>

显示效果为：

无序列表示例

HTML中的ul元素表示不排序的项目列表，属性type 可设置列表符号样式，取值为disk表示实心圆，取值为circle表示圆，取值为square表示实心正方形，默认项目符号类型为disk。例如以下代码：

<ul>
     <li type=disk>第一项 实心圆</li>
     <li type=circle>第二项 圆</li>
     <li type=square>第三项 实心正方形</li>
  </ul>

显示效果为：

有序列表示例

HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。属性start 设置列表符号初值，取值可以是1、2、3 …,例如以下代码：

<ol start=2>
     <li type=A>男装</li>
     <li type=i>上衣</li>
     <li type=I>T恤</li>
  </ol>

显示效果为：

相关概念选择题及参考答案

选择题

1、在下列选项中，用于表示引自他处大段内容的分组元素是（ ）。

A、
div

B、
blockquote

C、
p

D、
pre

2、在HTML中，元素pre的作用是（ ）

A、
表示标题

B、
表示转行

C、
表示预排版

D、
表示文字效果

3、以下哪个标记用来建立一个有序列表（ ）。

A、
<ni>

B、
<ul>

C、
<dl>

D、
<ol>

4、在定义列表中，一对<dt></dt>标记可以对应多对<dd></dd>标记。

A、
正确

B、
错误

5、关于定义无序列表的基本语法格式，以下描述错误的是（ ）。

A、
<ul></ul>标记用于定义无序列表

B、
<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项

C、
每对<ul></ul>中至少应包含一对<li></li>

D、
<li>不可以定义type属性，只能使用CSS样式属性代替

参考答案

1、B
2、C
3、D
4、A
5、D