HTML5
HMTL5元素:
test1
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
</head>
<body>
<h1>我的第一个视频</h1>
<a href="www.baidu.com">百度一下</a>
<p>hello html5</p>
<h1>我的第一个视频</h1>
<img src="C:\Windows\Globalization\MCT\MCT-CN\Wallpaper\CN-wp4.jpg" width="458" height="250"/>
<video width="820" height="540" controls>
<source src="C:\Windows\Performance\WinSAT\Clip_480_5sec_6mbps_h264.mp4" type="video/mp4"></source>
</video>
</body>
</html>
<header/>
<section>
<p>section</p>
<h1>元素定义文档中的节</h1>
</section>
<article>
<aside>
<h3>article aside标签使用</h3>
</aside>
<h2>article标签使用</h2>
</article>
<aside>
<h3>aside标签使用</h3>
</aside>
<ul>
<li>用户<bdi>hrefs</bdi> 60</li>
<li>用户<bdi>jdo</bdi> 70</li>
<li>用户<bdi>footer<bdi> 80</li>
</ul>
<p>html</p>
<h1>header标签使用</h1>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p><mark>定义带有记号的文本</mark></p>
<button onclick="myFunction()">放大</button>
<div style="text-align:center" controls>
<video id="video" width="520" height="340" controls>
<source src="C:\Windows\Performance\WinSAT\Clip_480_5sec_6mbps_h264.mp4" type="video/mp4"></source>
Your browser does not support this audio format.
<script>
//alert(0);
var demo=document.getElementById("video");
function myFunction(){
demo.width="900"
}
</script>
<h1>练习2</h1>
<style type="text/css">
#div1{
width:458px;
height:250;
padding:10px;
border:1px solid red;}
}
</style>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p></p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></>
<img id="drag1" src="C:\Windows\Globalization\MCT\MCT-CN\Wallpaper\CN-wp4.jpg" width="458" height="250" draggable="true" ondragstart="drag(event)"/>
</div>
<script type="text/javascript">
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>
</div>
<h1>练习3</h1>
<script type="text/javascript">
function cnvs_getCoordinates(e){
x=e.clientX;
y=e.clientY;
document.getElementById("coordiv").innerHTML="Coordinates:("+x+","+y+")";
function cnvs_clearCoordinates(){
document.getElementById("coordiv").innerHTML="";
}
}
</script>
<div id="coordiv" style="float;width:199px;height:99px;border:1px solid green" onmousemove="cnvs_getCoordinates(event)" onmousemout="cnvs_clearCoordinates()""><br/>
<div id="xycoordinates" style="float:left;width:705px;"></div>
<h1>练习4</h1>
<button></button>
<textares id="txt1" cols="15"></textares>
<textares></textares>
<button></button>
<footer/>
