HTML, CSS dan PHP: Lembaran Menipu Terunggul

Ditulis oleh

📥 Muat turun saya Lembaran cheat HTML, CSS dan PHP, lengkap dengan semua yang anda perlu ketahui dan ingat mengenai ketiga-tiga bahasa pengekodan ini.

Seni pengekodan boleh memakan masa bertahun-tahun untuk menguasai sepenuhnya dengan semua tag, sintaks, dan elemen bahasa pengaturcaraan lain yang sering terjalin.

Malah pembangun yang lebih berpengalaman boleh terjebak dalam melupakan sintaks yang betul untuk tugas-tugas tertentu. Oleh itu, tidak realistik untuk mengharapkan lebih banyak hijau pemaju web mempunyai pengetahuan seni yang sempurna.

Inilah sebabnya mengapa cheat sheet untuk HTML, CSS, dan PHP sangat berguna, tidak kira berapa lama anda berlatih. Ini berfungsi sebagai panduan cepat untuk mencari perintah dan sintaksis yang tepat, yang membolehkan anda memberi tumpuan kepada pengembangan web yang sebenarnya.

Di bawah ini, anda akan dapati lembaran cheat yang cenderung visual yang didahului oleh penyegar cepat untuk membantu anda dalam usaha pengekodan anda. Saya juga membuatnya mudah ditanda, disimpan atau dicetak untuk kemudahan anda.

Apa itu HTML?

HTML bermaksud Hypertext Markup Language - kod yang digunakan untuk membuat struktur laman web dan kandungannya.

Bahasa markup ini terdiri dari serangkaian elemen yang digunakan untuk membuat kandungan muncul atau berfungsi dengan cara tertentu dan merupakan bahagian utama dari kod front-end setiap laman web.

HTML adalah bahasa untuk menggambarkan struktur halaman Web ... Dengan HTML, penulis menerangkan struktur halaman menggunakan markup. Unsur-unsur unsur label label bahasa seperti perenggan, senarai, jadual, dan sebagainya. - dari W3.org

Sebagai contoh, anda boleh menyertakan atau membungkus bahagian-bahagian kandungan yang berlainan - di mana tag yang menyertakan dapat membuat pautan kata atau gambar ke halaman lain. Anda juga boleh menggunakan ini untuk mencetak huruf dan menjadikan fon lebih besar atau lebih kecil, antara lain.

Seperti yang dinyatakan oleh W3, beberapa perkara lain yang membolehkan HTML anda lakukan ialah:

  • Menerbitkan dokumen dalam talian dengan tajuk, teks, jadual, senarai, foto, Dll
  • Mendapatkan maklumat dalam talian dengan mengklik butang melalui pautan hiperteks.
  • Merekabentuk bentuk untuk melakukan transaksi dengan perkhidmatan jarak jauh ke mencari maklumat, membuat tempahan, atau memesan produk, antara fungsi lain.
  • Termasuk hamparan, klip video dan media lain dan aplikasi sudah ada dalam dokumen anda.

Jadi jika anda mahu membuat garis "Anjing saya sangat manis" dengan sendirinya, anda boleh menentukan bahawa itu adalah perenggan dengan melampirkannya dalam tag perenggan (lebih lanjut mengenai ini kemudian), yang akan kelihatan seperti: Anjing saya sangat manis

Apakah perbezaan antara HTML dan HTML5?

Seperti namanya, HTML5 adalah versi kelima standard HTML. Ini menyokong penyatuan video dan audio ke dalam bahasa, yang mengurangkan keperluan pemalam dan elemen pihak ketiga.

Berikut adalah perbezaan utama antara HTML dan HTML5:

HTML

  • Tidak menyokong audio dan video tanpa sokongan pemain flash.
  • Menggunakan kuki untuk menyimpan data sementara.
  • Tidak membenarkan JavaScipt berjalan di penyemak imbas.
  • Membolehkan grafik vektor dengan menggunakan teknologi yang berbeza seperti VML, Silver-light, dan Flash, antara lain.
  • Tidak membenarkan kesan seret dan lepas.
  • Berfungsi dengan semua penyemak imbas yang lebih lama.
  • Kurang mesra telefon bimbit.
  • Pengisytiharan jenis doktor adalah panjang dan rumit.
  • Tidak mempunyai elemen seperti nav dan pengepala, serta atribut seperti charset, async, dan ping.
  • Sangat sukar untuk mendapatkan lokasi sebenar pengguna dengan menggunakan penyemak imbas.
  • Tidak dapat menangani sintaks yang tidak tepat.

HTML5

  • Menyokong kawalan audio dan video dengan penggunaan dan tanda nama.
  • Menggunakan pangkalan data SQL dan cache aplikasi untuk menyimpan data luar talian.
  • Membolehkan JavaScript berfungsi di latar belakang dengan penggunaan API pekerja JS Web.
  • Grafik vektor adalah bahagian asas HTML5, seperti SVG dan kanvas.
  • Membolehkan kesan seret dan lepas.
  • Memungkinkan untuk melukis bentuk.
  • Menyokong semua penyemak imbas baru seperti Firefox, Mozilla, Chrome, dan Safari.
  • Lebih mesra telefon bimbit.
  • Pengisytiharan Dokumen adalah mudah dan senang.
  • Mempunyai elemen baharu untuk struktur web seperti nav, header dan footer, antara lain, dan juga mempunyai atribut charset, async, dan ping.
  • Menjadikan pengekodan watak mudah dan senang.
  • Membolehkan untuk mengesan GeoLocation pengguna dengan menggunakan JS GeoLocation API.
  • Mampu menangani sintaksis yang tidak tepat.
 

Selain itu, terdapat banyak elemen HTML yang telah dimodifikasi atau dikeluarkan dari HTML5. Ini termasuk:

  • - Berubah menjadi
  • - Berubah menjadi
  • - Berubah menjadi
  • - Dihapus
  • - Dihapus
  • - Dihapus
  • - Tiada tag baru. Menggunakan CSS.
  • - Tiada tag baru. Menggunakan CSS.
  • - Tiada tag baru. Menggunakan CSS.
  • - Tiada tag baru. Menggunakan CSS.
  • - Tiada tag baru. Menggunakan CSS.

Sementara itu, HTML5 juga merangkumi sejumlah elemen yang baru ditambahkan. Ini termasuk:

 

Contoh HTML5 (Code PlayGround)

Contoh Struktur Semantik

Dalam HTML5 terdapat beberapa elemen semantik yang dapat digunakan untuk menentukan bahagian yang berlainan dari laman web. Berikut adalah yang paling biasa:

 

Kepala

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

Bahagian

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

Artikel

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

Di sebelah (bar sisi)

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

Kaki

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

Contoh Pemformatan Teks Asas

Tajuk ke

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

Ayat ( & )

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

Tidak tersusun dan senarai tertib

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

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

Blockquote dan memetik

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

Pautan

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

Butang

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

Putus talian

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

Garisan mendatar

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

Alamat

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

Langganan & superskrip

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

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

Singkatan

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

Kod

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

Masa

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

Dipadamkan

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

Contoh Jadual

Contoh kepala, badan dan kaki meja

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

Tajuk jadual, baris dan contoh data

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

Contoh Media

Imej

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

Gambar

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

Gambar

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

Video

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

Lengkapkan Lembaran Menipu HTML

Sama ada anda seorang pemaju berpengalaman atau seseorang yang hanya ingin membasahi diri dalam industri, ini selalu membantu untuk memiliki Lembaran menipu HTML berguna. Dan saya telah merancang yang boleh membantu anda setiap langkah.

lembaran cheat html

 

Muat turun Lembaran Menipu HTML

 

Apa itu CSS?

Helaian Gaya Cascading atau CSS menerangkan bagaimana elemen HTML akan dipaparkan di skrin. Kerana dapat mengawal susun atur beberapa halaman pada masa yang sama, ia dapat menjimatkan banyak masa dan usaha.

CSS adalah bahasa untuk menggambarkan penyampaian halaman Web, termasuk warna, tata letak, dan fon. Ia membolehkan seseorang menyesuaikan persembahan dengan pelbagai jenis peranti, seperti layar besar, skrin kecil, atau pencetak. - dari W3.org

Apakah Perbezaan Antara HTML dan CSS?

Walaupun HTML dan CSS adalah kedua bahasa yang digunakan untuk membangun laman web dan aplikasi, mereka memiliki fungsi yang berbeza.

HTML adalah apa yang anda gunakan untuk menentukan struktur dan kandungan yang akan dipaparkan di laman web.

CSS, sebaliknya, digunakan untuk pengubahsuaian web design elemen HTML di laman web (termasuk susun atur, kesan visual, dan warna latar belakang).

HTML mencipta struktur dan kandungan, CSS melakukan reka bentuk atau gaya. Bersama-sama, HTML dan CSS membentuk antara muka halaman web.

Apa itu CSS Syntax?

Sintaks CSS terdiri daripada pemilih dan blok deklarasi.

Pemilih menentukan elemen HTML yang akan digayakan sementara blok deklarasi mengandungi satu atau lebih deklarasi atau pasangan CSS nama properti dan nilai dengan titik dua di antara mereka.

Deklarasi dipisahkan oleh titik koma dan blok deklarasi selalu dilekatkan dengan pendakap kerinting.

Contohnya, jika anda ingin mengubah bentuk tajuk 1 anda, sintaks CSS anda akan kelihatan seperti ini: h1 {color: red; saiz fon: 16pc;}

Lengkapkan Lembaran Menipu CSS

CSS cukup mudah digunakan. Cabarannya ialah terdapat banyak pemilih dan perisytiharan bahawa mengingat semuanya sukar atau tidak mustahil. Anda tidak perlu menghafalnya.

Inilah a cheat sheet untuk CSS dan CSS3 yang boleh anda gunakan bila-bila masa.

Lembaran Menipu CSS

 

Muat turun CSS Cheat Sheet

 

Apa itu PHP?

PHP adalah singkatan dari Hypertext Preprocessor, bahasa skrip sumber terbuka, HTML yang popular yang digunakan untuk mengembangkan laman web dinamis, aplikasi web, atau laman web statis.

Sejak PHP adalah bahasa pelayan, skripnya dijalankan di pelayan (bukan di penyemak imbas), dan outputnya adalah HTML biasa pada penyemak imbas.

PHP adalah bahasa skrip sumber terbuka yang digunakan secara meluas dan sangat sesuai untuk pembangunan web dan dapat disisipkan ke dalam HTML. - dari PHP.net

Bahasa skrip sisi pelayan ini berjalan pada berbagai sistem operasi, termasuk Windows, Mac OS, Linux, dan Unix. Ia juga serasi dengan kebanyakan pelayan seperti Apache dan IIS.

Berbanding dengan bahasa lain seperti ASP dan JSP, PHP mudah dipelajari untuk pemula. PHP juga menawarkan banyak ciri yang diperlukan oleh pembangun peringkat maju.

Apakah Perbezaan Antara PHP dan HTML?

Walaupun kedua-dua bahasa itu penting untuk pembangunan web, PHP dan HTML berbeza dalam beberapa cara.

Perbezaan utama terletak pada kedua bahasa itu digunakan.

HTML digunakan untuk pelanggan (atau front-end) pengembangan, sementara PHP digunakan untuk bahagian pelayan pembangunan.

HTML adalah bahasa yang digunakan pengembang untuk mengatur konten di laman web, seperti memasukkan teks, gambar, tabel, dan hyperlink, memformat teks, dan menentukan warna.

Sementara itu, PHP digunakan untuk menyimpan dan mengambil data dari pangkalan data, melakukan operasi logik, mengirim dan membalas e-mel, memuat naik dan memuat turun fail, mengembangkan aplikasi desktop, dan banyak lagi.

Dari segi jenis kod, HTML statik sementara PHP dinamik. Kod HTML selalu sama setiap kali dibuka, sementara hasil PHP berbeza bergantung pada penyemak imbas pengguna.

Bagi pembangun baru, kedua-dua bahasa mudah dipelajari, walaupun kurva pembelajaran lebih pendek dengan HTML daripada PHP.

Lembaran Menipu PHP yang lengkap

Sekiranya anda seorang pengaturcara pemula yang ingin lebih mahir dalam PHP atau meluaskan pengetahuan anda mengenainya, berikut adalah Lembaran cheat PHP anda boleh merujuk dengan cepat.

Lembaran cheat ini terdiri daripada fungsi PHP - yang merupakan jalan pintas untuk kod yang banyak digunakan - yang dibina ke dalam bahasa skrip.

Lembaran Menipu PHP

 

Muat turun Lembaran Menipu PHP

 

Lembaran Menipu HTML, CSS dan PHP Terunggul

Sama ada anda pembangun berpengalaman atau hanya seseorang yang memulakan pengekodan, ada baiknya anda mempunyai sesuatu yang selalu dapat anda kunjungi untuk rujukan atau hanya menyegarkan ingatan anda.

Dan sebagai hadiah kepada pemaju yang berselisih antara HTML, CSS, dan PHP, berikut adalah lembaran cheat ULTIMATE, lengkap dengan semua yang anda perlu ketahui dan ingat mengenai tiga bahasa pengekodan ini:

 

Muat turun Lembaran Menipu HTML, CSS & PHP Gabungan

 

Sertai newsletter kami

Langgan surat berita pusingan mingguan kami dan dapatkan berita & aliran industri terkini

Dengan mengklik 'langgan" anda bersetuju menerima kami syarat penggunaan dan dasar privasi.