HTML, CSS og PHP: The Ultimate Cheat Sheet

Skrevet af

📥 Download min HTML, CSS og PHP snydeark, komplet med alt hvad du behøver at vide og huske om disse tre kodningssprog.

Kunsten med kodning kan tage år at beherske fuldt ud med alle tags, syntakser og andre elementer i programmeringssprog, der ofte er sammenflettet.

Selv de mere erfarne udviklere kan falde i fælden med at glemme den korrekte syntaks for bestemte opgaver. Som sådan er det urealistisk at forvente mere grønt webudviklere at have et fejlfrit greb om kunsten.

Dette er grunden snydeark til HTML, CSS og PHP er ekstremt nyttige, uanset hvor længe du har øvet. Det fungerer som en hurtig guide til at finde de rigtige kommandoer og syntakser, så du kan fokusere på egentlig webudvikling.

Nedenfor finder du visuelt skrå snydeblade forud for hurtige opdateringer for at hjælpe dig med dine kodningsbestræbelser. Jeg har også gjort det let at bogmærke, gemme eller udskrive for din bekvemmelighed.

Hvad er HTML?

HTML står for Hypertext Markup Language - en kode, der bruges til at oprette strukturen for en webside og dens indhold.

Dette markup-sprog består af en række elementer, der bruges til at få indhold til at vises eller fungere på en bestemt måde og er en vigtig del af front-end-koden på hvert websted.

HTML er sproget til beskrivelse af websides struktur ... Med HTML beskriver forfattere sidestrukturen ved hjælp af markup. Elementerne i sproget markerer stykker af indhold som afsnit, liste, tabel osv. - fra W3.org

For eksempel kan du omslutte eller indpakke forskellige dele af indholdet - hvor de vedlagte tags kan skabe et ord eller et billedhyperlink til en anden side. Du kan også bruge dette til at kursive ord og gøre blandt andet skrifttyperne større eller mindre.

Som bemærket af W3, nogle af de andre ting, som HTML giver dig mulighed for at omfatte:

  • Udgivelse af online-dokumenter med overskrifter, tekst, tabeller, lister, fotosOsv
  • Hentning af onlineoplysninger ved at klikke på en knap via hypertekstlinks.
  • Design formularer til at gennemføre transaktioner med fjerntjenester til søge efter information, foretage reservationer eller bestille produkter, blandt andre funktioner.
  • Herunder regneark, videoklip og andre medier og applikationer, der allerede findes i dine dokumenter.

Så hvis du skulle lave linjen “Min hund er meget sød” stå alene, kan du angive, at det er et afsnit ved at omslutte det i afsnitstags (mere om dette senere), som ser ud: Min hund er meget sød

Hvad er forskellen mellem HTML og HTML5?

Som navnet antyder, HTML5 er den femte version af HTML-standarden. Det understøtter integrationen af ​​video og lyd i sproget, hvilket reducerer behovet for tredjeparts plugins og elementer.

Nedenfor er de vigtigste forskelle mellem HTML og HTML5:

HTML

  • Understøtter ikke lyd og video uden understøttelse af flash -afspillere.
  • Bruger cookies til at gemme midlertidige data.
  • Tillader ikke JavaScipt at køre i browseren.
  • Tillader vektorgrafik ved hjælp af forskellige teknologier som VML, Silver-light og Flash, blandt andre.
  • Tillader ikke træk og slip -effekter.
  • Fungerer med alle ældre browsere.
  • Mindre mobilvenligt.
  • Doktypedeklaration er lang og kompliceret.
  • Har ikke elementer som nav og header, samt attributter som charset, ensync, og ping.
  • Ekstremt svært at få ægte GeoLocation af brugere ved hjælp af en browser.
  • Kan ikke håndtere unøjagtig syntaks.

HTML5

  • Understøtter lyd- og videokontrol med brug af og tags.
  • Bruger SQL-databaser og applikationscache til at gemme offline-data.
  • Tillader JavaScript at arbejde i baggrunden ved brug af JS Web worker API.
  • Vektorgrafik er en grundlæggende del af HTML5, ligesom SVG og lærred.
  • Tillader træk og slip-effekter.
  • Gør det muligt at tegne figurer.
  • Understøtter alle nye browsere som Firefox, Mozilla, Chrome og Safari.
  • Mere mobilvenlig.
  • Doktypedeklaration er enkel og nem.
  • Har nye elementer til webstrukturer som blandt andet nav, sidehoved og sidefod, og har også attributter for tegnsæt, ensync, og ping.
  • Gør tegnkodning enkel og let.
  • Tillader sporing af brugerens GeoLocation ved hjælp af JS GeoLocation API.
  • Kan håndtere unøjagtige syntaks.
 

Derudover er der mange elementer i HTML, der enten er blevet ændret eller fjernet fra HTML5. Disse inkluderer:

  • - Ændret til
  • - Ændret til
  • - Ændret til
  • - Fjernet
  • - Fjernet
  • - Fjernet
  • - Intet nyt mærke. Bruger CSS.
  • - Intet nyt mærke. Bruger CSS.
  • - Intet nyt mærke. Bruger CSS.
  • - Intet nyt mærke. Bruger CSS.
  • - Intet nyt mærke. Bruger CSS.

I mellemtiden inkluderer HTML5 også et antal nyligt tilføjede elementer. Disse inkluderer:

 

HTML5-eksempler (Code PlayGround)

Eksempler på semantisk struktur

I HTML5 er der nogle semantiske elementer, der kan bruges til at definere forskellige dele af en webside. Her er de mest almindelige:

 

Header

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

Afsnit

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

Bortset fra (sidebjælke)

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

Sidefod

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

Grundlæggende eksempler på tekstformatering

Overskrifter til

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

Afsnit ( & )

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

Uordnet og bestilt liste

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

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

Blockquote og citer

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

Knap

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

Linjeskift

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

Vandret linje

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

Adresse

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

Abonnement og overskrift

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

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

Forkortelse

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

Kode

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

Slettet

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

Tabeleksempler

Eksempel på bordhoved, krop og fod

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

Tabeloverskrifter, rækker og dataeksempel

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

Medieeksempler

Billede

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

Billede

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

Komplet HTML snydeark

Uanset om du er en erfaren udvikler eller en, der bare ønsker at få fødderne våde i branchen, hjælper det altid at have en HTML snydeark praktisk. Og jeg har designet en, der kan hjælpe dig hvert trin på vejen.

html snydeark

 

Download HTML snydeblad

 

Hvad er CSS?

Cascading Style Sheets eller CSS beskriver, hvordan HTML -elementer vises på skærmen. Fordi det kan styre flere siders layout på samme tid, kan det spare dig for en masse tid og kræfter.

CSS er sproget til beskrivelse af præsentationen af ​​websider, herunder farver, layout og skrifttyper. Det giver en mulighed for at tilpasse præsentationen til forskellige typer enheder, såsom store skærme, små skærme eller printere. - fra W3.org

Hvad er forskellen mellem HTML og CSS?

Mens HTML og CSS begge er sprog, der bruges til at oprette websider og applikationer, har de forskellige funktioner.

HTML er det, du bruger til at diktere strukturen og det indhold, der vises på websiden.

CSS bruges derimod til ændring af webdesign af HTML-elementerne på websiden (inklusive layout, visuelle effekter og baggrundsfarve).

HTML opretter strukturen og indholdet, CSS laver designet eller stilen. Tilsammen udgør HTML og CSS en webside-grænseflade.

Hvad er CSS-syntaks?

CSS-syntaks består af en vælger og en deklarationsblok.

Vælgeren bestemmer det HTML-element, der skal styles, mens deklarationsblokken indeholder en eller flere erklæringer eller par CSS, et egenskabsnavn og en værdi med et kolon mellem dem.

Erklæringer er adskilt af semikolon, og deklarationsblokke er altid lukket i krøllede seler.

Hvis du f.eks. Vil ændre den måde, din overskrift 1 ser ud, ser din CSS-syntaks ud som sådan: h1 {farve: rød; skriftstørrelse: 16 stk;}

Komplet CSS snydeark

CSS er let nok at bruge. Udfordringen er, at der er mange vælgere og erklæringer om, at huske dem alle er svært, hvis ikke umuligt. Du behøver dog ikke at huske dem.

Her er en snydeark til CSS og CSS3 som du kan bruge når som helst.

CSS snydeark

 

Download CSS snydeblad

 

Hvad er PHP?

PHP er et akronym for Hypertext Preprocessor, et populært open source, HTML-integreret script-sprog, der bruges til at udvikle dynamiske websteder, webapplikationer eller statiske websteder.

Siden PHP er et serversidesprog, dets scripts udføres på serveren (ikke i browseren), og dens output er en almindelig HTML på browseren.

PHP er et almindeligt brugt open source-script til generelle formål, der er specielt velegnet til webudvikling og kan integreres i HTML. - fra PHP.net

Dette scriptsprog på serversiden kører på en række forskellige operativsystemer, herunder Windows, Mac OS, Linux og Unix. Det er også kompatibelt med de fleste servere såsom Apache og IIS.

Sammenlignet med andre sprog som ASP og JSP er PHP let at lære for begyndere. PHP tilbyder også masser af funktioner, som udviklere på avanceret niveau har brug for.

Hvad er forskellen mellem PHP og HTML?

Selvom begge sprog er afgørende for webudvikling, PHP og HTML er forskellige på flere måder.

Hovedforskellen ligger i, hvad de to sprog bruges til.

HTML bruges til klientsiden (eller front-end) udvikling, mens PHP bruges til serversiden udvikling.

HTML er det sprog, som udviklere bruger til at organisere indhold på et websted, f.eks. Indsættelse af tekst, billeder, tabeller og hyperlinks, formatering af tekst og angivelse af farver.

I mellemtiden bruges PHP til at gemme og hente data fra en database, udføre logiske operationer, sende og svare på e-mails, uploade og downloade filer, udvikle desktop-applikationer og mere.

Med hensyn til kodetype, HTML er statisk, mens PHP er dynamisk. En HTML -kode er altid den samme, hver gang den åbnes, mens PHP -resultater varierer afhængigt af brugerens browser.

For nye udviklere er begge sprog lette at lære, selvom indlæringskurven er kortere med HTML end PHP.

Komplet PHP Cheat Sheet

Hvis du er en nybegynder programmerer, der ønsker at være mere dygtig i PHP eller udvide din viden om det, her er en PHP snydeark kan du hurtigt henvise til.

Dette snydeark består af PHP-funktioner - som er genveje til de almindeligt anvendte koder - der er indbygget i script-sproget.

PHP snydeark

 

Download PHP snydeblad

 

Det ultimative HTML, CSS og PHP Cheat Sheet

Uanset om du er en erfaren udvikler eller bare en, der starter med kodning, er det dejligt at have noget, du altid kan vende tilbage til som reference eller blot opdatere din hukommelse.

Og som en gave til udviklere, der jonglerer mellem HTML, CSS og PHP, her er et ULTIMATE snydeark, komplet med alt hvad du behøver at vide og huske om disse tre kodningssprog:

 

Download kombineret HTML, CSS og PHP Cheat Sheet

 

Tilmeld dig vores nyhedsbrev

Abonner på vores ugentlige nyhedsbrev og få de seneste nyheder og trends i branchen

Ved at klikke på 'subscribe' accepterer du vores vilkår for brug og privatlivspolitik.