HTML, CSS และ PHP: The Ultimate Cheat Sheet

📥ดาวน์โหลดไฟล์ แผ่นโกง HTML, CSS และ PHPพร้อมทุกสิ่งที่คุณจำเป็นต้องรู้และจำเกี่ยวกับภาษาการเข้ารหัสทั้งสามนี้

• HTML คืออะไร?
• ตัวอย่าง HTML5 (Code PlayGround)
• 📥แผ่นโกง HTML
• CSS คืออะไร?
• 📥แผ่นโกง CSS
• PHP คืออะไร?
• 📥 แผ่นโกง PHP
• 📥 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:

นอกจากนี้ยังมีองค์ประกอบหลายอย่างของ 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 Cheat Sheet

ไม่ว่าคุณจะเป็นนักพัฒนาที่ช่ำชองหรือใครก็ตามที่ต้องการให้เท้าของพวกเขาเปียกในอุตสาหกรรมการมี แผ่นโกงการจัดรูปแบบ HTML สะดวก และฉันได้ออกแบบสิ่งที่สามารถช่วยคุณได้ทุกย่างก้าว

ดาวน์โหลด HTML Cheat Sheet

CSS คืออะไร?

Cascading Style Sheets หรือ CSS อธิบายว่าองค์ประกอบ HTML จะแสดงบนหน้าจออย่างไร เนื่องจากสามารถควบคุมเค้าโครงของหลาย ๆ หน้าได้ในเวลาเดียวกันจึงช่วยให้คุณประหยัดเวลาและความพยายามได้มาก

CSS เป็นภาษาสำหรับอธิบายการนำเสนอของเว็บเพจรวมถึงสีเค้าโครงและแบบอักษร ช่วยให้สามารถปรับงานนำเสนอให้เข้ากับอุปกรณ์ประเภทต่างๆเช่นหน้าจอขนาดใหญ่หน้าจอขนาดเล็กหรือเครื่องพิมพ์ - จาก W3.org

อะไรคือความแตกต่างระหว่าง HTML และ CSS?

แม้ว่า HTML และ CSS จะเป็นภาษาที่ใช้ในการสร้างหน้าเว็บและแอปพลิเคชัน แต่ก็มีฟังก์ชันที่แตกต่างกัน

HTML คือสิ่งที่คุณใช้เพื่อกำหนดโครงสร้างและเนื้อหาที่จะแสดงบนหน้าเว็บ

ในทางกลับกัน CSS ใช้สำหรับการแก้ไขไฟล์ การออกแบบเว็บ ขององค์ประกอบ HTML บนเว็บเพจ (รวมถึงเลย์เอาต์เอฟเฟ็กต์ภาพและสีพื้นหลัง)

HTML สร้างโครงสร้างและเนื้อหา CSS จะออกแบบหรือสไตล์ HTML และ CSS ประกอบกันเป็นอินเทอร์เฟซหน้าเว็บ

CSS Syntax คืออะไร?

ไวยากรณ์ CSS ประกอบด้วยตัวเลือกและบล็อกการประกาศ

ตัวเลือกกำหนดองค์ประกอบ HTML ที่จะจัดสไตล์ในขณะที่บล็อกการประกาศมีการประกาศหรือคู่ของ CSS ชื่อคุณสมบัติและค่าที่มีเครื่องหมายทวิภาค

การประกาศถูกคั่นด้วยอัฒภาคและบล็อกการประกาศจะอยู่ในวงเล็บปีกกาเสมอ

ตัวอย่างเช่นหากคุณต้องการแก้ไขลักษณะของส่วนหัว 1 ไวยากรณ์ CSS ของคุณจะมีลักษณะดังนี้: h1 {color: red; ขนาดตัวอักษร: 16pc;}

กรอก CSS Cheat Sheet

CSS นั้นใช้งานง่ายพอสมควร ความท้าทายคือมีตัวเลือกและการประกาศจำนวนมากที่จำได้ทั้งหมดเป็นเรื่องยากหากไม่เป็นไปไม่ได้ คุณไม่จำเป็นต้องท่องจำมัน

ที่นี่ว่า แผ่นโกงสำหรับ CSS และ CSS3 ที่คุณสามารถใช้ได้ทุกเวลา

ดาวน์โหลด CSS Cheat Sheet

PHP คืออะไร?

PHP เป็นคำย่อของ Hypertext Preprocessorซึ่งเป็นภาษาสคริปต์แบบโอเพนซอร์สที่ได้รับความนิยมซึ่งใช้สำหรับการพัฒนาเว็บไซต์แบบไดนามิกเว็บแอปพลิเคชันหรือเว็บไซต์แบบคงที่

ตั้งแต่ 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 Cheat Sheet

หากคุณเป็นโปรแกรมเมอร์มือใหม่ที่ต้องการมีความเชี่ยวชาญใน PHP มากขึ้นหรือเพิ่มพูนความรู้ของคุณนี่คือไฟล์ เอกสารโกง PHP คุณสามารถอ้างถึงได้อย่างรวดเร็ว

เอกสารสรุปนี้ประกอบด้วยฟังก์ชัน PHP ซึ่งเป็นทางลัดสำหรับโค้ดที่ใช้กันอย่างแพร่หลายซึ่งสร้างขึ้นในภาษาสคริปต์

ดาวน์โหลด PHP Cheat Sheet

สุดยอด HTML, CSS และ PHP Cheat Sheet

ไม่ว่าคุณจะเป็นนักพัฒนาที่มีประสบการณ์หรือเป็นเพียงแค่คนที่เริ่มต้นการเขียนโค้ดคุณควรมีบางสิ่งที่คุณสามารถกลับมาอ้างอิงได้ตลอดเวลาหรือเพียงแค่รีเฟรชความจำ

และเป็นของขวัญให้กับนักพัฒนาที่เล่นปาหี่ระหว่าง HTML, CSS และ PHP นี่คือแผ่นโกง ULTIMATEพร้อมทุกสิ่งที่คุณจำเป็นต้องรู้และจำเกี่ยวกับภาษาการเข้ารหัสทั้งสามนี้:

ดาวน์โหลดรวม HTML, CSS & PHP Cheat Sheet

ถาม-ตอบ