视频标签video,音频标签audio和页面分析

helloses

已于 2022-03-19 18:40:52 修改

阅读量465

点赞数

分类专栏： html 前端文章标签： html5 intellij idea 前端

于 2022-03-19 18:16:19 首次发布

本文链接：https://blog.youkuaiyun.com/lm12032015/article/details/123599720

版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍了HTML5中的video和audio标签，强调了设置controls、autoplay和src属性的重要性，以及它们的运行效果。同时，文章还探讨了HTML5新增的页面结构标签，如header、section、nav和footer，这些标签旨在优化SEO并替代div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频标签video和音频标签audio

video和audio都要设置属性后才能显示
controls显示视频窗口
autoplay自动播放
src视频地址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <!-- controls显示视频窗口
       autoplay自动播放
   -->
  <video src="https://www.bilibili.com/bangumi/play/ep76659?spm_id_from=333.337.0.0"
    autoplay controls>长歌行动态漫</video>

  <audio src="https://music.163.com/#/album?id=36417372" autoplay controls>夜,萤火虫与你</audio>

</body>
</html>

运行结果

video

页面结构分析

页面结构是html5新增的一些标签
专门用来做SEO优化,本意是替代div的
都是块级元素
常用的header,section,nav和footor等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <header>头部</header>

  <section>主体</section>
    
  <nav>导航</nav>
    
  <article>独立文章</article>
    
  <aside>侧边栏</aside>
    
  <footor>底部</footor>

</body>
</html>