Html5練習
header標籤,aside標籤,footer標籤html
<!doctype html>
<html>
<head>
<style>
/*
*{border:1px solid red;height:20px}
全部的html5結構標籤本質上來講就是一個div標籤，只不過有意義
*/
/*頁面頭部 header*/
header{height:150px;background:#ABCDEF}
nav{height:30px;background:#FF9900;margin-top:100px}
nav ul li{width:100px;height:30px;float:left;line-height:30px}
/*頁面中間 div */
div{margin-top:10px;height:1100px}
section{height:1100px;background:#ABCDEF;width:70%;float:left}
article{background:#ff9900;width:500px;margin:0 auto;text-align:center}
aside{height:700px;background:#ABCDEF;width:28%;float:right}
/*頁面底部 footer*/
footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
</style>
</head>
<body>
<header>
<p>這是一個header標籤</p>
<nav>
<ul>
<li>首頁</li>
<li>企業</li>
<li>論壇</li>
<li>商城</li>
<li>社區</li>
</ul>
</nav>
</header>
<div>
<section>
<p>這是一個section標籤</p>
<article>
<h2>春曉</h2>
<p>
春眠不覺曉，<br/>
到處蚊子咬。<br/>
打上敵敵畏，<br/>
不知死多少。<br/>
</p>
</article>
<hr/>
<article>
<h2>上學歌</h2>
<p>
太陽當空照，<br/>
花兒對我笑，<br/>
小鳥說早早早，<br/>
你爲何背上小書包？<br/>
</p>
</article>
<hr/>
<article>
<h2>上學歌</h2>
<p>
我要炸學校，<br/>
老師不知道，<br/>
一拉線，趕快跑，<br/>
轟的一聲學校炸沒了！<br/>
</p>
</article>
<hr/>
<figure>
<figcaption>UFO</figcaption>
<p>不明飛行物 Unknown Flying Object</p>
</figure>
<figure>
<dt>DDs</dt>
<dd>大屌絲</dd>
</figure>
<hr/>
<dialog>
<dt>唐僧：悟空，你又調皮了，爲師都告訴你了不要處處亂丟垃圾的。。。</dt>
<dd>悟空：。。。。。。</dd>
<dt>唐僧：砸到花花草草是不對滴</dt>
<dd>悟空：。。。。。。</dd>
</dialog>
<hr/>
<menu>
<li>點擊</li>
<li>右鍵單擊</li>
</menu>
<hr/>
<span contextmenu="candan">右鍵點擊我試試</span>
<menu type="context" id="candan">
<menuitem label="菜單一" onclick="alert('我很寂寞')" icon="http://www.baidu.com/img/bd_logo.png"></menuitem>
</menu>
<hr/>
<meter min="0" max="10" value="5" low="3" high="7"></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
var pro =document.getElementById{'pro'};
setInterval(function(){
pro.value+=1;
},100);
</script>
<hr/>
<details>
<dt>這是一個問題</dt>
<dd>yes</dd>
<dt>這是一個問題</dt>
<dd>yes</dd>
<dt>這是一個問題</dt>
<dd>yes</dd>
</details>
<hr/>
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp><ruby>
<hr/>
女人<mark>最喜歡</mark>作的事情就是逛街。。。。。。
</section>
<aside>
<p>這是一個aside標籤</p>
<hgroup>
<h3>女生宿舍爲什麼頻頻被盜？</h3>
<h3>兩百頭母豬爲什麼半夜慘死？</h3>
<h3>仍是道德淪喪</h3>
</hgroup>
</aside>
</div>
<footer>
<p>這是一個footer標籤</p>
<hr/>
<small>法律條約</small>
<small>聯繫咱們</small>
<small>準備跳轉</small>
</footer>
</body>
</html>
太陽系前端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>太陽系</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000000">您的瀏覽器不支持canvas標籤！請換一個瀏覽器</canvas>
<script>
//設置2d繪圖環境
var cxt=document.getElementById('canvas').getContext('2d');
//軌道
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
//設置筆觸顏色
cxt.strokeStyle="#fff";
cxt.stroke();
}
}
drawTrack();
//星球
function Star(x,y,radius,cycle,sColor,eColor){
//畫出星球須要那些屬性
//星球的座標點
this.x=x;
this.y=y;
//星球的半徑
this.radius=radius;
//公轉週期
this.cycle=cycle;
//星球的顏色（開始色，結束色）
this.sColor=sColor;
this.eColor=eColor;
//新建一個漸變顏色空對象
this.color=null;
//設置一個計時器
this.time=0;
this.draw=function(){
//保存以前的畫布內容
cxt.save();
//重置0，0座標點
cxt.translate(500,500);
//設置旋轉角度
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
//畫星球
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closePath();
//設置星球的填充顏色
//心漸漸變對象
this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
//設置漸變效果
this.color.addColorStop(0,this.sColor);//漸變開始點和顏色
this.color.addColorStop(1,this.eColor);//漸變結束點和顏色
cxt.fillStyle=this.color;//將漸變對象複製給填充畫筆
//填充星球
cxt.fill();
//恢復以前保存的畫布內容
cxt.restore();
//執行完畢以後時間加1
this.time+=1;
}
}
//建立一個太陽對象的構造函數
function Sun(){
Star.call(this,0,0,20,0,"#f00","#f90");
}
//建立一個水星的對象構造方法
function Mercury(){
Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//建立一個金星的對象構造方法
function Venus(){
Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
}
//建立一個地球的對象構造方法
function Earth(){
Star.call(this,0,-150,10,365.224,"#78D1E8","#050C12");
}
//建立一個火星的對象構造方法
function Mars(){
Star.call(this,0,-200,10,686.98,"#CEC986","#76422D");
}
//建立一個木星的對象構造方法
function Jupites(){
Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
}
//建立一個土星的對象構造方法
function Satum(){
Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
}
//建立一個天王星的對象構造方法
function Uranus(){
Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
}
//建立一個海王星的對象構造方法
function Neptune(){
Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
}
var sun=new Sun();
var mercury=new Mercury();
var venus=new Venus();
var earth=new Earth();
var mars=new Mars();
var jupites=new Jupites();
var satum=new Satum();
var uranus=new Uranus();
var neptune=new Neptune();
function move(){
//清除畫布
cxt.clearRect(0,0,1000,1000);
//畫出軌道
drawTrack();
//畫出各個星球
sun.draw();
mercury.draw();
venus.draw();
earth.draw();
mars.draw();
jupites.draw();
satum.draw();
uranus.draw();
neptune.draw();
}
//是各個星球進行運動
setInterval(move,10);
</script>
</body>
</html>
時鐘html5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>時鐘</title>
</head>
<body>
<canvas id="clock" width="500" height="500">您的瀏覽器不支持canvas標籤！請換一個瀏覽器</canvas>
<script>
var clock=document.getElementById('clock');
var cxt=clock.getContext('2d');
function drawClock(){
//清除畫布
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小時必須獲取浮點類型（小時+分數轉化成的小時）
hour=hour+min/60;
//問題是時間格式,將24小時的進制轉換爲12小時的進制
hour=hour>12?hour-10:hour;
//錶盤
cxt.lineWidth=10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//刻度
//時刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth="7"
cxt.strokeStyle="black";
//先設置0，0點
cxt.translate(250,250);
//在設置旋轉角度
cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度;
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.lineWidth="3"
cxt.strokeStyle="black";
//先設置0，0點
cxt.translate(250,250);
//在設置旋轉角度
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//時針
cxt.save();
//設置時針風格
cxt.lineWidth=7;
cxt.strokeStyle="black"
//設置異次元空間的0，0點
cxt.translate(250,250);
//在設置旋轉角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分針
cxt.save();
//設置分針風格
cxt.lineWidth=5;
cxt.strokeStyle="black"
//設置異次元空間的0，0點
cxt.translate(250,250);
//在設置旋轉角度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒針
cxt.save();
//設置分針風格
cxt.lineWidth=3;
cxt.strokeStyle="red"
//設置異次元空間的0，0點
cxt.translate(250,250);
//在設置旋轉角度
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//畫出時針、分針和秒針的交叉點
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
//設置填充樣式
cxt.fillStyle="gray";
cxt.fill();
//設置筆觸樣式(秒針已設置)
cxt.stroke();
//設置秒針前端的小圓點
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
//設置填充樣式
cxt.fillStyle="gray";
cxt.fill();
//設置筆觸樣式(秒針已設置)
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//使用setInterval（代碼，毫秒時間） 讓時鐘動起來
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
相關文章
- 1. HTML5基礎練習
- 2. HTML5——canvas小練習——函數圖
- 3. html5--7-33 階段練習5
- 4. html5之動態網頁練習
- 5. HTML5 1.11移動端頁面練習
- 6. html5--6-53 階段練習4-畫廊
- 7. HTML5理論實踐與練習(一)
- 8. 練習練習在練習
- 9. html 表單練習 博客_練習：創建一個簡單HTML5表單
- 10. JAVA0508練習（練習）
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章