HTMLの共通要素と理解

headの要素

• meta
• title
• style
• link
• script
• base

bodyの要素

• div/section/article/aside/header/footer
• パラグラフ p
• インライン要素 span/em/strong
• テーブル要素 table/thead/tbody/tr/td
• リスト要素 ul/ol/li/dl/dt/dd
• リンク a
• フォーム要素 form/input/select/textarea/button

重要な属性の理解

• メタ

  <meta charset="utf-8">

  基本的にutf-8はすべての文字を含みます。

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

  モバイル対応の第一歩：ビューポートの追加

  ビューポートビューポート

  width=デバイス幅 Viewport width=デバイス幅

  initial-scale=1.0 スケーリングを1に初期化します。

  maximum-scale=1.0 最大スケール1

  user-scalable=no ユーザーはスケーリングできません。

• 野菜

  <base href="/">

  すべてのパスを計算する基準となるパスを指定します。

• a

  a[href,target]

  targetはターゲットURLを開く場所を指定します。href属性が存在する場合のみ使用されます。

  よく使われる表現： _self default, _blank open in new window

• 写真

  form[action,target,method,enctype]。

  action: フォームが送信されたときのフォームデータの送信先を指定します。

  target：アクションのURLを開く場所を指定します。

  メッセージ:submit get/post

  enctype: フォームデータをサーバに送信する際のエンコード方法を指定します。主なタイプは urlencoded(テキストを送信)/form-data(エンコード後にデータを送信、ファイルをアップロード可能) です。

• ラベル

  label[for]

  <label for="radio1"></label>radio1はラジオボックスのIDです。

  for "属性はラベルを他の要素に束縛します。for属性の値には、当該要素のid属性の値を設定してください。

• input type="radio"

  同じ名前のものしか選べません。

HTML

HTMLはアウトラインのある文書です。

構造化ドキュメントを見る:h5o.github.io/

意味的に構造化されていない文書を書かないようにしましょう。

HTML

• HTML4/4.01 SGML
• XHTML/XML（拡張可能な厳密マークアップ言語）
• HTML5 HTML4

HTMLの記述構文をテストするためのウェブサイト

validator.w3.org/

HTML5新機能

新しいブロックラベル

• section
• article
• nav
• aside

ASIDE以外はシラバスに掲載します。

フォーム強化

• 日付、時刻、検索
• フォームバリデーション
• プレースホルダ オートフォーカス

付加的意味論

• header/footer
• section/article
• nav
• aside 重要でないコンテンツ/サイドバー
• em/strong
• i icon

HTML要素の分類

デフォルトのスタイル

• ブロック・レベル・ブロック

  正方形でなければなりません。

• インライン/インライン

  ライン全体を占めるわけでもなく、必ずしも規則的な形をしているわけでもありません。

• インラインブロック

  外部的にはインラインのように1行を占有せず、内部的にはブロックのように幅と高さを持ちます。

コンテンツ別

• ドキュメントの流れに影響を与えるフロー
• Metadata
• Heading
• Sectioning
• Interactive
• Embedded
• Phrasing

HTML要素の入れ子関係

どの要素を他の要素の中に含めることができるかを学びます。

• ブロックレベル要素はインライン要素を含むことができます。

• ブロックレベル要素がブロックレベル要素を含むとは限りません。

  divはdivの中に含めることができます。

  セクションには div を含めることができます。

  pにdivを含めることはできません。

• インライン要素にブロックレベル要素を含めることはできません。

  特殊なケース: a 要素は、その中にブロックレベル要素を含むことができます。

HTML要素のデフォルトスタイルとリセット

CSS Reset

/* http://.////et/ 
 v2.0 | 
 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

シンプルだが、物議を醸す記事：

*{
 margin:0;
 padding:0;
}

多分、' * ' はパフォーマンス上の問題が発生しやすいのでしょう。

1. Doctypeの意味とは？

   • ブラウザを標準モードでレンダリング
   • その目的は、Standard Generalised Markup Languageパーサに、文書を解析するためにどのような文書型定義を使うべきかを伝え、ブラウザに要素の正当性を知らせることです。

2. HTML、XHTML、HTML5の関係は？

   • HTMLSGMLに属します
   • XHTMLはXMLに属し、HTMLをXMLが厳格化したものです。
   • HTML5はSGMLやXMLの一部ではなく、XHTMLよりも緩やかで、別の仕様です。

3. HTML5で何が変わったのですか？

   • セマンティック化された新要素：section,article,aside,footer,nav...
   • フォームの強化
   • 新しいAPI
   • 分類と入れ子の変更

4. emとiの違いは何ですか？

   • 類似点：デフォルトのスタイルはイタリック体

   • 違い：emはセマンティック化されたタグ、表は強調表示

     i は純粋にスタイル化されたラベルで、イタリック体のテーブルです。

   • H5 i の使用は推奨されず、通常はアイコンとして使用されます。

5. セマンティック化の意義とは？

   HTML5のセマンティクスとは、divを乱用するのではなく、直感的にラベルの役割を知ることができるラベルから、ヘッダー、フッター、ナビなどのページ構造を作成するための合理的で正しいセマンティックタグの使用を指します。

   • 明確な構造、読みやすさ、開発と保守のしやすさ
   • 機械は簡単に構造を理解し、ページをレンダリングします。
   • semantic microdata
   • セマンティックマイクロデータ

6. 自己閉塞する要素は？

   これらの要素はXMLではバックスラッシュされるべきですが、H5ではバックスラッシュなしで使用できます。

   • img
   • br hr
   • br hr
   • メタリック

7. HTMLDOMとの関係は？

   • HTMLは「死んだ」のです。
   • DOMはHTMLから解析されたもので、ツリー構造になっています。
   • JSはDOMを維持することができます

8. プロパティと属性の違い

   • 直訳すれば、どれも不動産を意味します。
   • プロパティとは、DOMのプロパティのことで、JavaScriptでは生きているオブジェクトのことです；
   • 属性はHTMLタグの機能で、その値は文字列のみです。

9. フォームは何をするものですか？

   • submitの使用/resrt
   • 送信/リセットボタンの使用
   • ブラウザフレンドリーなフォーム保存
   • サードパーティライブラリは、値を全体として抽出することができます。
   • サードパーティライブラリはフォームバリデーションを実行できます。