HTML, CSS und PHP: Das ultimative Spickzettel

📥 Laden Sie meine HTML-, CSS- und PHP-Spickzettel, komplett mit allem, was Sie über diese drei Codierungssprachen wissen und sich merken müssen.

• Was ist HTML?
• HTML5-Beispiele (Code PlayGround)
• 📥 HTML-Spickzettel
• Was ist CSS?
• 📥 CSS-Spickzettel
• Was ist PHP?
• 📥 PHP Spickzettel
• 📥 HTML CSS und PHP Cheat Sheet

Es kann Jahre dauern, bis die Kunst des Codierens alle Tags, Syntaxen und anderen Elemente von Programmiersprachen, die häufig miteinander verflochten sind, vollständig beherrscht.

Selbst erfahrene Entwickler können in die Falle tappen, die richtige Syntax für bestimmte Aufgaben zu vergessen. Daher ist es unrealistisch, mehr Grün zu erwarten Web-Entwickler um ein einwandfreies Verständnis der Kunst zu haben.

Aus diesem Grund Spickzettel für HTML, CSS und PHP sind äußerst nützlich, unabhängig davon, wie lange Sie üben. Es dient als Kurzanleitung, um die richtigen Befehle und Syntaxen zu finden, sodass Sie sich auf die eigentliche Webentwicklung konzentrieren können.

Unten finden Sie visuell geneigte Spickzettel, denen schnelle Auffrischungen vorausgehen, um Sie bei Ihren Codierungsbemühungen zu unterstützen. Ich habe es auch so gestaltet, dass es leicht mit einem Lesezeichen versehen, gespeichert oder ausgedruckt werden kann.

Was ist HTML?

HTML steht für Hypertext Markup Language – ein Code, der verwendet wird, um die Struktur für eine Webseite und deren Inhalt zu erstellen.

Diese Auszeichnungssprache besteht aus einer Reihe von Elementen, mit denen Inhalte auf bestimmte Weise angezeigt werden oder funktionieren, und ist ein wesentlicher Bestandteil des Front-End-Codes jeder Website.

HTML ist die Sprache zur Beschreibung der Struktur von Webseiten. Mit HTML beschreiben Autoren die Struktur von Seiten mithilfe von Markups. Die Elemente der Sprache kennzeichnen Inhaltselemente wie Absatz, Liste, Tabelle usw. - - von W3.org

Sie können beispielsweise verschiedene Teile des Inhalts einschließen oder einschließen - wobei die einschließenden Tags einen Wort- oder Bild-Hyperlink zu einer anderen Seite erstellen können. Sie können dies auch verwenden, um Wörter zu kursiv zu schreiben und die Schriftarten unter anderem zu vergrößern oder zu verkleinern.

正如 W3, einige der anderen Dinge, die HTML Ihnen ermöglicht, sind:

• Online-Dokumente veröffentlichen mit Überschriften, Text, Tabellen, Listen, Fotos, usw.
• Abrufen von Online-Informationen auf Knopfdruck über Hypertext-Links.
• Entwerfen Formen für die Durchführung von Transaktionen mit Remote-Diensten an Suchen Sie nach Informationen, reservieren Sie oder bestellen Sie Produkteunter anderem Funktionen.
• Einschließlich Tabellenkalkulationen, Videoclips und andere Medien und Anwendungen, die bereits in Ihren Dokumenten enthalten sind.

Also, wenn Sie die Linie machen würden "Mein Hund ist sehr süß" Wenn Sie für sich allein stehen, können Sie angeben, dass es sich um einen Absatz handelt, indem Sie ihn in Absatz-Tags einfügen (dazu später mehr). Dies würde folgendermaßen aussehen: Mein Hund ist sehr süß

Was ist der Unterschied zwischen HTML und HTML5?

Wie der Name andeutet, HTML5 ist die fünfte Version des HTML-Standards. Es unterstützt die Integration von Video und Audio in die Sprache, wodurch der Bedarf an Plugins und Elementen von Drittanbietern verringert wird.

Nachfolgend sind die Hauptunterschiede zwischen HTML und HTML5 aufgeführt:

Darüber hinaus gibt es viele HTML-Elemente, die entweder geändert oder aus HTML5 entfernt wurden. Diese beinhalten:

• - Gewechselt zu
• - Gewechselt zu
• - Gewechselt zu
• - Entfernt
• - Entfernt
• - Entfernt
• - Kein neues Tag. Verwendet CSS.
• - Kein neues Tag. Verwendet CSS.
• - Kein neues Tag. Verwendet CSS.
• - Kein neues Tag. Verwendet CSS.
• - Kein neues Tag. Verwendet CSS.

Inzwischen enthält HTML5 auch eine Reihe neu hinzugefügter Elemente. Diese beinhalten:

HTML5-Beispiele (Code PlayGround)

Beispiele für semantische Strukturen

In HTML5 gibt es einige semantische Elemente, mit denen verschiedene Teile einer Webseite definiert werden können. Hier sind die häufigsten:

<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>

Grundlegende Beispiele für die Textformatierung

<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>

Tabellenbeispiele

<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>

Medienbeispiele

<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>

Vollständiges HTML-Spickzettel

Egal, ob Sie ein erfahrener Entwickler sind oder einfach nur in der Branche Fuß fassen möchten, es ist immer hilfreich, einen HTML-Spickzettel praktisch. Und ich habe einen entworfen, der Ihnen bei jedem Schritt helfen kann.

Laden Sie den HTML-Spickzettel herunter

Was ist CSS?

Cascading Style Sheets oder CSS beschreibt, wie HTML-Elemente auf dem Bildschirm angezeigt werden. Da es die Layouts mehrerer Seiten gleichzeitig steuern kann, können Sie viel Zeit und Mühe sparen.

CSS ist die Sprache zur Beschreibung der Darstellung von Webseiten, einschließlich Farben, Layout und Schriftarten. Sie können die Präsentation an verschiedene Gerätetypen anpassen, z. B. große Bildschirme, kleine Bildschirme oder Drucker. - - von W3.org

Was ist der Unterschied zwischen HTML und CSS?

Während HTML und CSS beide Sprachen sind, die zum Erstellen von Webseiten und Anwendungen verwendet werden, haben sie unterschiedliche Funktionen.

Mit HTML bestimmen Sie die Struktur und den Inhalt, der auf der Webseite angezeigt wird.

CSS hingegen wird zur Modifikation des verwendet Web-Design der HTML-Elemente auf der Webseite (einschließlich Layout, visuelle Effekte und Hintergrundfarbe).

HTML erstellt die Struktur und den Inhalt, CSS das Design oder den Stil. HTML und CSS bilden zusammen eine Webseitenoberfläche.

Was ist CSS-Syntax?

CSS-Syntax besteht aus einem Selektor und einem Deklarationsblock.

Der Selektor bestimmt das zu formatierende HTML-Element, während der Deklarationsblock eine oder mehrere Deklarationen oder CSS-Paare, einen Eigenschaftsnamen und einen Wert mit einem Doppelpunkt dazwischen enthält.

Deklarationen werden durch Semikolons getrennt und Deklarationsblöcke werden immer in geschweiften Klammern eingeschlossen.

Wenn Sie beispielsweise das Aussehen Ihrer Überschrift 1 ändern möchten, sieht Ihre CSS-Syntax folgendermaßen aus: h1 {color: red; Schriftgröße: 16pc;}

Komplettes CSS-Spickzettel

CSS ist einfach zu bedienen. Die Herausforderung besteht darin, dass es viele Selektoren und Deklarationen gibt, bei denen es schwierig, wenn nicht unmöglich ist, sich an alle zu erinnern. Sie müssen sie sich jedoch nicht merken.

Hier ist eine Spickzettel für CSS und CSS3 dass Sie jederzeit verwenden können.

Laden Sie das CSS-Spickzettel herunter

Was ist PHP?

PHP ist eine Abkürzung für Hypertext Preprocessor, eine beliebte Open-Source-Skriptsprache, die in HTML eingebettet ist und zum Entwickeln dynamischer Websites, Webanwendungen oder statischer Websites verwendet wird.

Da PHP ist eine serverseitige SpracheDie Skripte werden auf dem Server (nicht im Browser) ausgeführt, und die Ausgabe erfolgt in einfachem HTML im Browser.

PHP ist eine weit verbreitete Open-Source-Skriptsprache für allgemeine Zwecke, die sich besonders für die Webentwicklung eignet und in HTML eingebettet werden kann. - - von PHP.net

Diese serverseitige Skriptsprache läuft auf einer Vielzahl von Betriebssystemen, einschließlich Windows, Mac OS, Linux und Unix. Es ist auch mit den meisten Servern wie Apache und IIS kompatibel.

Im Vergleich zu anderen Sprachen wie ASP und JSP ist PHP für Anfänger leicht zu erlernen. PHP bietet auch viele Funktionen, die fortgeschrittene Entwickler benötigen.

Was ist der Unterschied zwischen PHP und HTML?

Obwohl beide Sprachen entscheidend sind Web-Entwicklung, PHP und HTML unterscheiden sich in mehrfacher Hinsicht.

Der Hauptunterschied liegt darin, wofür die beiden Sprachen verwendet werden.

HTML wird clientseitig verwendet (oder Front-End) Entwicklung, während PHP wird serverseitig verwendet Entwicklung.

HTML ist die Sprache, die Entwickler zum Organisieren von Inhalten auf einer Website verwenden, z. B. zum Einfügen von Text, Bildern, Tabellen und Hyperlinks, zum Formatieren von Text und zum Festlegen von Farben.

In der Zwischenzeit wird PHP verwendet, um Daten aus einer Datenbank zu speichern und abzurufen, logische Vorgänge auszuführen, E-Mails zu senden und zu beantworten, Dateien hoch- und herunterzuladen, Desktop-Anwendungen zu entwickeln und vieles mehr.

In Bezug auf den Codetyp, HTML ist statisch, während PHP dynamisch ist. Ein HTML-Code ist bei jedem Öffnen immer gleich, während die PHP-Ergebnisse je nach Browser des Benutzers variieren.

Für neue Entwickler sind beide Sprachen leicht zu erlernen, obwohl die Lernkurve mit HTML kürzer ist als mit PHP.

Komplettes PHP Spickzettel

Wenn Sie ein unerfahrener Programmierer sind, der PHP besser beherrschen oder seine Kenntnisse erweitern möchte, hier ist ein PHP Spickzettel Sie können schnell darauf verweisen.

Dieser Spickzettel besteht aus PHP-Funktionen - Abkürzungen für die weit verbreiteten Codes -, die in die Skriptsprache integriert sind.

Laden Sie PHP Cheat Sheet herunter

Das ultimative Spickzettel für HTML, CSS und PHP

Egal, ob Sie ein erfahrener Entwickler sind oder gerade erst mit dem Programmieren beginnen, es ist großartig, etwas zu haben, auf das Sie jederzeit zurückgreifen oder einfach Ihr Gedächtnis auffrischen können.

Und als Geschenk an Entwickler, die dazwischen jonglieren HTML, CSS und PHP, hier ist ein ultimativer Spickzettel, komplett mit allem, was Sie über diese drei Codierungssprachen wissen und sich merken müssen:

Laden Sie das kombinierte HTML-, CSS- und PHP-Spickzettel herunter