前端学习-超链接a-图片格式-音视频播放

常用标签

div：盒子标签没有语意常用的块标签

span：行内标签常用行内标签

ol：有序标签常用于导航栏

ul：无序标签常用于导航栏

<ol>
    <li><li/>
    <li><li/>
    <li><li/>
<ol/>
<ul>
    <li><li/>
    <li><li/>
    <li><li/>
<ul/>

超链接a

target用了指定超链接打开位置（不要忘记属性的下划线）

_self：默认值当前页面打开

_blank：新的页面打开

href：跳转地址

设置为#页面不会跳转而是回到顶部

设置为JavaScript:; 点击什么效果都没有

锚点：可以跳转到页面的指定地方，只要将href 设置为‘#目标元素di’（常用）

路径

路径分为相对路径和绝对路径

绝对路径，从根目录为起点到某一个目录的路径（不常用）

相对路径，相对于自身所在位置为起点到另外一个的目录的路径

图片标签

引入外部图片，是一个自结束标签

src：用于指定图片路径

alt：图片描述，用于搜索引擎识别（加载失败时显示）

width：宽度

height：高度

宽高若是只修改一个另一个会跟着等比例缩放

图片格式

jpg 颜色丰富，不支持背景透明动图

gif 颜色较少，支持简单透明，支持动图

png 颜色较丰富，支持高级透明，不支持动图

webp 颜色丰富，支持透明、动图，优点很多，但是兼容性不好

base64 将图片转换为base64编码 即图片转为字符 ，可以让通过字符方式引入图片（一般是一些需要和网页一起加载的图片才用）

内联框架

iframe：引入其他页面

src：引入路径

frameborder：指定内联框架的边框（0表示有，1表示无）

音视频播放

audio：标签用来向页面引入外部音视频文件

controls：是否允许用户控制播放

autoplay：音视频是否自动播放（大部分浏览器不支持）

loop ：是否自动循环

除了通过audio标签引入还可以通过source指定

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