<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
|
<nav>
<ul>
<li><a href="/">メイン</a></li>
<li><a href="/category1">カテゴリ1</a></li>
</ul>
</nav>
<article>
<h1>大見出し</h1>
<section>
<h2>中見出し1</h2>
<p>内容</p>
</section>
<section>
<h2>中見出し2</h2>
<p>内容</p>
<aside>
<h3>補足1</h3>
<p>補足内容</p>
</aside>
</section>
</article>
|
<div itemscope> <p>私の名前は<span itemprop="name">山田太郎</span>です。</p> </div> |
<div itemscope itemtype="http://data-vocabulary.org/Review" > <h1>Review: <span itemprop="itemreviewd">L'Amourita Pizza</span></h1> Written by <span itemprop="reviewer">Bob Smith</span> <time itemprop="dtreviewd" datetime="2010-01-15">Jan 15, 2010</time> Rated <b itmprop="rating">4.5</b> - Excellent </div> |
<fieldset> <legend>各種type属性</legend> <p><label for="search">search：</label><input type="search" name="search" id="search" /></p> <p><label for="tel">tel：</label><input type="tel" name="tel" id="tel"/></p> <p><label for="url">url：</label><input type="url" name="url" id="url" size="50" /></p> <p><label for="email">email：</label><input type="email" name="email" id="email" multiple="true" /></p> <p><label for="number">number：</label><input type="number" name="number" id="number" min="-10" max="10" step="2" /></p> <p><label for="range">range：</label><input type="range" name="range" id="range" /></p> <p><label for="color">color：</label><input type="color" name="color" id="color" /></p> <p><label for="date">date：</label><input type="date" name="date" id="date" /></p> <p><label for="datetime">datetime：</label><input type="datetime" name="datetime" id="datetime" /></p> <p><label for="datetime-local">datetime-local：</label><input type="datetime-local" name="datetime-local" id="datetime-local" /></p> <p><label for="time">time：</label><input type="time" name="time" id="time" /></p> <p><label for="month">month：</label><input type="month" name="month" id="month" /></p> <p><label for="week">week：</label><input type="week" name="week" id="week" /></p> </fieldset> |
<fieldset>
<legend>その他属性</legend>
<p>
<label for="list">list：</label><input type="text" list="browsers" name="list" id="list"/>
<datalist id="browsers">
<option value="IE" />
<option value="Firefox" />
<option value="Opera" />
<option value="Chrome" />
<option value="Safari" />
</datalist>
</p>
<p><label for="required">required：</label><input type="text" name="required" id="required" required /></p>
<p><label for="pattern">pattern：</label><input type="pattern" name="pattern" id="pattern" pattern="[a-zA-Z]*"/></p>
<p><label for="placeholder">placeholder：</label><input type="text" name="placeholder" id="placeholder" placeholder="input your name" /></p>
<p><label for="autofocus">autofocus：</label><input type="text" name="autofocus" id="autofocus" autofocus /></p>
<p><input type="submit" name="submit" /></p>
</fieldset>
|
<video width="640" height="360" controls> <source src="test.mp4" type="video/mp4" /> <source src="test.webm" type="video/webm" /> <source src="test.ogv" type='video/ogg" /> </video> |
<audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> </audio> |
<canvas id="sample" width="300" height="200" />
<script>
var canvas = document.getElementById("sample");
var context = canvas.getContext("2d");
// 四角形
context.strokeStyle = "#666666";
context.strokeRect(10, 10, 100, 100);
// 三角形
context.beginPath();
context.strokeStyle = "#0000FF";
context.moveTo(50, 20); // 頂点を指定
context.lineTo(20, 60); // 左下
context.lineTo(80, 60); // 右下
context.closePath();
context.stroke();
// 円
context.beginPath();
context.arc(120, 90, 30, 0, Math.PI*2, false);
context.stroke();
context.fillStyle = "#FF9933";
context.fill(); // 塗りつぶす
</script>
|
<!DOCTYPE html>
<html lang="ja">
<body>
<article>
<h1>SVG</h1>
<svg width="270" height="180" style="border: 1px solid #eee; background: #fff">
<circle cx="135" cy="90" r="30" style="fill: #b22">
<animate attributeType="XML" attributeName="r"
dur="3s" values="30;60;30" repeatCount="indefinite"/>
</circle>
</svg>
</article>
</body>
</html>
|
| chache.manifest ファイル |
|---|
CACHE MANIFEST hello.html hello.js |
| HTML |
<!DOCTYPE html> <html manifest="chache.manifest"> |
var file = event.dataTransfer.files[0];
// var file = document.getElementById("file").files[0];
var fileInfoElement = document.getElementById("fileinfo");
fileInfoElement.innerHTML = "ファイル名:" + file.name
+ " サイズ:" + file.size + " タイプ:" + file.type;
var reader = new FileReader();
reader.onload = function() {
document.getElementById("image").src = reader.result;
}
reader.readAsDataURL(file);
|
| 送信側 |
|---|
var destFrame = document.getElementById("destFrame");
destFrame.contentWindow.postMessage("メッセージ本体", "http://dest.example.com");
|
| 受信側 |
window.addEventListener("message", function(e) {
if (e.origin == "http://src.example.com") {
var data = e.data; // メッセージはdataプロパティに入っている
}
}, false);
|
| UI側 |
|---|
var worker = new Worker("worker.js");
worker.onmessage = function(event) {
alert("Workerからのメッセージ：" + event.data);
};
worker.postMessage("start");
|
| Worker側(worker.js) |
<script>
onmessage = function(event) {
if (event.data == "start") {
// 時間がかかる処理
}
postMessage("finish");
}
</script>
|
var source = new EventSource(url);
source.onmessage = function(event) {
alert(event.data);
}
|
| サーバ側からのレスポンス(Content-Type:text/event-stream) |
|---|
data: xxxx data: xxxx data: xxxx(複数行のデータを送りたい場合は2行で書く) |
var webSocket = new WebSocket("ws://example.com:10081/");
webSocket.onopen = function() {
webSocket.send("Hello"); // 送信
};
// 受信
webSocket.onmessage = function(event) {
alert(event.data);
};
webSocket.onclose = function() {
alert("closed");
};
|
// 設定
localStorage.key1 = "サンプル";
localStorage.setItem("key2", "サンプル");
// 参照
localStorage.key1;
localStorage.getItem("key2");
// 削除
delete localStorage.key1;
localStorage.removeItem("key2");
// 全て削除
localStorage.clear();
|
// DBオープン
var db = openDatabase("db_name", "db_version", "DBの表示名", 1024*1024);
db.transaction(function(tx) {
tx.executeSql("select * from test", [], function(tx, rs) {
var rows = rs.rows;
for (var i = 0, length = rows.length; i < length; i++) {
// 1レコードの内容取得(カラム名がプロパティとなったオブジェクト)
var row = rows[i];
}
}
});
|
<p data-length="2m11s">Beyond The Sea</p>
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">
|
<div id="editable" contenteditable="true"> <h1>タイトル</h1> <p>内容</p> </div> |
var element = document.querySelector("#foo, #bar");
var elements = document.querySelectorAll("p.warning, p.error");
|
history.pushState(null, "new page", "/new.html"); history.pushState(null, "replace page", "/replace.html"); |
navigator.geolocation.getCurrentPosition(function(position) {
alert("緯度:" + position.coords.latitude + " 経度:" + position.coords.longitude);
});
|