ข้อเสนอ Black Friday / Cyber ​​​​Monday ที่ดีที่สุดสำหรับปี 2022 คลิกที่นี่ 🤑

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

เขียนโดย

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

ศิลปะการเขียนโค้ดอาจใช้เวลาหลายปีกว่าจะเชี่ยวชาญโดยแท็กไวยากรณ์และองค์ประกอบอื่น ๆ ของภาษาโปรแกรมมักจะเกี่ยวพันกัน

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

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

ด้านล่างนี้ คุณจะพบกับแผ่นโกงแบบเอียงที่มองเห็นได้ซึ่งนำหน้าด้วยการทบทวนอย่างรวดเร็วเพื่อช่วยคุณในความพยายามเขียนโค้ดของคุณ ฉันยังทำให้บุ๊กมาร์ก บันทึก หรือพิมพ์ได้ง่ายเพื่อความสะดวกของคุณ

HTML คืออะไร?

HTML ย่อมาจาก Hypertext Markup Language – รหัสที่ใช้สร้างโครงสร้างสำหรับหน้าเว็บและเนื้อหา

ภาษามาร์กอัปนี้ประกอบด้วยชุดขององค์ประกอบที่ใช้ในการทำให้เนื้อหาปรากฏหรือทำงานในลักษณะหนึ่งและเป็นส่วนสำคัญของโค้ดส่วนหน้าของทุกเว็บไซต์

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

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

เท่าที่สังเกต W3สิ่งอื่น ๆ ที่ HTML อนุญาตให้คุณทำได้ ได้แก่ :

  • การเผยแพร่เอกสารออนไลน์ด้วย หัวเรื่องข้อความตารางรายการภาพถ่ายฯลฯ
  • ดึงข้อมูลออนไลน์ด้วยการคลิกปุ่มผ่าน ลิงก์ไฮเปอร์เท็กซ์.
  • การออกแบบ รูปแบบ สำหรับการทำธุรกรรมกับบริการระยะไกลไปยัง ค้นหาข้อมูลทำการจองหรือสั่งซื้อผลิตภัณฑ์และฟังก์ชันอื่น ๆ
  • รวมทั้ง สเปรดชีตคลิปวิดีโอและสื่ออื่น ๆ และแอปพลิเคชันที่มีอยู่แล้วในเอกสารของคุณ

ดังนั้นถ้าคุณจะสร้างเส้น “ สุนัขของฉันน่ารักมาก” ยืนด้วยตัวเองคุณสามารถระบุว่าเป็นย่อหน้าได้โดยใส่ไว้ในแท็กย่อหน้า (เพิ่มเติมในภายหลัง) ซึ่งจะมีลักษณะดังนี้: สุนัขของฉันหวานมาก

HTML และ HTML5 แตกต่างกันอย่างไร

เป็นชื่อแนะนำ, HTML5 เป็นเวอร์ชันที่ห้าของมาตรฐาน HTML. สนับสนุนการรวมวิดีโอและเสียงเข้ากับภาษาซึ่งช่วยลดความจำเป็นในการใช้ปลั๊กอินและองค์ประกอบของบุคคลที่สาม

ด้านล่างนี้คือความแตกต่างหลักระหว่าง HTML และ HTML5:

HTML

  • ไม่รองรับเสียงและวิดีโอโดยไม่รองรับโปรแกรมเล่นแฟลช
  • ใช้คุกกี้เพื่อจัดเก็บข้อมูลชั่วคราว
  • ไม่อนุญาตให้ JavaScipt ทำงานในเบราว์เซอร์
  • อนุญาตให้ใช้กราฟิกเวกเตอร์โดยใช้เทคโนโลยีต่างๆเช่น VML, Silver-light และ Flash เป็นต้น
  • ไม่อนุญาตให้ใช้เอฟเฟกต์ลากและวาง
  • ใช้งานได้กับเบราว์เซอร์รุ่นเก่าทั้งหมด
  • เหมาะกับอุปกรณ์เคลื่อนที่น้อยลง
  • การประกาศ Doctype นั้นยาวและซับซ้อน
  • ไม่มีองค์ประกอบเช่น nav และ header รวมถึงแอตทริบิวต์เช่น charset, asyncและปิง
  • ยากมากที่จะได้รับ GeoLocation ที่แท้จริงของผู้ใช้โดยใช้เบราว์เซอร์
  • ไม่สามารถจัดการไวยากรณ์ที่ไม่ถูกต้อง

HTML5

  • รองรับการควบคุมเสียงและวิดีโอด้วยการใช้ และ แท็ก
  • ใช้ฐานข้อมูล SQL และแคชของแอปพลิเคชันเพื่อจัดเก็บข้อมูลออฟไลน์
  • อนุญาตให้ JavaScript ทำงานในเบื้องหลังโดยใช้ JS Web worker API
  • กราฟิกแบบเวกเตอร์เป็นส่วนพื้นฐานของ HTML5 เช่นเดียวกับ SVG และผ้าใบ
  • อนุญาตให้ลากและวางเอฟเฟกต์
  • ทำให้สามารถวาดรูปทรงได้
  • รองรับเบราว์เซอร์ใหม่ทั้งหมดเช่น Firefox, Mozilla, Chrome และ Safari
  • เหมาะกับอุปกรณ์เคลื่อนที่มากขึ้น
  • การประกาศ Doctype นั้นง่ายและสะดวก
  • มีองค์ประกอบใหม่สำหรับโครงสร้างเว็บเช่น nav ส่วนหัวและส่วนท้าย และยังมีคุณลักษณะของชุดอักขระ asyncและปิง
  • ทำให้การเข้ารหัสอักขระเป็นเรื่องง่ายและสะดวก
  • อนุญาตให้ติดตาม GeoLocation ของผู้ใช้โดยใช้ JS GeoLocation API
  • สามารถจัดการไวยากรณ์ที่ไม่ถูกต้องได้
 

นอกจากนี้ยังมีองค์ประกอบหลายอย่างของ HTML ที่ได้รับการแก้ไขหรือลบออกจาก HTML5 ซึ่งรวมถึง:

  • - เปลี่ยนไปเป็น
  • - เปลี่ยนไปเป็น
  • - เปลี่ยนไปเป็น
  • - ลบออก
  • - ลบออก
  • - ลบออก
  • - ไม่มีแท็กใหม่ ใช้ CSS
  • - ไม่มีแท็กใหม่ ใช้ CSS
  • - ไม่มีแท็กใหม่ ใช้ CSS
  • - ไม่มีแท็กใหม่ ใช้ CSS
  • - ไม่มีแท็กใหม่ ใช้ CSS

ในขณะเดียวกัน HTML5 ยังมีองค์ประกอบที่เพิ่มเข้ามาใหม่อีกจำนวนมาก ซึ่งรวมถึง:

 

ตัวอย่าง HTML5 (Code PlayGround)

ตัวอย่างโครงสร้างความหมาย

In HTML5 มีองค์ประกอบเชิงความหมายบางอย่างที่สามารถใช้เพื่อกำหนดส่วนต่างๆ ของหน้าเว็บได้ ต่อไปนี้คือรายการที่พบบ่อยที่สุด:

html5 องค์ประกอบโครงสร้างทางความหมาย
ที่มา: w3schools.com
 

หัวข้อ

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

มาตรา

<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 และอ้างถึง

<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

 

ดาวน์โหลด 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

 

ดาวน์โหลด 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 โกงแผ่น

 

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

 

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

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

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

 

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

 

กระทู้ที่เกี่ยวข้อง

เข้าร่วมจดหมายข่าวของเรา

สมัครรับจดหมายข่าวสรุปรายสัปดาห์และรับข่าวสารล่าสุดเกี่ยวกับอุตสาหกรรมและแนวโน้ม

การคลิก 'สมัครรับข้อมูล' แสดงว่าคุณยอมรับ เงื่อนไขการใช้งานและนโยบายความเป็นส่วนตัว.