第三课学习总结

1. • 添加图像

1.<img src="" alt="" width="" title="">

img-添加图片标签

属性：src：设置图片路径

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

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

路径的分类：

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

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

图片的分类：

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

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

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

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

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

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

2. • 音视频标签

     <video src=""></video>

属性：

src:设置视频的路径

controls:显示控件

loop：设置视频循环播放

autoplay：设置视频自动播放

考虑兼容时的视频标签

<video controls>
            <source src="" type="">
            <source src="" type="">    
        </video>

source:添加视频，type：添加视频的格式

2.1.音频标签

<audio src="" controls></audio>

属性：

src:设置视频的路径

controls:显示控件

loop：设置视频循环播放

autoplay：设置视频自动播放

考虑到兼容

      <audio >
            <source src="" type="">
        </audio>

source:添加音频

4内联框架

<iframe src="l" frameborder="" width="" height="" name=""></iframe>

内联框架：iframe标签：不经常使用，不会被浏览器收录

属性：

frameborder：设置内联框架的边框

width：设置内联框架的宽度

height：设置内联框架的高度

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

5列表

列表的分类：无序，有序，自定义

无序列表

<ul type="square">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>

无序列表：

1、如何设置：ul

列表项：li,块元素

2.属性

type:设置列表项图标

属性值：circle：空心圆

square：实心正方形

默认是实心圆

使用场景：导航栏

5.1 有序

<ol type="1" start="4">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>

有序列表

1、如何设置：ol

列表项：li,块元素

2.属性

type:设置列表项图标

start：设置列表项从几开始

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

5.2自定义

 <dl>
        <dt>蔬菜</dt>
        <dd>小白菜</dd>
        <dd>西红柿</dd>
        <dd>黄瓜</dd>
    </dl>

定义列表

1.如何设置：dl

定义项：dt

解释项：dd=>解释定义项=》相当于举例子在来解释定义项

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

6、表格

如何设置表格：table

tr:行，块元素

td:单元格，行内块元素

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

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

<table>
<caption>表格标题</captio>
<tr>
<th>....<th>
</tr>
<tr>
<td>....<td>
</tr>
</table>

表格的合并

①行向合并：colspan属性来设置=》影响所在行的单元格数量

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

num是指该单元格水平方向要占有的单元格空间

②列合并：rowspan属性来设置=》不影响所在行的单元格数量，影响是垂直方向的单元格数量

思路：合并之后该行下面行的单元格数量,在要合并的单元格添加rowspan=“num”，

num是指该单元格垂直方向要占有的单元格空间

注意：行合并是向右合并，列合并时向下合并

属性

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

cellspacing:设置单元格与单元格边框之间的距离，不推荐使用

cellpadding:设置单元格内容与单元格边框之间的距离,不推荐使用