html基础

一.图片添加

1.img：添加图片

2.属性：

src：设置图片路径

路径的分类: 绝对路径：与文件的地址无关。本地地址(不要使用)、网址

                        相对路径：与文件的地址有关

  alt:当图片不能正常显示时，alt值会出现

  title:当鼠标悬停时，title里面的内容会出现

  图片引入路径：相对地址或者网址

  img是行内块标签，可以设置宽高，如果只设置宽或高一个，那另外的一个就是等比例缩放

图片的分类

JPEG：支持的颜色表较多，图片可以压缩，但是不支持透明，保存照片等颜色丰富的图片

GIF：支持颜色较少，支持简单透明和动图，图片颜色单一或动图

PNG：支持颜色多，支持复杂透明，但不支持动图，用来显示颜色复杂的透明图片，多用于网页

webp：谷歌推出专门用来表示网页的一种格式，具备其他格式的所有优点，文件格式小，但是兼容性不好

base64：将图片使用base64编码，图片转换成字符，通过字符形式来引入，需要和网页一起加载的图片才会使用base64

图片使用原则：效果不一致，使用效果好的，效果一致，使用内存小的

二：视频设置

1.如何设置：video

属性： src:设置视频的路径

            controls:显示控件

            loop：设置视频循环播放

            autoplay：设置视频自动播放

             source:添加视频

三：音频设置

1.如何设置：audio

属性：src:设置视频的路径

           controls:显示控件

           loop：设置视频循环播放

          autoplay：设置视频自动播放

四：内联框架

1.如何设置内联框架：iframe标签

属性： frameborder：设置内联框架的边框

         width：设置内联框架的宽度

         height：设置内联框架的高度

         name：设置内联框架的名称，可以和a链接联合使用

五：列表

1. 列表的分类：无序列表、有序列表、定义列表

无序列表：

1、如何设置：ul           列表项：li,块元素

2.属性                           type:设置列表项图标

3.属性值：circle：空心圆

      square：实心正方形

      默认是实心圆

使用场景：导航栏

        有序列表

1、如何设置：ol        列表项：li,块元素

2.属性 type:设置列表项图标

       start：设置列表项从几开始

使用场景：需要排序的时候

       定义列表

1.如何设置：dl       定义项：dt

解释项：dd，解释定义项

使用场景：网页底部的区域的导航          

六：表格

1. 如何设置：table  

2. tr：行     (块元素），td：单元格（行内块元素）

3.caption：表格标题，默认居中显示

4.th:表头，可以理解为特殊的单元格，默认单元格居中，字体加粗

属性：border：设置单元格和表格边框，但是不推荐使用，在css中设置

cellspacing:设置单元格与单元格边框之间的距离

cellpadding:设置单元格内容与单元格边框之间的距离

css设置的属性

border-collapse: collapse; 设置边框合并

      border-spacing: 0px; 设置边框与边框之间的距离，与cellspacing是一样的效果

   border-collapse与 border-spacing:一起使用border-spacing失效

padding: 20px 设置单元格内容与边框之间的距离，与cellpadding效果一致

单元格合并

1.行向合并：colspan属性来设置

思路：合并结束后该行应该还剩几个单元格，要在合并的单元格中添加（colspan=“num”）

          num指指在单元格中占有的单元格空间

3. 列合并：vowspan属性来设置

思路：合并之后该行下面行的单元格数量