Προδιαγραφές για html5 στα ρωσικά. Το φύλλο εξαπάτησης HTML5 στα ρωσικά θα βοηθήσει στην εκμάθηση. Αποφύγετε τις μεγάλες γραμμές κώδικα
Σχεδιαστής Ιστού - Προδιαγραφή HTML5 (HTML 5)
Οι ετικέτες στο HTML5 είναι ετικέτες XML-HTML που περιγράφουν τη δομή μιας ιστοσελίδας, σχεδιασμένες έτσι ώστε ένα πρόγραμμα υπολογιστή (ρομπότ αναζήτησης κ.λπ.) να μπορεί να διακρίνει το κύριο περιεχόμενο της σελίδας από την υπόλοιπη σελίδα (διατύπωση και στοιχεία πλοήγησης) : επάνω, κάτω, μενού , πλευρικά στοιχεία σελίδας, επαναλαμβανόμενα (δυναμικά) μπλοκ κ.λπ. Υπάρχει επίσης διαίρεση σε επίπεδο κύριου περιεχομένου (κείμενο σελίδας). Η ίδια η γλώσσα HTML5 είναι ένα πρόσθετο σε HTML, XML, CSS κ.λπ.
Τίτλος σελίδας Κορυφή σελίδας, "κεφαλίδα" Κύριο μενού της ιστοσελίδας Κύριο σώμα, άρθρο, υλικό σελίδας Πλαϊνή γραμμή (πλευρική γραμμή) Κάτω μέρος σελίδας, υποσέλιδο
Δομή ιστοσελίδας- πλαισιώστε το κύριο περιεχόμενο της σελίδας (άρθρο),
- πλαισιώστε την κεφαλίδα της σελίδας,
- πλαισιώστε το υποσέλιδο της σελίδας,
- πλαισιώστε το κύριο μενού της σελίδας,
- πλαισιώστε την πλαϊνή γραμμή της σελίδας (πλευρική γραμμή),
- καρέ επαναλαμβανόμενα μπλοκ στη σελίδα (για παράδειγμα σχόλια).
Στοιχεία κώδικα προτύπου ιστοσελίδας HTML5.
Ας δούμε τη λίστα των νέων ετικετών HTML5 που είναι υπεύθυνες για τη διαίρεση της δομής της σελίδας:
- ετικέτες που πλαισιώνουν τα σχεδιαστικά στοιχεία του επάνω μέρους του ιστότοπου, τη λεγόμενη "κεφαλίδα σελίδας". Οι ετικέτες κεφαλίδας μπορούν επίσης να χρησιμοποιηθούν ως το επάνω μέρος μιας ετικέτας ενότητας.
- ετικέτες που πλαισιώνουν το κύριο μενού στον ιστότοπο.
- ετικέτες που πλαισιώνουν το κύριο περιεχόμενο της σελίδας: άρθρο, καταχώρηση ιστολογίου, νέα, πρώτη καταχώριση φόρουμ κ.λπ.
- ετικέτες που πλαισιώνουν την πλαϊνή γραμμή. Μια πλαϊνή γραμμή είναι μια λεγόμενη "πλευρική γραμμή", η οποία συνήθως περιέχει μπλοκ επικεφαλίδων (κατηγορίες), σύννεφα ετικετών (ετικέτες), λίστα πρόσφατων αναρτήσεων κ.λπ. Μπορείτε επίσης να χρησιμοποιήσετε ετικέτες στην άκρη για να πλαισιώσετε μετρητές, γραφικά στοιχεία (για παράδειγμα, σχόλια από το VKontakte) και κουμπιά κοινωνικής δικτύωσης.
- ετικέτες που πλαισιώνουν το κάτω μέρος του ιστότοπου, το λεγόμενο «υποσέλιδο σελίδας», το οποίο μπορεί να περιέχει το όνομα του συγγραφέα (εταιρείας), επαφές (διευθύνσεις, τηλέφωνα), νομικές πληροφορίες (πνευματικά δικαιώματα) κ.λπ. Οι ετικέτες υποσέλιδου μπορούν επίσης να χρησιμοποιηθούν ως το κάτω μέρος μιας ετικέτας ενότητας, π.χ. οι ίδιες οι ετικέτες υποσέλιδου θα βρίσκονται μεταξύ των ετικετών ενοτήτων
- ετικέτες που πλαισιώνουν επαναλαμβανόμενα μέρη μιας σελίδας ή κύριου περιεχομένου, για παράδειγμα, εάν υπάρχουν πολλά κεφάλαια μιας ιστορίας σε μια σελίδα, τότε κάθε κεφάλαιο μπορεί να τοποθετηθεί μεταξύ αυτών των ετικετών. Ή εάν κάνετε κλικ σε έναν σύνδεσμο στην πλαϊνή γραμμή (για παράδειγμα, σε έναν σύνδεσμο κάποιας κατηγορίας), τότε θα εμφανιστεί μια σελίδα στην οποία θα υπάρχουν σύνδεσμοι με περιγραφές που οδηγούν σε άρθρα που ανήκουν σε αυτήν την κατηγορία και μπορούν να πλαισιωθούν σύνδεσμοι με περιγραφές με ετικέτες ενότητας, καθώς και προϊόντα με περιγραφές στο ηλεκτρονικό κατάστημα, σχόλια σε αναρτήσεις, σχόλια για ένα θέμα σε φόρουμ κ.λπ.
HTML5 σε επίπεδο κειμένουΑς δούμε τη λίστα των νέων ετικετών HTML5 που είναι υπεύθυνες για τη σημασιολογική διαίρεση του κειμένου της σελίδας:
- το κείμενο που βρίσκεται ανάμεσα σε αυτές τις ετικέτες γίνεται "επιλεγμένο". Ένας από τους σκοπούς των ετικετών σήμανσης είναι να πλαισιώνουν λέξεις στο κείμενο που, για παράδειγμα, ταιριάζουν με τη λέξη που έχει εισαγάγει ο χρήστης στη γραμμή αναζήτησης.
- οι ετικέτες έχουν σχεδιαστεί για να δημιουργούν ημερομηνίες ή/και ώρες στη μορφή
ISO της μορφής: ΕΕΕΕ-ΜΜ-ΗΗΩΩ:λλ:δδ, αυτή η μορφή είναι κατανοητή σε προγράμματα υπολογιστών. Οι ετικέτες ώρας μπορούν να πλαισιώσουν μια ημερομηνία ή κείμενο, εάν η ετικέτα πλαισιώνει κείμενο, τότε προστίθεται ένα χαρακτηριστικό datetime, η τιμή του οποίου είναι η ημερομηνία και/ή η ώρα σε μορφή ISO.
- οι ετικέτες έχουν σχεδιαστεί για να αποθηκεύουν πληροφορίες που είτε είναι κρυφές είτε εμφανίζονται (λειτουργεί σαν spoiler).
- οι ετικέτες πλαισιώνουν τον τίτλο, εάν κάνετε κλικ σε αυτόν, θα εμφανιστεί κείμενο (μπορεί να χρησιμοποιηθεί ως spoiler), που βρίσκεται ανάμεσα στις ετικέτες λεπτομερειών.
Πρόσθετες ετικέτες γλώσσας HTML5Λίστα νέων ετικετών HTML5 που εμπλουτίζουν τη γλώσσα:
- οι ετικέτες έχουν σχεδιαστεί για να εμφανίζουν μια ένδειξη στατικής κλίμακας, στην οποία το αποτέλεσμα της μέτρησης δεν αλλάζει. Για να δουλέψετε, χρειάζεστε μια ελάχιστη και μέγιστη τιμή.
- οι ετικέτες έχουν σχεδιαστεί για να εμφανίζουν έναν δείκτη δυναμικής κλίμακας (για παράδειγμα, μια κλίμακα λήψης αρχείου), στην οποία το αποτέλεσμα της μέτρησης αλλάζει σε πραγματικό χρόνο.
- η ετικέτα πρέπει να βρίσκεται ανάμεσα σε ετικέτες μενού, που χρησιμοποιούνται κατά τη δημιουργία σεναρίων σε JavaScript.
- η ετικέτα εντολής τοποθετείται μεταξύ αυτών των ετικετών.
- οι ετικέτες προορίζονται για την εμφάνιση της λειτουργίας του σεναρίου.
- οι ετικέτες προορίζονται για τη δημιουργία μιας λίστας που θα εμφανίζεται όταν πληκτρολογείτε σε ένα πεδίο κειμένου.
- οι ετικέτες πλαισιώνουν την περιγραφή ενός αντικειμένου (για παράδειγμα, μιας εικόνας), που βρίσκεται ανάμεσα στις ετικέτες του σχήματος.
- οι ετικέτες ομαδοποιούν διάφορα αντικείμενα σελίδας με τις δικές τους περιγραφές, για παράδειγμα, εικόνες με περιγραφές, προϊόντα με περιγραφές κ.λπ.
- οι ετικέτες έχουν σχεδιαστεί για να ομαδοποιούν επικεφαλίδες h*
- η ετικέτα χρησιμοποιείται για τη δημιουργία ζευγών δημόσιων/ιδιωτικών κλειδιών, κρυπτογράφηση/αποκρυπτογράφηση δεδομένων, δημιουργία/επαλήθευση ψηφιακής υπογραφής.
- ετικέτες πλαισιώνουν το κείμενο και τον σχολιασμό σε αυτό.
- οι ετικέτες βρίσκονται μεταξύ ετικετών ρουμπίνι και προορίζονται να πλαισιώσουν τον σχολιασμό.
- οι ετικέτες προορίζονται για προγράμματα περιήγησης που δεν υποστηρίζουν ετικέτες ruby.
- η ετικέτα λέει στο πρόγραμμα περιήγησης πού να βάλει παύλα τη λέξη ("μαλακή παύλα") εάν η λέξη δεν χωράει στο παράθυρο του προγράμματος περιήγησης.
Ετικέτες HTML5 που περιγράφουν νέες τεχνολογίεςΗ HTML5 εισάγει τη δυνατότητα χρήσης πολλών τεχνολογιών και API που αποτελούν μέρος της γλώσσας HTML5 και όχι προσθηκών τρίτων, εδώ είναι μερικές από αυτές:
- οι ετικέτες προορίζονται για αναπαραγωγή αρχείων ήχου, χωρίς τη χρήση προγραμμάτων τρίτων (πρόσθετα, επεκτάσεις).
- οι ετικέτες προορίζονται για αναπαραγωγή αρχείων βίντεο, χωρίς τη χρήση προγραμμάτων τρίτων (πρόσθετα, επεκτάσεις).
- η ετικέτα προορίζεται να υποδεικνύει τη διαδρομή προς τα αρχεία ήχου/βίντεο, που βρίσκονται μέσα στις ετικέτες ήχου και βίντεο.
- οι ετικέτες προορίζονται για τη δημιουργία μιας ειδικής περιοχής στον ιστότοπο στην οποία μπορείτε να δημιουργήσετε διανυσματικά σχήματα και να τα χειριστείτε χρησιμοποιώντας τη γλώσσα προγραμματισμού JavaScript. Ο καμβάς στο μέλλον θα πρέπει να αντικαταστήσει την τεχνολογία Flash (ναι, θεωρητικά...).
ΕτικέταΗ ετικέτα είναι ένα ειδικό στοιχείο που έχει σχεδιαστεί για να σχεδιάζει και να χειρίζεται διανυσματικά σχήματα. Η ετικέτα δημιουργήθηκε για να αντικαταστήσει την τεχνολογία Flash. Χρησιμοποιώντας την ετικέτα, μπορείτε να σχεδιάσετε διανυσματικά σχήματα (εικόνες) και χρησιμοποιώντας JavaScript, να χειριστείτε αυτά τα σχήματα, δημιουργώντας έτσι κινούμενα σχέδια (κινούμενα σχέδια, ακόμη και παιχνίδια) στον ιστότοπο.
Ήχος βίντεοΧρησιμοποιώντας την ετικέτα, μπορείτε να ενσωματώσετε αρχεία ήχου στη σελίδα και να τα ακούσετε. Στοιχείο
Χρησιμοποιώντας την ετικέτα, μπορείτε να ενσωματώσετε αρχεία βίντεο στη σελίδα και να τα προβάλετε. Το στοιχείο δημιουργεί επίσης ένα πάνελ με κουμπιά αναπαραγωγής.
JavaScript APIΗ προδιαγραφή HTML5 περιγράφει πώς η γλώσσα JavaScript πρέπει να αλληλεπιδρά με στοιχεία σελίδας μέσω της τεχνολογίας DOM. Επίσης στην HTML5, υπάρχουν νέες μέθοδοι χειρισμού αντικειμένων, για παράδειγμα, χρησιμοποιώντας JavaScript και αυτές οι μέθοδοι, μπορείτε να ελέγξετε μέσω προγραμματισμού τα κουμπιά στον πίνακα ελέγχου ήχου/εικόνας.
Υποστήριξη τεχνολογίας XMLΣε ένα έγγραφο HTML γραμμένο χρησιμοποιώντας τη γλώσσα HTML5, είναι πλέον δυνατή η εφαρμογή τεχνολογιών που σχετίζονται με διάφορες μορφές XML, όπως SVG ή MathML.
SVGSVG - Scalable Vector Graphics (κλιμακούμενη γλώσσα σήμανσης διανυσματικών γραφικών), είναι μια μορφή XML. Εφόσον η HTML5 άρχισε να υποστηρίζει μορφές XML, είναι πλέον δυνατή η ενσωμάτωση εικόνων που δημιουργήθηκαν με χρήση SVG σε ένα έγγραφο HTML και ο χειρισμός τους μέσω JavaScript.
Παράδειγμα κώδικα για το μοτίβο πράσινου κύκλου:
Αποτέλεσμα:
MathMLMathML - Mathematical Markup Language (mathematical markup language) Μορφή XML. Χρησιμοποιώντας αυτήν τη μορφή, μπορείτε να περιγράψετε διάφορους μαθηματικούς τύπους.
Ποιες ετικέτες στην HTML5 έχουν καταργηθεί;Οι ετικέτες παλαιού τύπου στην προδιαγραφή HTML5 είναι:
και θα πρέπει να χρησιμοποιηθεί η ετικέτα ενσωμάτωσης
Αντ' αυτού θα πρέπει να χρησιμοποιηθεί η ετικέτα abbr
θα πρέπει να χρησιμοποιηθεί η ετικέτα ήχου
Θα πρέπει να χρησιμοποιηθεί η ετικέτα ul
Θα πρέπει να χρησιμοποιηθεί η ετικέτα iframe
θα πρέπει να χρησιμοποιήσετε ένα σωρό ετικέτες φόρμας και εισαγωγής
και θα πρέπει να χρησιμοποιούνται ετικέτες προ ή κωδικών
Αντ' αυτού θα πρέπει να χρησιμοποιηθεί η προετικέτα
αντ' αυτού θα πρέπει να χρησιμοποιηθεί η ετικέτα s
Αντί για μορφοποίηση ετικετών: , , , , , , , , , και , θα πρέπει να χρησιμοποιήσετε ιδιότητες CSS.
Δεν συνιστάται η χρήση απαρχαιωμένων ετικετών κατά τη δημιουργία ιστοτόπων σε HTML5, αλλά αυτό δεν σημαίνει ότι τα προγράμματα περιήγησης δεν τις υποστηρίζουν πλέον, για παράδειγμα, το έργο μιας μη συνιστώμενης ετικέτας υπογραμμίζει
Τα καθολικά χαρακτηριστικά είναι χαρακτηριστικά που μπορούν να ενσωματωθούν σε οποιαδήποτε ετικέτα εγγράφου HTML. Νέα καθολικά χαρακτηριστικά έχουν εμφανιστεί στην HTML5, στις παρακάτω περιγραφές επισημαίνονται με τη λέξη Νέο
Ας δούμε τα ονόματα και τις περιγραφές των καθολικών χαρακτηριστικών HTML5:
accesskey=" " - σας επιτρέπει να χρησιμοποιήσετε οποιοδήποτε στοιχείο (ετικέτα) της σελίδας πατώντας έναν προ-προγραμματισμένο συνδυασμό πλήκτρων,
class=" " - σας επιτρέπει να ορίσετε το όνομα της τάξης,
contenteditable=" " - σας επιτρέπει να επεξεργαστείτε τα περιεχόμενα του Νέου στοιχείου,
contextmenu=" " - σας επιτρέπει να δημιουργήσετε ένα μενού περιβάλλοντος για το Νέο στοιχείο,
dir=" " - σας επιτρέπει να ελέγχετε την κατεύθυνση του κειμένου,
draggable=" " - επιτρέπει στο χρήστη να σύρει το στοιχείο Νέο,
dropzone=" " - σας επιτρέπει να καθορίσετε τι να κάνετε με ένα στοιχείο κατά τη μεταφορά New,
hiden=" " - σας επιτρέπει να αποκρύψετε το νέο στοιχείο,
id=" " - σας επιτρέπει να ορίσετε ένα μοναδικό αναγνωριστικό για ένα στοιχείο,
lang=" " - σας επιτρέπει να καθορίσετε τον κωδικό γλώσσας στο περιεχόμενο του στοιχείου,
ορθογραφικός έλεγχος=" " - σας επιτρέπει να προσδιορίσετε εάν ο ορθογραφικός έλεγχος στο περιεχόμενο του Νέου στοιχείου,
style=" " - σας επιτρέπει να δημιουργήσετε ένα στυλ για ένα στοιχείο,
tabindex=" " - σας επιτρέπει να δημιουργήσετε έναν κανόνα που καθορίζει με ποια σειρά θα πρέπει να εστιάζονται τα στοιχεία όταν πατάτε το πλήκτρο Tab,
title=" " - σας επιτρέπει να δημιουργήσετε μια επεξήγηση εργαλείου που εμφανίζεται όταν τοποθετείτε το ποντίκι σας πάνω από ένα στοιχείο.
Δεδομένου ότι στην προδιαγραφή HTML5, οι ετικέτες μετατράπηκαν σε πλήρη αντικείμενα, η έννοια ενός καθολικού χαρακτηριστικού ήταν ήδη εγγενής σε αυτά τα αντικείμενα, ακόμη και για εκείνες τις ετικέτες που δεν περιγράφονται ακόμη στην προδιαγραφή.
Καινοτομίες στη δομή κώδικα εγγράφων HTML5Η δομή του κώδικα στην HTML5 έχει υποστεί κάποιες αλλαγές, εδώ είναι μερικές από αυτές:
1. Σε αντίθεση με τις προηγούμενες εκδόσεις της γλώσσας, υπάρχει μόνο ένα doctype στην HTML5:
Για παράδειγμα, μπορείτε να το δείτε στον πηγαίο κώδικα των σελίδων αυτού του ιστότοπου (μην ξεχνάτε ότι δεν πρέπει να υπάρχει τίποτα πριν από το doctype, κανένα κενά, καμία αλλαγή γραμμής κ.λπ.).
2. Για να υποδείξετε τη γλώσσα του εγγράφου, τώρα αντί για τη μετα-ετικέτα:
πρέπει να χρησιμοποιήσετε το χαρακτηριστικό lang="ru" στην ετικέτα:
3. Για να υποδείξετε την κωδικοποίηση του εγγράφου, τώρα αντί για τη μετα-ετικέτα:
πρέπει να χρησιμοποιήσετε μια μετα-ετικέτα, χωρίς τα χαρακτηριστικά http-equiv και content
4. Όταν δημιουργείτε ένα σενάριο JavaScript, τώρα στην ετικέτα, δεν χρειάζεται να εφαρμόσετε τα χαρακτηριστικά type="text/javascript" και language="JavaScript".
5. Κατά την υλοποίηση στυλ CSS, τώρα σε ετικέτες και , δεν χρειάζεται να υλοποιήσετε το χαρακτηριστικό type="text/css".
6. Ο σύνδεσμος είναι μια ενσωματωμένη ετικέτα, επομένως, στις πρώιμες προδιαγραφές HTML και XHTML, δεν συνιστώνταν να πλαισιώνουν ετικέτες μπλοκ τώρα στην προδιαγραφή HTML5, αυτή η σύσταση για συνδέσμους έχει αφαιρεθεί και πλέον επιτρέπεται να πλαισιώνουν έναν ή περισσότερους στοιχεία μπλοκ.
ΕπικεφαλίδαΤώρα με την HTML5, μπορείτε να κάνετε αυτό:
ΕπικεφαλίδαΜε βάση τα υλικά από τον ιστότοπο http://html-5.ru/, http://html-5.ru/uchebnik-html5
- Προσθήκες στο HTML W3C από το 2015-2017
- Συστάσεις του W3C 24 Δεκεμβρίου 1999
Έχοντας διαβάσει τον τίτλο της δημοσίευσης: "HTML5 Cheat Sheet στα Ρωσικά" - όλοι ήδη μαντέψαμε για την ομιλία, αλλά πρώτα μερικές παραγράφους για την HTML5 γενικά.
Οι εργασίες για τη δημιουργία της HTML5 ξεκίνησαν το 2004. και συνεχίζουν μέχρι σήμερα. Η HTML5 σχεδιάζεται ως η πιο καθολική και λειτουργική έκδοση της HTML (HyperText Markup Language), επειδή με τον ένα ή τον άλλο τρόπο, τιτάνες του κλάδου όπως η Apple, η Mozilla, η Opera, η Microsoft και η Google συμμετέχουν στη δημιουργία της HTML5. Σημειώνω ότι είναι το Google Chrome που υποστηρίζει αυτήν τη στιγμή τα περισσότερα στοιχεία HTML5
Παρά το γεγονός ότι ενδέχεται να γίνουν αλλαγές στην HTML5, επειδή οι εργασίες για την προδιαγραφή HTML 5 είναι ακόμη σε εξέλιξη και βρίσκονται ακόμη σε εξέλιξη, η ανάπτυξη της τεχνολογίας συμβαίνει τόσο γρήγορα που η HTML5 θα υιοθετηθεί σύντομα και οι ιστότοποι θα πρέπει να δημιουργηθούν χρησιμοποιώντας τις ευρείες δυνατότητες της HTML5!
Το φύλλο εξαπάτησης HTML5 στα ρωσικά θα βοηθήσει στην εκμάθησηΟι κωδικοποιητές και οι σχεδιαστές διάταξης πρέπει να μάθουν τις καινοτομίες, τις ετικέτες και τα πρότυπα της HTML5 σήμερα, επειδή παρά τη συνεχιζόμενη εργασία στην HTML5, ορισμένες από τις δυνατότητές της χρησιμοποιούνται ήδη με μεγάλη επιτυχία κατά τη δημιουργία ιστοσελίδων. Φυσικά, πρέπει να ξεκινήσετε να μαθαίνετε HTML5 με ετικέτες, επειδή έχουν εμφανιστεί νέες ετικέτες στο HTML5 και ορισμένες παλιές δεν θα υποστηρίζονται. Επίσης, πολλές ετικέτες από την HTML4 ήρθαν στην HTML5. Και τι θα μπορούσε να είναι καλύτερο και πιο βολικό για να μάθετε κάτι από ένα cheat sheet; Συναντώ:
το πρώτο φύλλο εξαπάτησης HTML5 στα ρωσικά στο RuNetΤο πρώτο φύλλο εξαπάτησης HTML5 στα ρωσικά στο RuNet, περιλαμβάνει νέα στοιχεία HTML5 που παλαιότερα χρησιμοποιήθηκαν ευρέως, αλλά ήταν γραμμένα με τα ονόματα των στυλ. Για παράδειγμα υποσέλιδο, κεφαλίδα, ενότητα, άρθρο και άλλα. Επιπλέον, το φύλλο εξαπάτησης HTML5 στα ρωσικά περιέχει όλες τις ετικέτες της παλιάς έκδοσης της HTML4 που έχουν μετακινηθεί σε HTML5. Επίσης, το φύλλο εξαπάτησης HTML5 στα Ρωσικά περιέχει ετικέτες που δεν υποστηρίζονται από την HTML5.
Φύλλο απάτης HTML5 στα ρωσικά, κατασκευασμένο σε μορφή Α4Το πρώτο φύλλο εξαπάτησης HTML5 στα ρωσικά στο RuNet είναι κατασκευασμένο σε μορφή Α4, επομένως θα είναι βολικό για εσάς να το εκτυπώσετε και να το έχετε στη διάθεσή σας. Σημειώνω ότι το φύλλο εξαπάτησης HTML5 στα ρωσικά περιγράφει όλες τις ετικέτες σε μία σειρά, μεταφέροντας τον σκοπό της ετικέτας όσο το δυνατόν περισσότερο. Το φύλλο εξαπάτησης HTML5 στα ρωσικά θα βελτιώνεται και θα ενημερώνεται συνεχώς καθώς οι ετικέτες αφαιρούνται ή προστίθενται στο HTML5. Μπορείτε να κατεβάσετε το "Φύλλο εξαπάτησης HTML5 στα Ρωσικά" από τον παρακάτω σύνδεσμο. Στο αρχείο θα βρείτε 1 υψηλής ποιότητας pdf και δύο αρχεία jpg σε διαφορετικές επεκτάσεις.
Κατεβάστε το "HTML5 Cheat Sheet in Russian" (Αριθμός λήψεων: 7996)Το αρχείο περιέχει δύο αρχεία jpg στις επεκτάσεις 1024×1448 και 2480×3508
Ενημέρωση 29.10.2014
Έχουν περάσει περισσότερα από δύο χρόνια από τη σύνταξη της ανάρτησης και την πραγματική δημιουργία του φύλλου εξαπάτησης σε HTML 5. Κατά τη διάρκεια αυτής της περιόδου, το φύλλο εξαπάτησης κατέβηκε 3600 φορές), είμαι πολύ ευχαριστημένος, ελπίζω να ήταν χρήσιμο σε όσους μελέτησαν διάταξη σε HTML 5. Έμαθα πολλά και έμαθα από διάφορα φόρουμ και ιστότοπους, και δημιουργώντας ένα cheat sheet ήθελα να δείξω την ευγνωμοσύνη μου, να ξεπληρώσω το χρέος μου). Γιατί γράφω μια ενημέρωση σε αυτήν την ανάρτηση σήμερα, γιατί σήμερα ολοκληρώθηκε επιτέλους η ανάπτυξη της HTML5!
Η ανάπτυξη HTML5 ολοκληρώθηκε επίσημα
Η HTML5 είναι επίσημα "λειτουργικά ολοκληρωμένη". Σύμφωνα με τα καθιερωμένα παγκόσμια πρότυπα από την Worldwide Web Consortium (W3C). Απομένουν ακόμη κάποιες δοκιμές που πρέπει να γίνουν και δεν έχει γίνει ακόμη επίσημο πρότυπο Web, αλλά προς το παρόν είναι ασφαλές να πούμε ότι δεν θα υπάρχουν νέες δυνατότητες σε σύγκριση με την τρέχουσα έκδοση.
Αυτό σημαίνει ότι οι σχεδιαστές ιστοσελίδων και οι κατασκευαστές εφαρμογών έχουν πλέον έναν «σταθερό στόχο» για ομαλή μετάβαση στο νέο πρότυπο έως το 2015. Η γλώσσα σήμανσης HTML5 επιτρέπει στους προγραμματιστές να προσθέτουν λειτουργικότητα σε σελίδες που προηγουμένως απαιτούσαν αυτόνομες εφαρμογές ή πρόσθετο λογισμικό όπως Java, Adobe Flash ή Microsoft (MSFT, Fortune 500) Silverlight. Υποστηρίζει υπηρεσίες ροής βίντεο και τοποθεσίας, εργαλεία εκτός σύνδεσης και χειριστήρια αφής, μεταξύ άλλων κουδουνιών και σφυρίχτρες.
Χρειάστηκαν περισσότερα από 10 χρόνια για να αναπτυχθεί ένα νέο πρότυπο. Ο Διευθύνων Σύμβουλος του W3C, Jeff Jaffe, δήλωσε σε μια έτοιμη δήλωση πριν από λίγες ημέρες ότι από σήμερα, οι προγραμματιστές γνωρίζουν ότι μπορούν να βασίζονται στην HTML5 για τα επόμενα χρόνια. «Επιπλέον, οι προγραμματιστές θα γνωρίζουν ποιες δεξιότητες πρέπει να αναπτύξουν για να επεκταθούν σε smartphone, αυτοκίνητα, τηλεοράσεις, ηλεκτρονικά προγράμματα ανάγνωσης, ψηφιακές πινακίδες και συσκευές που δεν είναι ακόμη γνωστές», πρόσθεσε.
Οι πιο πρόσφατες εκδόσεις του Microsoft Internet Explorer, του Google Chrome, του Mozilla Firefox και του Apple Safari είναι ήδη συμβατές με τα περισσότερα στοιχεία HTML5. Το W3C εργάζεται ήδη στην HTML 5.1, τα πρώτα μέρη της οποίας μόλις υποβλήθηκαν ως προσχέδιο.
Κώδικας HTML συμβάσεωνΓια πολλούς προγραμματιστές ιστού, οι προδιαγραφές κώδικα HTML είναι ελάχιστα κατανοητές.
Το 2000-2010, πολλοί προγραμματιστές ιστού μετέτρεψαν από HTML σε XHTML.
Οι προγραμματιστές που χρησιμοποιούν XHTML αναπτύσσουν σταδιακά καλές προδιαγραφές γραφής HTML.
Και στην HTML5, πρέπει να διαμορφώσουμε σχετικά καλά πρότυπα κώδικα, αρκετές οδηγίες δίνονται κάτω από τις προδιαγραφές.
Χρησιμοποιήστε τον σωστό τύπο εγγράφουΔήλωση του τύπου εγγράφου στην πρώτη γραμμή του εγγράφου HTML:
DOCTYPE HTML>
Εάν θέλετε να χρησιμοποιήσετε άλλες ετικέτες, όπως πεζά, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:
DOCTYPE HTML>
Ονόματα στοιχείων με πεζά γράμματαΤο όνομα στοιχείου HTML5 μπορεί να χρησιμοποιηθεί με κεφαλαία ή πεζά γράμματα.
- Η θήκη μικτού στυλ είναι πολύ κακή.
- Τα πεζά γράμματα γράφονται εύκολα.
Αυτή είναι μια παράγραφος.
Αυτή είναι μια παράγραφος.
Αυτή είναι μια παράγραφος.
Στην HTML5, δεν θέλετε να κλείσετε όλα τα στοιχεία (όπως το στοιχείο ), αλλά συνιστούμε κάθε στοιχείο να προσθέτει μια ετικέτα κλεισίματος.
Αυτή είναι μια παράγραφος.
Αυτή είναι μια παράγραφος.
Αυτή είναι μια παράγραφος.
Αυτή είναι μια παράγραφος.
Στην HTML5, το κενό στοιχείο HTML δεν χρειάζεται να απενεργοποιηθεί:
Μπορούμε να γράψουμε:
Μπορείτε επίσης να γράψετε:
Απαιτείται XML, XHTML και κάθετο (/).
Εάν σκοπεύετε να χρησιμοποιήσετε τη σελίδα λογισμικού XML, αυτό το στυλ είναι πολύ καλό.
Όνομα χαρακτηριστικού με πεζά γράμματαΗ HTML5 σάς επιτρέπει να χρησιμοποιείτε το όνομα της ιδιότητας με κεφαλαία και πεζά γράμματα.
- Η περίπτωση χρήσης είναι μια πολύ κακή συνήθεια.
- Οι προγραμματιστές χρησιμοποιούν συνήθως πεζά (παρόμοια με το XHTML).
- Το στυλ των πεζών φαίνεται πιο αναζωογονητικό.
- Τα πεζά γράμματα γράφονται εύκολα.
Αξία περιουσίας
Δεν είναι δυνατή η αναφορά τιμών χαρακτηριστικών HTML5.
- Εάν η τιμή της ιδιότητας περιέχει κενά, πρέπει να χρησιμοποιήσετε εισαγωγικά.
- Δεν προτείνεται μικτό στυλ, προτείνεται μονό στυλ.
- Οι τιμές των ιδιοτήτων που χρησιμοποιούν εισαγωγικά είναι εύκολο να διαβαστούν.
Το ακόλουθο παράδειγμα τιμής χαρακτηριστικού περιέχει κενά, μην χρησιμοποιείτε εισαγωγικά, ενδέχεται να μην λειτουργεί:
Το παρακάτω χρησιμοποιεί διπλά εισαγωγικά και είναι σωστό:
ιδιότητεςΣυχνά χρησιμοποιούνται χαρακτηριστικά Image Alt. Εάν η εικόνα δεν μπορεί να εμφανιστεί, μπορεί να αντικαταστήσει την εμφάνιση της εικόνας.
= "HTML5" style = "πλάτος: 128 px; ύψος: 128 px">
Το μέγεθος της εικόνας προσδιορίζεται, μπορεί να δεσμευτεί κατά τη στιγμή της φόρτωσης της καθορισμένης τιμής, να μειώσει το τρεμόπαιγμα.
= style "HTML5" = "πλάτος: 128 px; ύψος: 128 px">
Μπορείτε να χρησιμοποιήσετε κενά πριν και μετά το σύμβολο ίσον.
Αποφύγετε τις μεγάλες γραμμές κώδικαΧρησιμοποιώντας το πρόγραμμα επεξεργασίας HTML, ο κώδικας κύλισης αριστερά και δεξιά είναι περίεργη.
Κάθε γραμμή κώδικα είναι όσο το δυνατόν λιγότερο από 80 χαρακτήρες.
Κενές γραμμές και εσοχήΜην προσθέτετε κενή γραμμή χωρίς λόγο.
Για κάθε λειτουργικό μπλοκ λογικής, προσθέστε μια κενή γραμμή, η οποία το κάνει πιο ευανάγνωστο.
Μην χρησιμοποιείτε περιττές κενές γραμμές με εσοχή μεταξύ των σύντομων κωδικών.
Επιπλέον κενές γραμμές και εσοχές:
Αυτό το σεμινάριο
HTML
Αυτό το σεμινάριο διδάσκει όχι μόνο την τεχνολογία, αλλά και τον ύπνο.
Αυτό το εγχειρίδιο, που διδάσκει όχι μόνο την τεχνολογία, αλλά και σε ένα όνειρο,
Αυτό το σεμινάριο διδάσκει όχι μόνο την τεχνολογία, αλλά και τον ύπνο.
Αυτό το σεμινάριο
Σε αυτό το σεμινάριο, η διδασκαλία όχι μόνο της τεχνολογίας, αλλά και του ύπνου.
Αυτό το σεμινάριο διδάσκει όχι μόνο την τεχνολογία, αλλά και τον ύπνο.
Αυτό το σεμινάριο διδάσκει όχι μόνο την τεχνολογία, αλλά και τον ύπνο.
Αυτό το σεμινάριο διδάσκει όχι μόνο την τεχνολογία, αλλά και τον ύπνο.
Παράδειγμα φόρμας:
Ονομα
Περιγραφή
ΕΝΑ
Περιγραφή Α
σι
Περιγραφή Β
Ας παραλείψουμε και;
Στο πρότυπο HTML5, η ετικέτα μπορεί να παραλειφθεί.
Τα ακόλουθα έγγραφα είναι έγκυρα HTML5:
Παράδειγμα:DOCTYPE HTML>
Τίτλος σελίδας
Αυτός είναι ο τίτλος
Αυτή είναι μια παράγραφος.
Δοκίμασέ το "
Το στοιχείο είναι το ριζικό στοιχείο του εγγράφου, η γλώσσα που χρησιμοποιείται για την περιγραφή της σελίδας:
DOCTYPE HTML>
Δήλωση γλώσσας για ευκολότερη ανάγνωση σε οθόνες και μηχανές αναζήτησης.
Ας παραλείψουμε είτε σφάλματα λογισμικού DOM είτε XML.
Ας παραλείψουμε το σφάλμα που παρουσιάζεται σε παλαιότερα προγράμματα περιήγησης (IE9).
Να το παραλείψουμε;Στο πρότυπο HTML5, η ετικέτα μπορεί να παραλειφθεί.
Το πρόγραμμα περιήγησης ορίζει από προεπιλογή τα περιεχόμενα πριν το στοιχείο προστεθεί στην προεπιλογή.
παραδείγματαDOCTYPE HTML>
Τίτλος σελίδας
Αυτός είναι ο τίτλος
Αυτή είναι μια παράγραφος.
Δοκιμάστε » Μεταδεδομένα
Η HTML5 απαιτεί ένα στοιχείο του οποίου ο τίτλος περιγράφει το θέμα της σελίδας:
Σε αυτό το σεμινάριο
Τίτλος και γλώσσα που επιτρέπει στη μηχανή αναζήτησης να κατανοήσει γρήγορα το θέμα της σελίδας σας:
DOCTYPE HTML>
Σε αυτό το σεμινάριο
Θέλετε να βρείτε γρήγορα μια περιγραφή ενός στοιχείου ή χαρακτηριστικού HTML5 που χρησιμοποιείται σε μια ιστοσελίδα ή μια εφαρμογή Ιστού; Εδώ είναι ένα κλασικό βιβλίο αναφοράς που οι σχεδιαστές ιστοσελίδων και οι προγραμματιστές ιστοσελίδων προσπαθούν να κρατήσουν στη διάθεσή τους για πάνω από 15 χρόνια.
Η πέμπτη έκδοση του βιβλίου περιλαμβάνει μια πλήρη περιγραφή των στοιχείων και των χαρακτηριστικών HTML5 σύμφωνα με τα πρότυπα HTML5 Candidate Recommendate, HTML5.1 Working Draft και WHATWG. Χαρακτηριστικά του καταλόγου:
– μια αλφαβητικά ταξινομημένη λίστα στοιχείων και χαρακτηριστικών από HTML5, HTML5.1 και το πρότυπο WHATWG.
– παραδείγματα σήμανσης, κατηγορίες περιεχομένου, μοντέλα περιεχομένου και απαιτήσεις ετικετών έναρξης/λήξης για κάθε στοιχείο.
– περιγραφή των διαφορών μεταξύ των προδιαγραφών HTML5 και HTML4.01.
– πίνακες ειδικών χαρακτήρων.
– επισκόπηση των βιβλιοθηκών API που χρησιμοποιούνται στην HTML5.
Είτε είστε έμπειρος προγραμματιστής ιστότοπου είτε θέλετε να δημιουργήσετε γρήγορα έναν ιστότοπο σύμφωνα με τα πιο πρόσφατα πρότυπα, θα βρείτε αυτό το χρήσιμο βιβλίο απαραίτητο.
Σας άρεσε το άρθρο ή το βιβλίο; Μοιράσου το με τους φίλους σου:
Όλα τα βιβλία που παρουσιάζονται στον ιστότοπο είναι μόνο για ενημερωτικούς σκοπούς. Οποιαδήποτε χρήση τους από εσάς επιτρέπεται μόνο για ενημερωτικούς σκοπούς. Εάν σκοπεύετε να τα χρησιμοποιήσετε στο μέλλον, πρέπει να τα αγοράσετε από τους κατόχους πνευματικών δικαιωμάτων. Η διαχείριση του ιστότοπου δεν είναι υπεύθυνη για τη χρήση τους.
Συχνά, οι προγραμματιστές ιστού δεν γνωρίζουν καν ότι υπάρχουν ορισμένα πρότυπα κωδικοποίησης HTML. Ωστόσο, μεταξύ 2000 και 2010, πολλοί προγραμματιστές ιστού άλλαξαν από HTML σε XHTML. Ταυτόχρονα, η XHTML ανάγκασε τους προγραμματιστές να γράψουν έγκυρο και «καλά διαμορφωμένο» κώδικα. Η HTML5, όταν πρόκειται για επικύρωση κώδικα, επιτρέπει κάποια προχειρότητα.
Ωστόσο, η συνέπεια στο στυλ θα διευκολύνει τους άλλους να κατανοήσουν τον κώδικα HTML σας.
Ίσως κάποια μέρα προγράμματα, όπως τα προγράμματα ανάγνωσης δεδομένων XML, θα χρειαστεί να διαβάσουν τον κώδικα HTML σας. Έτσι, η χρήση καλοσχηματισμένης σύνταξης που μοιάζει με XHTML είναι μια λογική προσέγγιση.
Να βεβαιώνεστε πάντα ότι ο κώδικάς σας είναι τακτοποιημένος, καθαρός και καλοσχηματισμένος.
Χρησιμοποιήστε τον σωστό τύπο εγγράφουΝα δηλώνετε πάντα τον τύπο του εγγράφου στην πρώτη γραμμή:
Εάν θέλετε να διατηρήσετε τη συνέπεια με τις πεζές ετικέτες, μπορείτε να χρησιμοποιήσετε τον ακόλουθο ορισμό τύπου εγγράφου:
Γράψτε τα ονόματα των στοιχείων με μικρά γράμματα
Η HTML5 επιτρέπει τόσο κεφαλαία όσο και πεζά γράμματα στα ονόματα των στοιχείων. Ωστόσο, είναι καλύτερο να χρησιμοποιείτε πάντα μόνο μικρά γράμματα. Αυτό εξηγείται από τις ακόλουθες σκέψεις:
- Η ανάμειξη κεφαλαίων και μικρών γραμμάτων σε ονόματα ετικετών θεωρείται κακή πρακτική
Αυτή είναι μια παράγραφος κειμένου.
Πολύ κακό:
Αυτή είναι μια παράγραφος κειμένου.
Αυτή είναι μια παράγραφος κειμένου.
Κλείστε όλα τα στοιχεία HTMLΣτην HTML5, δεν απαιτείται να κλείσετε όλα τα στοιχεία (για παράδειγμα, το στοιχείο
Αυτή είναι μια παράγραφος κειμένου.
Αυτή είναι μια παράγραφος κειμένου.
Αυτή είναι μια παράγραφος κειμένου.
Αυτή είναι μια παράγραφος κειμένου.
Κλείστε τα κενά στοιχεία HTMLΣτην HTML5, το κλείσιμο ή όχι των κενών στοιχείων εξαρτάται από την επιθυμία του προγραμματιστή ιστού.
Δεκτός:
Επίσης αποδεκτό:
Ωστόσο, η τελευταία κάθετο (/) ΑΠΑΙΤΕΙΤΑΙ σε XHTML και XML.
Εάν η ιστοσελίδα σας αναμένεται να είναι προσβάσιμη από εφαρμογές XML, τότε είναι προτιμότερο να χρησιμοποιήσετε μια τελική κάθετο σε κενά στοιχεία HTML!
Χρησιμοποιήστε μικρά γράμματα για ονόματα χαρακτηριστικώνΣτην HTML5, μπορείτε να συνδυάσετε κεφαλαία και πεζά γράμματα όταν γράφετε ονόματα χαρακτηριστικών.
- Η ανάμειξη κεφαλαίων και μικρών γραμμάτων σε ονόματα χαρακτηριστικών θεωρείται κακή πρακτική
- Οι προγραμματιστές συνήθως χρησιμοποιούν μικρά γράμματα (όπως στο XHTML)
- Τα πεζά γράμματα φαίνονται πιο καθαρά
- Τα πεζά είναι πιο εύκολο να γραφτούν
Εσωκλείστε τις τιμές των χαρακτηριστικών σε εισαγωγικά
Το HTML5 επιτρέπει τις τιμές των χαρακτηριστικών να γράφονται χωρίς εισαγωγικά. Ωστόσο, συνιστούμε να περικλείετε πάντα τις τιμές των χαρακτηριστικών σε εισαγωγικά επειδή
- Η ανάμειξη κεφαλαίων και μικρών γραμμάτων σε έννοιες θεωρείται κακή πρακτική
- Οι τιμές που αναφέρονται είναι πιο ευανάγνωστες
- ΠΡΕΠΕΙ να αναφέρετε αν υπάρχουν κενά στις τιμές
Πολύ κακό:
Αυτό δεν θα λειτουργήσει επειδή υπάρχουν κενά στην τιμή
