实例 描述 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> 标签。
<meta>
标签定义及使用说明
元数据(Metadata)是数据的数据信息。<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
提示和注释
注意:<meta> 标签通常位于 <head> 区域内。
<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/