HTML, CSS és PHP: Az Ultimate Cheat Sheet

📥 Töltse le az én HTML, CSS és PHP csalólapok, mindennel kiegészítve, amit e három kódolási nyelvről tudni kell és emlékezni kell.

• Mi a HTML?
• HTML5-példák (Code PlayGround)
• 📥 HTML csalólap
• Mi a CSS?
• 📥 CSS csalólap
• Mi a PHP?
• 📥 PHP csalólap
• 📥 HTML CSS és PHP csalólap

A kódolás művészetének teljes elsajátítása évekbe telhet, miközben a programozási nyelvek összes címkéje, szintaxisa és egyéb eleme gyakran összefonódik.

Még a tapasztaltabb fejlesztők is beleeshetnek abba a csapdába, hogy elfelejtik az egyes feladatok helyes szintaxisát. Mint ilyen, irreális több zöldre számítani webfejlesztők hogy hibátlanul ragadja meg a művészetet.

Ez az, amiért csalólapok HTML-hez, CSS-hez és PHP-hez rendkívül hasznosak, függetlenül attól, hogy mióta gyakorolsz. Gyors útmutatóként szolgál a megfelelő parancsok és szintaxisok megtalálásához, lehetővé téve, hogy a tényleges webfejlesztésre összpontosítson.

Az alábbiakban vizuálisan hajlamos csalólapokat talál, amelyeket gyors frissítések előznek meg, hogy segítsenek a kódolási munkában. Azt is elkészítettem, hogy az Ön kényelme érdekében könnyen felvehető, menthető vagy kinyomtatható.

Mi a HTML?

A HTML a Hypertext Markup Language rövidítése – egy kód, amely egy weboldal szerkezetének és tartalmának létrehozására szolgál.

Ez a jelölőnyelv egy sor olyan elemből áll, amelyek a tartalom bizonyos módon történő megjelenését vagy működését szolgálják, és minden webhely kezelőfelületi kódjának fő részét képezi.

A HTML a weblapok szerkezetének leírására szolgáló nyelv… A HTML-lel a szerzők jelölések segítségével írják le az oldalak szerkezetét. A nyelv elemei olyan tartalomelemeket címkéznek fel, mint a bekezdés, lista, táblázat stb. – a W3.org oldalról

Például bezárhatja vagy becsomagolhatja a tartalom különböző részeit – ahol a mellékelt címkék egy szót vagy képet hiperhivatkozást képezhetnek egy másik oldalra. Használhatja többek között a szavak dőlt betűzésére és a betűtípusok nagyítására vagy kicsinyítésére is.

Amint azt W3, néhány egyéb dolog, amit a HTML lehetővé tesz, többek között:

• Online dokumentumok közzététele a címsorok, szövegek, táblázatok, listák, fényképekStb
• Online információk lekérése egy gombnyomással a következőn keresztül hipertext linkek.
• Tervezés formák távoli szolgáltatásokkal történő tranzakciók lebonyolításához információk keresése, foglalások vagy termékek megrendelése, egyéb funkciók mellett.
• Beleértve táblázatok, videoklipek és egyéb média és a dokumentumokban már szereplő alkalmazások.

Tehát ha meg akarná tenni a sort “A kutyám nagyon édes” Ha önmagában áll, megadhatja, hogy ez egy bekezdés, ha bekezdéscímkékbe zárja (erről később), amely így néz ki: A kutyám nagyon édes

Mi a különbség a HTML és a HTML5 között?

Ahogy a neve is sugallja, A HTML5 a HTML szabvány ötödik verziója. Támogatja a videó és a hang integrálását a nyelvbe, ami csökkenti a harmadik féltől származó bővítmények és elemek szükségességét.

Az alábbiakban bemutatjuk a HTML és a HTML5 közötti fő különbségeket:

Ezenkívül a HTML-nek számos olyan eleme van, amelyet vagy módosítottak, vagy eltávolítottak a HTML5-ből. Ezek tartalmazzák:

• - Változott
• - Változott
• - Változott
• – Eltávolítva
• – Eltávolítva
• – Eltávolítva
• – Nincs új címke. CSS-t használ.
• – Nincs új címke. CSS-t használ.
• – Nincs új címke. CSS-t használ.
• – Nincs új címke. CSS-t használ.
• – Nincs új címke. CSS-t használ.

Eközben a HTML5 számos újonnan hozzáadott elemet is tartalmaz. Ezek tartalmazzák:

HTML5-példák (Code PlayGround)

Példák szemantikai szerkezetre

In HTML5 van néhány szemantikai elem, amelyek segítségével meghatározhatók egy weboldal különböző részei. Íme a leggyakoribbak:

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

Alapvető szövegformázási példák

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

Táblázati példák

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

Példák a médiára

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

Teljes HTML Cheat Sheet

Legyen szó tapasztalt fejlesztőről vagy valakiről, aki csak a lábát keresi az iparágban, mindig segít, ha HTML formázási csalólap ügyes. És megterveztem egyet, amely minden lépésben segíthet.

Töltse le a HTML csalólapot

Mi a CSS?

Lépcsőzetes stíluslapok vagy CSS leírja, hogyan jelennek meg a HTML-elemek a képernyőn. Mivel egyszerre több oldal elrendezését is vezérelheti, sok időt és erőfeszítést takaríthat meg.

A CSS a weboldalak megjelenítésének leírására szolgáló nyelv, beleértve a színeket, az elrendezést és a betűtípusokat. Lehetővé teszi a prezentáció adaptálását különböző típusú eszközökhöz, például nagy képernyőkre, kis képernyőkre vagy nyomtatókra. – a W3.org oldalról

Mi a különbség a HTML és a CSS között?

Míg a HTML és a CSS nyelvek weboldalak és alkalmazások készítésére szolgálnak, más-más funkciójuk van.

A HTML az, amit a weboldalon megjelenő szerkezet és tartalom megadására használ.

A CSS-t viszont a módosítására használják web design a weboldal HTML-elemei közül (beleértve az elrendezést, a vizuális effektusokat és a háttérszínt).

A HTML létrehozza a szerkezetet és a tartalmat, a CSS a tervezést vagy a stílust. A HTML és a CSS együtt egy weboldal felületet alkot.

Mi az a CSS szintaxis?

CSS szintaxis választóból és deklarációs blokkból áll.

A szelektor határozza meg a stílusozandó HTML-elemet, míg a deklarációs blokk egy vagy több deklarációt vagy CSS-párt tartalmaz, egy tulajdonságnevet és egy értéket kettősponttal.

A deklarációk pontosvesszővel vannak elválasztva, a deklarációs blokkok pedig mindig kapcsos zárójelek között vannak.

Például, ha módosítani szeretné az 1. címsor megjelenését, a CSS szintaxisa így néz ki: h1 {color:red; betűméret:16db;}

Töltse ki a CSS csalólapot

A CSS használata elég egyszerű. A kihívás az, hogy sok válogató és nyilatkozat van arról, hogy mindegyikre emlékezni nehéz, ha nem lehetetlen. Nem kell azonban megjegyezni őket.

Itt egy csalólap a CSS-hez és a CSS3-hoz amit bármikor használhatsz.

Töltse le a CSS csalólapot

Mi a PHP?

A PHP a Hypertext Preprocessor rövidítése, egy népszerű nyílt forráskódú, HTML-be ágyazott szkriptnyelv, amelyet dinamikus webhelyek, webes alkalmazások vagy statikus webhelyek fejlesztésére használnak.

Óta A PHP egy szerveroldali nyelv, szkriptjei a szerveren futnak le (nem a böngészőben), a kimenete pedig egy sima HTML a böngészőben.

A PHP egy széles körben használt nyílt forráskódú általános célú szkriptnyelv, amely különösen alkalmas webfejlesztésre, és beágyazható HTML-be. – a PHP.net-ről

Ez a szerveroldali szkriptnyelv számos operációs rendszeren fut, beleértve a Windows, Mac OS, Linux és Unix rendszereket. A legtöbb kiszolgálóval is kompatibilis, mint például az Apache és az IIS.

Más nyelvekhez, például az ASP-hez és a JSP-hez képest a PHP könnyen megtanulható a kezdők számára. A PHP emellett rengeteg olyan funkciót kínál, amelyekre a haladó szintű fejlesztőknek szüksége van.

Mi a különbség a PHP és a HTML között?

Bár mindkét nyelv döntő fontosságú ahhoz webfejlesztés, a PHP és a HTML több szempontból is különbözik egymástól.

A fő különbség abban rejlik, hogy mire használják a két nyelvet.

A HTML-t kliensoldalra használják (vagy front-end) fejlesztés, míg A PHP-t szerveroldalra használják fejlődését.

A HTML az a nyelv, amelyet a fejlesztők használnak a webhely tartalmának rendszerezésére, például szövegek, képek, táblázatok és hivatkozások beszúrására, szöveg formázására és színek megadására.

Eközben a PHP adatok tárolására és adatbázisból való lekérésére, logikai műveletek végrehajtására, e-mailek küldésére és megválaszolására, fájlok feltöltésére és letöltésére, asztali alkalmazások fejlesztésére és még sok másra szolgál.

Ami a kódtípust illeti, A HTML statikus, míg a PHP dinamikus. A HTML-kód mindig ugyanaz, amikor megnyitják, míg a PHP-eredmények a felhasználó böngészőjétől függően változnak.

Az új fejlesztők számára mindkét nyelv könnyen megtanulható, bár a tanulási görbe rövidebb a HTML-nél, mint a PHP-nél.

Töltse ki a PHP csalólapot

Ha kezdő programozó vagy, aki jártasabb akar lenni a PHP-ben, vagy bővíteni szeretné tudását, itt van egy PHP csalólap gyorsan hivatkozhat.

Ez a csalólap PHP függvényekből áll – amelyek a széles körben használt kódok parancsikonjai –, amelyek be vannak építve a szkriptnyelvbe.

Töltse le a PHP csalólapot

Az Ultimate HTML, CSS és PHP csalólap

Legyen szó tapasztalt fejlesztőről, vagy csak a kódolást kezdő személyről, nagyszerű, ha van valami, amihez bármikor visszatérhet referenciaként, vagy egyszerűen felfrissítheti a memóriáját.

És ajándékba azoknak a fejlesztőknek, akik zsonglőrködnek közöttük HTML, CSS és PHP, itt van egy ULTIMATE csalólap, mindennel kiegészítve, amit tudnod kell és emlékezned kell ezzel a három kódolási nyelvvel kapcsolatban:

Töltse le a kombinált HTML, CSS és PHP csalólapot