ホームページ > 記事 > ウェブフロントエンド > HTML5/CSS3関連の知識解説

HTML5/CSS3関連の知識解説

jackloveオリジナル: 2018-05-21 14:53:181277ブラウズ

htmlとcssを学ぶ上でいくつかの共通知識ポイントに遭遇しました。この記事ではそれらを詳しく説明します。

HTML5とは何ですか?新しい機能は何ですか?どのような新しいタグがありますか? IE の下位バージョンで HTML5 の新しいタグをサポートさせるにはどうすればよいですか?

HTML5 は HTML の 5 番目のメジャーリビジョンで、多くの冗長なタグが廃止され、多くの新しいタグが追加され、HTML がよりセマンティックになり、インタラクティブな機能がより豊富になりました。
HTML5 には多くの新機能があります:
1. より多くのセマンティックタグにより、Web ページの意味と構造が向上します。
2. ローカルストレージをサポートします。 Web APP は起動時間が短くなり、インターネット速度が速くなります
3. デバイスの互換性。外部アプリケーションはブラウザ内のデータに直接接続できます。たとえば、ビデオやオーディオはマイクやカメラと直接やり取りできます。 Server-Sent Event と WebSocket を実装し、ページベースのリアルタイムチャット、より高速な Web ゲームエクスペリエンス、より最適化されたオンラインコミュニケーションを可能にします
5. オーディオタグとビデオタグへの参照により、ページにマルチメディアコンテンツを埋め込むことができます
6。 -SVG と Canvas の次元、グラフィック、特殊効果の特性

新しいタグと変更点をいくつか紹介します

1. DOCTYPE について

//前の HTMLp> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">//HTML5

2. メタについて

// 前の HTML//HTML5

3. 新しいタグ

タグは、グラフやその他の画像などのグラフィックスを定義します。このタグは JavaScript の描画 API に基づいています
audio はオーディオコンテンツを定義します
video はビデオ (ビデオまたはムービー) を定義します
source はマルチメディアリソース

要素のタイトルを定義します
footer はセクションまたはドキュメントを定義しますフッタ
header はドキュメントのヘッダー領域を定義します
mark はマーク付きのテキストを定義します
meter は重みと尺度を定義します既知の最大値と最小値を持つ測定にのみ使用されます
nav ナビゲーション
progress はあらゆる種類のタスクの進行状況を定義します
ruby はルビの注釈 (中国語の発音または文字) を定義します
rt は文字の解釈または発音を定義します (中国語のふりがなまたは文字）
rp ルビ要素をサポートしていないブラウザで表示されるコンテンツを定義するためにルビのコメントで使用されます
section は文書内のセクション（セクション、セクション）を定義します
time は日付または時刻を定義します
wbrテキスト内の改行を追加するのが適切な場所を指定します

以前は、

タグを使用してページブロックを分割していましたが、

や

などの新しい要素が追加されました。 HTML5 にすると、ページ構造がより明確になります

低レベル IE の使用方法HTML5 の新しい要素にも対応します

方法 1

に JavaScript を追加します

<head>
     <script type="text/javascript">
          document.createElement(&#39;header&#39;)          document.createElement(&#39;footer&#39;)     </script></head>

追加したタグを IE で使用できるようにします

< ;header>

方法 2

html5shiv.js を使用します

に

<!--[if lt IE 9]>
<script type="text/javascript"  src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

を追加しますブラウザのバージョンが IE9 より前の場合、このスクリプトは次のようになりますparsed

どのような新しいタイプの入力がありますか?

email はメール形式に準拠していない場合は送信できず、プロンプトが表示されます。

url URL 形式に準拠していない場合は送信できません。プロンプトが表示されます。
number は数字のみを入力できます。

HTML5/CSS3関連の知識解説

range

Date 日付選択コントロール

ブラウザのローカルストレージの Cookie と localStorage の違いは何ですか? localStorage は削除されたデータをどのように保存しますか?

Cookieとは
Cookieとは、ユーザーの身元を識別するために、一部のWebサイトがユーザーのローカル端末（クライアント側）に保存するデータを指します。
Cookieは、クライアント内の保存場所に応じて常にクライアントに保存されます。メモリ Cookie とハードドライブ Cookie に分けることができます。
メモリ Cookie はブラウザによって維持され、メモリに保存されます。ブラウザを閉じると消え、その存在時間は短くなります。ハードディスク Cookie はハードディスクに保存され、有効期限があります。ユーザーが手動で消去するか、有効期限に達しない限り、ハードディスク Cookie は削除されず、存続期間が長くなります。したがって、存在時間に応じて、非永続 Cookie と永続 Cookie に分けることができます。ログインを例に挙げます。 1. クライアントはユーザー名とパスワードをサーバーに送信します。 2. サーバーは認証に成功し、サーバーにバインドします。サーバー側で、ユーザーの認証ステータスを Set-Cookie に書き込みます
4. クライアントは、応答を受信し、そのセッション ID を Cookie として保存します。その後、クライアントは次のメッセージを送信します。すべてのリクエストは、この Cookie をリクエストヘッダーに含めます
localStorage とは
localStorage は、クライアントデータのローカル永続ストレージ用の API です
同じドメイン名の Web サイトは同じ localStorage オブジェクトを共有し、異なるドメインの localStorage を共有します名前は相互にアクセスできません (Cookie についても同様です)
各ドメイン名のストレージ容量は制限されており、少なくとも 5MB (Cookie は約 4 kb のみ)
localStorage はキーと値のペアを使用してデータを格納し、キー値は文字列である必要があります (Cookie にも同じことが当てはまります)
Cookie と localStorage の違いは何ですか?
1. サーバーはリクエストを送信するときに Cookie を送信します
2. Cookie には保存期間があり、期限切れになると自動的に期限切れになりますが、localStorage は手動で削除しない限り期限切れになりません
3. Cookie のサイズ制限は約 4KB、localStorage は約 5MB です。

この記事では、tml と css に関連する説明を提供します。その他の関連コンテンツについては、php 中国語 Web サイトを参照してください。

HTML5/CSS3関連の知識解説

関連記事