本文通过一个简单的HTML页面示例介绍了有序列表(ol)、无序列表.ul)和定义列表(dl)的基本用法，并展示了details和summary元素如何实现内容的展开与收起效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>watermalon</li>
</ol>
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>watermalon</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>hypertext markup language</dd>
<dt>HTML</dt>
<dd>hypertext markup language</dd>
<dt>HTML</dt>
<dd>hypertext markup language</dd>
</dl>
<!-- 详细信息 -->
<details open>
<summary>Who</summary>
<dd>Hello,I'm DD</dd>
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>watermalon</li>
</ul>
</details>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>watermalon</li>
</ol>
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>watermalon</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>hypertext markup language</dd>
<dt>HTML</dt>
<dd>hypertext markup language</dd>
<dt>HTML</dt>
<dd>hypertext markup language</dd>
</dl>
<!-- 详细信息 -->
<details open>
<summary>Who</summary>
<dd>Hello,I'm DD</dd>
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>watermalon</li>
</ul>
</details>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
