HTML, CSS och PHP: The Ultimate Cheat Sheet

Vårt innehåll är läsarstödt. Om du klickar på våra länkar kan vi tjäna en provision. Hur vi granskar.

📥 Ladda ner min HTML, CSS och PHP fuskark, komplett med allt du behöver veta och komma ihåg angående dessa tre kodningsspråk.

Koden för kodning kan ta år att helt behärska med alla taggar, syntaxer och andra element i programmeringsspråk som ofta är sammanflätade.

Även de mer erfarna utvecklarna kan falla i fällan att glömma rätt syntax för särskilda uppgifter. Som sådan är det orealistiskt att förvänta sig mer grönt webbutvecklare att ha ett oklanderligt grepp om konsten.

Det här är varför fuskark för HTML, CSS och PHP är extremt användbara, oavsett hur länge du har tränat. Det fungerar som en snabbguide för att hitta rätt kommandon och syntaxer, så att du kan fokusera på faktisk webbutveckling.

Nedan hittar du visuellt lutande fuskblad som föregås av snabba uppdateringar för att hjälpa dig i dina kodningssträvanden. Jag har också gjort det så att det enkelt kan bokmärkas, sparas eller skrivas ut för din bekvämlighet.

Vad är HTML?

HTML står för Hypertext Markup Language – en kod som används för att skapa strukturen för en webbsida och dess innehåll.

Detta markeringsspråk består av en serie element som används för att få innehåll att visas eller fungera på ett visst sätt och är en viktig del av front-end-koden på varje webbplats.

HTML är språket för att beskriva strukturen på webbsidor ... Med HTML beskriver författare sidstrukturen med markering. Elementen i språket märker innehållsdelar som stycke, lista, tabell och så vidare. - från W3.org

Du kan till exempel bifoga eller lägga in olika delar av innehållet - där de bifogade taggarna kan skapa ett ord eller en bildhyperlänk till en annan sida. Du kan också använda detta för att kursivera ord och göra bland annat teckensnitten större eller mindre.

Som framgår av W3, några av de andra saker som HTML låter dig göra inkluderar:

  • Publicera online-dokument med rubriker, text, tabeller, listor, fotonEtc.
  • Hämta onlineinformation genom att klicka på en knapp via hypertextlänkar.
  • Utforma former för att genomföra transaktioner med fjärrtjänster till söka efter information, boka eller beställa produkter, bland andra funktioner.
  • Inklusive kalkylblad, videoklipp och andra media och ansökningar som redan finns i dina dokument.

Så om du skulle göra linjen "Min hund är väldigt söt" stå för sig själv kan du ange att det är ett stycke genom att bifoga det i stycken taggar (mer om detta senare), som skulle se ut: Min hund är väldigt söt

Vad är skillnaden mellan HTML och HTML5?

Som namnet antyder, HTML5 är den femte versionen av HTML-standarden. Den stöder integrering av video och ljud i språket, vilket minskar behovet av plug-ins och element från tredje part.

Nedan visas de viktigaste skillnaderna mellan HTML och HTML5:

html

  • Stöder inte ljud och video utan stöd för flashspelare.
  • Använder cookies för att lagra tillfällig data.
  • Tillåter inte att JavaScipt körs i webbläsaren.
  • Tillåter vektorgrafik med hjälp av olika tekniker som VML, Silver-light och Flash, bland andra.
  • Tillåter inte dra och släpp-effekter.
  • Fungerar med alla äldre webbläsare.
  • Mindre mobilvänligt.
  • Doktypdeklaration är lång och komplicerad.
  • Har inte element som nav och header, samt attribut som charset, async, och pinga.
  • Extremt svårt att få en riktig GeoLocation av användare med hjälp av en webbläsare.
  • Kan inte hantera felaktig syntax.

HTML5

  • Stöder ljud- och videokontroller med hjälp av och taggar.
  • Använder SQL-databaser och applikationscache för att lagra offline-data.
  • Tillåter JavaScript att arbeta i bakgrunden med hjälp av JS Web worker API.
  • Vektorgrafik är en grundläggande del av HTML5, ungefär som SVG och canvas.
  • Tillåter dra och släpp-effekter.
  • Gör det möjligt att rita former.
  • Stöder alla nya webbläsare som Firefox, Mozilla, Chrome och Safari.
  • Mer mobilvänligt.
  • Doktypdeklaration är enkelt och enkelt.
  • Har nya element för webbstrukturer som bland annat nav, sidhuvud och sidfot, och har också attribut för teckenuppsättning, ensync, och pinga.
  • Gör teckenkodning enkelt och enkelt.
  • Tillåter spårning av GeoLocation för användare med JS GeoLocation API.
  • Kan hantera felaktiga syntaxer.
 

Dessutom finns det många HTML-element som antingen har modifierats eller tagits bort från HTML5. Dessa inkluderar:

  • - Ändrad till
  • - Ändrad till
  • - Ändrad till
  • - Tog bort
  • - Tog bort
  • - Tog bort
  • - Ingen ny tagg. Använder CSS.
  • - Ingen ny tagg. Använder CSS.
  • - Ingen ny tagg. Använder CSS.
  • - Ingen ny tagg. Använder CSS.
  • - Ingen ny tagg. Använder CSS.

Under tiden innehåller HTML5 också ett antal nyligen tillagda element. Dessa inkluderar:

 

HTML5-exempel (kod PlayGround)

Exempel på semantisk struktur

In HTML5 det finns några semantiska element som kan användas för att definiera olika delar av en webbsida. Här är de vanligaste:

html5 semantiska strukturelement
källa: w3schools.com
 

Rubrik

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

Sektion

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

Artikel

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

Bortsett från (sidofält)

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

Sidfot

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

Grundläggande textformateringsexempel

Rubriker till

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

Paragraf ( & )

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

Obeställd och beställd lista

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

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

Block citat och citerar

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

Länk

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

Knapp

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

Linjeavbrott

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

Vågrät linje

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

Adress

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

Prenumeration och överskrift

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

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

Förkortning

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

Koda

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

Tid

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

raderade

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

Tabellexempel

Tabellhuvud, kropp och fot exempel

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

Tabellrubriker, rader och dataexempel

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

Mediaexempel

Bild

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

Bild

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

Figur

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

Komplett HTML-fuskark

Oavsett om du är en erfaren utvecklare eller någon som bara vill ta tag i branschen, hjälper det alltid att ha en HTML-formatering fuskark praktisk. Och jag har designat en som kan hjälpa dig varje steg på vägen.

html fuskark

 

Ladda ner HTML Cheat Sheet

 

Vad är CSS?

Cascading Style Sheets eller CSS beskriver hur HTML-element kommer att visas på skärmen. Eftersom det kan styra flera sidors layouter samtidigt, kan det spara mycket tid och ansträngning.

CSS är språket för att beskriva presentationen av webbsidor, inklusive färger, layout och teckensnitt. Det gör att man kan anpassa presentationen till olika typer av enheter, såsom stora skärmar, små skärmar eller skrivare. - från W3.org

Vad är skillnaden mellan HTML och CSS?

HTML och CSS är båda språk som används för att skapa webbsidor och applikationer, men de har olika funktioner.

HTML är vad du använder för att diktera strukturen och innehållet som kommer att visas på webbsidan.

CSS används däremot för modifiering av webbdesign av HTML-elementen på webbsidan (inklusive layout, visuella effekter och bakgrundsfärg).

HTML skapar strukturen och innehållet, CSS gör designen eller stilen. Tillsammans utgör HTML och CSS ett webbsidesgränssnitt.

Vad är CSS-syntax?

CSS-syntax består av en väljare och ett deklarationsblock.

Väljaren bestämmer HTML-elementet som ska utformas medan deklarationsblocket innehåller en eller flera deklarationer eller par CSS, ett egenskapsnamn och ett värde med ett kolon mellan dem.

Deklarationer är åtskilda av semikolon och deklarationsblock är alltid inneslutna i lockiga hängslen.

Om du till exempel vill ändra hur rubrik 1 ser ut, skulle din CSS-syntax se ut så här: h1 {färg: röd; teckenstorlek: 16 st;}

Komplett CSS fuskark

CSS är lätt nog att använda. Utmaningen är att det finns många väljare och deklarationer om att det är svårt för att inte säga omöjligt att komma ihåg dem alla. Du behöver dock inte memorera dem.

Här är en fuskark för CSS och CSS3 som du kan använda när som helst.

CSS fuskark

 

Ladda ner CSS Cheat Sheet

 

Vad är PHP?

PHP är en förkortning för Hypertext Preprocessor, ett populärt HTML-inbäddat skriptspråk med öppen källkod som används för att utveckla dynamiska webbplatser, webbapplikationer eller statiska webbplatser.

Eftersom PHP är ett serversidespråk, dess skript körs på servern (inte i webbläsaren), och dess utdata är en vanlig HTML i webbläsaren.

PHP är ett allmänt använt öppen källkod för allmänt skriptspråk som är särskilt lämpligt för webbutveckling och kan bäddas in i HTML. - från PHP.net

Detta skriptspråk på serversidan körs på en mängd olika operativsystem, inklusive Windows, Mac OS, Linux och Unix. Den är också kompatibel med de flesta servrar som Apache och IIS.

Jämfört med andra språk som ASP och JSP är PHP lätt att lära sig för nybörjare. PHP erbjuder också många funktioner som avancerade utvecklare behöver.

Vad är skillnaden mellan PHP och HTML?

Även om båda språken är avgörande för webbutveckling, PHP och HTML är olika på flera sätt.

Huvudskillnaden ligger i vad de två språken används för.

HTML används för klientsidan (eller front-end) utveckling, medan PHP används för serversidan utveckling.

HTML är det språk som utvecklare använder för att organisera innehåll på en webbplats, som att infoga text, bilder, tabeller och hyperlänkar, formatera text och ange färger.

Under tiden används PHP för att lagra och hämta data från en databas, utföra logiska operationer, skicka och svara på e-postmeddelanden, ladda upp och ladda ner filer, utveckla skrivbordsapplikationer och mer.

När det gäller kodtyp, HTML är statisk medan PHP är dynamisk. En HTML-kod är alltid densamma varje gång den öppnas, medan PHP-resultaten varierar beroende på användarens webbläsare.

För nya utvecklare är båda språken lätta att lära sig, även om inlärningskurvan är kortare med HTML än PHP.

Komplett PHP Cheat Sheet

Om du är en nybörjare som vill bli mer skicklig i PHP eller utöka dina kunskaper om det, här är en PHP fuskark du kan snabbt hänvisa till.

Detta fuskark består av PHP-funktioner - som är genvägar för de allmänt använda koder - som är inbyggda i skriptspråket.

PHP fuskblad

 

Ladda ner PHP Cheat Sheet

 

Ultimate HTML, CSS och PHP Cheat Sheet

Oavsett om du är en erfaren utvecklare eller bara någon som börjar koda, är det bra att ha något du alltid kan komma tillbaka till för referens eller helt enkelt fräscha upp ditt minne.

Och som en gåva till utvecklare som jonglerar mellan HTML, CSS och PHP, här är ett ULTIMATE fuskark, komplett med allt du behöver veta och komma ihåg angående dessa tre kodningsspråk:

 

Ladda ner kombinerat HTML, CSS och PHP Cheat Sheet

 

FAQ

Vad är html css cheat sheet?

HTML- och CSS-fuskblad är en användbar resurs för nybörjare och till och med erfarna webbutvecklare. Denna praktiska referensguide ger en snabb översikt över de vanligaste HTML- och CSS-syntaxerna och egenskaperna. 

Var kan jag få php fuskblad pdf?

Du kan hitta PHP-fuskblad i PDF-format från olika källor online. Här är några platser där du kan titta:
Officiell PHP-webbplats: Kontrollera den officiella PHP-webbplatsen (php.net) för officiell dokumentation, som inkluderar en omfattande PHP-manual som du kan ladda ner i PDF-format. Även om det inte är ett fuskark i sig, innehåller det omfattande information om PHP-funktioner och användning.
PHP Cheat Sheet-webbplatser: Många webbplatser tillhandahåller fuskblad för PHP-programmering. Webbplatser som "Cheatography" erbjuder ofta användarbidrag med fuskblad i PDF-format. Sök bara efter "PHP cheat sheet PDF" på din favoritsökmotor för att hitta dessa resurser.
GitHub: GitHub är en plattform för utvecklare att dela kod och resurser. Du kan hitta PHP cheat sheets i PDF-format på GitHub genom att söka efter "PHP cheat sheet" i GitHubs sökfält. Många utvecklare och organisationer delar med sig av sina fuskblad och resurser där.
Online PDF-generatorer: Det finns onlineverktyg som låter dig skapa anpassade fuskblad för PHP genom att välja de specifika funktioner och ämnen du vill inkludera. Dessa verktyg genererar en PDF-fil som du kan ladda ner. Ett sådant verktyg är "PDFCcrowd."
Kom ihåg att se till att källan du använder för ett PHP-fuskblad är ansedd och uppdaterad för att säkerställa noggrannhet och relevans för dina behov.

Vad är html5 cheat sheet?

En användbar resurs för utvecklare är HTML5 Cheat Sheet, som ger en snabbreferensguide för de olika elementen, attributen och syntaxen som används i HTML5. Det här fuskbladet innehåller information om hur du skapar rubriker, stycken, länkar, bilder, tabeller, formulär och mer. Det fungerar som ett praktiskt verktyg för både nybörjare och erfarna utvecklare, vilket hjälper dem att spara tid och undvika fel när de kodar i HTML5.

Vilka är de viktigaste skillnaderna mellan php vs HTML?

PHP och HTML jämförs ofta och kontrasteras på grund av deras distinkta funktioner och användbarhet i webbutveckling. Medan HTML är ansvarigt för att definiera strukturen och innehållet på webbsidor, tillåter PHP skapande av dynamiska element, såsom interaktiva formulär och databasintegration. Följaktligen beror valet mellan PHP och HTML till stor del på de specifika kraven och målen för ett webbutvecklingsprojekt.

Var kan jag hitta html-taggar cheat sheet?

Du kan hitta fuskblad för HTML-taggar online från olika källor. Här är några platser där du kan titta:
Officiell W3C-webbplats: World Wide Web Consortium (W3C) är den organisation som utvecklar och underhåller webbstandarder, inklusive HTML. De har omfattande dokumentation om HTML, som fungerar som en auktoritativ referens. Besök HTML-sektionen på W3C:s webbplats för detaljerad information om HTML-taggar.
Mozilla Developer Network (MDN): MDN erbjuder omfattande dokumentation om webbteknik, inklusive HTML. Deras HTML-referensguide är en av de mest tillförlitliga och ofta uppdaterade resurserna som finns tillgängliga. Du kan komma åt HTML-elementreferensen i MDN web docs.
HTML Cheat Sheet-webbplatser: Många webbplatser tillhandahåller HTML-taggar fuskblad i olika format, inklusive PDF. Webbplatser som "Cheatography", "HTML.com" och "W3Schools" erbjuder ofta utskrivbara HTML-fuskblad.
GitHub: GitHub är en värdefull resurs för utvecklare. Du kan hitta HTML-taggar cheat sheets i olika repositories genom att söka efter "HTML cheat sheet" eller liknande nyckelord på GitHub.
Online PDF-generatorer: Precis som med PHP-fuskblad finns det onlineverktyg som låter dig skapa anpassade HTML-taggar-fuskblad genom att välja de specifika taggar och element som du vill inkludera. Dessa verktyg genererar en PDF-fil som du kan ladda ner.

Där kan du också hitta html cheat sheet pdf-format.

Mathias Ahlgren är VD och grundare av Website Rating, som leder ett globalt team av redaktörer och skribenter. Han har en magisterexamen i informationsvetenskap och management. Hans karriär svängde till SEO efter tidiga webbutvecklingserfarenheter under universitetet. Med över 15 år inom SEO, digital marknadsföring och webbutveckling. Hans fokus inkluderar också webbplatssäkerhet, vilket bevisas av ett certifikat inom Cyber ​​Security. Denna mångsidiga expertis underbygger hans ledarskap på Website Rating.

"WSR Team" är den kollektiva gruppen av expertredaktörer och skribenter som specialiserar sig på teknik, internetsäkerhet, digital marknadsföring och webbutveckling. De brinner för den digitala sfären och producerar välundersökt, insiktsfullt och tillgängligt innehåll. Deras engagemang för noggrannhet och tydlighet gör Website Rating en pålitlig resurs för att hålla sig informerad i den dynamiska digitala världen.

Hållas informerad! Gå med i vårt nyhetsbrev
Prenumerera nu och få gratis tillgång till guider, verktyg och resurser som endast gäller för prenumeranter.
Du kan avbryta prenumerationen när som helst. Din data är säker.
Hållas informerad! Gå med i vårt nyhetsbrev
Prenumerera nu och få gratis tillgång till guider, verktyg och resurser som endast gäller för prenumeranter.
Du kan avbryta prenumerationen när som helst. Din data är säker.
Hållas informerad! Gå med i vårt nyhetsbrev!
Prenumerera nu och få gratis tillgång till guider, verktyg och resurser som endast gäller för prenumeranter.
Hålla sig uppdaterad! Gå med i vårt nyhetsbrev
Du kan avbryta prenumerationen när som helst. Din data är säker.
Mitt företag
Hålla sig uppdaterad! Gå med i vårt nyhetsbrev
???? Du är (nästan) prenumererad!
Gå över till din e-postinkorg och öppna e-postmeddelandet jag skickade till dig för att bekräfta din e-postadress.
Mitt företag
Du är prenumererad!
Tack för din prenumeration. Vi skickar ut nyhetsbrev med insiktsfull information varje måndag.
Dela till...