HTML的列表标签、图像标签、路径的介绍

*列表标签


列表类型

标记符号

备注

无序列表

<ul>…</ul>

常用

菜单列表

<menu>…</menu>

不常用

目录列表

<dir>…</dir>

不常用

有序列表

<ol>…</ol>

常用

定义列表

<dl>…</dl>

常用

**显示这样的效果(有级别的)*

                      某某公司

                              财务部

                              技术部

                              人事部 

 1、 **<dl></dl>:表示列表的范围

                在dl里面,<dl> </dl> 上层内容

                 在dl里面,<dd> </dd>下层内容

        -代码:

  <dl>
        <dt>某某公司</dt>
        <dd>财务部</dd>
        <dd>技术部</dd>
        <dd>人事部</dd>
    </dl>

                 

        ** 想要在页面上显示这样的效果(有序)

                1、财务部                         a、财务部                                  i、财务部

                2、人事部                         b、人事部                                  ii、人事部

       2、**使用<ol> </ol>:有序列表的范围

                  -属性type=设置排序(1(默认);a  ;i)

                 -在ol标签里面<li>具体内容</li>

                -代码:

                             <!- a排序 -->
                             <ol type="a">
                                   <li>财务部</li>
                                   <li >人事部</li>
                             </ol>
                                                                   <!- 1 排序 (默认排序)-->
                                                                     <ol>
                                                                           <li>财务部</li>
                                                                           <li>人事部</li>
                                                                    </ol>
                                                                                                         <!- i排序-->
                                                                                                               <ol type="i">
                                                                                                                     <li>财务部</li>
                                                                                                                     <li>人事部</li>
                                                                                                               </ol>

                      

**.想要在页面上显示这样的效果(无序)

             特殊符号(方框)财务部

             特殊符号(方框)人事部

  3、**<ul> </ul> :表示无序列表的范围

                      -属性: type:空心圆circle;实心圆disc;实心方块square;默认disc

                     -在ul里面 <li></li>

                    -代码:

        <ul>
            <li>财务部</li>
            <li>人事部</li>
        </ul>


        <ul type="circle">
           <li>财务部</li>
           <li >人事部</li>
        </ul>
        
        <ul type="square">
           <li>财务部</li>
           <li>人事部</li>
        </ul>


*图像标签  *****


        *<img src="图片的路径"/>

              -src:图片的路径

              -width:图片的宽度

             -height:图片的高度

             -alt :图片显示的文字,把鼠标移动到图片上,停留片刻显示内容

                   **有些浏览器不显示(没有效果);


*路经的介绍


          *分类:两类

              **绝对路径:

                     -c:\Users\amid\Desktop\HTML\html.html

                     -https://www.hao123.com

             **相对路径:

                    -一个文件相对于另外一个文件的位置

                   -三种:

                       **html文件和图片在同一个路径下,直接写文件名称

                             <img src="a.jpg"/>

                       **图片在html的下层目录

                              html文件路径:c:\Users\amid\Desktop\html.html

                              图片路径       :c:\Users\amid\Desktop\AAA\a.png

                               ***在html中使用图片 (html.html和AAA在一个路径)

                                      <img src="AAA\a.png"/>

                         **图片在html文件上的上层目录             

                              html文件路径:c:\Users\amid\Desktop\HTML\html.html

                              图片路径       :c:\Users\amid\Desktop\a.png

                               ***用 ../ 返回上级目录和图片所在的路径相同

                               <img src="../a.png"/>

                         **图片在html文件上的上上层

                              ***用  ../../  表示

                               <img src="../../a.png"/>

                         

猜你喜欢

转载自blog.csdn.net/cxy18137478587/article/details/81207733
今日推荐