标签

2019-02-04  本文已影响0人  极客传

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

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

实例

定义文档编码为 utf-8

<meta charset="utf-8">

定义文档关键词,用于搜索引擎:

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

定义web页面描述:

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

定义页面作者:

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

在 IE 浏览器中,始终以最高版本 IE 来渲染页面

<meta http-equiv="X-UA-Compatible" content="ie=edge">

http-equiv="refresh" 属性:

每30秒刷新页面:

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

3秒钟后,页面重定向到 http://www.mozilla.org/

<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">

name="viewport"

content 取值:

Value 可能值 描述
width 一个正整数或者字符串 device-width 以pixels(像素)为单位, 定义viewport(视口)的宽度。
height 一个正整数或者字符串 device-height 以pixels(像素)为单位, 定义viewport(视口)的高度。
initial-scale 一个0.010.0之间的正数 定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度)与视口大小之间的缩放比率。
maximum-scale 一个0.010.0之间的正数 定义缩放的最大值;它必须大于或等于minimum-scale的值,不然会导致不确定的行为发生。
minimum-scale 一个0.010.0之间的正数 定义缩放的最小值;它必须小于或等于maximum-scale的值,不然会导致不确定的行为发生。
user-scalable 一个布尔值(yes或者no 如果设置为no,用户将不能放大或缩小网页。默认值为yes

如,设置视窗宽度为设备宽,设置设备宽度与视窗大小缩放比为 1,即不缩放:

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

参考链接:

【1】https://www.runoob.com/tags/tag-meta.html

【2】https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#attr-itemprop

【3】https://developer.mozilla.org/zh-CN/docs/Web/CSS/@viewport

【4】https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do

上一篇 下一篇

猜你喜欢

热点阅读