HTML <meta> tag

Course recommendation:

<meta> Definition and usage

<meta> The tag defines metadata about the HTML document. Metadata is data about data (information). The tag is always located <head> element

Inside, it is usually used to specify character set, page description, keywords, document author, and viewport settings:

Metadata does not appear on the page but can be parsed by machines.

ƙoƙaƙori:Browser (how to display content or reload the page), search engine (keywords), and other network services use metadata.

ƙoƙaƙori:meta elements have various different uses, and multiple meta elements can be used in one HTML document. <meta> Through

Tag, there is a way for web designers to control the viewport (i.e., the area visible to the user in the web page) (see the "Set Viewport" example below).note:

Each meta element can only be used for one purpose. If you want to use more than one feature, you should add multiple meta elements in the head element.

see also:HTML tutorial:

HTML headerHTML DOM reference manual:

Meta object

example
  
  <head>
  
  <meta name="description" content="free Web tutorial">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Bill Gates">

</head>

try it yourself

try it yourself attribute value
description charset sabubu daa ce ta ce kai HTML dake dake daa ce ta ce
content text sabubu daa ce ta ce kai http-equiv tso name dake
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 为 content 属性的信息/值提供 HTTP 标头。
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 规定元数据的名称。

全局属性

<meta> 标签还支持 HTML 中的全局属性。

meta 元素有三种典型的用法：

  1. 指定名/值元数据对
  2. 声明字符编码
  3. 模拟 HTTP 标头字段

1：指定各种名/值元数据对

meta 元素可以使用名/值对定义元数据，为此需要用到其 name 和 content 属性。

为搜索引擎定义关键字：

定义有关网页的描述：

定义页面的作者：

设置视口，改善网站在各种设备上的外观：

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

2：声明字符编码

使用 charset 属性声明该页面采用 UTF-8 字符编码：

3：模拟 HTTP 标头字段

使用 http-equiv 属性和 content 属性，每 30 秒刷新一次文档：

在 HTML5 中的变化

charset 属性在 HTML5 中是新增的。

在 HTML4 中，http-equiv 属性可以有任意多个不同的值。而在 HTML5 中，只能使用本页提到的值。

HTML4 中的 scheme 属性在 HTML5 中已不再使用。

此外，现在已不再使用 meta 元素来指定网页所用的语言。

设置视口

HTML5 引入了一种方法，使 Web 设计者可以通过 <meta> 标签来控制视口。

您应该在所有网页中包含以下 <meta> Viewport elemen:

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

它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。

Ɗaya ce, kuma ƙirƙirar ƙoƙaƙori viewport yana ɗauka. Ɗaya ce, kuma ƙirƙirar ƙoƙaƙori viewport yana ɗauka.

ƙoƙaƙori:Ɗaya ce, kuma ƙirƙirar ƙoƙaƙori viewport yana ɗauka. Ɗaya ce, kuma ƙirƙirar ƙoƙaƙori viewport yana ɗauka.



wannan ƙirƙirar ƙoƙaƙori viewport


da ƙirƙirar ƙoƙaƙori viewport

ƙarancin CSS

wannan

ƙarancin ƙasuwanci

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Cibiyar ƙarancin Cibiyar ƙarancin Cibiyar ƙarancin Cibiyar ƙarancin Cibiyar ƙarancin