インターネットには、単純な静的ページから予測不可能な Web アプリケーションに至るまで、膨大な数のサイトがあり、データや管理と通信する方法が変わりました。洗練されたかわいい UI と直感的なコンポーネントの背後には、HTML、CSS、JavaScript という 3 つの基本的な Web イノベーションがあります。これらの革新的な驚異がどのように機能するか知りたい人にとって、Web サイトのソース コードを入手するのは愚かな経験かもしれません。このチュートリアル演習では、インターネット ブラウザの暗黙的デザイナーを使用して最も効率的な方法で HTML、CSS、JavaScript のソース コードを取得するための各ステップを説明します。
手動使用
手動使用とは、手動による調査とレビューを通じて Web サイトの HTML、CSS、または JavaScript ソース コードを取得する方法を指します。機械的なデバイスやプログラムに頼るのではなく、ブラウザのデザイナー機能を利用するか、Web ページを右クリックして [ページ ソースの表示] を選択することで、Web サイトのソース コードを物理的に表示できます。この戦略により、Web サイトの基礎となるコードを分析し、その形式、スタイル、有用性を計算できます。手動での使用は時間と労力がかかる場合がありますが、実践的なアプローチにより、サイトの構造をより深く理解し、ボット戦略では見逃す可能性のある収益性の高いエクスペリエンスを明らかにできる可能性があります。
チェックする必要があるサイトの URL を PC プログラムに入力する必要があります。サイトのコンテンツを照合したり、画像を表示したり、積み上げられたテキストを読んだりすることができます。インターネット ブラウザによって提供されるエンジニア ツールを利用して、HTML、CSS、JavaScript のソース コードを取得します。ソース コードを注意深く読むのは、ネットワークの改善基準を学び、見つけるためだけであることを忘れないでください。違法または非倫理的な方法でソース コードを使用しないでください。ウェブサイト所有者の知的財産権を常に尊重してください。
Web ページが完全に読み込まれると、開発者ツールを使用できるようになります。これらのツールは、Web ページの検査、デバッグ、変更のためのさまざまな機能を Web 開発者に提供します。
開発者ツールを開く方法は、使用している Web ブラウザに応じていくつかあります -
右クリックを利用する戦略 - 画像以外のページの任意の部分を右クリックし、検査コンポーネントまたは調査コンポーネントから表示される設定メニューを選択します。 Microsoft Edge、Mozilla Firefox、Google Chrome などのいくつかのよく知られたプログラムは、この戦略をサポートしています。
コンソールの単純なルート - Google Chrome、Mozilla Firefox、および Microsoft Edge の速度を上げるには、コンソールで Ctrl Shift I を押します (Macintosh では Cmd Choice I を押します)。
プログラムが提供するメニューを使用するかどうかは、追加の決定事項となります。 Google Chrome の右上隅にある 3 つの縦のドット (Google Chrome の編集と制御) を選択し、[その他のデバイス]、[デバイスのデザイン] の順に選択します。 Mozilla Firefox で 3 本の水平線をクリックし、「メニューを開く」、「Web Developer および Inspector」の順に選択します。
開発者ツールを選択すると、ブラウザ ウィンドウの横または下にパネルが表示されます。このパネルには、HTML 構成、適用された CSS スタイル、アクティブな JavaScript コードなど、サイトに関する豊富な詳細が表示されます。
HTML (要素またはインスペクター)- [要素] タブまたは [インスペクター] タブをクリックして、Web ページの HTML コードを表示します。このパネルには、ページ上の各要素が DOM (Document Object Model) ツリー表現で表示されます。これらの要素を展開または圧縮することで、コンテンツ構成の階層を調べることができます。
コンポーネントまたは監査ボード上の HTML コードと通信することもできます。たとえば、コンポーネントを右クリックすると、設定メニューから [HTML に変更] または [消去] を選択することで、さまざまな調整方法を段階的に実行できます。
Web サイト ページの視覚スキームを制御する CSS スタイルについては、[スタイル] または [CSS] タブを参照してください。このセクションでは、さまざまな HTML コンポーネントに適用される CSS の概要を説明します。各規格は、トーン、フォント、エッジ、配置などの特定の上品なコンポーネントを規定します。
既存のルールが Web デザインにどのような影響を与えるかを観察するには、新しいルールを試し、既存のルールを無効にして、適用されているスタイルを調べることができます。
JavaScript エディターの [ソース] タブまたは [デバッガー] タブは、JavaScript コードの世界への入り口を提供します。 Web サイトで使用される JavaScript ファイルのリストは、このセクションにあります。ファイルをクリックすると、機能や Web サイトとの対話を提供する関数、変数、イベント ハンドラーなどのコンテンツを検査できます。
Web サイトの HTML、CSS、および JavaScript ソース コードに正常にアクセスされました。この時間を利用してコードベースをチェックアウトして学習してください。 Web 開発について理解を深めたいと考えている意欲的なエンジニアや愛好家にとって、ソース コードを探索することは貴重な教育経験となる可能性があります。
プログラマーがどのようにスタイルを調整し、インタラクティブな機能を追加し、コードを構造化するかを研究します。経験豊富なエンジニアが使用するコーディング規約とベスト プラクティスに注意してください。実際の例を学ぶことで、典型的な Web 開発の設計パターンと手法について学ぶことができます。
＃＃＃結論は＃＃＃以上がWeb サイトの HTML/CSS/JavaScript ソース コードを入手するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
