HTML列表标签

列表： 一系列内容的集合

列表分类：无序列表、有序列表、自定义列表

1.1.1无序列表

  无序列表ul

             列表项li

  无序列表特点：在每个列表项li前面，会有实心圆点

  属性：

  type="disc"  实心圆点

  type="square" 实心方形

  type="circle" 空心圆

  注意：html5文件不推荐直接使用type属性。请使用样式取代它。

 <ul type="square">
        <li>1</li>
        <li>2</li>
        <li>3</li>
 </ul>

预览：

1.1.2有序列表

  有序列表ol

             列表项li

  有序列表特点：在每个列表项li前面，会有数字1234

  属性：

  type="1" 数字

  type="a" 小写英文字母

  type="A" 大写英文字母

  type="i" 小写罗马符号

  type="I" 大写罗马符号

  注意：html5文件不推荐直接使用type属性。请使用样式取代它。

<ol type="a">
        <li>我是列表项标签</li>
        <li>我是列表项标签</li>
        <li>我是列表项标签</li>
</ol>

预览：

1.1.3嵌套列表

嵌套列表：在列表项li中可以嵌套使用列表（可以层层嵌套）

 <ul>
        <li>安徽省
            <ul>
                <li>合肥市
                    <ul>
                        <li>蜀山区</li>
                        <li>政务区</li>
                        <li>经开区</li>
                        <li>瑶海区</li>
                    </ul>
                </li>
                <li>安庆市</li>
                <li>芜湖市</li>
                <li>淮南市</li>
            </ul>
        </li>
        <li>
            湖北省
            <ul>
                <li>武汉市</li>
                <li>黄岗市</li>
            </ul>
        </li>
 </ul>

预览：

 

1.1.4自定义列表

  自定义列表dl

    dt 定义项目列表中的标题

    dd 定义项目列表中的内容

 <dl>
        <dt>平凡的世界</dt>
        <dd>路遥老师创作的一部百万字长篇巨著,在70~80年代的背景上,劳动与爱情、挫折与追求、痛苦与欢乐、日常生活与巨大社会冲突纷繁地交织在一起。被誉为"茅盾文学奖皇冠上的明珠,激励千...</dd>
        <dt>如还是少年</dt>
        <dd>小馆红炉，华灯初上，雾气中是知己，谈笑间有同年。微醺时刻嬉笑怒骂俱开怀，放下杯感叹世事无常，人间百态。</dd>
 </dl>

预览：

 

1.1.4路径

   路径：A点到B点（道路（指如何到达目的地））

   网页中的路径： 物理路径、绝对路径、相对路径

   物理路径：以盘符开头的路径，我们叫它物理路径

   D:\web2132\1.html...

   绝对路径：网址（http:// 或https://）

   相对路径：使用的大前提 一定是在当前项目中，才会存在 相对路径

   相对路径的使用场合---- 它只能在"当前项目"中出现（或者说 只能在当前项目中 来回跳转）

   相对路径分类:

   (1) 同级路径: 文件互相访问，直接在路径中 写文件名 即可。

   (2) 上级访问下级路径： 文件访问时候，直接在路径中 写./文件夹名/文件夹名/文件名。

   (3) 下级访问上级路径： 文件访问的时候，直接在路径中写 ../文件名 即可。

     ../ 上一级  ../../上一级的上一级  ../../../上一级的上一级的上一级

     ./ 当前根目录(可以省略不写)

     同级文件互相访问：

     创建如下文件

<h1>我是h1.html文件</h1>
 <!--同级路径-->
    <p>
        <a href="a.html">我要访问a.html文件</a>
    </p>
    <p>
        <a href="b.html">我要访问b.html文件</a>
    </p>

 <h1>我是h1.html文件</h1>
  <!-- 上级访问下级 -->
    <p>
        <a href="/public/static/c.html">我要访问c.html</a>
    </p>
    <p><a href="/public/d.html">我要访问d.html</a></p>

 <h1>我是c.html</h1>
    <p>
        <!-- 下级访问上级路径 -->
        <a href="../../1.html">我要访问1.html</a>
    </p>
    <p>
        <a href="../../a.html">我要访问a.html</a>
    </p>

 <h1>我是d.html</h1>
   <!-- 下级访问上级路径 -->
    <p>
        <a href="../1.html">我要访问1.html</a>
    </p>
    <p>
        <a href="../b.html">我要访问b.html</a>
    </p>