前端学习之路html5(02)-特性

最新推荐文章于 2019-05-08 20:28:42 发布

戚继光

最新推荐文章于 2019-05-08 20:28:42 发布

阅读量332

点赞数

分类专栏： web前端文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_36244867/article/details/61933484

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html5 拖放

drag(拖拽)和drop(放置)是html5中的标准。即我们抓取一个对象通过移动将它放置到另一对象当中去。
我们可以考虑一下，拖动一个对象需要知道哪些东西呢？不外乎以下几个方面。哪些可以拖动、拖动什么、拖到何处、如何放置，我们就从以下这三点来考虑。

哪些可以拖动？

html5给元素提供了一个draggable属性来设置是否可拖动；
true可拖动、false不可。

拖动什么？

ondragstart、setData()。
当某个对象可被拖动且刚被拖动时，它做了什么？实际上，我们可以通过ondragstart属性来设置。ondragstart属性调用一个函数，函数中通过setData()函数来决定拖动什么。

拖到何处？

ondragover事件规定在何处放置被拖动的数据。默认的，无法将数据/元素放置到其他元素中去。如果需要设置允许放置，我们必须阻止对元素默认的处理方式。这就要通过调用ondragove事件中的event.preventDefault()方法。

如何放置？

当松开放置时会处理ondrop事件。通过以下代码来理解处理流程。

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）；
通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据；
被拖数据是被拖元素的 id (“drag1”)；
把被拖元素追加到放置元素（目标元素）中。

示例

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>拖拽美女</title> 
<style type="text/css">
    #myDiv1, #myDiv2
    {float: left; width: 200px; height: 150px; margin: 10px; border: 1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrag(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>
<div id="myDiv1" ondrop="drop(event)" ondragover="allowDrag(event)"></div>
<div id="myDiv2" ondrop="drop(event)" ondragover="allowDrag(event)"></div>
<img id="img" src="images/girl01.jpg" width="200px" height="150px" draggable="true" ondragstart="drag(event)">
</body>

</html>

这里写图片描述

html5 地理位置

在没有进行实际运用时，感觉意义不大，等系统过一遍html5之后再好好研究。

html5 video视频

<video> 元素提供了播放、暂停和音量控件来控制视频。
<video>元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
支持的视频格式为mp4、WebM、Ogg。几乎所有浏览器都支持mp4格式其它格式不一定被支持，所以mp4格式是最好的选择。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>播放mp4</title>    
</head>

<body>

<div style="text-align:center; margin: 10px"> 
    <video id="myVideo" width="500" controls>
    <source src="video/movie.mp4" type="video/mp4">
    </video><br>
    <button onclick="startOrStop()">播放/暂停</button>
    <button onclick="bigWindow()">放大</button>
    <button onclick="normalWindow()">恢复</button>
</div>


<script type="text/javascript">
var myVideo = document.getElementById("myVideo");
function startOrStop(){
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
}
function bigWindow(){
    myVideo.width=1000;
}
function normalWindow(){
    myVideo.width=500;
}
</script>

</body>

</html>

这里写图片描述

html5 audio音频

<audio>提供了播放音频的控件，它的用法属性和<video>有些类似；
音频格式为三种mp3、wav、ogg，mp3格式是最佳选择。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>播放mp3</title>    
</head>

<body>
<div margin: 10px"> 
    夏小虎_人生<br>
    <audio controls>
        <source src="audio/myMusic.mp3" type="audio/mpeg">
        <source src="horse.mp3" type="audio/mpeg">
    </audio>
</div>
</body>

</html>

这里写图片描述

html5 Input类型

html5中添加许多新的表单输入类型。

color，用于选择颜色；
date，日期选择器；
datetime，选择一个日期（UTC 时间）。
datetime-local，选择一个日期和时间 (无时区)。
email，用于应该包含 e-mail 地址的输入域，提交时会自动验证值是否合法。
month，选择日期到月份，即年月。
search，用于搜索域，比如站点搜索或 Google 搜索。
tel，输入电话号码…貌似没有浏览器支持，用number替代吧。
time，选择一个时间（无时区）。
url，用于应该包含 URL 地址的输入域。提交表单时，会自动验证 url 域的值。
week，选择周和年。
number，输入数值，可对输入进行限制，再提交时验证值得合法性。
1.disabled，规定输入字段是禁止的；
2.max，输入的最大值；
3.maxlength，输入字符的最大长度；
4.min，输入的最小值；
5.pattern，用于验证输入字段的模式；
6.readonly，输入的字段值不可修改；
7.required，输入的字段值是必须的；
8.size，输入字段中可见的字符数；
9.step，输入字段的的合法数字间隔；
10.value，输入字段的默认值；
range，包含一定数值范围的滑动条。
1.max最大值；
2.min最小值；
3.step数字间隔；
4.value默认值；

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>input</title>    
</head>

<body>
<form>
    （color）：
    <input type="color" ><br><br>
    （date）：
    <input type="date" ><br><br>
    （datetime）：
    <input type="datetime" ><br><br>
    （datetime-local）：
    <input type="datetime-local"><br><br>
    （email）：
    <input type="email"><input type="submit"><br><br>
    （month）：
    <input type="month"><br><br>
    （number）：
    <input type="number" min="1" max="6"><br><br>
    （range）：
    <input type="range" min="0" max="100" step="5" value="50"><br><br>
    （search）：
    <input type="search"><br><br>
    （time）：
    <input type="time" ><br><br>
    （url）：
    <input type="url"><br><br>
    （week）：
    <input type="week">
</form>
</body>

</html>