HTML, CSS a PHP: The Ultimate Cheat Sheet

Náš obsah je podporovaný čitateľmi. Ak kliknete na naše odkazy, môžeme získať províziu. Ako recenzujeme.

📥 Stiahnite si môj HTML, CSS a PHP cheat sheets, kompletný so všetkým, čo potrebujete vedieť a pamätať na tieto tri kódovacie jazyky.

Umenie kódovania môže trvať roky, kým sa úplne osvojí všetky značky, syntaxe a ďalšie prvky programovacích jazykov, ktoré sú často prepojené.

Dokonca aj skúsenejší vývojári sa môžu dostať do pasce, keď zabudnú na správnu syntax pre konkrétne úlohy. Preto je nereálne očakávať viac zelene vývojárov webu mať dokonalý prehľad o umení.

To je dôvod, prečo cheat sheets pre HTML, CSS a PHP sú mimoriadne užitočné, bez ohľadu na to, ako dlho cvičíte. Slúži ako rýchly sprievodca pri hľadaní správnych príkazov a syntaxí, čo vám umožní sústrediť sa na skutočný vývoj webu.

Nižšie nájdete vizuálne naklonené cheaty, ktorým predchádza rýchle osvieženie, ktoré vám pomôže pri kódovaní. Urobil som ho tiež tak, aby sa dal jednoducho uložiť do záložiek, uložiť alebo vytlačiť pre vaše pohodlie.

Čo je HTML?

HTML je skratka pre Hypertext Markup Language – kód, ktorý sa používa na vytvorenie štruktúry webovej stránky a jej obsahu.

Tento značkovací jazyk sa skladá zo série prvkov, ktoré sa používajú na to, aby sa obsah zobrazoval alebo fungoval určitým spôsobom, a je hlavnou súčasťou kódu front-end každej webovej lokality.

HTML je jazyk na popis štruktúry webových stránok... Pomocou HTML autori popisujú štruktúru stránok pomocou značiek. Prvky jazyka označujú časti obsahu, ako je odsek, zoznam, tabuľka atď. – z W3.org

Môžete napríklad uzavrieť alebo zabaliť rôzne časti obsahu – pričom uzatváracie značky môžu vytvoriť hypertextový odkaz slova alebo obrázka na inú stránku. Môžete to použiť aj na písanie slov kurzívou a zväčšenie alebo zmenšenie písma, okrem iného.

ako poznamenal W3, niektoré z ďalších vecí, ktoré vám HTML umožňuje, zahŕňajú:

  • Publikovanie online dokumentov s nadpisy, text, tabuľky, zoznamy, fotografie, Atď
  • Získavanie online informácií kliknutím na tlačidlo cez hypertextové odkazy.
  • Projektovanie formy na vykonávanie transakcií so vzdialenými službami vyhľadávať informácie, robiť rezervácie alebo objednávať produkty, okrem iných funkcií.
  • Vrátane tabuľky, videoklipy a iné médiá a aplikácie, ktoré už máte vo svojich dokumentoch.

Takže ak by ste mali urobiť čiaru “Môj pes je veľmi milý” stáť samostatne, môžete určiť, že ide o odsek tak, že ho uzatvoríte do značiek odsekov (viac o tom neskôr), ktoré budú vyzerať takto: Môj pes je veľmi zlatý

Aký je rozdiel medzi HTML a HTML5?

Ako už názov napovedá, HTML5 je piata verzia štandardu HTML. Podporuje integráciu videa a zvuku do jazyka, čo znižuje potrebu doplnkov a prvkov tretích strán.

Nižšie sú uvedené hlavné rozdiely medzi HTML a HTML5:

HTML

  • Nepodporuje zvuk a video bez podpory prehrávača Flash.
  • Používa cookies na ukladanie dočasných údajov.
  • Nedovoľuje spustiť JavaScipt v prehliadači.
  • Umožňuje vektorovú grafiku pomocou rôznych technológií, ako sú okrem iného VML, Silver-light a Flash.
  • Nepovoľuje efekty drag and drop.
  • Funguje so všetkými staršími prehliadačmi.
  • Menej vhodné pre mobilné zariadenia.
  • Deklarácia doctype je dlhá a komplikovaná.
  • Nemá prvky ako navigácia a hlavička, ani atribúty ako charset, asynca ping.
  • Mimoriadne ťažké získať skutočnú geolokáciu používateľov pomocou prehliadača.
  • Nepodarí sa spracovať nepresnú syntax.

HTML5

  • Podporuje ovládanie zvuku a videa s použitím a značky.
  • Používa databázy SQL a vyrovnávaciu pamäť aplikácií na ukladanie offline údajov.
  • Umožňuje JavaScriptu pracovať na pozadí s použitím JS Web worker API.
  • Vektorová grafika je základnou súčasťou HTML5, podobne ako SVG a plátno.
  • Umožňuje efekty drag and drop.
  • Umožnite kresliť tvary.
  • Podporuje všetky nové prehliadače ako Firefox, Mozilla, Chrome a Safari.
  • Viac kompatibilné s mobilmi.
  • Deklarácia doctype je jednoduchá a ľahká.
  • Má nové prvky pre webové štruktúry, ako je okrem iného navigácia, hlavička a päta, a má tiež atribúty znakovej sady,synca ping.
  • Umožňuje jednoduché a ľahké kódovanie znakov.
  • Umožňuje sledovanie geolokácie používateľa pomocou JS GeoLocation API.
  • Schopný zvládnuť nepresnú syntax.
 

Okrem toho existuje veľa prvkov HTML, ktoré boli buď upravené alebo odstránené z HTML5. Tie obsahujú:

  • – Zmenené na
  • – Zmenené na
  • – Zmenené na
  • - Odstránený
  • - Odstránený
  • - Odstránený
  • – Žiadna nová značka. Používa CSS.
  • – Žiadna nová značka. Používa CSS.
  • – Žiadna nová značka. Používa CSS.
  • – Žiadna nová značka. Používa CSS.
  • – Žiadna nová značka. Používa CSS.

Medzitým HTML5 obsahuje aj množstvo novo pridaných prvkov. Tie obsahujú:

 

Príklady HTML5 (Code PlayGround)

Príklady sémantickej štruktúry

In HTML5 existuje niekoľko sémantických prvkov, ktoré možno použiť na definovanie rôznych častí webovej stránky. Tu sú tie najbežnejšie:

 

Hlavička

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

oddiel

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

Článok

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

Na stranu (bočný panel)

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

Päta

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

Príklady základného formátovania textu

Nadpisy do

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

Odsek ( & )

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

Neusporiadané a objednaný zoznam

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

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

Blockquote a citovať

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

Tlačidlo

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

Zalomenie riadku

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

Horizontálna čiara

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

Adresa

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

Dolný a horný index

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

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

Skratka

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

Čas

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

Odstránené

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

Príklady tabuľky

Príklad hlavy, tela a nôh stola

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

Príklady nadpisov, riadkov a údajov tabuľky

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

Príklady médií

Obrázok

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

Obrázok

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

Obrázok

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

Video

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

Kompletný HTML Cheat Sheet

Či už ste skúsený vývojár alebo niekto, kto si chce len namočiť nohy v tomto odvetví, vždy vám pomôže cheat na formátovanie HTML praktický. A navrhol som jeden, ktorý by vám mohol pomôcť na každom kroku.

html cheat sheet

 

Stiahnite si HTML Cheat Sheet

 

Čo je CSS?

kaskádové štýly alebo CSS popisuje, ako budú prvky HTML zobrazené na obrazovke. Keďže dokáže ovládať rozloženie viacerých stránok súčasne, môže vám ušetriť veľa času a úsilia.

CSS je jazyk na popis prezentácie webových stránok vrátane farieb, rozloženia a fontov. Umožňuje prispôsobiť prezentáciu rôznym typom zariadení, ako sú veľké obrazovky, malé obrazovky alebo tlačiarne. – z W3.org

Aký je rozdiel medzi HTML a CSS?

Kým HTML a CSS sú jazyky používané na vytváranie webových stránok a aplikácií, majú rôzne funkcie.

HTML je to, čo používate na diktovanie štruktúry a obsahu, ktorý sa zobrazí na webovej stránke.

CSS sa na druhej strane používa na úpravu web design prvkov HTML na webovej stránke (vrátane rozloženia, vizuálnych efektov a farby pozadia).

HTML vytvára štruktúru a obsah, CSS robí dizajn alebo štýl. HTML a CSS spolu tvoria rozhranie webovej stránky.

Čo je syntax CSS?

Syntax CSS je tvorený selektorom a deklaračným blokom.

Selektor určuje prvok HTML, ktorý sa má upraviť, zatiaľ čo blok deklarácií obsahuje jednu alebo viac deklarácií alebo párov CSS, názov vlastnosti a hodnotu s dvojbodkou medzi nimi.

Deklarácie sú oddelené bodkočiarkou a deklaračné bloky sú vždy uzavreté v zložených zátvorkách.

Napríklad, ak chcete upraviť vzhľad nadpisu 1, syntax CSS by vyzerala takto: h1 {color:red; font-size:16pc;}

Kompletný hárok CSS

CSS je dostatočne jednoduché na používanie. Výzvou je, že existuje veľa selektorov a vyhlásení, že zapamätať si ich všetkých je ťažké, ak nie nemožné. Nemusíte sa ich však učiť naspamäť.

Tu je cheat sheet pre CSS a CSS3 ktoré môžete použiť kedykoľvek.

CSS Cheat Sheet

 

Stiahnite si CSS Cheat Sheet

 

Čo je PHP?

PHP je skratka pre Hypertext Preprocessor, populárny skriptovací jazyk s otvoreným zdrojom a vložený do HTML, ktorý sa používa na vývoj dynamických webových stránok, webových aplikácií alebo statických webových stránok.

Od PHP je jazyk na strane servera, jeho skripty sa spúšťajú na serveri (nie v prehliadači) a jeho výstupom je obyčajný HTML v prehliadači.

PHP je široko používaný univerzálny skriptovací jazyk s otvoreným zdrojom, ktorý je vhodný najmä na vývoj webových aplikácií a môže byť vložený do HTML. – z PHP.net

Tento skriptovací jazyk na strane servera beží na rôznych operačných systémoch vrátane Windows, Mac OS, Linux a Unix. Je tiež kompatibilný s väčšinou serverov, ako sú Apache a IIS.

V porovnaní s inými jazykmi, ako sú ASP a JSP, sa PHP ľahko učí pre začiatočníkov. PHP tiež ponúka množstvo funkcií, ktoré potrebujú vývojári na pokročilej úrovni.

Aký je rozdiel medzi PHP a HTML?

Aj keď oba jazyky sú rozhodujúce pre vývoj webových aplikácií, PHP a HTML sa líšia v niekoľkých smeroch.

Kľúčový rozdiel spočíva v tom, na čo sa tieto dva jazyky používajú.

HTML sa používa na strane klienta (alebo front-end) vývoj, zatiaľ čo PHP sa používa na strane servera rozvoj.

HTML je jazyk, ktorý vývojári používajú na organizáciu obsahu na webovej lokalite, ako je vkladanie textu, obrázkov, tabuliek a hypertextových prepojení, formátovanie textu a špecifikovanie farieb.

Medzitým sa PHP používa na ukladanie a získavanie údajov z databázy, vykonávanie logických operácií, odosielanie a odpovedanie na e-maily, nahrávanie a sťahovanie súborov, vývoj desktopových aplikácií a ďalšie.

Pokiaľ ide o typ kódu, HTML je statické, zatiaľ čo PHP je dynamické. HTML kód je vždy rovnaký pri každom otvorení, zatiaľ čo výsledky PHP sa líšia v závislosti od prehliadača používateľa.

Pre nových vývojárov sa obidva jazyky ľahko učia, hoci s HTML je doba učenia sa kratšia ako v PHP.

Kompletný PHP Cheat Sheet

Ak ste začínajúci programátor, ktorý sa chce v PHP zdokonaliť alebo si rozšíriť svoje znalosti, tu je PHP cheat sheet môžete rýchlo odkazovať.

Tento cheat sa skladá z funkcií PHP – čo sú skratky pre široko používané kódy – ktoré sú zabudované do skriptovacieho jazyka.

PHP Cheat Sheet

 

Stiahnite si PHP Cheat Sheet

 

Ultimate HTML, CSS a PHP Cheat Sheet

Či už ste skúsený vývojár alebo len niekto, kto začína s kódovaním, je skvelé mať niečo, k čomu sa môžete kedykoľvek vrátiť, aby ste si to mohli pozrieť alebo si jednoducho osviežiť pamäť.

A ako darček pre vývojárov, ktorí žonglujú HTML, CSS a PHP, tu je ULTIMATE cheat sheet, kompletný so všetkým, čo potrebujete vedieť a zapamätať si o týchto troch kódovacích jazykoch:

 

Stiahnite si Cheat Sheet pre kombinovaný HTML, CSS a PHP

 

FAQ

Čo je to html css cheat sheet?

Kód HTML a CSS je užitočným zdrojom pre začiatočníkov a dokonca aj skúsených webových vývojárov. Táto praktická referenčná príručka poskytuje rýchly prehľad najbežnejších syntaxí a vlastností HTML a CSS. 

Kde by som mohol získať php cheat sheet pdf?

PHP cheat sheets vo formáte PDF môžete nájsť z rôznych zdrojov online. Tu je niekoľko miest, kam sa môžete pozrieť:
Oficiálna stránka PHP: Oficiálnu dokumentáciu nájdete na oficiálnej webovej stránke PHP (php.net), ktorá obsahuje komplexnú príručku PHP, ktorú si môžete stiahnuť vo formáte PDF. Aj keď to nie je cheat ako taký, obsahuje rozsiahle informácie o funkciách a použití PHP.
Webové stránky PHP Cheat Sheet: Mnoho webových stránok poskytuje cheat sheets pre PHP programovanie. Webové stránky ako „Cheatography“ často ponúkajú cheaty vo formáte PDF od používateľov. Ak chcete nájsť tieto zdroje, vo svojom obľúbenom vyhľadávacom nástroji vyhľadajte výraz „PHP cheat sheet PDF“.
GitHub: GitHub je platforma pre vývojárov na zdieľanie kódu a zdrojov. PHP cheat sheets vo formáte PDF nájdete na GitHub vyhľadaním „PHP cheat sheet“ vo vyhľadávacom paneli GitHub. Mnoho vývojárov a organizácií tam zdieľa svoje cheaty a zdroje.
Online generátory PDF: Existujú online nástroje, ktoré vám umožňujú vytvárať vlastné cheaty pre PHP výberom konkrétnych funkcií a tém, ktoré chcete zahrnúť. Tieto nástroje vygenerujú súbor PDF, ktorý si môžete stiahnuť. Jedným z takýchto nástrojov je „PDFCcrowd“.
Nezabudnite sa uistiť, že zdroj, ktorý používate pre PHP cheat sheet, je seriózny a aktuálny, aby bola zaistená presnosť a relevantnosť pre vaše potreby.

Čo je to html5 cheat sheet?

Jedným z užitočných zdrojov pre vývojárov je HTML5 Cheat Sheet, ktorý poskytuje rýchlu referenčnú príručku pre rôzne prvky, atribúty a syntax používanú v HTML5. Tento cheat obsahuje informácie o tom, ako vytvoriť nadpisy, odseky, odkazy, obrázky, tabuľky, formuláre a ďalšie. Slúži ako praktický nástroj pre začiatočníkov aj skúsených vývojárov, ktorým pomáha ušetriť čas a vyhnúť sa chybám pri kódovaní v HTML5.

Aké sú hlavné rozdiely medzi php a HTML?

PHP a HTML sa často porovnávajú a kontrastujú kvôli ich odlišným funkciám a užitočnosti pri vývoji webu. Kým HTML je zodpovedné za definovanie štruktúry a obsahu webových stránok, PHP umožňuje vytváranie dynamických prvkov, ako sú interaktívne formuláre a integrácia databáz. V dôsledku toho výber medzi PHP a HTML do značnej miery závisí od špecifických požiadaviek a cieľov projektu vývoja webu.

Kde by som mohol nájsť cheat pre html tagy?

Cheat sheety HTML tagov môžete nájsť online z rôznych zdrojov. Tu je niekoľko miest, kam sa môžete pozrieť:
Oficiálna webová stránka W3C: World Wide Web Consortium (W3C) je organizácia, ktorá vyvíja a udržiava webové štandardy vrátane HTML. Majú komplexnú dokumentáciu o HTML, ktorá slúži ako smerodajná referencia. Navštívte sekciu HTML na webovej lokalite W3C, kde nájdete podrobné informácie o značkách HTML.
Mozilla Developer Network (MDN): MDN ponúka rozsiahlu dokumentáciu o webových technológiách vrátane HTML. Ich referenčná príručka HTML je jedným z najspoľahlivejších a často aktualizovaných zdrojov, ktoré sú k dispozícii. K odkazu na element HTML môžete pristupovať vo webových dokumentoch MDN.
Webové stránky s hárkami HTML: Mnoho webových stránok poskytuje cheaty so značkami HTML v rôznych formátoch vrátane PDF. Webové stránky ako „Cheatography“, „HTML.com“ a „W3Schools“ často ponúkajú cheaty HTML, ktoré je možné vytlačiť.
GitHub: GitHub je cenným zdrojom pre vývojárov. Cheat sheety HTML tagov nájdete v rôznych úložiskách vyhľadaním „HTML cheat sheet“ alebo podobných kľúčových slov na GitHub.
Online generátory PDF: Rovnako ako v prípade PHP cheat sheets, existujú online nástroje, ktoré vám umožňujú vytvárať cheaty pre vlastné HTML tagy výberom konkrétnych tagov a prvkov, ktoré chcete zahrnúť. Tieto nástroje vygenerujú súbor PDF, ktorý si môžete stiahnuť.

Nájdete tam aj html cheat sheet vo formáte pdf.

Mathias Ahlgren je generálnym riaditeľom a zakladateľom spoločnosti Website Rating, riadenie globálneho tímu redaktorov a spisovateľov. Je držiteľom magisterského titulu z informačnej vedy a manažmentu. Jeho kariéra smerovala k SEO po prvých skúsenostiach s vývojom webu počas univerzity. S viac ako 15 rokmi v oblasti SEO, digitálneho marketingu a vývoja webu. Medzi jeho zameranie patrí aj bezpečnosť webových stránok, doložená certifikátom v kybernetickej bezpečnosti. Táto rôznorodá odbornosť je základom jeho vedúceho postavenia Website Rating.

„WSR Team“ je kolektívna skupina odborných redaktorov a autorov, ktorí sa špecializujú na technológie, internetovú bezpečnosť, digitálny marketing a vývoj webu. Sú nadšení pre digitálnu sféru a vytvárajú dobre preskúmaný, prehľadný a dostupný obsah. Ich záväzok k presnosti a jasnosti robí Website Rating dôveryhodný zdroj informácií v dynamickom digitálnom svete.

Zdieľať s...