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. 一起写一个Android图片轮播控件

    注:本文提到的Android轮播控件Demo地址: Android图片轮播控件 1. 轮播控件的组成部分 我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成: 首先我们要有用 ...

  2. Swagger字段说明

    常用字段说明 字段 说明 schemes 使用协议(如:http.https) host 项目地址,这个地址会作为每个接口的url base,拼接起来一起作为防伪地址 consumes 接口默认接收的 ...

  3. windows批处理学习（字符换操作）---04

    转自:https://www.cnblogs.com/DswCnblog/p/5432326.html 1.截取字符串 截取字符串可以说是字符串处理功能中最常用的一个子功能了,能够实现截取字符串中的特 ...

  4. 【Linux】- netstat 命令

    Linux netstat命令用于显示网络状态.利用netstat指令可让你得知整个Linux系统的网络情况. 语法 netstat [-acCeFghilMnNoprstuvVwx][-A<网 ...

  5. cacti监控多个mysql端口

    1. 在Console -> Data Templates 找到mysql-cacti-templates的mysql模板,编辑: 在这里面把Port的Use Per-Data Source V ...

  6. 探讨C++实现一个不可被继承的类

    C#和Java都提供了一种机制让一个类不能被继承,如C#中的sealed关键字和Java的final关键字,然而C++程序员就没这么好命了.不过C++也可以模拟出这种效果,原理基于:子类的构造函数会自 ...

  7. Java ArrayList Vector LinkedList Stack Hashtable等的差别与用法（转）

    ArrayList 和Vector是采取数组体式格式存储数据,此数组元素数大于实际存储的数据以便增长和插入元素,都容许直接序号索引元素,然则插入数据要设计到数组元素移动等内存操纵,所以索引数据快插入数 ...

  8. [剑指Offer] 53.表示数值的字符串

    题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.1 ...

  9. 复杂类型的write写入功能 步骤解析

  10. Foundation框架—时间处理对象NSDate

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. NSDate的构造方法和构造获取实例的属性 用于创建NSDat ...