HTML, CSS og PHP: The Ultimate Cheat Sheet

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

• Hvad er HTML?
• HTML5-eksempler (Code PlayGround)
• Ch HTML snydeark
• Hvad er CSS?
• 📥 CSS snydeark
• Hvad er PHP?
• 📥 PHP snydeark
• 📥 HTML CSS og PHP Cheat Sheet

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 til 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 yderst nyttige, uanset hvor længe du har øvet dig. Det fungerer som en hurtig guide til at finde de rigtige kommandoer og syntakser, så du kan fokusere på faktisk webudvikling.

Nedenfor finder du visuelt tilbøjelige snydeark efterfulgt af hurtige genopfriskning for at hjælpe dig i dine kodningsbestræbelser. Jeg har også lavet det til nemt at blive bogmærket, gemt eller udskrevet for din bekvemmelighed.

Hvad er HTML?

HTML står for Hypertext Markup Language – en kode, der bruges til at skabe 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:

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

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

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

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

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

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

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

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

Grundlæggende eksempler på tekstformatering

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tabeleksempler

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

<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

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

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

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

<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 søger at få fødderne våde i branchen, hjælper det altid at have en HTML-formatering snydeark praktisk. Og jeg har designet en, der kan hjælpe dig hele vejen.

Download HTML snydeblad

Hvad er CSS?

Cascading Style Sheets eller CSS beskriver, hvordan HTML-elementer vil blive vist på skærmen. Fordi det kan kontrollere 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 det er svært, hvis ikke umuligt, at huske dem alle. Du behøver dog ikke at lære dem udenad.

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

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 server-side scriptsprog kører på en række forskellige operativsystemer, herunder Windows, Mac OS, Linux og Unix. Den er også kompatibel med de fleste servere 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 programmør, der ønsker at blive dygtigere til 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.

Download PHP snydeblad

Det ultimative HTML, CSS og PHP Cheat Sheet

Uanset om du er en erfaren udvikler eller bare en, der starter med at kode, er det fantastisk at have noget, du altid kan vende tilbage til som reference eller blot genopfriske 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