美文网首页让前端飞
html标签之列表标签

html标签之列表标签

作者: 前端萧萧 | 来源:发表于2020-12-04 17:32 被阅读0次

HTML的列表标签主要分为三种,有序列表、无序列表和定义列表。

1,有序列表:

有序列表,顾名思义,就是有顺序的列表。一般用于排名等。

有序列表主要涉及的标签:

<ol>标签 :有序列表标签

  • <ol>标签内元素是有序的,并且自带序号;

  • <ol>标签内除了<li>标签外不要写其他东西;

<li>标签:

  • <li>是块及元素,独占一行。

  • <li>标签里存放ol的内容

  • <li>标签可以嵌套其他标签

格式:

<ol>
      <li>我是有序列表内容</li>
</ol>

2,无序列表:

无序列表,每个标题间没有顺序,默认为一个圆点。

<ul>标签 :无序列表标签。

<ol>内也不要写除了li的其他内容

格式:

<ul>
     <li>我是无序列表内容</li>
</ul>

例:

<h2>兴趣爱好</h2>
<ul>
    <li>
        <h3>男生</h3>
        <ul>
            <li>打篮球</li>
            <li>玩游戏</li>
            <li>踢足球</li>
        </ul>
    </li>
    <li>
        <h3>女生</h3>
        <ul>
            <li>看小说</li>
            <li>看电视</li>
            <li>吃东西</li>
        </ul>
    </li>
</ul>

3,定义列表:

用于自定义的一些内容。

<dl>标签 :自定义列表标签

<dt>标签 :是定义标题

  • <dt>是块级元素 独占一行;

<dd>标签:定义属性

  • <dd>是块级元素 独占一行;

  • <dd>的内容是无序的 没有序号;

格式:

<dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
<dl>

相关文章

  • html实现一个简单列表

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

  • HTML笔记--列表标签

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

  • ## HTML基础-列表标签/表格标签

    ## HTML基础-列表标签/表格标签 # 列表标签(无序列表/有序列表/定义列表) # 表格标签 # 单元格合并...

  • 《任务201-1之HTML列表》

    HTML下的列表与其实例 列表标签 有序标签 ... 无序标签 ... 列表项标签,嵌套于有序与无序标签内部 ...

  • WEB前端的学习阶段

    HTML阶段:HTML文档结构——段落标签——文字标签——图片标签——超链接标签——列表标签——表格标签——表单标...

  • 认识html

    认识html 文本标签 列表标签 图片标签 超链接(重点!!!!!!!!!!!!!) 表格标签

  • 前段学习笔记三

    html部分标签 列表标签:分为有序列表( )和无序列表( )和自定义列表( ) 表格标签t...

  • html标签之列表标签

    HTML的列表标签主要分为三种,有序列表、无序列表和定义列表。 1,有序列表: 有序列表,顾名思义,就是有顺序的列...

  • html中关于表的标签

    这篇文章主要分享html中的列表标签、表格标签、表单标签,都是关于表的标签。 1.列表 什么是列表? 把…制成表,...

  • html列表,标签

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

网友评论

    本文标题:html标签之列表标签

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