📥 Atsisiųskite mano HTML, CSS ir PHP kodų lapai, su viskuo, ką reikia žinoti ir atsiminti apie šias tris kodavimo kalbas.
- Kas yra HTML?
- HTML5 pavyzdžiai (Code PlayGround)
- 📥 HTML kodų lapas
- Kas yra CSS?
- 📥 CSS kodų lapas
- Kas yra PHP?
- 📥 PHP kodų lapas
- 📥 HTML CSS ir PHP kodų lapas
Kodavimo menas gali užtrukti ne vienerius metus, kol jis bus visiškai įvaldytas, kai visos programavimo kalbų žymos, sintaksės ir kiti elementai dažnai yra susipynę.
Net labiau patyrę kūrėjai gali pakliūti į spąstus, pamiršę teisingą tam tikrų užduočių sintaksę. Todėl nerealu tikėtis daugiau žalios spalvos žiniatinklio kūrėjai nepriekaištingai suvokti meną.
Tai kodėl HTML, CSS ir PHP cheat sheets yra labai naudingi, nepaisant to, kiek laiko treniruojatės. Tai yra greitas vadovas ieškant tinkamų komandų ir sintaksių, leidžiančių susitelkti ties žiniatinklio kūrimu.
Žemiau rasite vizualiai linkusius apgaulingus lapus, prieš kuriuos pateikiami greiti atnaujinimai, kurie padės jums kodavimo pastangas. Jūsų patogumui taip pat padariau jį taip, kad jį būtų galima lengvai pažymėti, išsaugoti arba atspausdinti.
Kas yra HTML?
HTML reiškia hiperteksto žymėjimo kalbą – kodas, naudojamas kuriant tinklalapio ir jo turinio struktūrą.
Šią žymėjimo kalbą sudaro daugybė elementų, kurie naudojami tam, kad turinys būtų rodomas arba veiktų tam tikru būdu, ir yra pagrindinė kiekvienos svetainės priekinio kodo dalis.
HTML yra kalba, skirta apibūdinti tinklalapių struktūrą... Naudodami HTML, autoriai aprašo puslapių struktūrą naudodami žymėjimą. Kalbos elementai žymi turinio dalis, pvz., pastraipą, sąrašą, lentelę ir pan. – iš W3.org
Pavyzdžiui, galite įterpti arba apvynioti skirtingas turinio dalis, kur įtraukiančios žymos gali sukurti žodį ar vaizdą hipersaitu į kitą puslapį. Taip pat galite tai naudoti norėdami kursyvuoti žodžius ir padidinti arba sumažinti šriftus, be kita ko.
Kaip pažymėjo W3, kai kurie kiti dalykai, kuriuos HTML leidžia padaryti, yra šie:
- Dokumentų publikavimas internete su antraštės, tekstas, lentelės, sąrašai, nuotraukosIr tt
- Internetinės informacijos gavimas vienu mygtuko paspaudimu per hipertekstinės nuorodos.
- Projektavimas formos sandoriams su nuotolinėmis paslaugomis atlikti ieškoti informacijos, rezervuoti arba užsisakyti produktus, be kitų funkcijų.
- Įskaitant skaičiuoklės, vaizdo klipai ir kita laikmena ir jūsų dokumentuose jau esančios paraiškos.
Taigi, jei norėsite padaryti liniją „Mano šuo labai mielas“ stovėti savarankiškai, galite nurodyti, kad tai yra pastraipa, įtraukdami ją į pastraipų žymas (apie tai vėliau), kurios atrodytų taip: Mano šuo labai mielas
Kuo skiriasi HTML ir HTML5?
Kaip rodo pavadinimas, HTML5 yra penktoji HTML standarto versija. Tai palaiko vaizdo ir garso integravimą į kalbą, o tai sumažina trečiųjų šalių įskiepių ir elementų poreikį.
Toliau pateikiami pagrindiniai HTML ir HTML5 skirtumai:
HTML
- Nepalaiko garso ir vaizdo be „Flash“ grotuvo palaikymo.
- Naudoja slapukus laikiniems duomenims saugoti.
- Neleidžia „JavaScipt“ paleisti naršyklėje.
- Leidžia vektorinę grafiką naudojant įvairias technologijas, tokias kaip VML, Silver-light ir Flash.
- Neleidžia vilkite ir numeskite efektų.
- Veikia su visomis senesnėmis naršyklėmis.
- Mažiau patogus mobiliesiems.
- Doctype deklaracija yra ilga ir sudėtinga.
- Jame nėra elementų, pvz., navigacijos ir antraštės, taip pat atributų, pvz., simbolių rinkinio, async ir ping.
- Labai sunku gauti tikrą vartotojų geografinę vietą naudojant naršyklę.
- Negaliu tvarkyti netikslios sintaksės.
HTML5
- Palaiko garso ir vaizdo valdiklius naudojant ir žymės.
- Duomenims neprisijungus saugoti naudoja SQL duomenų bazes ir programų talpyklą.
- Leidžia „JavaScript“ veikti fone naudojant JS žiniatinklio darbuotojo API.
- Vektorinė grafika yra pagrindinė HTML5 dalis, panašiai kaip SVG ir drobė.
- Leidžia vilkti ir nuleisti efektus.
- Suteikti galimybę piešti figūras.
- Palaiko visas naujas naršykles, tokias kaip Firefox, Mozilla, Chrome ir Safari.
- Patogesnis mobiliesiems.
- Doctype deklaravimas yra paprastas ir lengvas.
- Yra naujų elementų, skirtų žiniatinklio struktūroms, pvz., navigacijai, antraštei ir poraštei, be kita ko, taip pat yra simbolių rinkinio, asinchronizavimo ir ping atributų.
- Padaro simbolių kodavimą paprastą ir lengvą.
- Leidžia sekti vartotojo geografinę vietą naudojant JS GeoLocation API.
- Gali tvarkyti netikslią sintaksę.
Be to, yra daug HTML elementų, kurie buvo modifikuoti arba pašalinti iš HTML5. Jie apima:
- – Pakeista į
- – Pakeista į
- – Pakeista į
- – Pašalintas
- – Pašalintas
- – Pašalintas
- – Nėra naujos etiketės. Naudoja CSS.
- – Nėra naujos etiketės. Naudoja CSS.
- – Nėra naujos etiketės. Naudoja CSS.
- – Nėra naujos etiketės. Naudoja CSS.
- – Nėra naujos etiketės. Naudoja CSS.
Tuo tarpu HTML5 taip pat apima nemažai naujai pridėtų elementų. Jie apima:
- nav
- garso
- paveikslo antraštė
- pažanga
- komanda
- laikas
- duomenų sąrašas
- video
- suprasti
- skaitiklis
- duomenys
- skyrius
- laikas
- panaikinti
- drobė
- santrauka
- rp
- rt
- detalės
- wbr
- antraštė
- apačia
- keygen
- įdėti
- straipsnis
- h grupė
- bdi
- ženklas
- produkcija
- Šaltinis
- sekti
- skyrius
- rubinas
HTML5 pavyzdžiai (Code PlayGround)
Semantinės struktūros pavyzdžiai
In HTML5 yra keletas semantinių elementų, kurie gali būti naudojami skirtingoms tinklalapio dalims apibrėžti. Štai dažniausiai pasitaikantys:
Antraštė
<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>
Skyrius
<section>
<h2>Internet Browsers</h2>
<p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>
Straipsnis
<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>
Šalia (šoninė juosta)
<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>
Poraštė
<footer>
<p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>
Pagrindiniai teksto formatavimo pavyzdžiai
Antraštės į
<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>
Pastraipa ( & )
<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>
Neužsakyta ir užsakytas sąrašas
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>PHP</li>
</ul>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>PHP</li>
</ol>
Citatos blokas ir cituoti
<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>
Nuoroda
<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>
Mygtukas
<button name="button">I am a Button. Click me!</button>
Eilutės pertrauka
<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>
Horizontali linija
<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>
Adresas
<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>
Indeksas ir viršutinis indeksas
<p>The chemical formula of water is H<sub>2</sub>O</p>
<p>This text is <sup>superscripted</sup></p>
Santrumpa
<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>
Kodas
<p>This is normal text. <code>This is code.</code> This is normal text.</p>
Laikas
<p>The movie starts at <time>20:00</time>.</p>
Ištrinta
<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>
Lentelių pavyzdžiai
Stalo galvutės, korpuso ir pėdos pavyzdys
<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>
Lentelių antraštės, eilutės ir duomenų pavyzdys
<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>
Žiniasklaidos pavyzdžiai
Vaizdas
<img src="images/dinosaur.png"
alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>
Paveikslėlis
<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>
Paveikslas
<figure>
<img src="/images/frog.png" alt="Tree frog" />
<figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>
Vaizdo įrašas
<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>
Užpildykite HTML kodų lapą
Nesvarbu, ar esate patyręs kūrėjas, ar žmogus, kuris tik nori pasitempti pramonėje, visada naudinga turėti HTML formatavimo sukčiavimo lapas patogus. Ir aš sukūriau tokį, kuris galėtų jums padėti kiekviename žingsnyje.
Kas yra CSS?
Kaskadiniai stiliaus lapai arba CSS aprašoma, kaip HTML elementai bus rodomi ekrane. Kadangi juo vienu metu galima valdyti kelių puslapių maketus, sutaupysite daug laiko ir pastangų.
CSS yra kalba, skirta apibūdinti tinklalapių pateikimą, įskaitant spalvas, išdėstymą ir šriftus. Tai leidžia pritaikyti pristatymą įvairių tipų įrenginiams, pvz., dideliems ekranams, mažiems ekranams ar spausdintuvams. – iš W3.org
Kuo skiriasi HTML ir CSS?
Nors HTML ir CSS yra kalbos, naudojamos tinklalapiams ir programoms kurti, jos turi skirtingas funkcijas.
HTML yra tai, ką naudojate, norėdami padiktuoti struktūrą ir turinį, kuris bus rodomas tinklalapyje.
Kita vertus, CSS naudojamas modifikuoti web dizainas HTML elementų tinklalapyje (įskaitant išdėstymą, vaizdo efektus ir fono spalvą).
HTML sukuria struktūrą ir turinį, CSS – dizainą ar stilių. Kartu HTML ir CSS sudaro tinklalapio sąsają.
Kas yra CSS sintaksė?
CSS sintaksė yra sudarytas iš parinkiklio ir deklaracijos bloko.
Parinkiklis nustato HTML elementą, kurio stilius turi būti kuriamas, o deklaracijų bloke yra viena ar daugiau deklaracijų arba porų CSS, ypatybės pavadinimo ir reikšmės su dvitaškiu tarp jų.
Deklaracijos atskiriamos kabliataškiais, o deklaracijų blokai visada pateikiami riestiniuose skliaustuose.
Pavyzdžiui, jei norite pakeisti 1 antraštės išvaizdą, jūsų CSS sintaksė atrodytų maždaug taip: h1 {color:red; šrifto dydis: 16 vnt;}
Užpildykite CSS kodų lapą
CSS yra pakankamai paprasta naudoti. Iššūkis yra tas, kad yra daug atrankų ir pareiškimų, kad juos visus prisiminti sunku, o gal net neįmanoma. Tačiau jums nereikia jų įsiminti.
Štai CSS ir CSS3 cheat sheet kurį galite naudoti bet kada.
Kas yra PHP?
PHP yra „Hypertext Preprocessor“ akronimas, populiari atvirojo kodo, HTML įterpta scenarijų kalba, naudojama kuriant dinamines svetaines, žiniatinklio programas ar statines svetaines.
Nuo PHP yra serverio kalba, jo scenarijai vykdomi serveryje (ne naršyklėje), o jo išvestis yra paprastas HTML naršyklėje.
PHP yra plačiai naudojama atvirojo kodo bendrosios paskirties skriptų kalba, kuri ypač tinka kuriant žiniatinklius ir gali būti įterpta į HTML. – iš PHP.net
Ši serverio pusės scenarijų kalba veikia įvairiose operacinėse sistemose, įskaitant Windows, Mac OS, Linux ir Unix. Jis taip pat suderinamas su dauguma serverių, tokių kaip „Apache“ ir IIS.
Palyginti su kitomis kalbomis, tokiomis kaip ASP ir JSP, PHP lengva išmokti pradedantiesiems. PHP taip pat siūlo daugybę funkcijų, kurių reikia pažengusiems kūrėjams.
Kuo skiriasi PHP ir HTML?
Nors abi kalbos yra labai svarbios interneto svetainių kūrimas, PHP ir HTML skiriasi keliais būdais.
Pagrindinis skirtumas yra tame, kam naudojamos dvi kalbos.
HTML naudojamas kliento pusėje (arba front-end) plėtra, o PHP naudojamas serverio pusėje plėtra.
HTML yra kalba, kurią kūrėjai naudoja tvarkydami svetainės turinį, pvz., įterpdami tekstą, paveikslėlius, lenteles ir hipersaitus, formatuodami tekstą ir nurodydami spalvas.
Tuo tarpu PHP naudojama duomenų saugojimui ir iškvietimui iš duomenų bazės, loginėms operacijoms atlikti, elektroninių laiškų siuntimui ir atsakymui, failų įkėlimui ir atsisiuntimui, darbalaukio programų kūrimui ir kt.
Kalbant apie kodo tipą, HTML yra statinis, o PHP yra dinamiškas. HTML kodas visada yra tas pats kiekvieną kartą jį atidarius, o PHP rezultatai skiriasi priklausomai nuo vartotojo naršyklės.
Naujiems kūrėjams abi kalbas lengva išmokti, nors HTML mokymosi kreivė yra trumpesnė nei PHP.
Užpildykite PHP kodų lapą
Jei esate naujokas programuotojas, norintis geriau išmanyti PHP arba praplėsti savo žinias apie jį, štai PHP sukčiavimo lapas galite greitai kreiptis.
Šį kodų lapą sudaro PHP funkcijos, kurios yra plačiai naudojamų kodų nuorodos, kurios yra integruotos į scenarijų kalbą.
Galutinis HTML, CSS ir PHP kodų lapas
Nesvarbu, ar esate patyręs kūrėjas, ar ką tik pradedantis koduoti, puiku turėti ką nors, prie ko visada galite sugrįžti pasidomėti ar tiesiog atnaujinti atmintį.
Ir kaip dovana kūrėjams, kurie žongliruoja HTML, CSS ir PHP, čia yra ULTIMATE cheat sheet, su viskuo, ką reikia žinoti ir atsiminti apie šias tris kodavimo kalbas:
Atsisiųskite kombinuotą HTML, CSS ir PHP kodų lapą