HTML學習教程
1 html5基礎
1 input ---focus焦點
對比A：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>用HTML 5實現程式碼清單1-1中的JavaScript程式碼</title>
<form>
<p>
<label>Search:<input name=search autofocus></label>
</p>
</form>
B:
<form>
<p><label>Username:<inputname=search type="text"id="search"></label></p>
<scripttype="text/javascript">
document.getElementById ('search').focus()
</script>
</form>
2 html5的標準結構
<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML 5標記示例</title>
<p>這段程式碼是根據HTML 5語法
<br/>編寫出來的。
3 ul—editable <ulcontentEditable="true">
<!DOCTYPE html>
<head>
<meta charset="utf-8 ">
<title>conentEditalbe屬性示例</title>
</head>
<h2>可編輯列表</h2>
<ul contentEditable="true">
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>
4 article—header，footer--time<time pubdate獨立自內容—
<!DOCTYPE html>
<head>
<meta charset="utf-8 ">
<title>conentEditalbe屬性示例</title>
</head>
<article>
<header>
<h1>蘋果</h1>
<p>發表日期: <time pubdate="pubdate">2010/10/09</time></p>
</header>
<p><b>蘋果</b> ，植物類水果，多次花果...（“蘋果”文章正文）</p>
<footer>
<p><small>著作權歸***公司所有。</small></p>
</footer>
</article>
5 section—標籤—片段
6 submit—input--formaction
<head>
<title>formaction屬性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform"action="serve.jsp">
<input type="submit"name="s1" value="v1" formaction="s1.jsp">提交到S1
<input type="submit"name="s2" value="v2" formaction="s2.jsp">提交到S2
<input type="submit"name="s3" value="v3" formaction="s3.jsp">提交到S3
<input type="submit">
</form>
7 input-submit----formmethod=”post”
<!DOCTYPE html>
<head>
<title>formmethod屬性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform"action="serve.jsp">
<input type="submit" name="s1"value="v1" formaction="s1.jsp"formmethod="post">提交到S1
<input type="submit" name="s2"value="v2" formaction="s2.jsp"formmethod="get">提交到S2
<input type="submit">
</form>
8 input—text—list –datalist-option—text自動提示文字
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>list屬性示例</title>
</head>
text：<inputtype="text" name="greeting" list="greetings">
<!--使用style="display:none;"將detalist元素設定為不顯示-->
<datalist id="greetings"style="display: none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">GoodAfternoon</option>
</datalist>
9 input—required—type=number min=0 max=100 type=date type=email type=url
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單表單示例</title>
<form name="form1">
<label for=username>姓名</label>
<input name=username id=usernametype=text required /><br/>
<label for=age>年齡</label>
<input name=age id=age type=number min=0max=100/><br/>
<label for=birthday>出生日期</label>
<input name=birthday id=birthdaytype=date/><br/>
<label for=email>Email</label>
<input name=email id=email type=emailrequired /><br/>
<label for=url>個人主頁</label>
<input name=url id=url type=url/><br/>
<label for=memo>個人簡介</label>
<textarea name=memo id=memo required></textarea><br/>
<input type=submit>
</form>
10 input—type=range
<!DOCTYPE HTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp" method="get">
Points: <input type="range"name="points" min="1" max="10" />
<input type="submit" />
</form>
</body>
</html>
11 input—required pattern--title正則
<!DOCTYPE HTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp" method="get">
國家程式碼：<input type="text" name="country_code"pattern="[A-z]{3}"
title="三個字母的國家程式碼" />
<input type="submit" />
</form>
</body>
</html>
12 email.checkValidity()--email—email驗證
<!DOCTYPE html>
<meta charset=UTF-8 />
<title>checkValidity示例</title>
<scriptlanguage="javascript">
function check()
{
var email = document.getElementById("email");
if(email.value=="")
{
alert("請輸入Email地址");
return false;
}
else if(!email.checkValidity())
alert("請輸入正確的Email地址");
else
alert("您輸入的Email地址有效");
}
</script>
<form id=testform onsubmit="returncheck();">
<label for=email>Email</label>
<input name=email id=email type=email/><br/>
<input type=submit>
</form>
13 figure—image
<!DOCTYPE HTML>
<html>
<body>
<p>上海盧浦大橋是當今世界第一鋼結構拱橋，是世界上跨度最大的拱形橋。它也是世界上首座完全採用焊接工藝連線的大型拱橋（除合攏介面採用栓接外），現場焊接焊縫總長度達4萬多米，接近上海市內環高架路的總長度。盧浦大橋像澳大利亞悉尼的海灣大橋一樣具有旅遊觀光的功能。</p>
<figure>
<p>黃浦江上的的盧浦大橋</p>
<p>拍攝者：W3School 專案組，拍攝時間：2010 年 10 月</p>
<img src="/i/shanghai_lupu_bridge.jpg"width="350" height="234" />
</figure>
</body>
</html>
13 cavas--- fillstyle—file—strokeStyle –linewidth—stokeRect(畫矩形邊框)-canvas.getContext('2d');context.fillStyle context.fillRect context.strokeRect
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素示例</title>
<script type="text/javascript"src="script.js"></script>
</head>
<body onload="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas"width="400" height="300" />
</body>
</html>
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF"; //設定顏色
context.fillRect(0, 0, 400, 300); //畫正方形
context.fillStyle = "red"; //顏色
context.strokeStyle = "blue"; //邊框顏色
context.lineWidth=1;//邊框線寬度
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
}
14 cavas---arc—beginPath()畫圖為連續的圓環—用for迴圈
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for(var i = 0; i < 10; i++)
{
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 0.05)';
context.fill();
}
}
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
引數值
|
引數 |
描述 |
|
x |
圓的中心的 x 座標。 |
|
y |
圓的中心的 y 座標。 |
|
r |
圓的半徑。 |
|
sAngle |
起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。 |
|
eAngle |
結束角，以弧度計。 |
|
counterclockwise |
可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。 |
beginPath() 方法開始一條路徑，或重置當前的路徑。
15 cavas—無beginpath—closepath會把前面的園重畫，導致顏色變深
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for(var i = 0; i < 10; i++)
{
// context.beginPath(); context.closePath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.fillStyle = 'rgba(255, 0, 0, 0.05)';
context.fill();
}
}
16 cavas—組合太陽花
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for(var i = 0; i < 30; i++)
{
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo( dx + x * s,dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
17 vedio視訊播放
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8"></meta>
<title>媒體播放示例</title>
<script>
var video;
function init()
{
video = document.getElementById("video1");
//監聽視訊播放結束事件
video.addEventListener("ended", function()
{
alert("播放結束。");
}, true);
// 發生錯誤
video.addEventListener("error",function(){
switch (video.error.code)
{
case MediaError.MEDIA_ERROR_ABORTED:
alert("視訊的下載過程被中止。");
break;
case MediaError.MEDIA_ERROR_NETWORK:
alert("網路發生故障，視訊的下載過程被中止。");
break;
case MediaError.MEDIA_ERROR_DECODE:
alert("解碼失敗。");
break;
case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
alert("不支援播放的視訊格式。");
break;
default:
alert("發生未知錯誤。");
}
},false);
}
function play()
{
// 播放視訊
video.play();
}
function pause()
{
//暫停播放
video.pause();
}
</script>
</head>
<body onload="init()">
<!—可以新增controls屬性來顯示瀏覽器自帶的播放用的控制條。 -->
<video id="video1" src="test.ogv">
</video><br/>
<button onclick="play()">播放</button>
<button onclick="pause()">暫停</button>
</body>
</html>
2 Js 基礎
相關文章
- 學習HTML教程(轉)HTML
- HTML5開發學習教程，學習HTML5還是學習HTML5的製作工具?HTML
- HTML學習HTML
- Html學習一HTML
- HTML學習-2HTML
- HTML學習(3)(HTML字元格式)HTML字元
- HTML5培訓教程學習之動效製作HTML
- HTML學習總結HTML
- HTML基礎學習HTML
- Web前端學習——HTMLWeb前端HTML
- HTML學習 -- (三)CSSHTMLCSS
- html position的學習HTML
- HTML 學習待續HTML
- 【HTML】01初始學習HTML
- HTML學習筆記HTML筆記
- web前端教程之HTMLCSS學習筆記HTML5基礎Web前端HTMLCSS筆記
- HTML5大前端學到什麼程度可以拿高薪？HTML5學習教程限時贈送HTML前端高薪
- 學習HTML5還是學習HTML5的製作工具?HTML
- HTML5 Geolocation學習HTML
- HTML學習筆記1HTML筆記
- 【學習筆記】HTML篇筆記HTML
- 全部HTML程式碼學習HTML
- html學習(常用屬性)HTML
- 學習Shell 教程
- 學習react教程React
- Mysql學習教程MySql
- 教程：JS學習JS
- PG 學習教程
- HTML學習記錄（2）（HTML常用標籤）HTML
- kitten 學習教程(一) 學習筆記筆記
- HTML5 學習小結HTML
- HTML5學習筆記HTML筆記
- HTML&CSS學習筆記HTMLCSS筆記
- 前端學習之HTML-1前端HTML
- HTML5 快速學習一HTML
- OSSEC 學習教程一
- Gradle 教程學習Gradle
- Html5學習系列（一）認識HTML5HTML