HTML5プロフェッショナル認定試験Level1【HTML】

## &lt;!DOCTYPE html&gt;について
- HTMLの先頭に記述する要素
- ブラウザが広報互換モードになるのを防ぐ
- 大文字小文字どちらでも記述可

## 文字実体参照
<details><summary><</summary>

`&lt;`
</details>
<details><summary>></summary>

`&gt;`
</details>
<details><summary>&</summary>

`&amp;`
</details>
<details><summary>"</summary>

`&quot;`
</details>
<details><summary>¥</summary>

`&yen;`
</details>
<details><summary>半角スペース</summary>

`&nbsp;`
</details>

## meta要素
#### name属性の値
<details><summary>author</summary>

webページの作成者名
</details>
<details><summary>description</summary>

webページの説明
</details>
<details><summary>keywords</summary>

webページのコンテンツに関するキーワードをカンマ区切りで指定
</details>
<details><summary>robots</summary>

検索エンジンに関する設定。リンクを辿る可否、indexの作成の可否などを指定
</details>

## head要素
head要素の子要素
<details><summary>base</summary>

相対URLの起点となるURLを設定
</details>
<details><summary>meta</summary>

webページに関する要素を設定
</details>
<details><summary>style</summary>

cssスタイルの記述
</details>
<details><summary>title</summary>

webページのタイトル
</details>
<details><summary>link</summary>

外部リソース（cssファイルなど）とのリレーション設定
</details>

## マイクロデータ
HTMLに機会が識別可能なデータを埋め込み、検索エンジン対策等で使用する。
```html
<div itemscope itemtype="http://hoge.com">
    <p itemprop= "name" >ほげ</p>
    <p itemprop= "email" >hoge@mail.co.jp</p>
</div>
```
属性
<details><summary>itemscope</summary>
マイクロデータの適用範囲。itemtypeと共に定義する。
</details>
<details><summary>itemtype</summary>
マイクロデータの語彙を指定。
</details>
<details><summary>itemprop</summary>
アイテムのプロパティ名
</details>
<details><summary>itemid</summary>
アイテムを表す、一意のid
</details>
<details><summary>itemref</summary>
itemscope属性の子孫要素ではないプロパティをアイテムと関連付ける。
</details>

## Ajax
- 非同期通信でサーバーとのやり取りを行い、動的なページの書き換えを行える。
- ブラウザのバックグラウンドで、非同期通史を行え、ブラウザの処理と並行して、サーバー通信ができる。
- 主に使用されるデータ形式は「json, xml」

## セッション
- Webサーバーがブラウザ単位で状態を保持できる。（ステートフル）
- Webサーバーから送られてくるセッションIDをクッキーに保存。クライアントからWebサーバーにリクエストする時に、セッションIDも送る。サーバーはクライアントから送られてきたセッションIDを基に、ブラウザを一意に識別する。

## MVC
- Model...業務処理、データを担当
- View...画面表示
- Controller...Model, Viewへの操作を振り分ける

## Webで扱える画像フォーマット
<details><summary>BMP</summary>

- 通常圧縮しない
- 透過×
- Windows標準の画像フォーマット
- 圧縮されない分、画像の劣化はないが、サイズが大きくなる（Webサイトでは不適切）
</details>
<details><summary>GIF</summary>

- 可逆圧縮
- 透過⚪︎
- 256色扱える
- アニメーションの表現可
- ファイルサイズは比較的小さい
- 色数の少ないロゴ、イラストで使用
</details>
<details><summary>JPEG</summary>

- 非可逆圧縮
- 透過×
- 1670万色のフルカラー対応
- 圧縮率が高く、ファイルサイズを小さくすることが可能だが、解凍後の画像は元画像より劣化する
</details>
<details><summary>PNG</summary>

- 可逆圧縮
- 透過⚪︎
- GIFの代替として開発された
- W3C推奨
- アニメーション不可
- 圧縮後の劣化がない
</details>
<details><summary>SVG</summary>

- ベクター画像を扱うフォーマット
- 計算式で画像を表現
- その為、画像を拡大・縮小しても劣化しない（PC・スマホで同質の画像を表示）
- 写真等の多彩な色を扱うには不向き
- ロゴ・図形・アイコンに適切
- XMLベースで良い
</details>

## W3C と WHATWG

<details><summary> W3C（World Wide Web Consortinum）</summary>

- Web関連技術の標準化団体
- CSSの標準化も行う
- DOM・HTML・CSSなどの標準化
</details>
<details><summary>WHATWG（Web Hypertext Application Technology Working Group）</summary>

- 2004年設立
- HTMLの標準化団体
    - 現在はHTML5等のバージョン管理ではなく、HTML Standard、バージョンをLiving Standardとした。
</details>

W3CとWHATWGが共同で行なっている仕様策定は、「DOM・HTML」
2019年以降に「DOM・HTML」の仕様を統一し、共同開発している。

<details><summary>IETF</summary>

- HTTPの標準化を行なっている団体
</details>
<details><summary>Ecma international</summary>

- javascriptの標準化を行なっている団体
</details>

## HTTP/1.1　HTTP/2
<details><summary>HTTP/2</summary>

- HTTP/1.1と比較して通信速度が高速、効率化されている。
- HTTP/1.1との互換性がある。
- 通信が1つのTCPコネクション内で行われる。
    - HTTP/1.1はラウンドトリップ（リクエストとレスポンス）毎にクライアント、サーバー間にTCPコネクションを行なっているが、HTTP/2では複数のラウンドトリップをまとめて扱う。（IDで管理）
- HTTPヘッダの圧縮
    - HTTP/1.1では、リクエストする度にヘッダ情報も送信していたが、HTTP/2では、HTTPヘッダをHPACKで圧縮して、通信効率を向上させている。
- サーバープッシュ
    - リクエストが届かない場合でも、サーバー側からHTTPレスポンスを送信できる。後に必要なコンテンツ等をサーバーから前もって送信することで、クライアントの待機時間を減らせる。
</details>
<details><summary>HTTP/1.1</summary>

- パイプライン機能でTCPコネクションを最大6重にすることで、通信の高速化を図っている。
- 通信は平文
- HTTPメソッドとして、OPTIONSとTRACEがHTTPヘッダとして、Hostが追加された。
</details>