コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > HTML5/CSS3関連の知識解説

HTML5/CSS3関連の知識解説

jacklove
リリース： 2018-05-21 14:53:18
オリジナル
1312 人が閲覧しました

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 サイトを参照してください。

関連する推奨事項:


DOM での Javascript 操作によく使用される API の概要

JavaScript タイマーと DOM ドキュメントの完全な概要

AJAX の動作原理とその長所と短所の詳細な説明

以上がHTML5/CSS3関連の知識解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css css3 html5
ソース：php.cn
前の記事：vueコンポーネントにデータを渡す手順の詳細な説明 次の記事：JavaScriptによるプロトタイプの包括的な分析
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート