HTML插入图片,音频,视频,链接

图片标签

场景:显示图片

代码(单标签):

特点:需要加标签属性

      Src:文件名

      Alt:替换文本,图片加载失败才显示alt内容,图片加载成功alt不显示

      Title:鼠标过显示提示文字

      Width:宽

      Height:高

HTML插入图片,音频,视频,链接_第1张图片

HTML插入图片,音频,视频,链接_第2张图片

路径

场景:页面需要加载文件,需要找相应位置

绝对路径:

目录下的绝对位置,直接到达目标位置,从盘符开始

相对路径:

当前文件:当前的html网页

目标文件:要找的图片

相对路径:从当前文件开始出发找目标文件的过程

相对路径分类:同级目录

              下级目录

              上级目录

同级目录:

当前文件和目标文件在同一目录中

HTML插入图片,音频,视频,链接_第3张图片

代码

   方法一:

   方法一:

下级目录

目标文件在下级目录中

HTML插入图片,音频,视频,链接_第4张图片

代码:

HTML插入图片,音频,视频,链接_第5张图片

 HTML插入图片,音频,视频,链接_第6张图片

上级目录

目标文件在上级目录中

 HTML插入图片,音频,视频,链接_第7张图片

代码(先返回上一级[../],(../)表示返回一级,(../../)表示返回二级) 

HTML插入图片,音频,视频,链接_第8张图片

 HTML插入图片,音频,视频,链接_第9张图片

音频标签

场景:页面插入音频

代码(双标签):

音频标签支持格式:MP3,WAV,Ogg

属性

HTML插入图片,音频,视频,链接_第10张图片

 HTML插入图片,音频,视频,链接_第11张图片

 HTML插入图片,音频,视频,链接_第12张图片

视频标签

场景:页面插入视频

代码(双标签):

音频标签支持格式:MP4,WebM,Ogg

 HTML插入图片,音频,视频,链接_第13张图片

 HTML插入图片,音频,视频,链接_第14张图片

 HTML插入图片,音频,视频,链接_第15张图片

链接标签

场景:点击后,从一个页面跳转到另一个页面

称呼;a标签,超链接,锚标签

代码:

HTML插入图片,音频,视频,链接_第16张图片

 HTML插入图片,音频,视频,链接_第17张图片

你可能感兴趣的:(前端,前端,javascript)