Bästa Black Friday/Cyber ​​Monday-erbjudanden för 2022 Klicka här 🤑

HTML, CSS och PHP: The Ultimate Cheat Sheet

Skriven av

📥 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 specifika 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 oerhört 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 uppdaterare för att hjälpa dig i dina kodningsinsatser. Jag har också gjort det lätt att bokmärka, spara eller skriva 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.
  • Klarar inte av 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:

 

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 bli fötter i branschen, hjälper det alltid att ha en HTML-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 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 att använda. Utmaningen är att det finns många väljare och deklarationer som kommer ihåg dem alla är svårt om inte omöjligt. 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. Det är också kompatibelt 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 -resultat 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 programmerare 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 med kodning, är det fantastiskt att ha något du alltid kan komma tillbaka till som referens eller helt enkelt uppdatera 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

 

Gå med i vårt nyhetsbrev

Prenumerera på vårt veckovisa nyhetsbrev och få de senaste branschnyheterna och trenderna

Genom att klicka på "prenumerera" godkänner du vår användarvillkor och sekretesspolicy.