HTML之列表

列表的创建过程

创建一个HTML列表需要两个元素,这两个元素结合使用就可以创建一个HTML列表。
第一个元素用来标记列表项,第二个元素决定你创建的列表类型:有序还是无序。

  • 第一步:
    把每个列表项目放到一个< li>元素中
    把每个列表项目放到各自的< li>元素中创建列表。这意味着把内容放在< li>和< /li>之间。
<li>我是一个列表项目<li>
  • 第二步
    用< ul>和< ol>封装列表元素。
    如果使用< ul>封装列表元素,则列表为无序列表;如果使用< ol>封装列表元素,则列表为有序列表。
    无序列表:
<ul>
    <li>Javascript</li>
    <li>Java</li>
<ul>

有序列表:

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

运行结果:
<ul> <li>Javascript</li> <li>Java</li> <ul> <ol> <li>第一天</li> <li>第二天</li> </ol>

列表的嵌套使用

在制作列表的时有时候需要也个列表嵌套使用,比如:目录
列表在嵌套创建时可以在有序列表中嵌套无序列表,也可以在无序列表中嵌套有序列表。

<ul>   
   <li>JavaScript</li>    
   <ol>        
      <li>第一章</li>        
      <ul>            
            <li>const</li>              
            <li>let</li>        
      </ul>         
   </ol>    
</ul>

运行结果:
<ul> <li>JavaScript</li> <ol> <li>第一章</li> <ul> <li>const</li> <li>let</li> </ul> </ol></ul>

列表的使用注意事项

  • < ol>和< li>必须一起使用吗?
    必须一起使用,它们唇齿相依,缺一不可。
  • 我们可以在< ol>或< ul>中添加其他元素或文字吗?
    不行,< ol>和< ul>的诞生只是为了配合< li>的使用。
  • 列表有有序列表和无序列表,还有其他的类型吗?
    还有自定义列表,列表中的每个项目都有一个限项< dt>和一个描述< dd>。
    自定义列表示例:
<dl>
    <dt>HTML</dt>
     <dd>HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language)</dd>
    <dt>JavaScript</dt>
      <dd>JavaScript,一种高级编程语言</dd>
</dl>

运行结果:
<dl> <dt>HTML</dt> <dd>HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language)</dd> <dt>JavaScript</dt><dd>JavaScript,一种高级编程语言</dd>
</dl>

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

推荐阅读更多精彩内容

  • 还是举个例子吧,如下图所示,该怎么样通过HTML实现这个列表呢? 创建一个含有两项的无序列表 结果如图...
    WP啦啦啦阅读 1,211评论 2 5
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • 一,有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    kingBirds阅读 851评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,645评论 32 459
  • 回来已是六点。桌上摊开的速写本应该是中午画的,第二次完美错开。不敢把这句话发在微信里,怕是要一语成谶。住处的人回来...
    柳不浪阅读 108评论 0 0