HTML <meta> κεφάλαιο

Καθορισμός και χρήση

<meta> Το στοιχείο define και η χρήση. Οι μεταδεδομένα είναι δεδομένα για δεδομένα (πληροφορίες).

<meta> Το στοιχείο Στοιχείο <head> Σε, συνήθως χρησιμοποιούνται για να καθορίζουν τη γλώσσα χαρακτήρων, την περιγραφή της σελίδας, τα keywords, τον συγγραφέα του έγγραφου και τις ρυθμίσεις φάσματος όρασης:

Τα metadata δεν εμφανίζονται στην ιστοσελίδα αλλά μπορούν να αναλύονται από μηχανές.

Οι μηχανές περιήγησης (πώς εμφανίζεται το περιεχόμενο ή ξαναφορτώνεται η σελίδα), οι μηχανές αναζήτησης (keywords) και άλλες υπηρεσίες δικτύου χρησιμοποιούν metadata.

Tip:Τα στοιχεία meta έχουν πολλαπλές χρήσεις και μπορεί να υπάρχουν πολλαπλά στοιχεία meta σε ένα έγγραφο HTML.

Tip:Με <meta> Υπάρχουν μεθόδους για τους σχεδιαστές ιστοσελίδων να ελέγχουν το φάσμα όρασης (δηλαδή την περιοχή που ο χρήστης μπορεί να δει στην ιστοσελίδα) (βλέπε το παράδειγμα "Ρύθμιση φάσματος όρασης" παρακάτω).

Σημείωση:Κάθε στοιχείο meta μπορεί να χρησιμοποιηθεί μόνο για έναν σκοπό. Αν θέλεις να χρησιμοποιήσεις πολλαπλές λειτουργίες, πρέπει να προσθέσεις πολλαπλά στοιχεία meta στον κώδικα head.

Δείτε επίσης:

Εκμάθηση HTML:Κεφαλίδα HTML

Εγχειρίδιο HTML DOM:Οντότητα Meta

Παράδειγμα

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Δωρεάν Εκμάθηση Web">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Προσπάθησε να το δοκιμάσεις

Ατрибούτο

Ατрибούτο Τιμή Περιγραφή
charset Συλλογή χαρακτήρων Καθορίζει τον χαρακτήρα κώδικα του HTML έγγραφου.
content Κείμενο Καθορίζει τις τιμές που σχετίζονται με τα attributes http-equiv ή name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 προσφέρει πληροφορίες/τιμές για την ιδιότητα content ως κεφαλίδα HTTP.
name
  • application-name
  • συγγραφέας
  • περιγραφή
  • generator
  • λέξεις-κλειδιά
  • προσοχή οπτικό πεδίο
 ορίζει το όνομα των μεταδεδομένων.

καθολικές ιδιότητες

<meta> Η σφραγίδα υποστηρίζει επίσης Καθολικές ιδιότητες στο HTML.

Το στοιχείο meta έχει τρεις τυπικές χρήσεις:

  1. Ορίζει ζευγάρια ονόματος/τιμής μεταδεδομένων
  2. Δήλωση χαρακτήρα κωδικοποίησης
  3. Μιμείται το πεδίο κεφαλίδας HTTP

1: Ορίζει διάφορα ζευγάρια ονόματος/τιμής μεταδεδομένων

Το στοιχείο meta μπορεί να ορίσει τα μεταδεδομένα χρησιμοποιώντας ζευγάρια ονόματος/τιμής, για το οποίο χρειάζεται να χρησιμοποιηθούν οι ιδιότητες name και content.

Ορίζει τις λέξεις-κλειδιά για τα μηχανήματα αναζήτησης:

<meta name="keywords" content="HTML, CSS, JavaScript">

Ορίζει την περιγραφή της ιστοσελίδας:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Ορίζει τον συγγραφέα της σελίδας:

<meta name="author" content="John Doe">

Ρύθμιση του προσοχή οπτικό πεδίο, βελτίωση της εμφάνισης του ιστοτόπου σε διάφορα συσκευές:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2: Δήλωση χαρακτήρα κωδικοποίησης

Χρησιμοποιώντας την ιδιότητα charset να δηλώσετε ότι η σελίδα χρησιμοποιεί τη χαρακτήρα κωδικοποίηση UTF-8:

<meta charset="UTF-8">

3: Μιμείται το πεδίο κεφαλίδας HTTP

Χρησιμοποιώντας την ιδιότητα http-equiv και την ιδιότητα content, ανανεώνετε το έγγραφο κάθε 30 δευτερόλεπτα:

<meta http-equiv="refresh" content="30">

Οι αλλαγές στο HTML5

Η ιδιότητα charset είναι νέα στο HTML5.

Η ιδιότητα http-equiv στο HTML4 μπορεί να έχει πολλές διαφορετικές τιμές. Στο HTML5, μπορεί να χρησιμοποιηθούν μόνο οι τιμές που αναφέρονται σε αυτή τη σελίδα.

Η ιδιότητα scheme στο HTML4 δεν χρησιμοποιείται πλέον στο HTML5.

Επιπλέον, δεν χρησιμοποιείται πλέον το στοιχείο meta για να καθοριστεί η γλώσσα της ιστοσελίδας.

να ρυθμίσουν το προσοχή οπτικό πεδίο

Το HTML5 εισήγαγε έναν τρόπο, με τον οποίο οι σχεδιαστές ιστοσελίδων μπορούν να <meta> σφραγίδες σε όλες τις ιστοσελίδες για να ελέγξετε το προσοχή οπτικό πεδίο.

Πρέπει να περιλαμβάνετε τις παρακάτω <meta> Προσοχή οπτικό πεδίο:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It provides instructions to the browser on how to control the page size and zoom ratio.

width=device-width Part of the page sets the width of the page to follow the screen width of the device (depending on the device).

When the browser first loads the page,initial-scale=1.0 Part of the settings for the initial zoom level.

Below are examples of web pages without viewport meta tags and web pages with viewport meta tags:

Tip:If you are browsing this page on a mobile phone or tablet, you can click on the two links below to view the differences.



Without viewport meta tag


With viewport meta tag

Default CSS Settings

None.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support