码迷,mamicode.com
首页 > Web开发 > 详细

初识HTML,HTML基本列表

时间:2017-07-24 01:26:05      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:2.4   编号   logs   版本   意思   序列   有序列表   内容   有序   

HTML基本列表有三类,有序列表,无序列表和自定义列表。下面作简单介绍:

  1. 有序列表
    1.1 基本效果:
    技术分享
    1.2 代码:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>有序列表</title>
        </head>
        <body>
            <ol>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
            </ol>
        </body>
    </html>

    1.3 说明
    在代码中我们写的列表中没有前面的编号,而显示时有编号。这就是有序列表。
    使用时,ol标签为双标签,标签中的所有内容写在li标签中,不能写在外面。(当然了,也可以写在外面,高版本浏览器可以揣测你的代码意思),其中的内容可以是其他的部分,比如a、img等等标签。
    1.4 属性
    start:规定起始号为多少。
    值:任意可代表编号的类型,如:

    <ol start="5">

    type:改变编号的类型、
    值:1;A;a;I;i;等,如:

    <ol type="a">
  2. 无序列表
    2.1 基本效果
    技术分享
    2.2 代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>无序列表</title>
        </head>
        <body>
            <ul>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>
        </body>
    </html>

    2.3 说明

    代码中我们没有写实心圆点,显示时有。可根据属性值来改变
    使用时同有序列表一样,需要将内容放入ul标签中的li标签里。
    2.4 属性
    type:改变列表前面的显示样式。
    值:disc,默认样式,实心圆点显示;
    square,实心正方形;
    circle,空心圆点。
  3. 自定义列表
    3.1 基本样式
    技术分享
    3.2 代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>自定义列表</title>
        </head>
        <body>
            <dl>
                <dt>定义自定义标签</dt>
                <dd>描述自定义标签</dd>
                <dt>定义自定义标签</dt>
                <dd>描述自定义标签</dd>
            </dl>
        </body>
    </html>

    使用技巧,有序列表可以用来实现某些排行榜的排名,无需我们手动添加编号实现,同时也会利于后期维护。无序列表很多时候是用css取消了前面的圆点即:

    <ul style="list-style: none;">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    显示效果为
    技术分享

    很多时候还会利用到其他方式,共同实现导航栏的编写

初识HTML,HTML基本列表

标签:2.4   编号   logs   版本   意思   序列   有序列表   内容   有序   

原文地址:http://www.cnblogs.com/cdu-wx/p/7226764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!