Html5常用语义标签、拖拽功能、音频、视频总结

最新推荐文章于 2020-05-14 16:55:01 发布

Robocop_Mao

最新推荐文章于 2020-05-14 16:55:01 发布

阅读量722

点赞数

分类专栏： WEB前端文章标签： html5 拖拽 video audio 语义化

本文链接：https://blog.csdn.net/Robocop_Mao/article/details/48688983

版权

WEB前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Html5常用语义标签

    <header>
    <nav>
    <footer>
    <section> //一般定义文章章节时使用，比如京东图书页的章节介绍
    <article> //一般用于独立的块
    <menu> //menu默认有margin和padding
    <aside> //一般用于网站边上的弹窗、广告
    <hgroup>

使用input和datalist结合制作下拉列表

<input id="myCar" list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

Html5的拖拽功能

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 150px;
            height: 60px;
            border: 1px solid red;
            float: left;
            margin-left: 50px;
            text-align: center;
            padding-top: 16px;
        }
        img {
            cursor: pointer;
        }
    </style>
    </head>
    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <img src="logo.png" id="img-logo" draggable="true" ondragstart="drag(event)">  //注意：被拖拽的元素必须设置一个id，使用draggable="true"是元素具有可拖拽属性，且添加ondragstart事件
        </div>
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  //给接收数据的区域设置ondrop和ondragover事件
    </body>
    <script type="text/javascript">
        function drag(e) {
            e.dataTransfer.setData('text', e.target.id);  //设置数据发送，以id形式存放在内存中
        }
        function drop(e) {
            var data = e.dataTransfer.getData('text');  //接收数据
            e.target.appendChild(document.getElementById(data));  //将接受的数据添加到当前区域
            e.preventDefault();  //阻止浏览器的默认行为，浏览器默认不允许拖拽
        }
        function allowDrop(e) {
            e.preventDefault();  //阻止浏览器的默认行为
        }
    </script>
    </html>

Html5的audio和video

    <video width="320" height="240" controls="controls">
        <source src="movie.ogg" type="video/ogg">
        <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.  //浏览器不支持时的提示
    </video>

video标签常用属性：

controls 设置默认的播放控件
autoplay 设置加载后自动播放
loop 设置循环播放
width 设置宽度
height 设置高度

    <audio controls="controls">
        <source src="song.ogg" type="audio/ogg">
        <source src="song.mp3" type="audio/mpeg">  //注意MP3格式的type
    Your browser does not support the audio tag.
    </audio>

audio标签用法和video类似，但没有width和height属性。

我们可以通过不设置controls属性，来设置自己的播放控件的样式。

两个常用的方法：play()和pause()

Robocop_Mao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5常用语义标签、拖拽功能、音频、视频总结

Html5常用语义标签 <header> <nav> <footer> <section> //一般定义文章章节时使用，比如京东图书页的章节介绍 <article> //一般用于独立的块 <menu> //menu默认有margin和padding <aside> //一般用于网站边上的弹窗、广告 <hgroup>使用input和data
复制链接

扫一扫