HTML5

来源：互联网发布：京东淘宝竞品分析编辑：程序博客网时间：2024/06/08 17:55

新特性

HTML5 新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>回收站</title>
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
background: #D12121;
}
.div2, .div3, .div4 {
width: 150px;
height: 20px;
background: #15E5A5;
margin: 20px;
}
</style>
</head>
<body>
<div class="div1" id="div1"></div>
<div class="div2" id="div2" draggable="true"></div>
<div class="div3" id="div3" draggable="true"></div>
<div class="div4" id="div4" draggable="true"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
event = window.event || event;
div2.ondragstart = function(event) {
event.dataTransfer.setData('Text', event.target.id);
}
div3.ondragstart = function(event) {
event.dataTransfer.setData('Text', event.target.id);
}
div4.ondragstart = function(event) {
event.dataTransfer.setData('Text', event.target.id);
}
div1.ondrop = function(event) {
var data = event.dataTransfer.getData('Text');
event.target.appendChild(document.getElementById(data));
event.preventDefault();
}
div1.ondragover = function (event) {
event.preventDefault();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
}
header {
width: 1000px;
height: 100px;
background: #EDE8E8;
margin-left: 50px;
}
header .nav_1 ul {
margin-left: 300px;
}
header .nav_1 ul li {
display: inline-block;
line-height: 100px;
margin-left: 30px;
}
aside #aside_1 {
height: 50px;
width: 100px;
background: #15E5A5;
color: #D12121;
position: absolute;
left: 950px;
display: none;
}
#center {
width: 1000px;
height: 200px;
margin-left: 50px;
}
#left, #right, #middle {
float: left;
}
#center #left {
width: 333px;
height: 200px;
background: #D12121;
}
#center #middle {
width: 333px;
height: 200px;
background: #C1E80A;
}
#center #right {
width: 333px;
height: 200px;
background: #15D81F;
}
footer {
width: 1000px;
height: 100px;
background: #026AFE;
margin-left: 50px;
}
</style>
</head>
<body>
<header>
<nav class="nav_1">
<ul>
<li>nav_one</li>
<li>nav_two</li>
<li>nav_there</li>
<li>nav_four</li>
<li>nav_five</li>
</ul>
</nav>
</header>
<aside>
<div id="aside_1">
This is a small ad!
</div>
</aside>
<div id="center">
<menu id="left"></menu>
<div id="middle"></div>
<div id="right"></div>
</div>
<footer></footer>
</body>
<script type="text/javascript">
var aside_1 = document.getElementById('aside_1');
function show_aside_1() {
aside_1.style.display = 'block';
}
setTimeout(show_aside_1, 3000);
// setInterval(show_aside_1, 3000);
</script>
</html>

0 0