列表
HTML 列表列表分有序列表、无序列表和定义列表。
有序列表
例子:
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
显示效果:
可以为有序列表设置 reversed、start、type 属性改变显示样式:
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<!-- 设置起始值为 0 -->
<ol start="0">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<!-- 罗马数字 -->
<ol type="I">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<!-- 反转列表 -->
<ol reversed>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
无序列表
例子:
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</body>
</html>
显示效果:
可以对无序列表设置 CSS 属性改变显示样式:
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<ul style="list-style-type: circle;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: disc;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: square;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<!-- none 表示不显示 -->
<ul style="list-style-type: none;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</body>
</html>
显示效果:
你最近学HTML啦?! 一个账号 发表于 2020-1-22 17:39
你最近学HTML啦?!
是
页:
[1]