Το φύλλο εξαπάτησης βασικών στοιχείων HTML: Ετικέτες, χαρακτηριστικά και άλλα

Η κατασκευή ιστοσελίδων ξεκινά με HTML. Το να τα ομορφύνετε και να τα κάνετε διαδραστικά έρχεται αργότερα. Αλλά για να ξεκινήσετε τη δημιουργία λειτουργικών στατικών ιστοσελίδων, χρειάζεστε κατανόηση της HTML. (Θέλετε μια γρήγορη εισαγωγή σε αυτήν τη γλώσσα σήμανσης; Διαβάστε μας HTML FAQ.)

Ως μέρος της εκμάθησης της γλώσσας, υπάρχει μια μακρά λίστα στοιχείων που πρέπει να προσθέσετε στο λεξιλόγιό σας HTML. Και αυτό το έργο μπορεί να φαίνεται τρομακτικό στην αρχή, γι' αυτό καταλήξαμε στο παρακάτω cheat sheet. Σας δίνει έναν εύκολο τρόπο να ανακαλύψετε/καταλάβετε/ανακαλέσετε στοιχεία HTML όποτε τα χρειάζεστε.

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

ΔΩΡΕΑΝ ΛΗΨΗ: Αυτό το φύλλο εξαπάτησης διατίθεται ως α PDF με δυνατότητα λήψης από τον συνεργάτη διανομής μας, TradePub. Θα πρέπει να συμπληρώσετε μια σύντομη φόρμα για να την αποκτήσετε μόνο για πρώτη φορά. Κατεβάστε

Το HTML Essentials Cheat Sheet.

Το HTML Essentials Cheat Sheet

... ... ... ... ...

...

Συντομώτερος δρόμος	Δράση
Βασικές Ετικέτες
...	Η πρώτη και η τελευταία ετικέτα ενός εγγράφου HTML. Όλες οι άλλες ετικέτες βρίσκονται ανάμεσα σε αυτές τις ετικέτες ανοίγματος και κλεισίματος.
...	Καθορίζει τη συλλογή μεταδεδομένων για το έγγραφο.
	Περιγράφει τον τίτλο της σελίδας και εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης.
...	Περιλαμβάνει όλο το περιεχόμενο που θα εμφανίζεται στην ιστοσελίδα.
Πληροφορίες εγγράφου
Αναφέρει τη βασική διεύθυνση URL και όλους τους σχετικούς συνδέσμους προς το έγγραφο.
Για επιπλέον πληροφορίες σχετικά με τη σελίδα, όπως συγγραφέας, ημερομηνία δημοσίευσης κ.λπ.
Σύνδεσμοι με εξωτερικά στοιχεία όπως φύλλα στυλ.
	Περιέχει πληροφορίες στυλ εγγράφου όπως CSS (Cascading Style Sheets).
	Περιέχει συνδέσμους προς εξωτερικά σενάρια.
Μορφοποίηση κειμένου
... Ή ...	Κάνει το κείμενο τολμηρό.
...	Κάνει πλάγιο κείμενο και το κάνει τολμηρό.
...	Κάνει πλάγιο κείμενο αλλά δεν το κάνει τολμηρό.
...	Διαγραφή κειμένου.
...	Παραθέτει έναν συγγραφέα ενός αποσπάσματος.
...	Προσθέτει ετικέτες σε ένα διαγραμμένο τμήμα ενός κειμένου.
...	Εμφανίζει μια ενότητα που έχει εισαχθεί στο περιεχόμενο.
...	Για εμφάνιση εισαγωγικών. Συχνά χρησιμοποιείται με το ετικέτα.
...	Για πιο σύντομα αποσπάσματα.
...	Για συντομογραφίες και πλήρεις μορφές.
...	Καθορίζει τα στοιχεία επικοινωνίας.
...	Για ορισμούς.
...	Για αποσπάσματα κώδικα.
...	Για τη σύνταξη συνδρομητών
...	Για τη συγγραφή εκθέτων.
...	Για τη μείωση του μεγέθους του κειμένου και τη σήμανση περιττών πληροφοριών σε HTML5.
Δομή Εγγράφου
...	Διαφορετικά επίπεδα επικεφαλίδων. Το H1 είναι το μεγαλύτερο και το H6 το μικρότερο.
...	Για τη διαίρεση του περιεχομένου σε μπλοκ.
...	Περιλαμβάνει ενσωματωμένα στοιχεία, όπως εικόνα, εικονίδιο, emoticon, χωρίς να καταστρέφει τη μορφοποίηση της σελίδας.
...	Περιέχει απλό κείμενο.
	Δημιουργεί μια νέα γραμμή.
	Σχεδιάζει μια οριζόντια γραμμή για να δείξει το τέλος της ενότητας.
Τόπος αγώνων
...	Για παραγγελθείσα λίστα ειδών.
...	Για μη ταξινομημένη λίστα ειδών.
...	Για μεμονωμένα στοιχεία σε μια λίστα.
...	Κατάλογος στοιχείων με ορισμούς.
...	Ο ορισμός ενός μεμονωμένου όρου σύμφωνα με το περιεχόμενο του σώματος.
...	Η περιγραφή για τον καθορισμένο όρο.
Συνδέσεις
...	Ετικέτα αγκύρωσης για υπερσυνδέσμους.
...	Ετικέτα για σύνδεση σε διευθύνσεις email.
...	Ετικέτα αγκύρωσης για την καταχώριση αριθμών επικοινωνίας.
...	Ετικέτα αγκύρωσης για σύνδεση σε άλλο τμήμα της ίδιας σελίδας.
...	Πλοηγείται σε μια ενότητα div της ιστοσελίδας. (Παραλλαγή της παραπάνω ετικέτας)
εικόνες
	Για εμφάνιση αρχείων εικόνας.
Ιδιότητες για το ετικέτα
src=”url”	Σύνδεσμος στη διαδρομή πηγής της εικόνας.
alt=”κείμενο”	Το κείμενο που εμφανίζεται όταν το ποντίκι τοποθετείται πάνω από την εικόνα.
ύψος=””	Ύψος εικόνας σε pixel ή ποσοστά.
πλάτος=” ”	Πλάτος εικόνας σε pixel ή ποσοστά.
στοίχιση=” ”	Σχετική στοίχιση της εικόνας στη σελίδα.
σύνορα=” ”	Πάχος περιγράμματος της εικόνας.
	Σύνδεσμος σε χάρτη με δυνατότητα κλικ.
	Όνομα εικόνας χάρτη.
Η περιοχή εικόνας ενός χάρτη εικόνας.
Ιδιότητες για το ετικέτα
σχήμα=””	Σχήμα της περιοχής εικόνας.
συνταγές=” ”	Συντεταγμένες της περιοχής εικόνας χάρτη.
Φόρμες
...	Η γονική ετικέτα για μια φόρμα HTML.
Ιδιότητες για το ετικέτα
action=”url”	Η διεύθυνση URL όπου υποβάλλονται τα δεδομένα της φόρμας.
μέθοδος=””	Καθορίζει το πρωτόκολλο υποβολής φόρμας (POST ή GET).
enctype=” ”	Το σχήμα κωδικοποίησης δεδομένων για τις υποβολές POST.
αυτόματη συμπλήρωση	Καθορίζει εάν η αυτόματη συμπλήρωση φόρμας είναι ενεργοποιημένη ή απενεργοποιημένη.
ακυρώνω	Καθορίζει εάν η φόρμα θα πρέπει να επικυρωθεί πριν από την υποβολή.
αποδοχή-συνόλων χαρακτήρων	Καθορίζει την κωδικοποίηση χαρακτήρων για τις υποβολές φορμών.
στόχος	Δείχνει πού θα εμφανίζεται η απάντηση υποβολής φόρμας.
...	Ομάδες σχετικά στοιχεία στη φόρμα/
...	Καθορίζει τι πρέπει να εισάγει ο χρήστης σε κάθε πεδίο φόρμας.
...	Μια λεζάντα για το στοιχείο του συνόλου πεδίων.
Καθορίζει τον τύπο εισόδου που θα λάβει ο χρήστης.
Ιδιότητες για το ετικέτα
τύπος=””	Καθορίζει τον τύπο εισαγωγής (κείμενο, ημερομηνίες, κωδικός πρόσβασης).
όνομα=””	Καθορίζει το όνομα του πεδίου εισαγωγής.
αξία=””	Καθορίζει την τιμή στο πεδίο εισαγωγής.
μέγεθος=””	Ορίζει τον αριθμό των χαρακτήρων για το πεδίο εισαγωγής.
μέγιστο μήκος=””	Ορίζει το όριο των επιτρεπόμενων χαρακτήρων εισαγωγής.
απαιτείται	Καθιστά υποχρεωτικό ένα πεδίο εισαγωγής.
πλάτος=””	Ορίζει το πλάτος του πεδίου εισαγωγής σε pixel.
ύψος=””	Ορίζει το ύψος του πεδίου εισαγωγής σε pixel.
κράτημα θέσης=””	Περιγράφει την αναμενόμενη τιμή πεδίου.
μοτίβο=””	Καθορίζει μια τυπική έκφραση, η οποία μπορεί να χρησιμοποιηθεί για την αναζήτηση μοτίβων στο κείμενο του χρήστη.
ελάχιστα =””	Η ελάχιστη τιμή που επιτρέπεται για ένα στοιχείο εισόδου.
max=””	Η μέγιστη επιτρεπόμενη τιμή για ένα στοιχείο εισόδου.
άτομα με ειδικές ανάγκες	Απενεργοποιεί το στοιχείο εισόδου.
...	Για τη λήψη μεγαλύτερων σειρών δεδομένων από τον χρήστη.
...	Καθορίζει μια λίστα επιλογών από τις οποίες μπορεί να επιλέξει ο χρήστης.
Ιδιότητες για το ετικέτα
όνομα=””	Καθορίζει όνομα για μια αναπτυσσόμενη λίστα.
μέγεθος=””	Αριθμός επιλογών που δίνονται στον χρήστη.
πολλαπλούς	Ορίζει εάν ο χρήστης μπορεί να επιλέξει πολλές επιλογές από τη λίστα.
απαιτείται	Καθορίζει εάν η επιλογή μιας επιλογής είναι απαραίτητη για την υποβολή της φόρμας.
αυτόματη εστίαση	Καθορίζει ότι μια αναπτυσσόμενη λίστα εστιάζεται αυτόματα μετά τη φόρτωση μιας σελίδας.
...	Ορίζει στοιχεία σε μια αναπτυσσόμενη λίστα.
αξία=””	Εμφανίζει το κείμενο για οποιαδήποτε δεδομένη επιλογή.
επιλεγμένο	Ορίζει την προεπιλεγμένη επιλογή που εμφανίζεται.
...	Ετικέτα για τη δημιουργία κουμπιού για υποβολή φόρμας.
Αντικείμενα και iFrames
	Περιγράφει τον ενσωματωμένο τύπο αρχείου.
Ιδιότητες για το
ύψος=””	Το ύψος του αντικειμένου.
πλάτος=””	Το πλάτος του αντικειμένου.
τύπος=””	Ο τύπος του μέσου που περιέχει το αντικείμενο.
	Ένα ενσωματωμένο πλαίσιο για την ενσωμάτωση εξωτερικών πληροφοριών.
όνομα=””	Το όνομα του iFrame.
src=””	Η διεύθυνση URL πηγής για το περιεχόμενο μέσα στο πλαίσιο.
srcdoc=””	Το περιεχόμενο HTML μέσα στο πλαίσιο.
ύψος=””	Το ύψος του iFrame.
πλάτος=” ”	Το πλάτος του iFrame.
Προσθέτει επιπλέον παραμέτρους για την προσαρμογή του iFrame.
...	Ενσωματώνει εξωτερική εφαρμογή ή πρόσθετο.
Ιδιότητες για το
ύψος=” “	Ορίζει το ύψος της ενσωμάτωσης.
πλάτος=” “	Ορίζει το πλάτος της ενσωμάτωσης.
τύπος=””	Ο τύπος ή η μορφή της ενσωμάτωσης.
src=””	Η διαδρομή προέλευσης του ενσωματωμένου αρχείου.
Πίνακες
...	Καθορίζει όλο το περιεχόμενο ενός πίνακα.
Περιγραφή του πίνακα.
Κεφαλίδες για κάθε στήλη στον πίνακα.
Ορίζει τα δεδομένα σώματος για τον πίνακα.
Περιγράφει το περιεχόμενο για το υποσέλιδο του πίνακα.
Περιεχόμενο για μία μόνο σειρά.
	...	Τα δεδομένα σε ένα μόνο στοιχείο κεφαλίδας.
	...	Περιεχόμενο σε ένα μόνο κελί πίνακα.
Ομαδοποιεί στήλες για μορφοποίηση.
Μια ενιαία στήλη πληροφοριών.
HTML5 Νέες ετικέτες
...	Καθορίζει την κεφαλίδα της ιστοσελίδας.
	Καθορίζει το υποσέλιδο της ιστοσελίδας.
...	Επισημαίνει το κύριο περιεχόμενο της ιστοσελίδας.
...	Καθορίζει ένα άρθρο.
	Καθορίζει το περιεχόμενο της πλαϊνής γραμμής μιας σελίδας.
...	Καθορίζει μια συγκεκριμένη ενότητα στην ιστοσελίδα.
...	Για την περιγραφή επιπλέον πληροφοριών.
...	Χρησιμοποιείται ως επικεφαλίδα για την παραπάνω ετικέτα. Είναι πάντα ορατό στον χρήστη.
...	Δημιουργεί ένα πλαίσιο διαλόγου.
...	Χρησιμοποιείται για τη συμπερίληψη διαγραμμάτων και σχημάτων.
	Περιγράφει α στοιχείο.
...	Επισημαίνει ένα συγκεκριμένο μέρος του κειμένου.
	Σύνολο συνδέσμων πλοήγησης σε μια ιστοσελίδα.
...	Ένα συγκεκριμένο στοιχείο από μια λίστα ή ένα μενού.
...	Μετρά δεδομένα εντός ενός δεδομένου εύρους.
...	Τοποθετεί μια γραμμή προόδου και παρακολουθεί την πρόοδο.
...	Εμφανίζει κείμενο που δεν υποστηρίζει σχολιασμούς Ruby.
...	Εμφανίζει λεπτομέρειες χαρακτήρων τυπογραφίας Ανατολικής Ασίας.
...	Ένας σχολιασμός ρουμπίνι για την τυπογραφία της Ανατολικής Ασίας.
...	Προσδιορίζει την ώρα και την ημερομηνία.
Μια αλλαγή γραμμής μέσα στο περιεχόμενο.
¹Αντικείμενα χαρακτήρων HTML5
" Ή "	Εισαγωγικά
< Ή &lt ;	Μικρότερο από το σύμβολο (
> Ή &gt ;	Σημάδι μεγαλύτερο από (>)
Ή &nbsp ;	Χώρος που δεν σπάει
© Ή &αντίγραφο ;	Σύμβολο πνευματικών δικαιωμάτων
™ Ή &ucirc ;	Σύμβολο εμπορικού σήματος
@ Ή &Uuml ;	σύμβολο "at" (@)
& Ή &amp ;	Σύμβολο συμπερασμάτων (&)
• Ή &ouml ;	Μικρή σφαίρα
¹Αγνοήστε το διάστημα πριν από το ερωτηματικό κατά την πληκτρολόγηση χαρακτήρα HTML.

Δημιουργήστε έναν ιστότοπο για πρακτική εμπειρία

Αφού έχεις καταλάβει τα βασικά του κώδικα HTML και να έχουν εργασιακή γνώση CSS και JavaScript, δοκιμάστε τις δυνάμεις σας στην κατασκευή ενός ιστότοπου Πώς να φτιάξετε έναν ιστότοπο: για αρχάριουςΣήμερα θα σας καθοδηγήσω στη διαδικασία δημιουργίας ενός πλήρους ιστότοπου από την αρχή. Μην ανησυχείτε αν αυτό ακούγεται δύσκολο. Θα σας καθοδηγήσω σε κάθε βήμα. Διαβάστε περισσότερα . Επίσης, φροντίστε να αποθηκεύσετε το δικό μας Φύλλο εξαπάτησης ιδιοτήτων CSS3 Το φύλλο εξαπάτησης των βασικών ιδιοτήτων CSS3Κατακτήστε τη βασική σύνταξη CSS με το φύλλο εξαπάτησης ιδιοτήτων CSS3. Διαβάστε περισσότερα και Φύλλο εξαπάτησης JavaScript Το απόλυτο φύλλο εξαπάτησης JavaScriptΛάβετε μια γρήγορη ανανέωση σε στοιχεία JavaScript με αυτό το φύλλο εξαπάτησης. Διαβάστε περισσότερα για μελλοντική χρήση!