<DOCTYPE html>
<head>
<meta charset=utf-8>
<title>html5</title>
<script type="text/javascript" src="canvas.js"></script>
<style type="text/css">
html{
font-size:62.5%;
}
body{
background-color:white;
font-size:1em;
}
@media screen and (max-width:960px){
body{
background-color:red;
}
}
@media screen and (max-width:768px){
body{
background-color:orange;
}
}
@media screen and (max-width:550px){
body{
background-color:yellow;
}
}
@media screen and (max-width:320px){
body{
background-color:green;
}
}
.transition{
color:#000000;
width:30em;
background-color:#ffff00;
-webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;
-moz-transition:background-color 1s linear,color 1s linear,width 1s linear;
-o-transition:background-color 1s linear,color 1s linear,width 1s linear;
}
.transition:hover{
background-color:#003366;
color:#ffffff;
width:40em;
}
.transition2 img {
position: absolute;
top: 70px;
left: 0;
-webkit-transform: rotate(0deg);
-webkit-transition: left 1s linear, -webkit-transform 1s linear;
-moz-transform: rotate(0deg);
-moz-transition: left 1s linear, -moz-transform 1s linear;
-o-transform: rotate(0deg);
-o-transition: left 1s linear, -o-transform 1s linear;
}
.transition2: hover img{
position: absolute;
left: 30px;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
}
@-webkit-keyframes fadein{
0%{
opacity:0;
background-color:white;
}
100%{
opacity:1;
background-color:white;
}
}
body{
-webkit-animation-name:fadein;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:1;
}
video{
height:auto;
max-width:100%;
}
.vi{
max-width:60em;
}
#canvas{
width:40em;
height:30em;
}
.shadow{
text-shadow:7px 1px 1px #cccccc;
font-size:24px;
}
.linear{
width: 150px;
height: 40px;
text-align: center;
padding-top: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#cccccc);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#000000, endColorstr=#cccccc)";/*IE8+*/
background: -moz-linear-gradient( top,#ccc,#000);
background: -webkit-gradient(linear,center top,center bottom,from(#FCFDFE), to(#E9E9E9));
background: -o-linear-gradient(top,#ccc, #000);
border-radius: 5px;
border:1px solid #c2c2c2;
}
.linear:hover{
width: 150px;
height: 40px;
text-align: center;
padding-top: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ccc, endColorstr=#000);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#cccccc, endColorstr=#000000)";/*IE8+*/
background: -moz-linear-gradient( top,#000,#ccc);
background: -webkit-gradient(linear,center top,center bottom,from(#E9E9E9), to(#FCFDFE));
background: -o-linear-gradient(top,#ccc, #000);
border-radius: 5px;
border:1px solid #c2c2c2;
}
</style>
</head>
<html>
<body οnlοad="draw('canvas');">
mark:<mark>HTML 5</mark><br/>
progress:<progress></progress><br />
time:<time datetime="2013-05-30">2013年5月30日</time><br />
address：
<address>
<a href="http://www.baidu.com" >百度</a>
<a href="http://www.sina.com.cn">新浪</a>
</address>
keygen:<keygen>
<div class="linear" >漸變效果</div>
<div class="shadow">文字陰影效果</div>
<div class="transition">transition示例</div>
<div class="transition2">
<img src="test.jpg" alt="test" title="" width="100px" height="200px"/>
</div>
<p>這是用html5寫的</p>
<br/>你看得出來嗎<br>
video視頻播放:<br />
<div class="vi">
<video src="20130520103143462.mp4" style="width:480px; height:300px" controls >您的瀏覽器不支持</video>
</div>
audio音頻播放：<br />
<audio src="E:\360雲盤\各種技術\前端技術\html5\saima.mp3" controls ></audio><br />
file:<input type=file multiple=><br>
time:<input type=time name=time1 value=12:20><br>
date:<input type=date name=date1 value=2012-12-13><br>
week:<input type=week name=week1><br>
range:<input type=range name=range1 value=40 max=140 min=10 step=40><br>
url:<input type=url name=url1><br>
mail:<input type=mail name=mail1><br>
number:<input type=number name=number1><br>
color:<input type=color name=color1 ><br>
text:<input type=text name=greeting list=greetings autocomplete="off"><br />
search:<input type=search><br />
tel:<input type=tel><br />
<datalist id=greetings style="display: none;">
<option value="Good Morning">Good Morning</option>
<option value="Good Afternoon">Good AfterNoon</option>
<option value="Good Night">Good Night</option>
</datalist>
<form id=testform>
選擇一個數值：
<input name=range1 type=range min=0 max=100 step=5/>
<output onforminput="value=range1.value">50</output>
</form>
<details>
<summary>google支持<details></summary>
<p/>inrtyygyqfadfasdasd<p/>
</details>
<p>磁盤使用量：<meter value=40 min=0 max=160>40/160</meter>(meter元素)</p>
<ol start=8>
<li>fasdf</li>
<li>fasdf</li>
<li>fasdf</li>
<li>fasdf</li>
<li>fasdf</li>
</ol>
<ul>
<li>fasdf</li>
<li>fasdf</li>
<li>fasdf</li>
<li>fasdf</li>
</ul>
<h1>canvas元素示例</h1>
<canvas id="canvas"/>
</body>
</html>
