HTML列表与超链接

目录

一、列表

1.列表

2.通过type属性更改列表的项目符号

二、超链接

1.超链接  

      2. 属性

     3. 锚点功能（跳转到页面任意的位置）

   4.空链接

三、图片标签

       1.图片标签

        2.图片标签的4个属性

四、图片格式

          1.  图片的格式

           2. 图片的使用原则

五、音视频标签

1.audio标签 

2.video标签

---

一、列表

1.列表

        列表（list），有三种列表：

        1:有序列表 用ol标签创建，li表示列表项

        2:无序列表 用ul标签创建，li表示列表项

        3:定义列表 用dl标签创建，使用dd对内容进行解释说明

        注意：列表之间是可以互相嵌套的

          ol ul dl li 都是块元素

  </ol>
    <ol type="1">
      <li>刷牙</li>
      <li>洗脸</li>
      <li>吃早餐</li>
    </ol>
    <ul type='circle'>
      <li>吃饭</li>
      <li>睡觉</li>
      <li>学习</li>
    </ul>
    <dl>
      <dt>前端</dt>
      <dd>html/css</dd>
      <dd>js/es6-es11</dd>
      <dt>后端</dt>
      <dd>java基础</dd>
      <dd>javaWeb</dd>
    </dl>

2.通过type属性更改列表的项目符号

   有序列表

   项目符号：1（默认值）、a、A、i、I

   无序列表

   项目符号:

   disc，默认值，实心的圆点

   square，实心的方块

   circle，空心的圆

二、超链接

1.超链接  

      超链接可以是一个字，一段文字，图片，表格，可以是任何东西；

      它是特殊的行内元素，它里面什么都能放，除了它自己。

       功能：1、一个页面跳到另一个页面

                  2、当前页面的跳转

                  3、下载

      2. 属性

        1）href属性 指向跳转的路径地址

           属性值

              外部网站的地址     绝对路径  

              内部的页面         相对路径

                同级目录内的地址：使用 ./  默认值  ./可以省略

                 跳出当前文件夹，来到上一级文件夹内 :

                使用  ../

           关键点：你（超链接）在哪里，你要去哪里

        2）target属性   控制超链接打开的方式

             可选值：

               _self   默认值  在当前页面打开超链接

               _blank  新开页面打开超链接

     3. 锚点功能（跳转到页面任意的位置）

         1）回到顶部，只需要href属性值设置#

         2）去到任意的位置

              第一步：要去的位置打个id属性，起个id属性值

              第二步：href属性值  #id属性值

          id属性是给对应的标签打个标记

          注意：  id属性值不能以数字开头

                      id属性值是独一无二的存在

                      id属性值最好不要是汉字

   4.空链接

       超链接中有空链接，即没有目的，空链接有两种表现形式：

        <!-- 空链接一 -->

        <a href="#">待定</a>

        <!-- 空链接二 -->

        <a href="JavaScript:;">待定2</a>

三、图片标签

       1.图片标签

        称其为img标签， 作用是使用img标签来向网页中引入一个外部图片。

        img标签是一个自结束标签， img这种元素属于行内块元素（基于块和行内元素之间，具有两          种元素的特点）  

        2.图片标签的4个属性

          src：引入图片的地址

          alt：图片引入不成的时候，文字提示  更重要的作业，浏览器会根据alt值来区分推荐图片

          width： 控制图片的宽度

          height：控制图片的高度度    注意：width和height一般不会同时设置，可能会导致图片的           变形

四、图片格式

            和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。

          1.  图片的格式

                1）JPEG(JPG)

                    - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

                    - 一般用来保存照片等颜色丰富的图片

   

               2）GIF

                    - GIF支持的颜色少，只支持简单的透明，支持动态图

                    - 图片颜色单一或者是动态图时可以使用gif

               

                3）PNG

                    - PNG支持的颜色多，并且支持复杂的透明，不支持动图

                    - 可以用来显示颜色复杂的透明的图片

                      专为网页而生的

                4）webp

                   -谷歌新推出的专门用来表示网页的一种格式

                   -它具有其他图片格式的所有优点，而且文件格式还很小

                   -缺点：兼容性不好

                   

                5）base64

                   -讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

                   -一般都是需要和网页一起加载的图片才会使用base64

           2. 图片的使用原则

                效果不一致，使用效果好的

                效果一致，使用小的

     

          网页加载流程：

               第一次请求：加载网页本身

               第二次之后请求，加载外部资源 (例：图片)

五、音视频标签

1.audio标签 

        用来向页面中引入一个外部的音频文件

         属性：

            src ：引入音视频路径地址

            controls  ：是否允许用户控制音视频的播放 ，默认是不允许

            loop  ：循环播放

            autoplay ：自动播放  很多浏览器废弃

2.video标签

         来向页面中引入一个视频，使用方式跟音频基本上一样的