HTML、CSS、PHP：究極のチートシート

myダウンロード HTML、CSS、PHPチートシート、これらのXNUMXつのコーディング言語について知っておく必要があるすべてのことを完了します。

• HTMLとは
• HTML5の例（コードPlayGround）
• 📥HTMLチートシート
• CSSとは
• 📥CSSチートシート
• PHPとは何ですか？
• 📥PHPチートシート
• 📥HTMLCSSおよびPHPチートシート

コーディングの技術は、すべてのタグ、構文、およびしばしば絡み合うプログラミング言語の他の要素を完全に習得するのに何年もかかる可能性があります。

経験豊富な開発者でさえ、特定のタスクの正しい構文を忘れるという罠に陥る可能性があります。 そのため、より多くの緑を期待するのは非現実的です Web開発者 芸術を完璧に把握すること。

これが理由です HTML、CSS、およびPHPのチートシート 練習時間に関係なく、非常に役立ちます。 これは、適切なコマンドと構文を見つけるためのクイック ガイドとして機能し、実際の Web 開発に集中できるようにします。

以下に、コーディング作業を支援するための簡単な復習が含まれた視覚的なチートシートを示します。 また、便利なように、簡単にブックマーク、保存、印刷できるようにしました。

HTMLとは

HTMLはHypertext Markup Languageの略です – Web ページとそのコンテンツの構造を作成するために使用されるコード。

このマークアップ言語は、コンテンツを特定の方法で表示または機能させるために使用される一連の要素で構成され、すべてのWebサイトのフロントエンドコードの主要な部分です。

HTMLは、Webページの構造を記述するための言語です…HTMLでは、作成者はマークアップを使用してページの構造を記述します。 言語の要素は、段落、リスト、表などのコンテンツにラベルを付けます。 – W3.orgから

たとえば、コンテンツのさまざまな部分を囲んだり折り返したりできます。囲んでいるタグを使用すると、単語や画像に別のページへのハイパーリンクを作成できます。 これを使用して、単語をイタリック体にしたり、フォントを大きくしたり小さくしたりすることもできます。

が指摘したように W3、HTMLで実行できるその他の機能には、次のものが含まれます。

• オンラインドキュメントの発行 見出し、テキスト、表、リスト、写真, etc.
• ボタンをクリックするだけでオンライン情報を取得する ハイパーテキストリンク.
• 設計 フォーム リモートサービスとのトランザクションを実行するため 情報の検索、予約、または製品の注文、他の機能の中でも。
• 含めて スプレッドシート、ビデオクリップ、その他のメディア すでにドキュメントにあるアプリケーション。

だからあなたがラインを作るなら 「私の犬はとても甘いです」 スタンドアローンである場合は、段落タグで囲むことで、段落であることを指定できます（これについては後で詳しく説明します）。 私の犬はとても甘いです

HTMLとHTML5の違いは何ですか？

名前が示すように、 HTML5はHTML標準のXNUMX番目のバージョンです。 ビデオとオーディオの言語への統合をサポートしているため、サードパーティのプラグインや要素の必要性が減少します。

HTMLとHTML5の主な違いは次のとおりです。

さらに、HTML5から変更または削除されたHTMLの要素が多数あります。 これらには以下が含まれます：

• –に変更されました
• –に変更されました
• –に変更されました
• –削除
• –削除
• –削除
• –新しいタグはありません。 CSSを使用します。
• –新しいタグはありません。 CSSを使用します。
• –新しいタグはありません。 CSSを使用します。
• –新しいタグはありません。 CSSを使用します。
• –新しいタグはありません。 CSSを使用します。

一方、HTML5には、新しく追加された要素もいくつか含まれています。 これらには以下が含まれます：

HTML5の例（コードPlayGround）

セマンティック構造の例

In HTML5 Web ページのさまざまな部分を定義するために使用できるセマンティック要素がいくつかあります。 最も一般的なものは次のとおりです。

<header>
  <h1>Guide to Search Engines</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>

基本的なテキストフォーマットの例

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

<button name="button">I am a Button. Click me!</button>

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

<p>This is normal text. <code>This is code.</code> This is normal text.</p>

<p>The movie starts at <time>20:00</time>.</p>

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>

表の例

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>

メディアの例

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>

完全なHTMLチートシート

あなたが経験豊富な開発者であっても、業界で足を踏み入れたいと考えているだけの人であっても、 HTML フォーマットのチートシート ハンディ。 そして、あらゆる段階で役立つものをデザインしました。

HTMLチートシートをダウンロード

CSSとは

カスケードスタイルシートまたはCSS HTML 要素が画面上にどのように表示されるかを説明します。 複数のページのレイアウトを同時に制御できるため、時間と労力を大幅に節約できます。

CSSは、色、レイアウト、フォントなど、Webページの表示を記述するための言語です。 これにより、プレゼンテーションを大画面、小画面、プリンターなどのさまざまなタイプのデバイスに適合させることができます。 – W3.orgから

HTMLとCSSの違いは何ですか？

HTMLとCSSはどちらもWebページとアプリケーションの構築に使用される言語ですが、機能は異なります。

HTMLは、Webページに表示される構造とコンテンツを指示するために使用するものです。

一方、CSSは、 ウェブデザイン Webページ上のHTML要素（レイアウト、視覚効果、および背景色を含む）。

HTMLが構造とコンテンツを作成し、CSSがデザインやスタイルを行います。 HTMLとCSSが一緒になってWebページインターフェイスを構成します。

CSS構文とは何ですか？

CSS構文 セレクタと宣言ブロックで構成されています。

セレクターはスタイルを設定するHTML要素を決定しますが、宣言ブロックにはXNUMXつ以上の宣言またはCSSのペア、プロパティ名と値の間にコロンがある値が含まれます。

宣言はセミコロンで区切られ、宣言ブロックは常に中括弧で囲まれます。

たとえば、見出し1の外観を変更したい場合、CSS構文は次のようになります。h1 {color：red; font-size：16pc;}

完全なCSSチートシート

CSS は十分に使いやすいです。 課題は、多数のセレクターと宣言があり、それらをすべて覚えるのは不可能ではないにしても難しいことです。 ただし、それらを暗記する必要はありません。

ここにあるのです CSSおよびCSS3のチートシート いつでも使えること。

CSSチートシートをダウンロード

PHPとは何ですか？

PHPはHypertext Preprocessorの頭字語です。、動的なWebサイト、Webアプリケーション、または静的Webサイトの開発に使用される人気のあるオープンソースのHTML組み込みスクリプト言語。

Since PHPはサーバー側の言語です、そのスクリプトはサーバーで（ブラウザーではなく）実行され、その出力はブラウザーではプレーンHTMLになります。

PHPは、広く使用されているオープンソースの汎用スクリプト言語であり、Web開発に特に適しており、HTMLに埋め込むことができます。 – PHP.netから

このサーバーサイド スクリプト言語は、Windows、Mac OS、Linux、Unix などのさまざまなオペレーティング システム上で実行されます。 また、Apache や IIS などのほとんどのサーバーと互換性があります。

ASPやJSPなどの他の言語と比較すると、PHPは初心者にとって簡単に習得できます。 PHPには、上級レベルの開発者が必要とする多くの機能も用意されています。

PHPとHTMLの違いは何ですか？

両方の言語が重要ですが ウェブ開発、PHP、HTMLはいくつかの点で異なります。

主な違いは、XNUMXつの言語の用途にあります。

HTMLはクライアント側に使用されます （またはフロントエンド）開発、 PHPはサーバー側で使用されます 開発。

HTMLは、テキスト、画像、テーブル、ハイパーリンクの挿入、テキストのフォーマット、色の指定など、開発者がWebサイトのコンテンツを整理するために使用する言語です。

一方、PHPは、データベースからのデータの保存と取得、論理演算の実行、メールの送信と返信、ファイルのアップロードとダウンロード、デスクトップアプリケーションの開発などに使用されます。

コードタイプに関しては、 PHPは動的ですが、HTMLは静的です。 HTML コードは開くたびに常に同じですが、PHP の結果はユーザーのブラウザーによって異なります。

新しい開発者にとって、PHPよりもHTMLの方が学習曲線は短いですが、どちらの言語も簡単に習得できます。

完全なPHPチートシート

PHP にもっと習熟したい、または PHP の知識を広げたい初心者プログラマーの場合は、次のリンクを参照してください。 PHPチートシート すぐに参照できます。

このチートシートは、スクリプト言語に組み込まれているPHP関数（広く使用されているコードのショートカット）で構成されています。

PHPチートシートをダウンロード

究極のHTML、CSS、PHPチートシート

経験豊富な開発者であっても、コーディングを始めたばかりの人であっても、いつでも参照したり、単に記憶をリフレッシュしたりできるものがあるのは素晴らしいことです。

そして、その間で両立する開発者への贈り物として HTML、CSS、PHPは、ULTIMATEのチートシートです。、これらのXNUMXつのコーディング言語について知っておく必要があるすべてのことを完了します。

HTML、CSS、PHPを組み合わせたチートシートをダウンロードする