HTML <meta> 标籤

  • หน้าก่อน <menu>
  • หน้าต่อไป <meter>

Paglalarawan at Paggamit

<meta> Ang tag ay tinutukoy ang metadata ng HTML dokumento. Ang metadata ay ang data tungkol sa data (informasyon).

<meta> Ang tag ay palaging nasa <head> Element Sa loob, pangkaraniwang ginagamit para sa pagtutukoy ng charset, paglalarawan ng pahina, palatandaan, may-akda ng dokumento at pagtatakda ng viewport:

Ang meta data ay hindi ipapakita sa pahina, ngunit puwedeng maging pinasusuri ng machine.

Ang meta data ay ginagamit ng mga browser (paano ipapakita ang nilalaman o pag-reload ng pahina), mga search engine (palatandaan) at iba pang mga serbisyo ng internet.

คำแนะนำ：May iba't ibang paggamit ang meta elemento, at maaaring magkaroon ng ilang meta elemento sa isang HTML dokumento.

คำแนะนำ：Sa pamamagitan ng <meta> Ang tag, may isang paraan para sa web designer na kontrolin ang viewport (ang napapakita ng user sa web page) (tingnan ang halimbawa sa "I-set ang viewport").

Pansin:Ang bawat meta elemento ay puwedeng gamitin para sa isang layunin lamang. Kung gusto mong gamitin ang maraming katangian, magdagdag ka ng ilang mga meta elemento sa elementong head.

Mga ibang pagkakatuturo:

HTML Tutorial:HTML Header

HTML DOM Reference Manual:Meta Object

Halimbawa

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

Subukan ang sarili

Katangian

Katangian Halaga Paglalarawan
charset Bilang Wika Tinutukoy ang panyayaring likas ng teksto ng HTML dokumento.
content Teksto Tinutukoy ang halaga na nauugnay sa http-equiv o name na katangian.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Provide HTTP headers for information/values of the content attribute.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 specify the name of metadata.

global attributes

<meta> The tag also supports Global attributes in HTML.

The meta element has three typical uses:

  1. Specify name/value metadata pairs
  2. Declare character encoding
  3. Simulate HTTP header fields

1: Specify various name/value metadata pairs

The meta element can define metadata using name/value pairs, for this, its name and content attributes are needed.

Define keywords for search engines:

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

Define a description of the web page:

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

Define the author of the page:

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

Set the viewport to improve the appearance of the website on various devices:

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

2: Declare character encoding

Use the charset attribute to declare that this page uses UTF-8 character encoding:

<meta charset="UTF-8">

3: Simulate HTTP header fields

Use the http-equiv attribute and content attribute to refresh the document every 30 seconds:

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

Changes in HTML5

The charset attribute is a new addition in HTML5.

In HTML4, the http-equiv attribute can have multiple different values. In HTML5, only the values mentioned on this page can be used.

The scheme attribute in HTML4 is no longer used in HTML5.

In addition, the meta element is no longer used to specify the language used by the web page.

set the viewport

HTML5 introduces a method that allows web designers to <meta> tags to control the viewport.

You should include the following <meta> Viewport Element:

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

มันให้บราวเซอร์คำสั่งเกี่ยวกับวิธีการควบคุมขนาดและสัตยาบันของหน้าเว็บ

width=device-width การตั้งค่าความกว้างของหน้าเว็บเพื่อตามความกว้างของหน้าจอของอุปกรณ์ (ขึ้นอยู่กับอุปกรณ์)

เมื่อเว็บไซต์เริ่มที่จะโหลดinitial-scale=1.0 การตั้งค่าตัวเลขการย่อยยอดขั้นต้น

ต่อไปนี้เป็นตัวอย่างของเว็บไซต์ที่ไม่มีตามาร์ค meta สำหรับ viewport และเว็บไซต์ที่มีตามาร์ค meta สำหรับ viewport

คำแนะนำ：หากคุณใช้โทรศัพท์หรือเครื่องพื่อนอนเพื่อดูเว็บไซต์นี้ คุณสามารถคลิกลิงก์สองลิงก์ด้านล่างเพื่อดูความแตกต่าง



ไม่มีตามาร์ค meta สำหรับ viewport


มีตามาร์ค meta สำหรับ viewport

การตั้งค่า CSS โดยเริ่มต้น

ไม่มี

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อน <menu>
  • หน้าต่อไป <meter>