HTML之列表

作者: 落花的季节 | 来源:发表于2016-11-21 20:15 被阅读38次

列表的创建过程

创建一个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实现一个简单列表

    目标效果 知识点 html标签之 标签定义有序列表 实例: 显示效果: html标签之 标签定义无序列表 实例...

  • HTML列表

    HTML支持有序、无序和定义列表无序列表: 有序列表: 嵌套列表: 自定义列表: HTML 列表标签 定义有序列表...

  • 前端学习之HTML——列表

    列表 表格是用来显示数据的,那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便...

  • HTML学习心得(二)

    HTML 表格 表格中常用标签、属性及意义 HTML 列表 HTML无序列表 Coffee Milk 调...

  • html列表,标签

    1、html列表 有序列表 无序列表 定义列表 2、html表格及传统布局 table常用标签 table常用属性...

  • HTML笔记--列表标签

    HTML笔记--列表标签 标签(空格分隔): HTML 列表标签: 定义列表:带缩进的列表如这种样式的: 自定义...

  • HTML基础二

    HTML列表: 在html中,列表共分为三种:有序列表,无序列表和自定义列表 有序列表:有序列表中的各个列表都是有...

  • HTML系列(HTML列表)

    HTML列表分三种:无序列表、有序列表和定义列表(HTML列表常用于页面中的导航)(style="list-sty...

  • html列表

    列表 苹果 菠萝 香蕉 苹果 菠萝 香蕉 1.无序列表 使用...

  • html列表

    无序列表 有序列表 自定义列表 表格 表格书写的快速格式 表格完全格式 单元格合并 细线表格

网友评论

    本文标题:HTML之列表

    本文链接:https://www.haomeiwen.com/subject/xuwupttx.html