HTML基本标签的使用（2）

列表

有序列表

        用ol标签创建，li表示列表项，通过type属性更改列表的项目符号

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

 <ol type="I">
      <li>刷牙</li>
      <li>洗脸</li>
      <li>吃早餐</li>
    </ol>

 无序列表

        无序列表  用ul标签创建，li表示列表项，通过type属性更改列表的项目符号

disc	默认值，实心的圆点
square	实心的方块
circle	空心的圆

<ul type='circle'>
      <li>吃饭</li>
      <li>睡觉</li>
      <li>学习</li>
    </ul>

 

 定义列表

         用dl标签创建，使用dd对内容进行解释说明

 

<dl>
      <dt>前端</dt>
      <dd>html/css</dd>
      <dd>js/es6-es11</dd>
      <dt>后端</dt>
      <dd>java基础</dd>
      <dd>javaWeb</dd>
    </dl>

注意：列表之间是可以互相嵌套的,ol ul dl  li  都是块元素

超链接

<a>标签，2个属性，2个功能，1个补充

超链接，可以是一个字，一段文字，图片，表格，可以是任何东西，他是特殊的行内元素，它里面什么都能放，除了它自己。

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

            2、当前页面的跳转

            3、下载

属性：

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

           属性值

              外部网站的地址     绝对路径  

              内部的页面         相对路径

                ./  默认值  ./可以省略

                   同级目录内的地址

                ../

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

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

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

             可选值：

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

               _blank  新开页面打开超链接

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

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

         2、去到任意的位置

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

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

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

            id属性值不能以数字开头

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

            id属性值最好不要是汉字

 

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

    <a href="#pp">去底部</a>
    <a href="#中间">去中间</a>
    <div>
    <p>静夜思</p>
    <p id="中间">登黄鹤楼</p>
    <p>赠汪伦</p>
    <p id="pp">早发白帝城</p>
</div>
    <a href="#">回到顶部</a>
    <a href="JavaScript:;">待定3</a>

​

 图片标签

<img>标签,向网页中引入一个外部图片

        img标签也是一个自结束标签

        img这种元素属于行内块元素（基于块和行内元素之间，具有两种元素的特点）

4个属性:

src	引入图片的地址
alt	图片引入不成的时候，文字提示  更重要的作业，浏览器会根据alt值来区分推荐图片
width	控制图片的宽度
height	控制图片的高度度

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

<img src="./img/png/w.gif" alt="11111" height="500px" >

图片格式：

                JPEG(JPG)

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

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

                   

                GIF

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

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

               

                PNG

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

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

                      专为网页而生的

                webp

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

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

                   -缺点：兼容性不好

                   

                base64

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

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

图片的使用原则：

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

                效果一致，使用小的

网页加载流程

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

               第二次之后请求，加载外部资源

音视频

<audio>标签

        

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

            src  引入音视频路径地址

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

            loop   循环播放

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

src	引入音视频路径地址
controls	是否允许用户控制音视频的播放 ，默认是不允许
loop	循环播放
autoplay	自动播放  很多浏览器废弃

<audio src="./source/达拉崩吧.mp3" controls loop autoplay></audio>

<video>标签

        向页面中引入一个视频，使用方式跟<audio>标签基本上一样的

<video src="./source/绝地逢生.mp4" controls></video>