美文网首页互联网技术IT交流圈
html 有序列表、无序列表、自定义列表

html 有序列表、无序列表、自定义列表

作者: Devops海洋的渔夫 | 来源:发表于2019-01-20 19:15 被阅读28次

    仅供学习,转载请注明出处

    有序列表

    HTML有一个特殊元素,用于创建ordered lists(有序列表), 或数字编号列表。
    有序列表以<ol>元素开始,并包含一个或多个<li>元素。
    例如:

    <ol>
      <li>Garfield</li>
      <li>Sylvester</li>
    </ol>
    

    将创建一个包含"Garfield"和"Sylvester"的数字编号列表。

    下来定义一个胖子老板售卖货品的有序列表

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <h3>胖子老板店铺:</h3>
        <ol>
            <li>槟榔10元/包</li>
            <li>肥仔可乐水3元/瓶</li>
            <li>蓝利群17元/包</li>
            <li>芙蓉王26元/包</li>
        </ol>
    </body>
    </html>
    

    浏览器展示如下:

    无序列表

    HTML有一个特殊元素,用于创建unordered lists(无序列表), 或带项目符号的列表。
    无序列表以<ul>元素开始,并包含一个或多个<li>元素。

    例如:

    <ul>
      <li>milk</li>
      <li>cheese</li>
    </ul>
    

    将会创建一个带项目符号的"milk"和"cheese"列表。

    将上面胖子老板的示例改为无序列表

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <h3>胖子老板店铺:</h3>
        <ul>
            <li>槟榔10元/包</li>
            <li>肥仔可乐水3元/瓶</li>
            <li>蓝利群17元/包</li>
            <li>芙蓉王26元/包</li>
        </ul>
    </body>
    </html>
    

    浏览器展示如下:

    在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

    实际应用实例:

    定义列表

    定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <h3>前端三大块</h3>
        <dl>
            <dt>html</dt>
            <dd>负责页面的结构</dd>
    
            <dt>css</dt>
            <dd>负责页面的表现</dd>
    
            <dt>javascript</dt>
            <dd>负责页面的行为</dd>
    
        </dl>
    </body>
    </html>
    

    浏览器展示如下:

    关注微信公众号,回复【资料】、Python、PHP、JAVA、web,则可获得Python、PHP、JAVA、前端等视频资料。

    相关文章

      网友评论

        本文标题:html 有序列表、无序列表、自定义列表

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