HTML, CSS і PHP: лепшая шпаргалка

📥 Спампуйце мой Шпаргалкі HTML, CSS і PHP, у камплекце з усім, што вам трэба ведаць і памятаць пра гэтыя тры мовы кадавання.

• Што такое HTML?
• Прыклады HTML5 (Code PlayGround)
• 📥 Шпаргалка HTML
• Што такое CSS?
• 📥 Шпаргалка CSS
• Што такое PHP?
• 📥 Шпаргалка PHP
• 📥 Шпаргалка HTML CSS і PHP

Мастацтву кадавання могуць спатрэбіцца гады, каб цалкам авалодаць усімі тэгамі, сінтаксісам і іншымі элементамі моў праграмавання, якія часта пераплятаюцца.

Нават больш дасведчаныя распрацоўшчыкі могуць трапіць у пастку і забыць правільны сінтаксіс для пэўных задач. Такім чынам, нерэальна чакаць большай колькасці зялёных насаджэнняў вэб-распрацоўнікаў бездакорна валодаць мастацтвам.

Вось чаму шпаргалкі для HTML, CSS і PHP надзвычай карысныя, незалежна ад таго, як доўга вы займаецеся. Ён служыць кароткім кіраўніцтвам па пошуку правільных каманд і сінтаксісу, што дазваляе засяродзіцца на фактычнай вэб-распрацоўцы.

Ніжэй вы знойдзеце шпаргалкі з візуальным нахілам, якім папярэднічаюць кароткія падказкі, якія дапамогуць вам у кадаванні. Я таксама зрабіў так, каб яго можна было лёгка рабіць у закладкі, захоўваць або раздрукоўваць для вашай зручнасці.

Што такое HTML?

HTML расшыфроўваецца як мова разметкі гіпертэксту – код, які выкарыстоўваецца для стварэння структуры вэб-старонкі і яе кантэнту.

Гэтая мова разметкі складаецца з серыі элементаў, якія выкарыстоўваліся для таго, каб кантэнт выглядаў або функцыянаваў пэўным чынам, і з'яўляецца асноўнай часткай інтэрфейснага кода кожнага вэб-сайта.

HTML - гэта мова для апісання структуры вэб-старонак... З дапамогай HTML аўтары апісваюць структуру старонак з дапамогай разметкі. Элементы мовы пазначаюць часткі кантэнту, такія як абзац, спіс, табліца і гэтак далей. – з W3.org

Напрыклад, вы можаце ўключыць або абгарнуць розныя часткі змесціва - дзе ахопліваючыя тэгі могуць зрабіць слова ці малюнак гіперспасылкай на іншую старонку. Вы таксама можаце выкарыстоўваць гэта, каб выдзяляць словы курсівам і павялічваць або памяншаць шрыфты, сярод іншага.

Як адзначыў W3, некаторыя іншыя рэчы, якія дазваляе вам рабіць HTML, уключаюць:

• Публікацыя дакументаў у Інтэрнэце з загалоўкі, тэкст, табліцы, спісы, фота, І г.д.
• Атрыманне онлайн-інфармацыі адным націскам кнопкі праз гіпертэкставыя спасылкі.
• Праектаванне формы для правядзення аперацый з дыстанцыйнымі сэрвісамі пошук інфармацыі, браніраванне або заказ прадуктаў, сярод іншых функцый.
• У тым ліку электронныя табліцы, відэакліпы і іншыя носьбіты і прыкладанні ўжо ў вашых дакументах.

Такім чынам, калі вы павінны былі зрабіць лінію «Мой сабака вельмі мілы» стаяць самастойна, вы можаце вызначыць, што гэта абзац, заключыўшы яго ў тэгі абзацаў (падрабязней пра гэта пазней), якія будуць выглядаць так: Мой сабака вельмі мілы

У чым розніца паміж HTML і HTML5?

Як вынікае з назвы, HTML5 - гэта пятая версія стандарту HTML. Ён падтрымлівае інтэграцыю відэа і аўдыя ў мову, што памяншае патрэбу ў старонніх убудовах і элементах.

Ніжэй прыведзены асноўныя адрозненні паміж HTML і HTML5:

Акрамя таго, ёсць шмат элементаў HTML, якія былі зменены або выдалены з HTML5. Да іх адносяцца:

• – Зменена на
• – Зменена на
• – Зменена на
• – Выдалілі
• – Выдалілі
• – Выдалілі
• – Няма новага тэга. Выкарыстоўвае CSS.
• – Няма новага тэга. Выкарыстоўвае CSS.
• – Няма новага тэга. Выкарыстоўвае CSS.
• – Няма новага тэга. Выкарыстоўвае CSS.
• – Няма новага тэга. Выкарыстоўвае CSS.

Між тым, HTML5 таксама ўключае шэраг новых дададзеных элементаў. Да іх адносяцца:

Прыклады HTML5 (Code PlayGround)

Прыклады семантычнай структуры

In HTML5 ёсць некаторыя семантычныя элементы, якія можна выкарыстоўваць для вызначэння розных частак вэб-старонкі. Вось найбольш распаўсюджаныя:

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

Асноўныя прыклады фарматавання тэксту

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

Прыклады табліц

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

Прыклады СМІ

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

Поўная шпаргалка HTML

Незалежна ад таго, з'яўляецеся вы дасведчаным распрацоўшчыкам або чалавекам, які проста хоча прамачыць ногі ў індустрыі, заўсёды дапамагае мець Шпаргалка фарматавання HTML зручна. І я распрацаваў такі, які можа дапамагчы вам на кожным кроку.

Спампаваць шпаргалку HTML

Што такое CSS?

Каскадныя табліцы стыляў або CSS апісвае, як элементы HTML будуць адлюстроўвацца на экране. Паколькі ён можа кантраляваць некалькі макетаў старонак адначасова, ён можа зэканоміць шмат часу і сіл.

CSS - гэта мова для апісання прадстаўлення вэб-старонак, уключаючы колеры, макет і шрыфты. Гэта дазваляе адаптаваць прэзентацыю да розных тыпаў прылад, такіх як вялікія экраны, маленькія экраны або прынтэры. – з W3.org

У чым розніца паміж HTML і CSS?

У той час як HTML і CSS з'яўляюцца мовамі, якія выкарыстоўваюцца для стварэння вэб-старонак і прыкладанняў, яны маюць розныя функцыі.

HTML - гэта тое, што вы выкарыстоўваеце, каб вызначаць структуру і кантэнт, які будзе адлюстроўвацца на вэб-старонцы.

CSS, з іншага боку, выкарыстоўваецца для мадыфікацыі вэб-дызайн элементаў HTML на вэб-старонцы (уключаючы макет, візуальныя эфекты і колер фону).

HTML стварае структуру і змест, CSS - дызайн або стыль. Разам HTML і CSS складаюць інтэрфейс вэб-старонкі.

Што такое сінтаксіс CSS?

Сінтаксіс CSS складаецца з селектара і блока дэкларацыі.

Селектар вызначае элемент HTML, які будзе стылізаваны, у той час як блок дэкларацыі змяшчае адну або некалькі дэкларацый або пары CSS, назву ўласцівасці і значэнне з двукроп'ем паміж імі.

Дэкларацыі падзяляюцца кропкай з коскі, а блокі дэкларацый заўсёды заключаны ў фігурныя дужкі.

Напрыклад, калі вы хочаце змяніць выгляд вашага загалоўка 1, ваш сінтаксіс CSS будзе выглядаць прыкладна так: h1 {color:red; памер шрыфта: 16 пк;}

Поўная шпаргалка CSS

CSS досыць просты ў выкарыстанні. Праблема ў тым, што існуе мноства селектараў і дэкларацый, і запомніць іх усе складана, калі не немагчыма. Аднак вы не павінны запамінаць іх.

Вось шпаргалка для css і css3 што вы можаце выкарыстоўваць у любы час.

Спампаваць CSS Cheat Sheet

Што такое PHP?

PHP - гэта абрэвіятура Hypertext Preprocessor, папулярная мова сцэнарыяў з адкрытым зыходным кодам, убудаваная ў HTML, якая выкарыстоўваецца для распрацоўкі дынамічных вэб-сайтаў, вэб-прыкладанняў або статычных вэб-сайтаў.

З PHP - гэта серверная мова, яго скрыпты выконваюцца на серверы (а не ў браўзеры), а яго вывад - гэта звычайны HTML у браўзеры.

PHP - гэта шырока распаўсюджаная мова сцэнарыяў агульнага прызначэння з адкрытым зыходным кодам, якая асабліва падыходзіць для вэб-распрацоўкі і можа быць убудавана ў HTML. – з PHP.net

Гэтая серверная мова сцэнарыяў працуе ў розных аперацыйных сістэмах, уключаючы Windows, Mac OS, Linux і Unix. Ён таксама сумяшчальны з большасцю сервераў, такіх як Apache і IIS.

У параўнанні з іншымі мовамі, такімі як ASP і JSP, PHP просты ў вывучэнні для пачаткоўцаў. PHP таксама прапануе мноства функцый, неабходных распрацоўшчыкам прасунутага ўзроўню.

У чым розніца паміж PHP і HTML?

Хаця абедзве мовы маюць вырашальнае значэнне для вэб-распрацоўкі, PHP і HTML адрозніваюцца ў некалькіх адносінах.

Ключавое адрозненне заключаецца ў тым, для чаго выкарыстоўваюцца дзве мовы.

HTML выкарыстоўваецца на баку кліента (ці інтэрфейсная) распрацоўка, у той час PHP выкарыстоўваецца на боку сервера развіцця.

HTML - гэта мова, якую распрацоўшчыкі выкарыстоўваюць для арганізацыі кантэнту на вэб-сайце, напрыклад, для ўстаўкі тэксту, малюнкаў, табліц і гіперспасылак, фарматавання тэксту і ўказання колераў.

У той жа час PHP выкарыстоўваецца для захоўвання і атрымання дадзеных з базы дадзеных, выканання лагічных аперацый, адпраўкі і адказу на электронныя лісты, загрузкі і загрузкі файлаў, распрацоўкі настольных праграм і шмат іншага.

З пункту гледжання тыпу кода, HTML статычны, а PHP дынамічны. Код HTML заўсёды аднолькавы пры кожным адкрыцці, а вынікі PHP адрозніваюцца ў залежнасці ад браўзера карыстальніка.

Для новых распрацоўшчыкаў абедзве мовы простыя ў вывучэнні, хаця крывая вывучэння HTML карацейшая, чым PHP.

Поўная шпаргалка PHP

Калі вы праграміст-пачатковец і жадаеце больш валодаць PHP або пашырыць свае веды, вось PHP шпаргалка вы можаце хутка звярнуцца да.

Гэтая шпаргалка складаецца з функцый PHP, якія з'яўляюцца цэтлікамі для шырока выкарыстоўваных кодаў, убудаваных у мову сцэнарыяў.

Спампаваць PHP Cheat Sheet

Найлепшая шпаргалка па HTML, CSS і PHP

Незалежна ад таго, з'яўляецеся вы дасведчаным распрацоўшчыкам або толькі пачынаеце пісаць код, выдатна мець нешта, да чаго заўсёды можна вярнуцца для даведкі або проста асвяжыць памяць.

І ў падарунак распрацоўшчыкам, якія жангліруюць паміж імі HTML, CSS і PHP, вось САМАЯ шпаргалка, у камплекце з усім, што вам трэба ведаць і памятаць пра гэтыя тры мовы кадавання:

Спампуйце камбінаваную шпаргалку HTML, CSS і PHP