1.Html拖放

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</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> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><!--放到何处:ondragover.进行放置:ondrop.-->
<img id="drag1" src="001.png" draggable="true" ondragstart="drag(event)" width="336" height="69"><!--draggable="true"代表图片可以拖动.ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值--> </body>
</html>

实现的结果如下:可以把图片拖放到矩形里面

(1)设置元素为可拖放:<img draggable="true">

(2)拖动什么:ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

(3)放到何处:ondragover 默认属性无法将数据/元素放置到其他元素中。如果需要设置允许放置,必须阻止对元素的默认处理方式。要通过调用 ondragover 事件的 event.preventDefault() 方法。

(4)进行放置:ondrop。ondrop 属性调用了一个函数,drop(event)。

2.Html5 Video(视频)

(1)正常嵌入视频

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body> <video width="320" height="240" controls>
<source src="file:///F|/内涵段子/1444889702013.mp4" type="video/mp4">
</video> </body>
</html>

(2)可调节视频窗口大小

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<div style="text-align:center">
<video id="video1" width="420">
<source src="file:///F|/内涵段子/1458624760130.mp4" type="video/mp4"><!--视频来源--></video>
<br>
<button onclick="playPause()">播放/暂停</button><!--4个按钮-->
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
</div> <script>
var myVideo=document.getElementById("video1"); function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
} function makeBig()
{
myVideo.width=560; //点击放大,视频宽度为560
} function makeSmall()
{
myVideo.width=320; //点击缩小,视频宽度为320
} function makeNormal()
{
myVideo.width=420; //点击普通视频宽度为420
}
</script> </body>
</html>

网页上显示为

3.Html5 Input类型

(1)color

<body>
<form action="demo-form.php">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
</body>

可以点击颜色,会出来颜色选择框,然后选择颜色提交。

(2)datetime可以从日期选择器中选取日期

<body>
<form action="demo-form.php">
生日: <input type="date" name="bday">
<input type="submit">
</form>
</body>

可以从日期选择器里面选择时间提交。

(3)email 在提交表单时,会自动验证 email 域的值是否合法有效

<body>
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
</body>

(4)month 生成年和月,是一个选择器。

<body>
<form action="demo-form.php">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>

(5)number 数量选择器

<body>
<form action="demo-form.php">
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="12"><!--最小与最大的数量-->
<input type="submit">
</form>
</body>

(6)range  可以左右调整选取值

<body>
<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
</body>

(7)search用于搜索域,比如站点搜索或 Google 搜索。

<body>
<form action="demo-form.php">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</body>

(8)Tel定义输入电话号码字段

<body>
<form action="demo-form.php">
电话号码: <input type="tel" name="usrtel"><br>
<input type="submit">
</form>
</body>

(9)time可输入时间控制器(无时区)

<body>
<form action="demo-form.php">
选择时间: <input type="time" name="usr_time">
<input type="submit">
</form>
</body>

(10)url用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。

<body>
<form action="demo-form.php">
添加你的主页: <input type="url" name="homepage"><br>
<input type="submit">
</form>
</body>

(11)week定义周和年 (无时区)

<body>
<form action="demo-form.php">
选择周: <input type="week" name="year_week">
<input type="submit">
</form>
</body>

Html5学习3(拖放、Video(视频)、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week ))的更多相关文章

  1. HTML5学习笔记 拖放

    拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...

  2. HTML5 学习05—— 拖放(Drag 和 Drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...

  3. HTML5学习之拖放(十)

    l元素可以用于拖拽必须设置draggable="true"属性,img和a标签除外,她们两个默认就可以被拖拽 想做拖拽处理,就需要在Dom元素上监听拖放的事件:dragstart, ...

  4. 检测浏览器对HTML5新input类型的支持

    HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,u ...

  5. html5学习笔记2——新元素

    一:H5的改变 <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 ...

  6. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

  7. 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

    今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. 这些 ...

  8. 使用 HTML5 input 类型提升移动端输入体验

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  9. 使用 HTML5 input 类型提升移动端输入体验(键盘)

    在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...

随机推荐

  1. iOS- 优化与封装 APP音效的播放

    1.关于音效 音效又称短音频,是一个声音文件,在应用程序中起到点缀效果,用于提升应用程序的整体用户体验.   我们手机里常见的APP几乎都少不了音效的点缀.   显示实现音效并不复杂,但对我们App很 ...

  2. 3ds Max学习日记(六)

      到了周六就不想再忙实验室的活了,于是玩了一下3ds max,第5和第6章每章都只有4个视频,于是就一起弄完了,什么网格建模,曲面建模啥的,nurbs啥的. 附上今日的劳动成果:   叉子(用长方体 ...

  3. 微信小程序项目笔记以及openId体验版获取问题

    公司一直说要搞小程序,说了几个月,最近才算落地,一个很小的项目,就结果来讲,勉强让自己窥得小程序门径. 下面总结一下,为了弄好小程序,所学到的知识,以及项目中遇到的问题以及解决的办法.纯属个人见解. ...

  4. Android 多屏幕适配 dp和px的关系 最好用dp

    Android 多屏幕适配 dp和px的关系 一直以来别人经常问我,android的多屏幕适配到底是怎么弄,我也不知道如何讲解清楚,或许自己也是挺迷糊. 以下得出的结论主要是结合官方文档进行分析的ht ...

  5. [C/C++] 友元函数和友元类

    A---友元函数: class Data{ public: ... friend int f(int &m);//友元函数 ... } 友元函数是可以直接访问类的私有成员的非成员函数.它是定义 ...

  6. android四大组件(一)Activity

    一.创建一个新的Activity 1.android的四大组件都要在清单文件里面配置 2.如果想让你的应用有多个启动图标,你的activity需要这样配置 <intent-filter> ...

  7. Go语言【第十一篇】:Go数据结构之:结构体

    Go语言结构体 Go语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数据类型,结构体是由一系列具有相同类型或不同类型数据构成的集合.结构体表示一项记录,比如:保存图书馆的书籍记 ...

  8. CentOS 服务ftp(vsftpd)

    1.检查是否已经安装vsftpd yum list installed | grep vsftpd 2.安装vsftpd yum install -y vsftpd 3.检查vsftpd system ...

  9. 【刷题】HDU 4405 Aeroplane chess

    Problem Description Hzz loves aeroplane chess very much. The chess map contains N+1 grids labeled fr ...

  10. [LOJ #6433]「PKUSC2018」最大前缀和

    题目大意:给你一个$n(n\leqslant20)$项的数列$A$,设重排后的数列为$A'$,令$pre_p=\sum\limits_{i=1}^pA'_i$,求$max\{pre_i\}$的期望,乘 ...