HTML, CSS og PHP: Ultimate Cheat Sheet

in Auðlindir og verkfæri

Efnið okkar er lesendastutt. Ef þú smellir á tenglana okkar gætum við fengið þóknun. Hvernig við endurskoðum.

📥 Sæktu mína HTML, CSS og PHP svindlblöð, heill með öllu sem þú þarft að vita og muna varðandi þessi þrjú kóðunarmál.

Kóðunarlistin getur tekið mörg ár að ná fullum tökum með öllum merkjum, setningafræði og öðrum þáttum forritunarmála sem oft eru samtvinnuð.

Jafnvel reyndari forritarar geta fallið í þá gryfju að gleyma réttri setningafræði fyrir ákveðin verkefni. Sem slíkt er óraunhæft að búast við meira grænu vefur verktaki að hafa gallalaus tök á listinni.

Þetta er ástæðan svindlblöð fyrir HTML, CSS og PHP eru mjög gagnlegar, óháð því hversu lengi þú hefur æft. Það þjónar sem fljótleg leiðarvísir til að finna réttar skipanir og setningafræði, sem gerir þér kleift að einbeita þér að raunverulegri vefþróun.

Hér að neðan finnurðu sjónræn svindlblöð á undan hraðuppfærslum til að aðstoða þig við kóðunarviðleitni þína. Ég hef líka gert það til að vera auðvelt að bókamerki, vista það eða prenta það til þæginda.

Hvað er HTML?

HTML stendur fyrir Hypertext Markup Language – kóða sem er notaður til að búa til uppbyggingu vefsíðu og innihald hennar.

Þetta álagningarmál samanstendur af röð þátta sem notaðir voru til að láta innihald birtast eða virka á ákveðinn hátt og er stór hluti af framendakóða hvers vefsíðna.

HTML er tungumálið til að lýsa uppbyggingu vefsíðna … Með HTML lýsa höfundar uppbyggingu síðna með því að nota merkingu. Þættirnir í tungumálinu merkja efnishluta eins og málsgrein, lista, töflu og svo framvegis. – frá W3.org

Til dæmis geturðu lokað eða vefjað mismunandi hluta efnisins - þar sem meðfylgjandi merki geta gert orð eða mynd tengil á aðra síðu. Þú getur líka notað þetta til að skáletra orð og gera leturgerðina stærri eða minni, meðal annars.

Eins og fram eftir W3, sumt af því sem HTML gerir þér kleift að gera eru:

  • Gefa út skjöl á netinu með fyrirsagnir, texti, töflur, listar, myndirO.fl.
  • Að sækja upplýsingar á netinu með því að smella á hnapp í gegnum stiklutenglar.
  • Hönnun eyðublöð fyrir viðskipti með fjarþjónustu til leita að upplýsingum, panta eða panta vörur, meðal annarra aðgerða.
  • Ásamt töflureiknum, myndinnskotum og öðrum miðlum og forrit sem þegar eru í skjölunum þínum.

Svo ef þú myndir gera línuna „Hundurinn minn er mjög sætur“ standa út af fyrir sig, þú getur tilgreint að það sé málsgrein með því að setja hana inn í málsgreinamerki (meira um þetta síðar), sem myndi líta svona út: Hundurinn minn er mjög sætur

Hver er munurinn á HTML og HTML5?

Eins og nafnið gefur til kynna, HTML5 er fimmta útgáfan af HTML staðlinum. Það styður samþættingu myndbands og hljóðs í tungumálið, sem dregur úr þörfinni fyrir viðbætur og þætti frá þriðja aðila.

Hér að neðan er aðalmunurinn á HTML og HTML5:

HTML

  • Styður ekki hljóð og myndefni án stuðnings flashspilara.
  • Notar vafrakökur til að geyma tímabundin gögn.
  • Leyfir JavaScipt ekki að keyra í vafranum.
  • Leyfir vektorgrafík með því að nota mismunandi tækni eins og VML, Silver-light og Flash, meðal annarra.
  • Leyfir ekki draga og sleppa áhrifum.
  • Virkar með öllum eldri vöfrum.
  • Minni farsímavænt.
  • Doctype yfirlýsing er löng og flókin.
  • Er ekki með þætti eins og nav og haus, svo og eiginleika eins og charset, async, og ping.
  • Mjög erfitt að fá sanna GeoLocation notenda með því að nota vafra.
  • Þolir ekki ónákvæma setningafræði.

HTML5

  • Styður hljóð- og myndstýringar með því að nota og merki.
  • Notar SQL gagnagrunna og skyndiminni forrita til að geyma gögn án nettengingar.
  • Leyfir JavaScript að virka í bakgrunni með notkun JS Web worker API.
  • Vektorgrafík er grundvallaratriði í HTML5, líkt og SVG og striga.
  • Leyfir draga og sleppa áhrifum.
  • Gerðu það mögulegt að teikna form.
  • Styður alla nýja vafra eins og Firefox, Mozilla, Chrome og Safari.
  • Meira farsímavænt.
  • Doctype yfirlýsing er einföld og auðveld.
  • Er með nýja þætti fyrir vefuppbyggingu eins og nav, haus og fót, meðal annarra, og hefur einnig eiginleika stafasetts, async, og ping.
  • Gerir persónukóðun einfalda og auðvelda.
  • Gerir kleift að fylgjast með GeoLocation notanda með því að nota JS GeoLocation API.
  • Fær um að meðhöndla ónákvæma setningafræði.
 

Að auki eru margir þættir HTML sem annað hvort hefur verið breytt eða fjarlægt úr HTML5. Þar á meðal eru:

  • — Breytt í
  • — Breytt í
  • — Breytt í
  • — Fjarlægt
  • — Fjarlægt
  • — Fjarlægt
  • - Ekkert nýtt merki. Notar CSS.
  • - Ekkert nýtt merki. Notar CSS.
  • - Ekkert nýtt merki. Notar CSS.
  • - Ekkert nýtt merki. Notar CSS.
  • - Ekkert nýtt merki. Notar CSS.

Á sama tíma inniheldur HTML5 einnig fjölda nýlega bættra þátta. Þar á meðal eru:

 

HTML5 dæmi (Code PlayGround)

Merkingarfræðileg uppbygging dæmi

In HTML5 það eru nokkrir merkingarþættir sem hægt er að nota til að skilgreina mismunandi hluta vefsíðunnar. Hér eru þær algengustu:

html5 merkingarfræðilega uppbyggingu þætti
Heimild: w3schools.com
 

Fyrirsögn

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

kafla

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

gr

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

Til hliðar (hliðarstika)

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

Fótur

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

Dæmi um grunn textasnið

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

Málsgrein ( & )

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

Óraðað og pantaðan lista

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

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

Blockquote og vitna í

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

Tengill

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

Takki

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

Línuskil

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

Lárétt lína

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

Heimilisfang

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

Áskrift og yfirskrift

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

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

Skammstöfun

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

Kóði

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

Tími

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

Eytt

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

Töfludæmi

Dæmi um borð höfuð, líkama og fót

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

Töflufyrirsagnir, línur og gagnadæmi

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

Fjölmiðladæmi

Mynd

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

Mynd

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

Mynd

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

Myndband

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

Ljúktu við HTML svindlblað

Hvort sem þú ert vanur þróunaraðili eða einhver sem er bara að leita að því að koma fótunum fyrir í greininni, þá hjálpar það alltaf að hafa HTML snið svindlari Handlaginn. Og ég hef hannað einn sem gæti hjálpað þér hvert skref á leiðinni.

html svindlblað

 

Sækja HTML svindlblað

 

Hvað er CSS?

Cascading Style Sheets eða CSS lýsir því hvernig HTML þættir munu birtast á skjánum. Vegna þess að það getur stjórnað uppsetningu margra síðna á sama tíma getur það sparað þér mikinn tíma og fyrirhöfn.

CSS er tungumálið til að lýsa framsetningu vefsíðna, þar á meðal liti, uppsetningu og leturgerðir. Það gerir manni kleift að laga kynninguna að mismunandi gerðum tækja, svo sem stórum skjáum, litlum skjáum eða prenturum. – frá W3.org

Hver er munurinn á HTML og CSS?

Þó að HTML og CSS séu bæði tungumál notuð til að byggja vefsíður og forrit, hafa þau mismunandi aðgerðir.

HTML er það sem þú notar til að segja til um uppbyggingu og innihald sem birtist á vefsíðunni.

CSS er aftur á móti notað til að breyta vefhönnun af HTML þáttunum á vefsíðunni (þar á meðal útlit, sjónræn áhrif og bakgrunnslit).

HTML skapar uppbyggingu og innihald, CSS sér um hönnunina eða stílinn. Saman mynda HTML og CSS vefsíðuviðmót.

Hvað er CSS setningafræði?

CSS setningafræði samanstendur af vali og yfirlýsingablokk.

Valinn ákvarðar HTML-eininguna sem á að stilla á meðan yfirlýsingablokkin inniheldur eina eða fleiri yfirlýsingar eða pör af CSS, eignarheiti og gildi með tvípunkti á milli.

Yfirlýsingar eru aðskildar með semíkommum og yfirlýsingarblokkir eru alltaf lokaðir með krulluðum axlaböndum.

Til dæmis, ef þú vilt breyta því hvernig fyrirsögn 1 lítur út, myndi CSS setningafræði þín líta svona út: h1 {color:red; leturstærð:16pc;}

Ljúktu við CSS svindlblað

CSS er nógu auðvelt í notkun. Áskorunin er sú að það eru margir valmenn og yfirlýsingar um að það sé erfitt ef ekki ómögulegt að muna þá alla. Þú þarft samt ekki að leggja þau á minnið.

Hér er svindlblað fyrir CSS og CSS3 sem þú getur notað hvenær sem er.

CSS svindlblað

 

Sækja CSS svindlblað

 

Hvað er PHP?

PHP er skammstöfun fyrir Hypertext Preprocessor, vinsælt opið, HTML-innfellt forskriftarmál notað til að þróa kraftmiklar vefsíður, vefforrit eða kyrrstæðar vefsíður.

Þar PHP er tungumál á netþjóni, forskriftir þess eru keyrðar á þjóninum (ekki í vafranum) og úttak þess er venjulegt HTML í vafranum.

PHP er mikið notað opinn uppspretta almennt forskriftarmál sem hentar sérstaklega vel fyrir vefþróun og er hægt að fella það inn í HTML. – frá PHP.net

Þetta forskriftarmál á netþjóninum keyrir á ýmsum stýrikerfum, þar á meðal Windows, Mac OS, Linux og Unix. Það er líka samhæft við flesta netþjóna eins og Apache og IIS.

Í samanburði við önnur tungumál eins og ASP og JSP er PHP auðvelt að læra fyrir byrjendur. PHP býður einnig upp á fullt af eiginleikum sem háþróaðir forritarar þurfa.

Hver er munurinn á PHP og HTML?

Þótt bæði tungumálin skipti sköpum fyrir vefur þróun, PHP og HTML eru mismunandi á nokkra vegu.

Lykilmunurinn liggur í því til hvers tungumálin tvö eru notuð.

HTML er notað fyrir viðskiptavininn (eða framhlið) þróun, á meðan PHP er notað fyrir miðlarahlið þróun.

HTML er tungumálið sem forritarar nota til að skipuleggja efni á vefsíðu, svo sem að setja inn texta, myndir, töflur og tengla, forsníða texta og tilgreina liti.

Á sama tíma er PHP notað til að geyma og sækja gögn úr gagnagrunni, framkvæma rökréttar aðgerðir, senda og svara tölvupóstum, hlaða upp og hlaða niður skrám, þróa skrifborðsforrit og fleira.

Hvað varðar tegund kóða, HTML er kyrrstætt á meðan PHP er kraftmikið. HTML kóði er alltaf sá sami í hvert skipti sem hann er opnaður, en PHP niðurstöður eru mismunandi eftir vafra notandans.

Fyrir nýja forritara er auðvelt að læra bæði tungumálin, þó að námsferillinn sé styttri með HTML en PHP.

Ljúktu við PHP svindlblað

Ef þú ert byrjandi forritari sem vilt vera færari í PHP eða auka þekkingu þína á því, hér er PHP svindlari þú getur fljótt vísað til.

Þetta svindlblað samanstendur af PHP aðgerðum – sem eru flýtileiðir fyrir þá kóða sem eru mikið notaðir – sem eru innbyggðir í forskriftarmálið.

PHP svindlblað

 

Sækja PHP svindlblað

 

Ultimate HTML, CSS og PHP svindlblaðið

Hvort sem þú ert vanur verktaki eða bara einhver að byrja að kóða, þá er frábært að hafa eitthvað sem þú getur alltaf snúið aftur til til viðmiðunar eða einfaldlega endurnært minni þitt.

Og sem gjöf til þróunaraðila sem flakka á milli HTML, CSS og PHP, hér er ULTIMATE svindlblað, heill með öllu sem þú þarft að vita og muna varðandi þessi þrjú kóðunarmál:

 

Sæktu samsett HTML, CSS og PHP svindlblað

 

Um höfund

Matt Ahlgren

Mathias Ahlgren er forstjóri og stofnandi Website Rating, stýra alþjóðlegu teymi ritstjóra og rithöfunda. Hann er með meistaragráðu í upplýsingafræði og stjórnun. Ferill hans snerist að SEO eftir snemma reynslu af vefþróun í háskóla. Með yfir 15 ár í SEO, stafrænni markaðssetningu og vefþróun. Áhersla hans felur einnig í sér vefsíðuöryggi, sem sést af vottorði í netöryggi. Þessi fjölbreytta sérþekking er undirstaða forystu hans á Website Rating.

WSR lið

"WSR Team" er hópur sérfróðra ritstjóra og rithöfunda sem sérhæfa sig í tækni, netöryggi, stafrænni markaðssetningu og vefþróun. Þeir hafa brennandi áhuga á stafræna sviðinu og framleiða vel rannsakað, innsæi og aðgengilegt efni. Skuldbinding þeirra við nákvæmni og skýrleika gerir Website Rating traust úrræði til að vera upplýst í hinum kraftmikla stafræna heimi.

Deildu til...