2022 年のブラック フライデー / サイバー マンデーのベスト セール ここをクリック 🤑

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

著者

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

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

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

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

以下に、コーディング作業を支援するためのクイックリフレッシャーが前に付いた視覚的に傾斜したチートシートを示します。 また、便利なように簡単にブックマーク、保存、または印刷できるようにしました。

HTMLとは

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

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

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

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

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

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

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

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

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

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

HTML

  • フラッシュプレーヤーをサポートしないオーディオとビデオはサポートしていません。
  • Cookieを使用して一時データを保存します。
  • JavaSciptをブラウザで実行することを許可しません。
  • VML、Silver-light、Flashなどのさまざまなテクノロジーを使用して、ベクターグラフィックスを可能にします。
  • ドラッグアンドドロップ効果を許可しません。
  • すべての古いブラウザで動作します。
  • モバイルフレンドリーではありません。
  • Doctype宣言は長く複雑です。
  • navやheaderなどの要素、およびcharsetなどの属性はありません。sync、およびping。
  • ブラウザを使用してユーザーの本当の位置情報を取得することは非常に困難です。
  • 不正確な構文を処理できません。

HTML5

  • を使用してオーディオとビデオの制御をサポートしますそしてタグ。
  • SQLデータベースとアプリケーションキャッシュを使用してオフラインデータを保存します。
  • JavaScriptがJS WebワーカーAPIを使用してバックグラウンドで動作できるようにします。
  • ベクターグラフィックスは、SVGやキャンバスによく似たHTML5の基本的な部分です。
  • ドラッグアンドドロップ効果を許可します。
  • 図形を描くことができるようにします。
  • Firefox、Mozilla、Chrome、Safariなどのすべての新しいブラウザをサポートします。
  • よりモバイルフレンドリー。
  • Doctype宣言はシンプルで簡単です。
  • とりわけ、nav、header、footerなどのWeb構造の新しい要素があり、charsetの属性もあります。sync、およびping。
  • 文字エンコーディングをシンプルかつ簡単にします。
  • JS GeoLocation APIを使用して、ユーザーGeoLocationを追跡できます。
  • 不正確な構文を処理できます。
 

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

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

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

 

HTML5の例(コードPlayGround)

セマンティック構造の例

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

html5セマンティック構造要素
ソース: w3schools.com
 

ヘッダ

<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チートシート

 

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チートシート

 

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チートシート

 

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

 

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

経験豊富な開発者であろうと、コーディングを始めたばかりの人であろうと、いつでも参照できるものがあるか、単に記憶を更新できるのは素晴らしいことです。

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

 

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

 

ニュースレターに登録する

毎週のまとめニュースレターを購読して、最新の業界ニュースとトレンドを入手してください

「サブスクライブ」をクリックすると、 利用規約とプライバシーポリシー.