🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：HTML专栏

🥝给大家推荐一个网站🥥很实用🍌我一直在上面刷题：点击跳转进入网站注册登录即可刷题

文章目录

引言

上文我们对表单元素的使用进行了细致的讲解，今天我们开始学习HTML5新增的新特性的学习，因为有些达到相应效果的标签有很多，所以就着重介绍最常使用的标签。

HTML多媒体标签

多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

HTML音频

HTML中播放音频我们现在一般都会用 <audio> 元素，其在 HTML 4 中是非法的，但在所有浏览器中都有效。其基本格式如下：

<audio src=""></audio>

src写入音频路径，默认情况下音频是关闭的且隐藏对音频的相关控件，需要自己设置打开

<audio src="./raw/哪里都是你.mp3" controls></audio>

audio标签还自带其他重要属性：(列举最常用)

autoplay (自动播放) loop (循环播放) muted (静音)

preload (缓冲视频文件,没有设置autoplay才会有效)：可以设置的值为

none：不缓冲；metadata 缓冲视频文件的原数据；auto 缓冲整个视频文件

想要别人一点开网站就自动循环播放音乐且不显示音频控件可以这样设置：

<audio src="./raw/哪里都是你.mp3" autoplay loop></audio>

注意：<audio> 元素在老式浏览器中不起作用，所以借助 <source> 标签(规定多媒体资源，可以是多个)，使用兼容模式尝试以 mp3 或 ogg 来播放音频。

<body>
    <audio controls >
        <source src="./raw/哪里都是你.mp3">
        <source src="./raw/哪里都是你.ogg">
    </audio>
</body>

HTML视频

HTML中播放音频我们现在一般都会用 <video> 元素，其在 HTML 4 中是非法的，但在所有浏览器中都有效。其基本格式如下：(因为是视频，所以我们要为其设置宽高属性)

<video src=""></video>

src写入视频路径，默认情况下视频是关闭的且隐藏对视频的相关控件视频一般都需要controls

在 HTML 中播放视频并不容易！需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

在HTML4中播放视频一般使用<object>和<embed> 标签，作用都是在 HTML 页面中嵌入多媒体元素区别在于 <embed> 标签在HTML5 中允许。两者书写格式的区别如下：(嵌入网页的 Flash 视频)

<object data="movie.swf" height="200" width="200"/>
<embed src="movie.swf" height="200" width="200"/>

<video> 是 HTML 5 中的新标签，作用是在 HTML 页面中嵌入视频元素，以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

<video width="240" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
</video>

因为 <video> 元素在老式浏览器中无效，所以我们采用 HTML5 和 HTML4 标签一起使用，借用<source> 把它们联系在一起。格式如下：

<video width="240" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="240" height="240">
    <embed src="movie.swf" width="240" height="240" />
  </object>
</video>

上述代码使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素，一般都能解决问题。

HTML拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。浏览器支持：（ Internet Explorer 9(注意是IE9以后才能支持)、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放）今天我们以图片拖动举例：

事件	描述
ondragstart	用户开始拖动元素时触发
ondrag	元素正在拖动时触发
ondragend	用户完成元素拖动后触发
ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover	当被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave	当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件

其中最应该了解的是：

设置元素为可拖放：draggable=”true” (图片和链接默认是可拖动的，不需设置)

拖动什么：ondragstart 和 setData()

放到何处：ondragover

进行放置：ondrop

代码展示 (因为拖动需要借助CSS和JS，不了解的人权当提前学习一下)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 400px;
            height: 400px;
            border: 1px solid #008c8c;
        }
    </style>
    <script>
        // 创作一个可以选中的操作
        function allowDrop(ev){
            // 阻止一下冒号事件
            ev.preventDefault();
        }
        // 如何操作放置
        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        // 拖动
        function drop(ev){
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }

    </script>
</head>
<body>
    <p>请拖动图片</p>
    <!-- 设置拖到放置的位置 -->
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
    <!-- 为了操作图片元素给一个id，是否可以拖放，给个true -->
    <img id="drag1" src="./images/img1.jpg" draggable="true" ondragstart="drag(event)" width="200px" height="200px">
</body>
</html>

HTML画布

画布（canvas标签）是一个矩形区域,您可以控制其每一个像素，拥有多种绘制路径、矩形、圆形字符、以及添加图像的方法。因为是画布所以要求宽高才能进行操作，其基本格式如下：

<canvas id="canvas" width="500px" height="500px"></canvas>

通过JS来给画布设置样式

<script>
    // 获取当前画布的id
    // Vscode使用canvas无方法代码提示,需要在获取DOM前加如下代码
    /** @type {HTMLCanvasElement} */
    var c = document.getElementById("canvas");
    // 代表的是只能绘制2D图形
    var cxt = c.getContext("2d");
    // 指定画笔的颜色
    // cxt.fillStyle = "#ff0000";

    // 绘制正方形
    // cxt.fillRect(0,0,100,100);

    // 绘制圆形
    // cxt.beginPath();
    // cxt.arc(70,18,15,0,Math.PI*2,true);
    // cxt.closePath();
    // cxt.fill();

    // 绘制图片
    var img = new Image();
    img.onload = function(){
        cxt.drawImage(img,0,0);
    }
    img.src = 'img1.jpg' 


</script>

因为图片是现成的，所以是不需要画笔，注释掉，像绘制图形(正方形和圆形)是需要画笔来呈现的

HTMLSVG

什么是SVG?：

        SVG指可伸缩矢量图形(Scalable Vector Graphics)

        SVG用于定义用于网络的基于矢量的图形

        SVG 使用XML格式定义图形
        SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

        SVG是万维网联盟的标准

SVG的优势：

与其他图像格式相比（比如JPEG和GIF)，使用SVG的优势在于:

        SVG图像可通过文本编辑器来创建和修改
        SVG图像可被搜索、索引、脚本化或压缩SVG是可伸缩的

        SVG是可伸缩的

        SVG图像可在任何的分辨率下被高质量打印

        SVG可在图像质量不下降的情况下被放大

浏览器支持:

        lnternet Explorer 9、Firefox、Opera、Chrome 以及 Safari支持内联 SVG。

其基本格式如下：

<!-- 自己规定盒子大小 -->
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

举例描述一下圆形图形

<body>
    <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="60" cy="60" r="50"></circle>
    </svg>
</body>

当然也可以更加方便的将svg单独放在一个 svg.svg 文件里,想要使用图行的时候引用即可。

<body>
    <iframe src="svg.svg" frameborder="0" width="1000" height="1000"></iframe>
</body>

更过内容请参考 MDN 上SVG属性，里面详细介绍了各种图形，这里就不在一一赘述。

🍃HTML的学习还是要以多练习为主，想要练习HTML的朋友，推荐可以去牛客网看一看，链接：牛客网里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

个人总结：

HTML5新特性今天就讲解到这，下期继续讲解HTML5，看到这还不点赞收藏加关注，关注博主不迷路。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140128.html

【HTML】炼虚篇

HTML多媒体标签

HTML音频

HTML视频

HTML拖放

HTML画布

HTMLSVG

发表回复

【HTML】炼虚篇

HTML多媒体标签

HTML音频

HTML视频

HTML拖放

HTML画布

HTMLSVG

相关推荐

发表回复

分享到:

请登录