5 πράγματα που δεν γνωρίζατε ότι θα μπορούσατε να κάνετε με το HTML

Sep 17, 2025

πως να

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

Σε οποιοδήποτε τύπο ανάπτυξης λογισμικού, η modularity είναι βασιλιάς όταν πρόκειται για την κατασκευή συντηρητικού κώδικα. Ως αποτέλεσμα, θα θελήσετε να διατηρήσετε προσεκτικά τα εξαρτήματα του ιστού. Η υποστήριξη του προγράμματος περιήγησης δεν είναι μεγάλη, αλλά αν πιάσετε τον εαυτό σας μερικά Πολυφάγα , μπορείτε να προχωρήσετε στην καμπύλη και να αρχίσετε να εκμεταλλευτείτε τα προσαρμοσμένα στοιχεία για να δομήσετε τον κωδικό σας αμέσως. Αυτό το στυλ ανάπτυξης είναι το μέλλον, γι 'αυτό αξίζει να το εξοικειωθείτε τώρα.

Keep code streamlined for clearer understanding — Κρατήστε τον κώδικα να βελτιωθεί για σαφέστερη κατανόηση

Η ίδια η HTML5 εισήγαγε ένα αριθμό νέων στοιχείων (και απογυμνώθηκε πολλά) για να βοηθήσει στην ενθάρρυνση καλών πρακτικών κωδικοποίησης. Μπορεί να έχετε ακούσει για σημασιολογική σήμανση, η οποία αναφέρεται στη χρήση των περιγραφικών στοιχείων του HTML5 όπως & lt; άρθρο & gt; και & lt; Σχήμα & GT; για να υποδείξει τον τύπο περιεχομένου που περιέχουν.

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

Θα βοηθήσει επίσης εάν επωφεληθείτε από τα πιο πρόσφατα πρότυπα JavaScript. Το JavaScript μπορεί επίσης να γίνει ακατάστατο, αλλά είναι πολύ πιο εύκολο να συνεργαστείτε τα τελευταία χρόνια. Το ES6 Syntax υποστηρίζεται ευρέως σε προγράμματα περιήγησης και χαρακτηριστικά όπως λειτουργίες και μαθήματα βέλους μπορεί να κάνει τη ζωή σας πολύ πιο εύκολη - όμως πολλοί προγραμματιστές είναι είτε άγνωστοι είτε επιφυλακτικοί να τις χρησιμοποιούν.

Συνεχίζοντας το θέμα της αρθρωτής ανάπτυξης, η JavaScript υποστηρίζει επίσης τη φόρτωση μονάδας, η οποία μπορεί να σας βοηθήσει να διαχειριστείτε τις εξαρτήσεις σας καθαρά.

01. Αναγνωρίστε και συνθέτουν ομιλία

The sound of things to come — Ο ήχος των πραγμάτων που πρέπει να έρθουν (Credit image: Φωτογραφία από τον Jason Rosewell on unsplash)

Αυτά θα ήταν κάποτε πολύπλοκες λειτουργίες που απαιτούν εξειδικευμένο λογισμικό, αλλά τώρα χτίζονται απευθείας σε προγράμματα περιήγησης. Το API ομιλίας ιστού έχει εξαρτήματα που υποστηρίζουν κείμενο σε ομιλία και ομιλία σε κείμενο. Το τελευταίο από αυτά θα χρησιμοποιήσει είτε μια ηλεκτρονική υπηρεσία (το Chrome χρησιμοποιεί το API ομιλίας Google Cloud Speech) ή τη μητρική υπηρεσία αναγνώρισης ομιλίας της συσκευής. Αναμείνετε να δείτε αυτό να χρησιμοποιείται ευρέως σε κινητές συσκευές στο μέλλον.

02. Εμφανίστε έναν επιλογέα χρώματος

Choosing the right colour — Επιλέγοντας το σωστό χρώμα (Credit Image Credit: Φωτογραφία από τον Scott Webb στο άψογο)

Το Trivial όπως μπορεί να ακούγεται, αυτό είναι ένα εξαιρετικό παράδειγμα για το πώς η HTML5 απλοποιεί τις κοινές εργασίες που θα χρειαζόταν προηγουμένως προσαρμοσμένη κωδικοποίηση ενός αρκετά σύνθετου συστατικού UI. & lt; τύπος εισόδου = "χρώμα" & gt; Θα εμφανιστεί ένας επιλογέας Visual Color όταν κάνετε κλικ, χρησιμοποιώντας έναν επιλογέα χρώματος που είναι εγγενή στη συσκευή. Αυτό θα μπορούσε να είναι ιδιαίτερα χρήσιμο με HTML καμβά. Υποστηρίζεται ευρέως με εξαίρεση το Safari στο κινητό.

03. Εξαφανίστε το πρόγραμμα περιήγησης UI

Colour themes for browsers — Χρωματικά θέματα για προγράμματα περιήγησης (Πίστωση εικόνας: Φωτογραφία από τον Marko Blažević σε άψογη)

Αυτό μπορεί να προσφέρει μια ωραία αισθητική επαφή σε κινητές πλατφόρμες. & lt; meta όνομα = "θέμα" content "content =" # ffffff "/ & gt; έχει σχεδιαστεί για να καθοδηγεί το πρόγραμμα περιήγησης να επαναλάβει τη γραμμή εργαλείων κατά την προβολή του ιστότοπού σας. Δυστυχώς, είναι λίγο μη τυποποιημένο, έτσι ενώ "Θέμα-χρώμα" Λειτουργεί με Chrome, Firefox και Opera, στο iOS θα χρειαστείτε "Apple-mobile-web-app-status-bar-style" (λειτουργεί μόνο σε λειτουργία πλήρους οθόνης).

04. Διαφορετικές εικόνες για διαφορετικές οθόνες

Specifying the image and the resolution — Καθορίζοντας την εικόνα και την ανάλυση (Credit image: Φωτογραφία από το Tran Mau Tri Tam on unsplash)

Ας ελπίσουμε ότι έχετε ήδη εκτελέσει το σχεδιασμό ανταποκρινόμενων, οπότε οι εικόνες σας θα αλλάξουν ανάλογα για να ταιριάζουν στο προβολές. Αυτό δεν είναι τέλειο, καθώς θα αναγκάζετε τον χρήστη να κατεβάσει τη μεγαλύτερη έκδοση της εικόνας και στη συνέχεια να το μειώσει. Εισαγάγετε το HTML5 & lt; picture & gt; Στοιχείο, το οποίο σας επιτρέπει να καθορίσετε διαφορετικές εικόνες που θα εμφανιστούν ανάλογα με την ανάλυση οθόνης, ο ιστότοπος προβάλλεται.

05. Δονήνετε το τηλέφωνό σας

Shakin' all over — Shakin 'παντού (Credit image: Φωτογραφία του Gilles Lambert On Unsplash)

Το ασαφώς ονομάζεται API δόνησης εκθέτει μια ενιαία λειτουργία, δονείται (), η οποία θα κάνει ακριβώς αυτό που λέει σε συσκευές που την υποστηρίζουν. Η λειτουργία λαμβάνει μια λίστα που περιγράφει ένα σχέδιο δόνησης ως το επιχείρημά του. Θα λειτουργήσει σε Chrome, Firefox και Opera, αν και είστε έξω από την τύχη στην άκρη ή το σαφάρι. Αναφέρει ότι ορισμένες διαφημίσεις χρησιμοποιούν αυτό για να προσελκύσουν την προσοχή του χρήστη, οπότε η κριτική επιτροπή είναι έξω από το αν είναι στην πραγματικότητα μια καλή ιδέα.

Αυτό το άρθρο εμφανίστηκε αρχικά στο Σχεδιαστής ιστοσελίδων Τεύχος 266. Αγοράστε το εδώ .

Σχετικά Άρθρα:

Τα 10 καλύτερα σχέδια προτύπων HTML5
20 πρότυπα HTML για να δώσετε τα έργα σχεδιασμού ιστοσελίδων σας ένα headstart
Καρφώστε το HTML σας με αυτό το φύλλο εξαπατήσει

5 πράγματα που δεν γνωρίζατε ότι θα μπορούσατε να κάνετε με το HTML

01. Αναγνωρίστε και συνθέτουν ομιλία

02. Εμφανίστε έναν επιλογέα χρώματος

03. Εξαφανίστε το πρόγραμμα περιήγησης UI

04. Διαφορετικές εικόνες για διαφορετικές οθόνες

05. Δονήνετε το τηλέφωνό σας

πως να - Τα πιο δημοφιλή άρθρα

Πώς να σχεδιάσετε τους μύες

5 Ζεστά νέα χαρακτηριστικά CSS και πώς να τα χρησιμοποιήσετε

Αναδημιουργήστε ένα κλασικό Manga

Δημιουργήστε το δικό σας webgl φυσικό παιχνίδι

Πώς να προετοιμάσετε τα γραφικά του εικονογράφου για μετά τα αποτελέσματα

Τέσσερις αρχές στρατηγικής UX

Πώς να γλυπτική και να θέσει ένα κεφάλι γελοιογραφίας σε zbrush

Κορυφαίες συμβουλές για να βελτιώσετε τις χειροποίητες τεχνικές απεικόνισης

Κατηγορίες