HTML <meta> etiket
Definition og brug
<meta> etiketter definerer metadata om HTML-dokumentet. Metadata er data om data (information).
<meta> etiketter er altid placeret <head> element Inden, bruges ofte til at specificere tegnsætning, sidbeskrivelse, nøgleord, dokumentforfatter og viewport-indstillinger:
Metadata vises ikke på siden, men kan解析 af maskiner.
Browseren (hvordan indhold vises eller siden genindlæses), søgemaskiner (nøgleord) og andre nettjenester bruger metadata.
Tip:meta-elementer har flere forskellige anvendelser, og der kan være flere meta-elementer i et HTML-dokument.
Tip:Gennem <meta> Der er en metode til at lade webdesignere kontrollere viewport (dvs. det område, som brugeren kan se på websiden) (se nedenstående "Indstil viewport"-eksempel).
Bemærk:Hver meta-element kan kun bruges til én formål. Hvis du ønsker at bruge flere egenskaber, skal du tilføje flere meta-elementer i head-elementet.
Se også:
HTML-tur:HTML-hoved
HTML DOM referencemanual:Meta-objekt
Eksempel
<head> <meta charset="UTF-8"> <meta name="description" content="Gratis web-tur"> <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>
Egenskab
| Egenskab | Værdi | Beskrivelse |
|---|---|---|
| charset | Tegnsætning | Fastlæggelse af tegnsætningen for HTML-dokumentet. |
| content | Tekst | Fastlæggelse af værdien, der er knyttet til egenskaberne 'http-equiv' eller 'name'. |
| http-equiv |
|
Lever HTTP-hovedfelter for information/værdi for content-attributten. |
| name |
|
fastsætter navnet på metadata. |
globale attributter
<meta> etiketter understøtter også Globale attributter i HTML.
meta-elementer har tre typiske anvendelser:
- Specificer navne/værdi par
- Erklær tegnkodning
- Simuler HTTP-hovedfelter
1: Specificer forskellige navne/værdi par
meta-elementet kan defineres ved brug af navne/værdi par, hvilket kræver dens name og content-attributter.
Definer søgeord for søgemaskiner:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definer en beskrivelse af websiden:
<meta name="description" content="Free Web tutorials for HTML and CSS">
Definer sidens forfatter:
<meta name="author" content="John Doe">
Indstil visningsfeltet for at forbedre websidens udseende på forskellige enheder:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2: Erklær tegnkodning
Brug charset-attributten til at erklære, at denne side bruger UTF-8 tegnkodning:
<meta charset="UTF-8">
3: Simuler HTTP-hovedfelter
Brug af http-equiv-attributten og content-attributten, opdater dokumentet hver 30 sekund:
<meta http-equiv="refresh" content="30">
Ændringer i HTML5
charset-attributten er en ny tilføjelse i HTML5.
http-equiv-attributten i HTML4 kunne have flere forskellige værdier, mens det i HTML5 kun kan bruges de værdier, der er nævnt på siden.
scheme-attributten i HTML4 bruges ikke længere i HTML5.
Der bruges ikke længere meta-elementet til at specificere sprog, som websiden bruger.
at indstille visningsfeltet
HTML5 har introduceret en metode, der lader webdesignere bruge <meta> etiketter i alle websider for at kontrollere visningsfeltet.
Du bør inkludere følgende <meta> Visningsfelt element:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Det giver browseren instruktioner om, hvordan den skal kontrollere sidens størrelse og skala.
width=device-width Delvis sætter sidens bredde til at følge skærmens bredde på enheden (afhængigt af enheden).
Når browseren første gang loader sideninitial-scale=1.0 Delvis indstillede startzoomniveauer.
Her er eksempler på websider uden viewport meta tag og med viewport meta tag:
Tip:Hvis du bruger en telefon eller en tablet til at se denne side, kan du klikke på de to nedenstående links for at se forskellene.
Standard CSS indstillinger
Ingen.
Browser support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
