1. 首页
  2. 博客
  3. HTML <meta> 标签

HTML <meta> 标签

实例 描述 HTML 文档的元数据：

<head>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
<meta charset="UTF-8">
</head>

浏览器支持

Internet Explorer, Firefox, Opera, Google Chrome, Safari

所有主流浏览器都支持 <meta> 标签。

标签定义及使用说明

元数据（Metadata）是数据的数据信息。<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

提示和注释

注意：<meta> 标签通常位于 <head> 区域内。

注意： 元数据通常以 名称/值 对出现。

注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 scheme 属性。

在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：

HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5： <meta charset="UTF-8">

HTML 与 XHTML 之间的差异

在 HTML 中 <meta> 标签没有结束标签。

在 XHTML 中 <meta> 标签必须包含结束标签。

实例

实例 1 - 定义文档关键词，用于搜索引擎：

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

实例 2 - 定义web页面描述：

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

实例 3 - 定义页面作者：

<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：

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

属性

New ：HTML5 新属性。

属性  值   描述
charsetNew  character_set   定义文档的字符编码。
content text    定义与 http-equiv 或 name 属性相关的元信息。
http-equiv  content-type
default-style
refresh 把 content 属性关联到 HTTP 头部。
name    application-name
author
description
generator
keywords    把 content 属性关联到一个名称。
scheme  format/URI  HTML5不支持。 定义用于翻译 content 属性值的格式。

2 篇笔记

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
还有一个 viewport 属性，这里面没有提到，它用于移动端显示优化的。

可以参考这篇文章：viewport 深入理解（https://www.runoob.com/w3cnote/viewport-deep-understanding.html）

里面提到 6 个属性：

width   设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale   设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale   允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale   允许用户的最大缩放值，为一个数字，可以带小数
height  设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable   是否允许用户进行缩放，值为 "no" 或 "yes", no 代表不允许，yes 代表允许
还有一个属性：minimal-ui，参考：

iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏（http://36kr.com/p/210516.html），这个在 iOS8 中已经废弃了。

原文链接：https://codingdict.com/

热门标签