day7-多媒体标签

video标签--H5中标志性标签

• 1.什么是video标签
  • 作用：播放视频
• 2.格式

<video src="">  
</video>

• 3.属性
  • 1️⃣autoplay = "autoplay" 是否自动播放视频
  • 2️⃣src：需要播放的视频地址
  • 3️⃣controls = "controls" 是否显示控制条：播放按钮、进度、时间等
  • 4️⃣poster：视频没有播放前，显示的占位图片
  • 5️⃣loop = "loop"：广告视频；播放完毕后，是否需要继续播放
  • 6️⃣preload：预加载视频；若视频不是自动播放的，要把视频下载到本地；但是preload和autoplay相冲，两者不能共存
  • 7️⃣muted：静音
  • 8️⃣width、height和img标签中的相同
• 4.第二种格式

<video>
    <!--source可以是多个-->
    <source src="" type="video/webm"></source>
    <source src="" type="video/ogg"></source>
    <source src="" type="video/mp4"></source>
</video>

• 注意点：
  • 1️⃣因为没有一种视频格式是所有浏览器的，为了进行浏览器适配所以最好是将H5支持的视频类型(webm/ogg/mp4)都进行适配，浏览器会现在其可以播放的格式进行播放

• 2️⃣并不是所有浏览器会支持H5的video标签，以后可以通过js的一个框架html5media解决

audio标签

• 1.作用：播放音频
• 2.格式

<!--方式一-->
<audio src="">
</audio>
<!--方式二-->
<audio src="" autoplay="autoplay" controls="controls">
    <!--source可以是多个-->
    <source src="" type="audio/mp3"></source>
    <source src="" type="video/ogg"></source>
    <source src="" type="video/wma"></source>
</audio>

• 3.属性同video标签，除了height/width/poster不能使用

详情和概要标签

• 1.作用：根据UE，在有限空间内显示无限内容
• 2.格式

<details>
    <summary>
        概要信息
    </summary>
    详情信息
</details>

marquee标签

• 1.地位：不是W3C推荐的标签，但是各大浏览器都支持
• 2.作用：跑马灯效果
• 3.格式

<marquee behavior="" direction="">
    内容：可以是图片也可以是文字
</marquee>

• 4.属性
  • direction--滚动方向：默认是从右往左；left：从右往左、right：从左往右；up：从下往上、down：从上往下；
  • scrollamount--滚动速度:值越大越快
  • loop--滚动次数：默认是-1，无限滚动
  • behavior--滚动类型：slide：滚动到边界停止、alternate：滚到边界来回弹

HTML中被废弃的标签

• 原因：标签是用来添加语义的，所以修改样式的标签就被废弃了
• br：不另起一个段落换行 --- 用p替代
• hr：分割线
• font：修改文字的样式
• b：文字加粗bold
• u：文字添加下划线underlined
• i ：文字斜体italic
• s：文字删除线strikethrough
• 注意：今后的开发中，万不得已不要使用这些废弃标签；若要使用，则当做CSS的钩子 --- 例如给文字前面添加的一个图片

替代标签（添加了语义）

• strong == b：定义重要性强调的文字
• ins === u：定义插入的文字（insert）
• em == i：定义强调的文字，次于strong（emphasized）
• del == s：定义删除的文字（deleted）

字符实体

• 1.在HTML中对空格、回车、tab当做一个空格处理
• 2.在HTML中的字符在HTML中有特殊含义的，例如<>，不会直接在浏览器中显示
• 空格：
• 小于<：< -- less than
• 大于>：> -- greater than
• 版权符号：©