HTML, CSS és PHP: Az Ultimate Cheat Sheet

in Források és eszközök

Tartalmunk olvasó által támogatott. Ha rákattint hivatkozásainkra, jutalékot kaphatunk. Hogyan tekintjük át.

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

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:

HTML

  • Nem támogatja a hangot és a videót a flash lejátszó támogatása nélkül.
  • Cookie-kat használ ideiglenes adatok tárolására.
  • Nem engedélyezi a JavaScipt futtatását a böngészőben.
  • Lehetővé teszi a vektorgrafikát különböző technológiák, például VML, Silver-light és Flash használatával.
  • Nem engedélyezi a drag and drop effektusokat.
  • Minden régebbi böngészővel működik.
  • Kevésbé mobilbarát.
  • A Doctype deklaráció hosszú és bonyolult.
  • Nem tartalmaz olyan elemeket, mint a navigáció és fejléc, valamint olyan attribútumokat, mint a charset, async, és ping.
  • Rendkívül nehéz a felhasználók valódi földrajzi helyének megállapítása böngésző használatával.
  • Nem tudja kezelni a pontatlan szintaxist.

HTML5

  • Támogatja a hang- és videóvezérlést a használatával és címkéket.
  • SQL adatbázisokat és alkalmazás-gyorsítótárat használ az offline adatok tárolására.
  • Lehetővé teszi, hogy a JavaScript a háttérben működjön a JS Web Worker API használatával.
  • A vektorgrafika a HTML5 alapvető része, hasonlóan az SVG-hez és a vászonhoz.
  • Lehetővé teszi a drag and drop effektusokat.
  • Lehetővé teszi alakzatok rajzolását.
  • Támogatja az összes új böngészőt, mint például a Firefox, a Mozilla, a Chrome és a Safari.
  • Mobilbarátabb.
  • A Doctype deklaráció egyszerű és könnyű.
  • Új elemekkel rendelkezik a webstruktúrákhoz, például a navigációhoz, a fejléchez és a lábléchez, valamint karakterkészlet attribútumai,sync, és ping.
  • Egyszerűvé és egyszerűvé teszi a karakterkódolást.
  • Lehetővé teszi a felhasználó GeoLocation követését a JS GeoLocation API használatával.
  • Képes kezelni a pontatlan szintaxist.
 

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:

html5 szemantikai szerkezeti elemek
Forrás: w3schools.com
 

Fejléc

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

Nav

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

Szakasz

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

Cikk

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

Félre (oldalsáv)

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

Lábléc

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

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

Címsorok nak nek

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

Bekezdés ( & )

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

Rendeletlen és rendezett lista

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

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

Idézetblokk és idéz

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

Link

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

Gomb

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

Sortörés

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

Vízszintes vonal

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

Cím

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

Al- és felső index

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

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

Rövidítés

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

Kód

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

Idő

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

Törölve

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

Táblázati példák

Példa az asztalfejre, a testre és a lábfejre

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

Táblázat címsorai, sorai és adatpélda

<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

Kép

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

Kép

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

Ábra

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

Videó

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

html csalólap

 

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.

CSS csalólap

 

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.

PHP csalólap

 

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

 

Körülbelül Szerző

Matt Ahlgren

Mathias Ahlgren a cég vezérigazgatója és alapítója Website Rating, szerkesztőkből és írókból álló globális csapat irányításával. Információtudományból és menedzsmentből szerzett mesterfokozatot. Karrierje a keresőoptimalizálás felé fordult az egyetem korai webfejlesztési tapasztalatai után. Több mint 15 éve a SEO, a digitális marketing és a webfejlesztők területén. Fókuszában a webhelyek biztonsága is szerepel, amit a Cyber ​​Security tanúsítványa igazol. Ez a sokrétű szakértelem támasztja alá vezetői szerepét Website Rating.

WSR csapat

A "WSR Team" szakértő szerkesztők és írók kollektív csoportja, amely technológiára, internetbiztonságra, digitális marketingre és webfejlesztésre szakosodott. Szenvedélyesek a digitális birodalom iránt, jól kutatott, éleslátó és hozzáférhető tartalmakat állítanak elő. Elkötelezettségük a pontosság és a világosság mellett teszi Website Rating megbízható forrás a dinamikus digitális világban való tájékozódáshoz.

Legyen tájékozott! Csatlakozzon hírlevelünkhöz
Iratkozzon fel most, és ingyenes hozzáférést kap a csak előfizetőknek szóló útmutatókhoz, eszközökhöz és forrásokhoz.
Bármikor leiratkozhat. Adatai biztonságban vannak.
Legyen tájékozott! Csatlakozzon hírlevelünkhöz
Iratkozzon fel most, és ingyenes hozzáférést kap a csak előfizetőknek szóló útmutatókhoz, eszközökhöz és forrásokhoz.
Bármikor leiratkozhat. Adatai biztonságban vannak.
Megosztani...