HTML5プロフェッショナル認定試験の勉強(自分用)

風見聡 @kazami7

10月28日、HTML5 W3C正式勧告。私もWebの末端で食べさせていただいている者として、そろそろ本腰を入れて勉強しなければなりません。「HTML5プロフェッショナル認定試験」合格を目指したいと思います。目標は来年1月下旬。小説のための勉強は後回しになります。まずは手に職。

風見聡 @kazami7

HTML5勉強中。sectionの概念は分かりにくいが、要するに、これまでh1-h6で見出しを付け、ページ内の構造を組み上げていたのを、明示的にしただけであるのか。headerとnav、footer、又はarticleもこれまでdivで作っていたのを置き換えただけであるのか。

風見聡 @kazami7

HTML5勉強中。blockquote cite="" は段落での引用、qタグは文中の引用。dfnは言葉の定義。abbrは略語の説明。codeはソースコード、varは変数、sampは出力結果、kbdはキー入力。adressは連絡先。smallは注釈。subは下付き文字(co2等)

風見聡 @kazami7

HTML5勉強中。supは上付き文字(2乗等)。iは専門用語・他言語。citeは作品名。strongは重要性、emは強勢、bは重要性のない区別、uは固有名詞やスペルミス、markは重要性のないハイライト。ruby,rt,rpはルビ。※rp ( /rp。bdiは右横書き。

風見聡 @kazami7

HTML5勉強中。bdo dir=ltrは右横書き。※bdiと使用法異なる。wbrは英文等の折り返し。insは追記箇所、delは訂正箇所、sは不正確な情報。※datetime指定可。embed src,typeは動画・音声。object data,paramは外部ファイル埋込み。

風見聡 @kazami7

HTML5勉強中。video srcは動画・音声の埋込み、controles,autoplay,loop属性。※要閉じタグ、posterで代替画像。audioは音声。＋sourceで複数ファイル指定可。trackは字幕・キャプション※vttファイル指定。

風見聡 @kazami7

HTML5勉強中。videoはHTML5対応ブラウザ用、embedはプラグイン必要で代替文なし、汎用性ではobject＋embed。canvasは描画。※idを付けjavascriptで動かす。mapはクリッカブルマップ、area shape,coords,hrefでリンク指定。

風見聡 @kazami7

HTML5勉強中。colgroupは表の縦列をグループ化。colはcolgroup内で使う。どちらもclass可。tfootは表内フッタ。scope=colgroupは複数列にまたがる縦列に使う。php連携:form action=phpのURL。methot=get,post。

風見聡 @kazami7

HTML5勉強中。PHP連携:form enctype=データ形式。※画像等はmultipart。nameはフォーム名。accept-charsetは文字コード。autocompleteは入力補完。novalidateはバリデーション無効。fieldsetはformのグループ化。

風見聡 @kazami7

HTML5勉強中。PHP連携:fieldset配下のlegendでグループのキャプション。labelは項目名。form配下のinputは様々な入力欄。buttonは送信ボタン。select+optionで選択ボックス。align, valignは廃止。(重要)

風見聡 @kazami7

HTML5勉強中。optgroupで選択ボックスをグループ化。textareaにautoforcus, maxlength, required等が追加。keygenはフォームの公開鍵暗号化。outputは計算結果。progressは進捗バー表示。meterは横棒グラフ。

風見聡 @kazami7

HTML5勉強中。input type="text" list="id" + datalist id="id" option で入力候補の選択。※selectと用途違う。○ディスクロージャーウィジェット=javascriptで実装していたアコーディオンメニュー等のようなUI

風見聡 @kazami7

HTML5勉強中。 details + summaryはアコーディオンメニュー。※open属性で開いた状態。 menu type=toolberはツールバーメニュー、 type=popupはポップアップメニュー。 dialogはダイアログボックス表示。open属性でブラウザ表示。

風見聡 @kazami7

HTML5勉強中。廃止されたタグ: acronym applet basefont big center dir font frame isindex strike tt blink noembed nobr

風見聡 @kazami7

HTML5勉強中。廃止された属性: background bgcolor text link vlink alink clear align valign size noshade scrolling hspace vspace td+width,height nowrap 等

風見聡 @kazami7

HTML5勉強中。セマンティックWeb＝Microdata等の文法をHTMLに埋め込み、人名、連絡先等の属性の記述(メタデータ)により、区別させる手法。itemscope itemtype＝schemaのURL、itemidはグローバルアドレス、+itemprop=情報の属性。

風見聡 @kazami7

HTML5勉強中。RDFaの場合。vcabはschemaのURI、typeofは情報の括りのデータ型、pefixはその他の属性、resourceはid + propertyは個別の情報の属性。schemaには大手ベンダー策定のschema.orgを使う。

風見聡 @kazami7

HTML5勉強中。カスタムデータ属性＝データ検索等のため独自の属性をHTML内に埋め込む。data-id、data-name等。 data URI＝画像等のデータをBase64形式の文字列化して記述し、参照時のHTTPリクエストを減らす。data:MIME;base64./xxx

風見聡 @kazami7

CSS3勉強中。・色透明 color:transparent ・色+透明度 color:rgb(255,255,0,0.5) ・色相環+彩度+明度+透明度 color:hsla(120,100%,75%,0.5) ・透明度 opacity:0.5・直近の子要素のみ適用 a > b

風見聡 @kazami7

CSS3勉強中。・次の要素に適用 a+b。・後続の要素全てに適用 a~b。・指定属性の値を持つ要素に適用 a[scope="col"] ・指定属性の値から始まる要素に適用 a[href^="http"] ・指定属性の値で終わる要素に適用 a[href$=".html"]

風見聡 @kazami7

CSS3勉強中。・指定文字が含まれる属性値の要素に適用 a[href*="info"] ・文字、画像を要素の前に追記 a::before{content:url(icon.gif);} ※要素後はafter:: ・最初の子要素に適用 a:first-child ※最後はlast

風見聡 @kazami7

CSS3勉強中。・各アンカーのリンク先の要素に適用 a:target ・使用可の要素に適用 button:enabled ※不可はdisabled ・チェックされた要素に適用 input:checked ・n番目の子要素に適用 a:nth-child(n) ※最後からはlast

風見聡 @kazami7

CSS3勉強中。・特定種類のn番目の子要素に適用 a:nth-of-type(n) ※最後はlast-of ※-ofの有無は共通 ・兄弟要素を持たない子要素に適用 a:only-child ・子要素のない要素に適用 :empty ・条件を満たさない要素に適用 :not(***)

風見聡 @kazami7

HTML5勉強中。pの閉じタグは省略可、divは省略不可。html,head,body,metaは省略可。titleは省略不可。style srcは誤り。headerはセクションでなく、アウトライン(構造)に影響しない。tdはセクショニングルート(独立)、preは違う。

風見聡 @kazami7

CSS3勉強中。角丸 border-radius:10px ※ボックスの横幅はwidth+border+padding →ボックス余白無効 box-sizing:border-box インラインブロック display:inline-block ※img,videoは初期値