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

HTML5/CSS3関連の知識解説

jacklove
jacklove
May 21, 2018 pm 02:53 PM
css css3 html5

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
1 か月前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
3週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7640
15
CakePHP チュートリアル
1391
52
Steamのアカウント名の形式は何ですか
90
11
Win11 Activation Key Permanent
71
19
NYTの接続はヒントと回答です
32
150
もっと見る
Related knowledge
VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

H5は何を参照していますか？コンテキストの探索 H5は何を参照していますか？コンテキストの探索 Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

HTML、CSS、およびJavaScriptの理解：初心者向けガイド HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

See all articles