html实现一个简单列表

目标效果

知识点

html标签之<ol>
<ol>标签定义有序列表

实例：

<ol>
    <li>第一章</li>
    <li>第二章</li>
</ol>

显示效果：

有序列表

html标签之<ul>
<ul>标签定义无序列表

实例：

<ul>
    <li>JavaScript</li>
    <li>Java</li>
</ul>

显示效果：

无序列表

实现代码

通过对<ol>和<ul>标签的嵌套使用，可以实现目标效果。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>html实现一个简单列表</title>
  </head>
  <body>
    <ul>
      <li>JavaScript</li>
        <ol>
          <li>第一章</li>
            <ul>
              <li>const</li>
              <li>let</li>
            </ul>
          <li>第二章</li>
            <ul>
              <li>function</li>
              <li>object</li>
            </ul>
       </ol>
      <li>Java</li>
        <ol>
          <li>第一章</li>
            <ul>
              <li>class</li>
              <li>package</li>
            </ul>
           <li>第二章</li>
             <ul>
              <li>private</li>
              <li>public</li>
            </ul>
      </ol>
    </ul>
  </body>
</html>

最后编辑于：2017.12.05 00:22:06

html实现一个简单列表

目标效果

知识点

实例：

实例：

实现代码

推荐阅读更多精彩内容