《任务201-1之HTML列表》

HTML下的列表与其实例

列表标签

  1. 有序标签
    <ol> ... </ol>
  • 无序标签
    <ul> ... </ul>

  • 列表项标签,嵌套于有序与无序标签内部
    <li> ... </li>

  • 定义标签组

<dl>
  <dt> the name of your defintion item <dt>
    <dd>add description of this item here <dd>
<dl>

简单实例

下面,让我们来构建一个简单的列表。

HTML支持多项文本编辑器,我个人常用的一般都是程序员的好基友---Notepad++和vim,当然,网上也有很多在线编辑器,可以快速提交查看效果,此处不再一一例举。

此例用到了有序列表与无序列表的嵌套,我们将它的结构提取出来后便可以快速构建。

  • 无序列表项** <ul> **
    • 有序列表项 ** <ol> **
      • 无序列表项 ** <ul> **

最终实现代码如下

<!DOCTYPE html>
<html>
<body>
<ul>
  <li>JavaScript
    <ol>
      <li>第一章
         <ul>
           <li>const</li>
          <li>let</li>
        </ul>
      </li>
      <li>第二章
        <ul>
          <li>function</li>
          <li>object</li>
        </ul>
      </li>
    </ol>
  </li>
  <li>Java    
    <ol>
      <li>第一章
        <ul>
          <li>class</li>
          <li>package</li>
        </ul>
      </li>
      <li>第二章
        <ul>
          <li>private</li>
          <li>public</li>
        </ul>
      </li>
    </ol>
  </li>
</body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,992评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,558评论 25 708
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 我们都听说过我们也都有几个朋友 我有个朋友他上天入地无所不能 我还有个朋友他风流倜傥放荡不羁 原来你也有个朋友他事...
    有鸟名大风阅读 276评论 0 2
  • Word是我们最常使用的办公文档,无论你从事什么职业,word文件都在围绕着我们。当然,有时候我们也需要除了wor...
    T被打的小猪M阅读 653评论 2 7