AitSchool

资源标签

link 用于链接一个外部样式表，引入CSS样式。一般放置在head标签中的底部。

<head>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
</head>

script

script 用于在 HTML 页面中插入一段 JavaScript。一般放置在body标签中的底部。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

img

img 代表文档中的一个图像。HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。

  • src 图像的 URL，这个属性对 img 元素来说是必需的。
  • alt 这个属性定义了描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的，该图像不在 支持的格式 列表中，或者如果图像还没有被下载。
<img src="https://www.baidu.com/img/bd_logo1.png" alt="Baidu">

video

video 标签定义视频，用于在HTML或者XHTML文档中嵌入视频内容，比如电影片段或其他视频流。Internet Explorer 8 以及更早的版本不支持 video 标签。

  • src 播放的视频的 URL
  • width 视频播放器的宽度
  • height 视频播放器的高度
  • autoplay 视频在就绪后马上播放
  • controls 向用户显示控件，比如播放按钮
  • loop 当媒介文件完成播放后再次开始播放
  • muted 规定视频的音频输出应该被静音
  • poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
  • preload 视频在页面加载时进行加载，并预备播放。
<video src="https://q2.cdn.youked.com/w2/guide/guide-course-mac-02.mp4" controls>
    您的浏览器不支持 video 标签。
</video>

audio

audio 标签定义声音，比如音乐或其他音频流。Internet Explorer 8 以及更早的版本不支持 audio 标签。

  • src 播放的音频的 URL
  • autoplay 音频在就绪后马上播放
  • controls 向用户显示控件，比如播放按钮
  • loop 当媒介文件完成播放后再次开始播放
  • muted 规定音频的音频输出应该被静音
  • preload 音频在页面加载时进行加载，并预备播放。
<audio src="http://m128.xiami.net/737/72737/2103660423/1802802237_1522651341530.mp3?auth_key=1524366000-0-0-83305dc0651d96a960ce1cf1cf959f5d" controls>
    您的浏览器不支持 audio 标签。
</audio>

示范

在HTML文件中，尝试为期添加 img、video、audio 标签 等元素，例如如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>A tiny HTML document</title>
</head>
<body>
    <header>
        <div>头部信息</div>
    </header>
    <div>
        <p>图像</p>
        <div><img src="https://www.baidu.com/img/bd_logo1.png" alt="Baidu"/></div>
        <p>视频</p>
        <div><video src="https://q2.cdn.youked.com/w2/guide/guide-course-mac-02.mp4" controls></video></div>
        <p>音频</p>
        <div><audio src="http://m128.xiami.net/737/72737/2103660423/1802802237_1522651341530.mp3?auth_key=1524366000-0-0-83305dc0651d96a960ce1cf1cf959f5d" controls></audio></div>
    </div>
    <footer>
        <p>Copyright © 2018 AitSchool All Rights Reserved. 京ICP备000000号 京公网安备000000</p>
    </footer>
</body>
</html>

资源

奇舞团 -- 图片与链接

← 表格 →