前端必备知识之列表标签


  列表是用来布局的,其最大的特点是:整洁、有序,它作为布局会更加自由和方便。

  根据使用习惯分为三类:无序列表、有序列表和自定义列表。

无序列表(重点)

  无序列表通过<ul></ul>定义的,一般会以项目符号呈现列表项,而列表项用<li></li>标签定义。

语法格式如下:

<ul>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ul>

  注意事项:无序列表之间是没有先后顺序的,是并列的;ul标签里只能嵌套li标签,不能直接输入内容,只能在li标签内加入内容;li标签里可以容纳任何元素;无序列表自带属性,使用时常用CSS设置无序列表的属性。

有序列表

  有序列表用户有顺序的排列。用ol标签定义列表,列表排序以数字显示,用li标签定义列表项。

语法格式如下:

<ol>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ol>

  注意事项同无序列表。

自定义列表(重点)

  自定义列表常用于对术语和名词进行解释和描述,定义的列表项前没有任何项目符号。

语法格式如下:

<dl>
    <dt>名词</dt>
    <dd>名词的解释1</dd>
    <dd>名词的解释2</dd>
</dl>

  注意事项:dl标签里只能包含dt标签和dd标签;dt和dd没有个数限制,通常情况下是一个dt有多个dd用来修饰。

声明:辉同一般的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 前端必备知识之列表标签


代码书写人生