Οι καλύτερες προσφορές Black Friday / Cyber ​​Monday για το 2022 Click Here 🤑

HTML, CSS και PHP: Το απόλυτο Cheat Sheet

Γραμμένο από

📥 Κατεβάστε το HTML, CSS και PHP cheat φύλλα, συμπληρώστε με όλα όσα πρέπει να γνωρίζετε και να θυμάστε σχετικά με αυτές τις τρεις γλώσσες κωδικοποίησης.

Η τέχνη της κωδικοποίησης μπορεί να διαρκέσει χρόνια για να αποκτήσει πλήρη γνώση όλων των ετικετών, των συντάξεων και άλλων στοιχείων των γλωσσών προγραμματισμού που συχνά συνδέονται.

Ακόμα και οι πιο έμπειροι προγραμματιστές μπορούν να πέσουν στην παγίδα να ξεχάσουν τη σωστή σύνταξη για συγκεκριμένες εργασίες. Ως εκ τούτου, δεν είναι ρεαλιστικό να περιμένουμε περισσότερο πράσινο web developers να έχουν άψογη κατανόηση της τέχνης.

Αυτός είναι ο λόγος cheat φύλλα για HTML, CSS και PHP είναι εξαιρετικά χρήσιμα, ανεξάρτητα από το πόσο καιρό ασκείστε. Χρησιμεύει ως ένας γρήγορος οδηγός για την εύρεση των σωστών εντολών και συντακτικών, επιτρέποντάς σας να εστιάσετε στην πραγματική ανάπτυξη ιστού.

Παρακάτω, θα βρείτε οπτικά κεκλιμένα φύλλα εξαπάτησης, πριν από τα οποία ανανεώνονται γρήγορα για να σας βοηθήσουν στις προσπάθειές σας για κωδικοποίηση. Επίσης, το έκανα σελιδοδείκτη, αποθήκευση ή εκτύπωση για ευκολία.

Τι είναι το HTML;

Το HTML σημαίνει Hypertext Markup Language - ένας κώδικας που χρησιμοποιείται για τη δημιουργία της δομής μιας ιστοσελίδας και του περιεχομένου της.

Αυτή η γλώσσα σήμανσης αποτελείται από μια σειρά στοιχείων που χρησιμοποιούσαν το περιεχόμενο να εμφανίζεται ή να λειτουργεί με έναν συγκεκριμένο τρόπο και αποτελεί σημαντικό μέρος του κώδικα front-end κάθε ιστότοπου.

Το HTML είναι η γλώσσα για την περιγραφή της δομής των ιστοσελίδων… Με HTML, οι συγγραφείς περιγράφουν τη δομή των σελίδων χρησιμοποιώντας σήμανση. Τα στοιχεία των γλωσσικών ετικετών κομμάτια περιεχομένου όπως παράγραφος, λίστα, πίνακας και ούτω καθεξής. - από το W3.org

Για παράδειγμα, μπορείτε να περικλείσετε ή να τυλίξετε διαφορετικά μέρη του περιεχομένου - όπου οι ετικέτες που περικλείουν μπορούν να δημιουργήσουν μια λέξη ή μια εικόνα υπερσύνδεσης σε άλλη σελίδα. Μπορείτε επίσης να το χρησιμοποιήσετε για να πλάσετε τις λέξεις και να κάνετε τις γραμματοσειρές μεγαλύτερες ή μικρότερες, μεταξύ άλλων.

Όπως σημειώνεται από W3, μερικά από τα άλλα πράγματα που σας επιτρέπει να κάνετε HTML περιλαμβάνουν:

  • Δημοσίευση διαδικτυακών εγγράφων με επικεφαλίδες, κείμενο, πίνακες, λίστες, φωτογραφίεςΚ.λπ.
  • Ανάκτηση διαδικτυακών πληροφοριών με το πάτημα ενός κουμπιού μέσω συνδέσμους υπερκειμένου.
  • Σχεδιασμός μορφές για τη διεξαγωγή συναλλαγών με απομακρυσμένες υπηρεσίες προς αναζήτηση πληροφοριών, κρατήσεις ή παραγγελία προϊόντων, μεταξύ άλλων λειτουργιών.
  • Συμπεριλαμβανομένου υπολογιστικά φύλλα, βίντεο κλιπ και άλλα μέσα και εφαρμογές ήδη στα έγγραφά σας.

Αν λοιπόν θέλατε να κάνετε τη γραμμή «Ο σκύλος μου είναι πολύ γλυκός» από μόνη της, μπορείτε να καθορίσετε ότι είναι μια παράγραφος, περικλείοντάς την σε ετικέτες παραγράφων (περισσότερα σχετικά με αυτό αργότερα), η οποία θα μοιάζει με: Το σκυλί μου είναι πολύ γλυκό

Ποια είναι η διαφορά μεταξύ HTML και HTML5;

Όπως υποδηλώνει το όνομα, Το HTML5 είναι η πέμπτη έκδοση του προτύπου HTML. Υποστηρίζει την ενσωμάτωση βίντεο και ήχου στη γλώσσα, η οποία μειώνει την ανάγκη για πρόσθετα και στοιχεία τρίτων.

Ακολουθούν οι κύριες διαφορές μεταξύ HTML και HTML5:

HTML

  • Δεν υποστηρίζει ήχο και βίντεο χωρίς υποστήριξη flash player.
  • Χρησιμοποιεί cookies για την αποθήκευση προσωρινών δεδομένων.
  • Δεν επιτρέπει την εκτέλεση JavaScipt στο πρόγραμμα περιήγησης.
  • Επιτρέπει για διανυσματικά γραφικά χρησιμοποιώντας διαφορετικές τεχνολογίες, όπως VML, Silver-light και Flash, μεταξύ άλλων.
  • Δεν επιτρέπει εφέ μεταφοράς και απόθεσης.
  • Λειτουργεί με όλα τα παλαιότερα προγράμματα περιήγησης.
  • Λιγότερο φιλικό προς κινητά.
  • Η δήλωση Doctype είναι μεγάλη και περίπλοκη.
  • Δεν έχει στοιχεία όπως πλοήγηση και κεφαλίδα, καθώς και χαρακτηριστικά όπως σύνολο χαρακτήρων, αsyncκαι ping.
  • Εξαιρετικά δύσκολο να γίνει αληθινό GeoLocation των χρηστών χρησιμοποιώντας ένα πρόγραμμα περιήγησης.
  • Δεν μπορώ να χειριστώ ανακριβή σύνταξη.

HTML5

  • Υποστηρίζει χειριστήρια ήχου και βίντεο με τη χρήση του και ετικέτες.
  • Χρησιμοποιεί βάσεις δεδομένων SQL και προσωρινή μνήμη εφαρμογών για την αποθήκευση δεδομένων εκτός σύνδεσης.
  • Επιτρέπει τη JavaScript να λειτουργεί στο παρασκήνιο με τη χρήση του JS Web pekerja API.
  • Τα διανυσματικά γραφικά αποτελούν θεμελιώδες μέρος του HTML5, όπως το SVG και ο καμβάς.
  • Επιτρέπει τα εφέ μεταφοράς και απόθεσης.
  • Δυνατότητα σχεδίασης σχημάτων.
  • Υποστηρίζει όλα τα νέα προγράμματα περιήγησης όπως Firefox, Mozilla, Chrome και Safari.
  • Πιο φιλικό προς κινητά.
  • Η δήλωση Doctype είναι απλή και εύκολη.
  • Διαθέτει νέα στοιχεία για δομές ιστού όπως πλοήγηση, κεφαλίδα και υποσέλιδο, μεταξύ άλλων, και έχει επίσης χαρακτηριστικά συνόλου χαρακτήρων,syncκαι ping.
  • Κάνει την κωδικοποίηση χαρακτήρων απλή και εύκολη.
  • Επιτρέπει την παρακολούθηση του 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>
  <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 είναι αρκετά εύκολο στη χρήση. Η πρόκληση είναι ότι υπάρχουν πολλοί επιλογείς και δηλώσεις ότι η απομνημόνευση όλων είναι δύσκολη αν όχι αδύνατη. Δεν χρειάζεται όμως να τα απομνημονεύσετε.

Εδώ είναι μια cheat sheet για CSS και CSS3 που μπορείτε να χρησιμοποιήσετε ανά πάσα στιγμή.

Φύλλο εξαπάτησης CSS

 

Λήψη 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;

Αν και οι δύο γλώσσες είναι ζωτικής σημασίας για web development, PHP και HTML είναι διαφορετικά με διάφορους τρόπους.

Η βασική διαφορά έγκειται στο τι χρησιμοποιούνται οι δύο γλώσσες.

Το HTML χρησιμοποιείται για την πλευρά του πελάτη (ή front-end) ανάπτυξη, ενώ Η PHP χρησιμοποιείται για διακομιστή ανάπτυξης.

Η HTML είναι η γλώσσα που χρησιμοποιούν οι προγραμματιστές για την οργάνωση περιεχομένου σε έναν ιστότοπο, όπως εισαγωγή κειμένου, εικόνων, πινάκων και υπερσυνδέσμων, μορφοποίηση κειμένου και καθορισμός χρωμάτων.

Εν τω μεταξύ, το PHP χρησιμοποιείται για την αποθήκευση και ανάκτηση δεδομένων από μια βάση δεδομένων, την εκτέλεση λογικών λειτουργιών, την αποστολή και απάντηση σε μηνύματα ηλεκτρονικού ταχυδρομείου, τη μεταφόρτωση και τη λήψη αρχείων, την ανάπτυξη εφαρμογών επιφάνειας εργασίας και πολλά άλλα.

Όσον αφορά τον τύπο κώδικα, Η HTML είναι στατική ενώ η PHP είναι δυναμικήΤο Ένας κώδικας HTML είναι πάντα ο ίδιος κάθε φορά που ανοίγει, ενώ τα αποτελέσματα PHP διαφέρουν ανάλογα με το πρόγραμμα περιήγησης του χρήστη.

Για νέους προγραμματιστές, και οι δύο γλώσσες είναι εύκολο να μάθουν, αν και η καμπύλη εκμάθησης είναι μικρότερη με HTML από την PHP.

Πλήρες φύλλο εξαπάτησης PHP

Εάν είστε αρχάριος προγραμματιστής που θέλει να είναι πιο έμπειρος στην PHP ή να διευρύνει τις γνώσεις σας για αυτό, εδώ είναι ένα Φύλλο εξαπάτησης PHP μπορείτε να ανατρέξετε γρήγορα.

Αυτό το φύλλο εξαπάτησης αποτελείται από λειτουργίες PHP - οι οποίες είναι συντομεύσεις για τους ευρέως χρησιμοποιούμενους κωδικούς - που είναι ενσωματωμένες στη γλώσσα scripting.

Φύλλο εξαπάτησης PHP

 

Κατεβάστε το PHP Cheat Sheet

 

Το Ultimate HTML, CSS και PHP Cheat Sheet

Είτε είστε έμπειρος προγραμματιστής είτε απλώς κάποιος που ξεκινά την κωδικοποίηση, είναι υπέροχο να έχετε κάτι στο οποίο μπορείτε πάντα να επιστρέψετε για αναφορά ή απλά να ανανεώσετε τη μνήμη σας.

Και ως δώρο για προγραμματιστές που κάνουν ταχυδακτυλουργίες μεταξύ τους HTML, CSS και PHP, εδώ είναι ένα ULTIMATE cheat sheet, συμπληρώστε με όλα όσα πρέπει να γνωρίζετε και να θυμάστε σχετικά με αυτές τις τρεις γλώσσες κωδικοποίησης:

 

Λήψη συνδυασμένου HTML, CSS & PHP Cheat Sheet

 

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο εβδομαδιαίο ενημερωτικό δελτίο ενημέρωσης και λάβετε τα τελευταία νέα και τάσεις του κλάδου

Κάνοντας κλικ στην "εγγραφή" συμφωνείτε με το δικό μας όρους χρήσης και την πολιτική απορρήτου.