[学习笔记] HMTL5+CSS3-充实笔记0606 [推广有奖]

51关注
7粉丝

已卖：1067份资源

大师

26%

还不是VIP/贵宾

威望: 1 级
论坛币: 83583 个
通用积分: 13687.6519
学术水平: 673 点
热心指数: 828 点
信用等级: 739 点
经验: 425919 点
帖子: 17345
精华: 0
在线时间: 3605 小时
注册时间: 2016-7-9
最后登录: 2025-12-26

楼主

HappyAndy_Lo 发表于 2019-6-6 15:56:51 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

time元素：定义日期和时间

datetime属性指定机器读取的日期和时间
pubdate属性，表示article元素的发布日期（此属性是一个可选的布尔值）

新增非主题结构元素

header元素
hgroup元素：对header元素标题及其子标题进行分组
footer元素：定义区块的脚注（可以是article，也可以是section元素）
address元素：定义文档作者、拥有者的联系信息

ch3.HTML5音频和视频

video元素，支持Ogg/MPEG4/WebM格式
audio元素，支持Ogg Vorbis/MP3/Wav

HTML5中播放音频的代码：
<audio src="song.ogg" controls="controls">浏览器不支持</audio>
HTML5播放视频的代码：
<video src="movie.mp4" controls="controls">浏览器不支持</video>

检测浏览器是否支持HTML5视频：可以编写JS代码测试
这个对象返回是否支持document.createElement('video').canPlayType，然后在代码中可以更详细地判断对ogg/h264编码等测试

下面给一个HTML5中的显示视频/音频实例：

<!DOCTYPE html>
<html>
<head>
<title>3.4.1</title>
<script type="text/javascript">
      var video;
      var img;
      function init(){
         video = document.getElementById("MyVideo");
         video.style.position = "absolute";
         video.style.width = "400px";
         video.style.height = "300px";
         video.style.left = "50px";
         video.style.top = "50px";
         img = document.getElementById("MyImg");
         img.style.position = "absolute";
         img.style.width = "340px";
         img.style.height = "160px";
         img.style.left = "80px";
         img.style.top = "120px";
         img.style.zIndex = 2;
         img.hidden = true;
      }

      function showImg(flag){
         img.hidden = flag;
      }
</script>
</head>
<body>
<video id="MyVideo" loop autoplay="true" src="movie.mp4" controls="controls"></video>
<img id="MyImg" src="MyImg.png" />
</body>
</html>

当然可以让img大小更大，完全遮住播放界面