HTML <meta> -elementti

Määrittely ja käyttö

<meta> Tunniste määrittää HTML-dokumentin metatiedot. Metatiedot ovat tietojen tietoja (tietoa).

<meta> Tunniste sijaitsee aina <head>-elementti Sisällä, yleensä käytetään määrittämään merkistö, sivun kuvaus, avainsanat, asiakirjan kirjoittaja ja näyttöalueen asetukset:

Metatiedot eivät näy sivulla, mutta ne voidaan analysoida koneellisesti.

Selaimet (kuinka näyttää sisältö tai ladata sivu uudelleen), hakukoneet (avainsanat) ja muut verkkopalvelut käyttävät metatietoja.

Vinkki:Meta-elementillä on useita eri käyttötapoja, ja HTML-dokumentissa voi olla useita meta-elementtejä.

Vinkki:Kautta <meta> Tunnisteella on tapa antaa verkkosivun suunnittelijalle valtaa näyttää tietty alue (eli käyttäjän näkyvyyden alue verkkosivulla) (katso alla oleva "Aseta näyttöalue" -esimerkki).

Huomioitavaa:Jokainen meta-elementti voidaan käyttää vain yhteen tarkoitukseen. Jos haluat käyttää useita ominaisuuksia, sinun tulisi lisätä useita meta-elementtejä head-elementtiin.

Katso myös:

HTML-opas:HTML-otsikko

HTML DOM -viittausoppikirja:Meta-objekti

Esimerkki

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Ilmainen Web-opas">
  <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>

Kokeile itse!

Ominaisuus

Ominaisuus Arvo Kuvaus
charset Merkistö Määrittää HTML-dokumentin merkkikoodauksen.
content Teksti Määrittää arvon, joka liittyy http-equiv- tai name-ominaisuuteen.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Tarjoa HTTP-otsikkokenttiä content-ominaisuuden tiedolle/arvolle.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 määrittääkseen metatiedon nimen.

globaaleja ominaisuuksia

<meta> tagit tukevat HTML:n globaalit ominaisuudet.

meta-elementillä on kolme yleistä käyttötapausta:

  1. Määritä nimiä/arvoja meta-tiedoille
  2. Ilmoita merkistö
  3. Simuloi HTTP-otsikkokentät

1: Määritä erilaisia nimiä/arvoja meta-tiedoille

meta-elementti voi määritellä meta-tiedot nimellä/arvolla, ja tätä varten tarvitaan sen name- ja content-ominaisuudet.

Määritä hakukoneille avainsanat:

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

Määritä tietoja verkkosivusta:

<meta name="description" content="Ilmaisia HTML- ja CSS-opetusohjelmia">

Määritä sivun kirjoittaja:

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

Aseta näyttöalue parantaaksesi verkkosivuston ulkoasua eri laitteilla:

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

2: Ilmoita merkistö

Ilmoita charset-ominaisuudella, että tämä sivu käyttää UTF-8-merkistöä:

<meta charset="UTF-8">

3: Simuloi HTTP-otsikkokentät

Käytä http-equiv-ominaisuutta ja content-ominaisuutta, jotta dokumentti päivittyy joka 30 sekuntia:

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

HTML5:n muutokset

charset-ominaisuus on lisätty HTML5:ssä.

HTML4:ssä http-equiv-ominaisuus voi olla useita eri arvoja. HTML5:ssä sitä voidaan käyttää vain tässä sivulla mainituissa arvoissa.

HTML4:n scheme-ominaisuus ei ole enää käytössä HTML5:ssä.

Lisäksi meta-elementtiä ei enää käytetä verkkosivuston käytetyn kielen määrittämiseen.

näyttöalueen asettamisen

HTML5 on tuonut mukanaan menetelmän, joka mahdollistaa <meta> tagit kaikkiin sivuihin, jotta voit hallita näyttöaluetta.

Sinun tulisi sisällyttää seuraavat <meta> Näyttöalue-elementti：

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

Se tarjoaa selaimelle ohjeita siitä, miten se voi hallita sivun kokoa ja skaalaa.

width=device-width Osa asettaa sivun leveyden seuraamaan laitteiston näytön leveyttä (riippuen laitteistosta).

Kun selain ladataan sivu ensimmäistä kertaa:initial-scale=1.0 Osa asetuksista määrittää alkuperäisen skaalauksen.

Alla on esimerkkejä sivustoista, joissa ei ole näyttöalueen meta-merkintää, ja sivustoista, joissa on näyttöalueen meta-merkintä:

Vinkki:Jos käytät puhelinta tai tablettia tätä sivua selatessasi, voit napsauttaa alla olevia kahta linkkiä nähdäksesi eron.



Ei näyttöalueen meta-merkintää


Näyttöalueen meta-merkinnällä

Oletusarvoinen CSS - asetus

Ei tietoa.

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki