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>
时间： 2024-10-06 12:26:59