H5API

什么意思哦呢嗯

于 2022-08-30 15:19:33 发布

阅读量198

点赞数

分类专栏： H5API HTML 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_49171551/article/details/126603973

版权

本文详细介绍了HTML5的新特性，包括语义化标签、表单控件、音频视频支持、本地存储以及画布等。同时，阐述了src与href的区别，并探讨了H5API中的媒体元素如video和audio，以及画布的基本使用，如绘制矩形、圆形和渐变效果。

摘要由CSDN通过智能技术生成

HTML5新特性

标签:nav article footer header aside.....

表单新特性:input type取值date time week email number

表单属性required readonly disabled

表单控件标签:progress datalist ...

(一)、html5的新增特性

1.语义化标签：header article footer section nav

2.表单控件：number date time email url search

3.音频和视频：audio video

4.本地离线存储：localStorage sessionStorage cookies

5.画布：canvas

（二）、对html语义化标签或者语义化的理解

1.使页面内容结构化、便于浏览器、搜索引擎解析

2.即使没有css样式也以一种文档格式显示，并且容易阅读

3.有利于搜索引擎优化

4.便于阅读、维护、理解

（三）、src和href的区别

href是超文本引用，它是指向资源位置，建立与目标文件的联系；

src目的是把资源下载到页面中；

script src="https://wwww.b;

一、H5API（HTML5中的js部分）

在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video>

媒体（音频视频）

画布

拖拽

前端存储

webSocket

(一)、自定义数据属性

data-xxx 是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力和可以通过HTML和DOM进行专有数据的交换。所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。
获取属性

<script>
    window.onload = function () {
      var div = document.querySelector('div');
      // 读取自定义属性  dataset  对象{}
      console.log(div.dataset.id);

    }
  </script>
</head>

<body>
  <div id="one" data-id="1001">我是一个div</div>
</body>

（二）、媒体元素

1.video

在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。

video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示

读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用

constrols是控制条 loop是循环播放 autoplay是自动播放poster='' 封面放封面地址 muted静音

方法 play播放 pause暂停 paused切换，是否是暂停状态 volume控制音量 currentTime当前播放秒数 playbackRate倍速播放

1.1属性

进度条：controls

自动播放：autoplay

封面：post

循环播放：loop

静音：muted

1.2方法

 <script>
    $(function () {
      // 获取视频标签
      var video = $('video')[0]

      // 给这一类按钮事件绑定
      $('button').click(function () {
        if ($(this).text

最低0.47元/天解锁文章

什么意思哦呢嗯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5API

在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。data-xxx 是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力和可以通过HTML和DOM进行专有数据的交换。在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法。...
复制链接

扫一扫