HTML5/CSS3関連の知識解説-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

HTML5/CSS3関連の知識解説

jacklove

May 21, 2018 pm 02:53 PM

csscss3html5

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 までご連絡ください。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。