-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest5.html
More file actions
137 lines (136 loc) · 5.01 KB
/
Copy pathtest5.html
File metadata and controls
137 lines (136 loc) · 5.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5测试</title>
<style type="text/css">
h1 {
background-color: #AFEEEE;
text-align: center;
}
#divDragDrop {
display: table;
border: 1px solid #006699;
}
#subDiv1,#subDiv2 {
display: table-cell;
float: left;
width: 200px;
height: 70px;
padding: 10px;
margin: 10px;
border: 1px solid #000000;
}
</style>
<script>
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>
<h1><i>HTML5学习练习</i></h1>
<hr/>
<div id="divDragDrop">
<p style="text-align: center;"><b>拖放（Drag和Drop）</b></p>
<div id="subDiv1" ondragover="allowDrag(event)" ondrop="drop(event)">
<img src="../images/w3slogo.gif" draggable="true" ondragstart="drag(event)" id="img1" width="150" height="28" alt="w3slogo.gif">
</div>
<div id="subDiv2" ondragover="allowDrag(event)" ondrop="drop(event)">
</div>
</div>
<video width="320" height="240" controls>
<source src="../videos/bear.mp4" type="video/mp4">\
您的浏览器不支持 HTML5 video 标签。
</video>
<audio controls>
<source src="../audios/horse.ogg" type="audio/ogg">
您的浏览器不支持 audio 元素。
</audio>
<br/>
<hr/>
<table border="1" cellpadding="6" cellspacing="0" style="background-color: #f0efa5;margin-left: auto;margin-right: auto;">
<caption>HTML5 新的 Input 类型</caption>
<tr>
<td>
<!--TODO form_action.html-->
<form action="form_action.html">
<table>
<tr>
<td>选择你喜欢的颜色：</td>
<td><input type="color" name="favColor"></td>
</tr>
<tr>
<td>生日：</td>
<td><input type="date" name="bday"></td>
</tr>
<tr>
<td>生日 (日期和时间)：</td>
<td><input type="datetime" name="bdaytime1"></td>
</tr>
<tr>
<td>生日 (日期和时间)：</td>
<td><input type="datetime-local" name="bdaytime2"></td>
</tr>
<tr>
<td>Email：</td>
<!--注意: Internet Explorer 9 及更早 IE 版本不支持 type="email" 。-->
<td><input type="email" name="usremail"></td>
</tr>
<tr>
<td>生日 ( 月和年 )：</td>
<td><input type="month" name="bdaymonth"></td>
</tr>
<tr>
<td>数量（1~5）：</td>
<!--注意:Internet Explorer 9 及更早 IE 版本不支持 type="number" 。-->
<!--number 类型用于应该包含数值的输入域。-->
<td><input type="number" name="quantity" min="1" max="5"></td>
</tr>
<tr>
<td>点数（1~10）：</td>
<!--定义一个不需要非常精确的数值（类似于滑块控制）-->
<td><input type="range" name="points" min="1" max="10"></td>
</tr>
<tr>
<td>电话号码：</td>
<!--定义输入电话号码字段-->
<td><input type="tel" name="usrtel"></td>
</tr>
<tr>
<td>选择时间：</td>
<td><input type="time" name="usrtime"></td>
</tr>
<tr>
<td>添加你的主页：</td>
<!--url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值-->
<td><input type="url" name="homepage"></td>
</tr>
<tr>
<td>选择周：</td>
<!--week 类型允许你选择周和年-->
<td><input type="week" name="year_week"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="submit" style="width: 150px;height: 35px;">
</td>
</tr>
</table>
<hr/>
你最喜欢的颜色值为：<p id="colorSpan">//TODO</p>
</body>
</html>