HTML5の覚書

タグとエレメントの違い
タグとは<div>,<br>などを指す。

エレメントとは開始タグ、内容、終了タグからなる構成物全体を指す。「要素」とも呼ぶ。
<div>～</div>　←これらの一連の構成をエレメントまたは要素と呼ぶ。
新しいページで開く
属性に「target="_blank"」を記述。 
	<A HREF="リンクするページのURL" target="_blank">TOPページ</A>
chromeによる自動翻訳をさせない。
metaタグに以下を追加すればよい。 
	<meta name="google" content="notranslate" />
ローカルストレージについて
◇クッキーとローカルストレージとの違い
CookieWebStorage
サイズは1サイト4KBまでサイズ制限なし
データはHTTPリクエストに付加され送信される付加されない
有効期限を指定できる。有効期限は指定できない
JavaScriptのオブジェクトは格納できないJavaScriptのオブジェクトも格納できる。


◇ローカルストレージの値がクリアされる条件。
履歴削除。
セッションストレージはWindowsオブジェクトと同じ生存期間。
クロスドメイン通信を許可する。（PHPファイル）
	header("Access-Control-Allow-Origin:*");//クロスドメイン通信を許可する。
TEST
テスト 
	
■■機能説明
■公式説明サイト
http://www.htmq.com/html5/

■参考サイト（ブラウザごとの対応状況）
http://www.findmebyip.com/litmus/





■新タグ
figure 〔要素のグループ化〕
	図や文章でまとまったデータをグループ化する。
	ブロック要素の意味合いが強い。内部にlegend要素を入れておくルールがある。
	<div>要素と役割がかぶるため、利用するかどうかは不明
img〔画像の埋め込み〕
iframe〔インラインフレーム〕
	基本は従来のと同じ
	廃止された属性と新属性がある。
		◇新属性を一部紹介
		seamless属性
		フレーム内のコンテンツを親ページの一部のように表示
		sandbox属性
		フレーム内のコンテンツの表示に制限を加える（allow-same-origin・allow-forms・allow-scripts）
embed〔マルチメディアの埋め込み〕
	プラグインを必要とするコンテンツを埋め込む。（Flash,PDF,mpeg,QuickTime,Wave,midといろいろある。）
object〔オブジェクトの埋め込み〕
	<object>タグで指定された外部リソースは、データのタイプにより、 画像、入れ子の閲覧コンテンツ、プラグインで処理されるデータのいずれかとして扱われます。
	embed,imgなどを合わせたようなタグ。何でもタイプ。

param〔パラメータ〕
	<param>タグは、<object>～</object>の中に子要素として配置
	type属性・valuetype属性は廃止。
video 〔動画の埋め込み〕
	動画を埋め込む。
	例：
		<video>
		<source src="sample.mp4">
		<source src="sample.ogv">
		<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
		</video>
audio 〔音声の埋め込み〕
	音声再生。音量調節ガシェットのようなのが表示される。

source 〔メディアリソース〕
	video,audoの子要素
canvas 〔グラフィック〕
	動的に図を書くことが可能。
map〔イメージマップの定義〕
	地図を表示する。
	一応従来からある。
area〔イメージマップ領域〕
	イメージマップにハイペーリンクを設定
	一応従来からある。
ruby
	前から一部のブラウザに存在したが今回HTML５では標準の仕様になった。
	漢字の上に小さい文字でルビをふることができる。
		例
			<ruby>
			漢<rt>かん</rt>
			字<rt>じ</rt>
			</ruby><br>
<wbr>
	改行して良い位置に指定。ワードブレイク効果



◇DIV系の新要素
<section> …… 一つのセクションであることを示す
	<div>と同じ。任意で情報を区分するためだけのもの
<nav> ………… ナビゲーションであることを示す
	<div>と同じ。メニュー系に利用する。
<article> …… 記事であることを示す
	<div>と同じ
<aside> ……… 余談・補足情報のセクションであることを示す
	<div>と同じ
<hgroup> …… セクションの見出しを表す、見出しをまとめる
	<div>と同じ
<header> ……ヘッダであることを示す
<footer> …… フッタであることを示す
	<div>と同じ
<time> ……… 日付や時刻を正確に示す
	<span>と同じ
	日付が表示されるわけではないマナー的なもの。別システムが何らかの目的で利用
<mark> ……… 文書内の該当テキストを目立たせる
	spanと同じ
	文章中の特定ワードを際立たせたい場合に用いる。<b>や<strong>のような効果があるわけではない。


■テーブル系
<table> …… テーブル（表）を作成する
	table要素には、HTML4.01ではborder属性・cellpadding属性・cellspacing属性・frame属性・rules属性・width属性が用意されていました。 HTML5ではこれらの属性は廃止され、summary属性のみが残されています。
<caption> …… テーブル（表）にキャプションをつける
	HTML4.01では、caption要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。 HTML5では、caption要素のalign属性は廃止されています。 揃え位置の指定にはCSSを使用してください。
<colgroup> …… 表の縦列をグループ化する
	colgroup要素は、HTML5ではalign属性・char属性・charoff属性・valign属性・width属性が廃止され、 span属性だけが残されています。
<col> …… 表の縦列の属性やスタイルを指定する
	align属性・char属性・charoff属性・valign属性・width属性が廃止
<tbody> …… テーブル（表）のボディ部分を定義する
<thead> …… テーブル（表）のヘッダ部分を定義する
<tfoot> …… テーブル（表）のフッタ部分を定義する
	thead要素・ tbody要素・ tfoot要素には、HTML4.01ではalign属性・char属性・charoff属性・valign属性が用意されていました。 HTML5ではこれらの属性は廃止され、要素固有の属性はありません。

	また、HTML4.01では、<tfoot>は<tbody>よりも前に配置することになっていましたが、 HTML5では、<tbody>と<tfoot>の配置位置はどちらでも良いことになっています。 <tfoot>を<tbody>の前に配置しても、ブラウザ上ではフッタ部分はテーブルの最後に表示されます。
<tr> …… テーブル（表）の横一行を定義する
<td> …… テーブル（表）のデータセルを作成する
<th> …… テーブル（表）の見出しセルを作成する

■INPUT系
<label>input系フォーム部品にラベルを付けられる
<input type="search"> …… 検索テキストの入力欄を作成する
	検索専用テキストボックス。	ちょっとした機能がついている。
<input type="tel"> …… 電話番号の入力欄を作成する
	現状ではtextとあまり変わらず
<input type="url"> …… URLの入力欄を作成する
	基本テキストと同じ。入力された値が「http://」で始まる妥当な絶対URLでは無い場合にバリデーションが働くようです
<input type="email"> …… メールアドレスの入力欄を作成する
	基本textと同じ。 入力された値にアットマーク（ @ ）を含む妥当なメールアドレスでは無い場合にバリデーションが働くようです。
<input type="password"> …… パスワード入力欄を作成する
<input type="datetime"> …… 協定世界時による日時の入力欄を作成する
	基本text
<input type="date"> …… 日付の入力欄を作成する
	基本テキスト
<input type="month"> …… 月の入力欄を作成する
<input type="week"> …… 週の入力欄を作成する
<input type="time"> …… 時間の入力欄を作成する
<input type="datetime-local"> …… ローカル日時の入力欄を作成する
<input type="number"> …… 数値の入力欄を作成する
	★
	数値専用text
		文字列は入力できない。入力補助機能あり。

<input type="range"> …… レンジ入力欄を作成する
	アナログ調整型の新インターフェース。

<input type="color"> …… 色の入力欄を作成する
	基本text
<input type="file"> …… サーバーへファイルを送信する
	複数のファイル指定が可能になった。
<input type="submit"> …… 送信ボタンを作成する
	<form>に記述していた属性を、ボタン側にも記述できるようになった。
<input type="image"> …… 画像ボタンを作成する

<input autofocus> …… 入力欄にカーソルを当てて自動フォーカスする
	ページを表示した場合、自動的にフォーカスがあてられる。

<input placeholder> …… 入力欄に初期表示する内容を指定する
<input required> …… 入力必須であることを示す
<input pattern> …… 正規表現で入力値のパターンを指定する
<input min max> …… 入力できる最小値と最大値を指定する
<input step> …… 入力欄で刻むステップ値を指定する
<input autocomplete> …… 入力候補を提示して入力内容を自動補完する
<input multiple> …… 複数の値を入力・選択できるようにする




◇INPUT系の新属性

<input autofocus> …… 入力欄にカーソルを当てて自動フォーカスする
<input placeholder> …… 入力欄に初期表示する内容を指定する
<input required> …… 入力必須であることを示す
<input pattern> …… 正規表現で入力値のパターンを指定する
<input min max> …… 入力できる最小値と最大値を指定する
<input step> …… 入力欄で刻むステップ値を指定する。数値系用。
<input autocomplete> …… 入力候補を提示して入力内容を自動補完する
<input multiple> …… 複数の値を入力・選択できるようにする
	入力必須にする
list属性
	ユーザーに入力候補として提案するデータリストの要素を、その要素のid属性の値で指定する


◇その他　新入力系タグ
<datalist> …… 入力候補となるデータリストを定義する
<textarea> …… 複数行のテキスト入力欄を作成する
<keygen> …… フォーム送信時にキーを発行する
<output> …… 計算結果を示す
<progress> … タスク完了までの進行状況を示す
<meter> …… 規定範囲内の測定値を表す

◇ブラウザごとにばらつき
<details> …… 備考や操作手段などの詳細情報を示す
<summary> …… <details>の内容の要約を示す
<command> … 操作メニューの各コマンドを指定する
<menu> ……… 操作メニューを作成する

■基本系
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>サイトのタイトル</title>
		<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />


		<!-- HTML5 未対応ブラウザ　対策-->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->


	</head>
	<body>

		//ここにサイトに表示するコンテンツ内容を記述

	</body>
</html>

※HTML5では上記のlink要素のtype属性は省略可能です。また、style要素・script要素などのtype属性も省略可能です。

■Web Storage
HTML5 Web Storageは、簡単なキー／バリューのデータ構造を持つ永続ストレージです。
	Local StorageとSessionStorageがある。

■Local Storage
	Google Chromeに備わっているHTML5のlocalStorage機能を使うと、Javascriptのデータをブラウザに保存することができます。
保存した情報は、ブラウザを閉じても保持されます。

◇クッキーとの違い
	通信料削減
	セキュリティ向上。クッキーはリクエストのたびに送信するが、Local Starateはそうしない。
	タイムアウトによるデータ削除はない

◇スコープ
	Web Storage のスコープはオリジン（プロトコル、ドメイン、ポート）

◇スコープ範囲
LocalStorageは、サイト（オリジン）ごとに一意の永続領域で、同じサイト内の全てのWebページ／ウィンドウ間で共有され、永続化される期間は無制限です。


■SessionStorage
	SessionStorageは、ブラウザウィンドウごとの保存領域。
		タブ、ウィンドウ毎の保存領域で、ウィンドウを閉じるとSessionStarage内のデータも消えます。


■postMessage
・ウィンドウ(フレーム)間でメッセージの送受信
・HTML内にあるiframeに対してメッセージを送信することができます。
◇参考サイト
http://news.mynavi.jp/special/2009/html5-2/005.html

■Offline Applications
インターネットに接続していないオフラインの状態でも、 ユーザーがウェブアプリケーション（ウェブサイト）を利用できるようにするための機能

■Workers
	マルチスレッド


■Query Selector
	DOM関連。
	getElementById系のメソッドの強力版。JQueryと同様な使い方ができる。
	JQueryはQuery Selectorが使用かのであれば利用しているようだ。機能的にはJQueryがすぐれているかと思われる。
	処理速度としてはgetElementByIdが圧倒的に早い。ある検証サイトによれば15倍の差

	◇代表的なメソッド
	document.querySelectorAll("li")

■WebSQL Database
	恐らくDB関連。FireFox,IEでは未対応
	W3Cは今後開発しないと発言しているため無視。

■IndexDB Database
	全ブラウザで未対応

■Drag and Drop
	Operaのみ未対応
	要素をドラッグ＆ドロップで動かせる


■Hash Change
	ハッシュとは<a href="test.htm#no1">の「#no」の部分を指す。
	hashchangeは、ハッシュ部分が画面遷移（自己遷移）で変化した場合のイベントを検知できる。
	ブラウザの戻るボタンや進むボタンによるハッシュの変化も検知できる。


■History Management
	履歴関連？

■Canvas
HTML5のCanvasタグを使って、ゲームを作成することもできます。

■WebSockets
	新プロトコル。
		1接続で双方向通信
		HTTPヘッダーは利用しない
■Touch
	未対応

■GeoLocation
	緯度経度の取得や、地図表示を行えるらしい。