HTML, CSS болон PHP: The Ultimate Cheat Sheet

📥 Миний татаж авах HTML, CSS болон PHP хууран мэхлэх хуудас, эдгээр гурван кодчиллын хэлний талаар мэдэх, санах хэрэгтэй бүх зүйлээ бүрэн оруулаарай.

• HTML гэж юу вэ?
• HTML5 жишээнүүд (Код PlayGround)
• 📥 HTML Cheat Sheet
• CSS гэж юу вэ?
• 📥 CSS Cheat Sheet
• PHP гэж юу вэ?
• 📥 PHP Cheat Sheet
• 📥 HTML CSS болон PHP Cheat Sheet

Програмчлалын хэлний бүх хаягууд, синтаксууд болон бусад элементүүд хоорондоо уялдаатай байдаг тул кодчиллын урлагийг бүрэн эзэмшихэд олон жил шаардагдана.

Илүү туршлагатай хөгжүүлэгчид ч гэсэн тодорхой даалгаврын зөв синтаксийг мартах урхинд ордог. Иймээс илүү ногоон болно гэж хүлээх нь бодитой бус юм вэб хөгжүүлэгчид урлагийг төгс эзэмших.

Энэ яагаад байна HTML, CSS, PHP-д зориулсан хууран мэхлэх хуудас Хэр удаан хичээллэж байгаагаас үл хамааран маш их хэрэгтэй байдаг. Энэ нь зөв командууд болон синтаксуудыг олох хурдан гарын авлага болж, бодит вэб хөгжүүлэлтэд анхаарлаа хандуулах боломжийг олгоно.

Доорх нь та код бичих ажилд тань туслах үүднээс хурдан сэргээн засварладаг харааны шинж чанартай хууран мэхлэх хуудсыг олох болно. Би үүнийг танд тав тухтай байлгах үүднээс хялбархан хавчуурга хийх, хадгалах, хэвлэх боломжтой болгосон.

HTML гэж юу вэ?

HTML нь Hypertext Markup Language гэсэн үгийн товчлол юм – вэб хуудасны бүтэц, түүний агуулгыг бий болгоход ашигладаг код.

Энэхүү тэмдэглэгээний хэл нь агуулгыг тодорхой байдлаар харуулах эсвэл ажиллуулахад ашигладаг хэд хэдэн элементүүдээс бүрддэг бөгөөд вэбсайт бүрийн урд талын кодын гол хэсэг юм.

HTML бол вэб хуудасны бүтцийг тайлбарлах хэл юм… HTML-ийн тусламжтайгаар зохиогчид тэмдэглэгээ ашиглан хуудасны бүтцийг дүрсэлдэг. Хэлний элементүүд нь догол мөр, жагсаалт, хүснэгт гэх мэт агуулгын хэсгүүдийг шошгодог. – W3.org сайтаас

Жишээлбэл, та агуулгын өөр хэсгүүдийг хавсаргаж эсвэл боож болно - энд хавсаргасан шошгууд нь өөр хуудас руу үг эсвэл зургийн холбоос үүсгэх боломжтой. Та үүнийг ашиглан үгсийг налуу болгож, фонтыг том эсвэл жижиг болгох боломжтой.

тэмдэглэснээр W3, HTML танд хийх боломжтой бусад зүйлсийн зарим нь:

• онлайн баримт бичгийг нийтлэх гарчиг, текст, хүснэгт, жагсаалт, зурагГэх мэт
• Товчлуураар дамжуулан онлайн мэдээллийг авах боломжтой гипертекст холбоосууд.
• зураг төсөл хэлбэр алсын үйлчилгээтэй гүйлгээ хийхэд зориулагдсан мэдээлэл хайх, захиалга хийх, бүтээгдэхүүн захиалах, бусад функцүүдийн дунд.
• оролцуулах хүснэгт, видео клип болон бусад медиа болон таны баримт бичигт байгаа програмууд.

Тиймээс хэрэв та мөрийг гаргах байсан бол "Миний нохой их эгдүүтэй" дангаараа зогсоход та үүнийг догол мөрний шошгонд хавсаргаснаар догол мөр мөн гэдгийг зааж өгч болно (энэ талаар дараа нь) дараах байдлаар харагдана. Миний нохой их эгдүүтэй

HTML болон HTML5 хоёрын ялгаа юу вэ?

Нэр байна байдлаар HTML5 нь HTML стандартын тав дахь хувилбар юм. Энэ нь видео болон аудиог хэл рүү нэгтгэхийг дэмждэг бөгөөд энэ нь гуравдагч талын залгаасууд болон элементүүдийн хэрэгцээг бууруулдаг.

HTML болон HTML5 хоорондын үндсэн ялгааг доор харуулав.

Нэмж дурдахад HTML5-аас өөрчилсөн эсвэл хасагдсан олон HTML элементүүд байдаг. Үүнд:

• - гэж өөрчилсөн
• - гэж өөрчилсөн
• - гэж өөрчилсөн
• - Устгасан
• - Устгасан
• - Устгасан
• - Шинэ шошго байхгүй. CSS ашигладаг.
• - Шинэ шошго байхгүй. CSS ашигладаг.
• - Шинэ шошго байхгүй. CSS ашигладаг.
• - Шинэ шошго байхгүй. CSS ашигладаг.
• - Шинэ шошго байхгүй. CSS ашигладаг.

Үүний зэрэгцээ HTML5 нь шинээр нэмэгдсэн хэд хэдэн элементүүдийг агуулдаг. Үүнд:

HTML5 жишээнүүд (Код 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 Cheat Sheet-ийг бөглөнө үү

Та туршлагатай хөгжүүлэгч эсвэл энэ салбарт хөлөө норгох гэж байгаа хүн ч бай, энэ нь үргэлж тусалдаг. HTML форматын хуурамч хуудас тохиромжтой. Мөн би танд алхам тутамд туслах нэгийг зохион бүтээсэн.

HTML Cheat Sheet татаж авах

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; үсгийн хэмжээ: 16pc;}

CSS Cheat Sheet-ийг бөглөнө үү

CSS ашиглахад хангалттай хялбар. Сорилт нь маш олон сонгогчид байдаг бөгөөд тэдгээрийг бүгдийг нь санах нь боломжгүй юм гэхэд хэцүү байдаг. Гэхдээ та тэдгээрийг цээжлэх шаардлагагүй.

Энд нэг CSS болон CSS3-д зориулсан хуурамч хуудас та хэзээ ч ашиглаж болно.

CSS Cheat Sheet татаж авах

PHP гэж юу вэ?

РНР нь Hypertext Preprocessor гэсэн үгийн товчлол юм, динамик вэб сайт, вэб программууд эсвэл статик вэб сайтуудыг хөгжүүлэхэд ашигладаг түгээмэл нээлттэй эх сурвалж, HTML суулгагдсан скрипт хэл.

оноос хойш PHP бол сервер талын хэл юм, түүний скриптүүд нь сервер дээр (хөтөч дээр биш) гүйцэтгэгддэг бөгөөд түүний гаралт нь хөтөч дээрх энгийн HTML юм.

РНР бол вэб хөгжүүлэлтэд тохиромжтой, 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-ийн үр дүн нь хэрэглэгчийн хөтөчөөс хамаарч өөр өөр байдаг.

Шинэ хөгжүүлэгчдийн хувьд энэ хоёр хэлийг сурахад хялбар байдаг ч сурах муруй нь PHP-ээс HTML-тэй харьцуулахад богино байдаг.

PHP Cheat Sheet-ийг бөглөнө үү

Хэрэв та шинэхэн програмист бол PHP хэлийг илүү сайн эзэмшиж, мэдлэгээ тэлэхийг хүсэж байгаа бол эндээс PHP хууран мэхлэх хуудас та хурдан лавлаж болно.

Энэхүү хууран мэхлэх хуудас нь скрипт хэлэнд суулгасан өргөн хэрэглэгддэг кодуудын товчлол болох PHP функцуудаас бүрдэнэ.

PHP Cheat Sheet татаж авах

Ultimate HTML, CSS болон PHP Cheat Sheet

Та туршлагатай хөгжүүлэгч ч бай, эсвэл зүгээр л кодлож эхэлж байгаа хүн ч бай, хэзээд эргэн ирж лавлагаа авах эсвэл зүгээр л санах ойгоо сэргээх боломжтой зүйлтэй байх нь үнэхээр сайхан хэрэг юм.

Мөн хооронд жонглёр хийдэг хөгжүүлэгчдэд бэлэг болгон HTML, CSS, PHP, энд ULTIMATE cheat хуудас байна, эдгээр гурван кодчиллын хэлний талаар мэдэх, санах хэрэгтэй бүх зүйлээ бүрэн оруулаарай:

Хосолсон HTML, CSS, PHP Cheat Sheet татаж авах