meta标签及其含义大全

meta运用在head标签中，但是对于H5中meta标签元素的定义已经运用场景没有几个人能够说是熟练运用的，现在我就来罗列html中meta标签的定义以及运用场景。

定义和用法:

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
如：
<meta charset="UTF-8">：设定网页字符编码，常用的有utf-8和gb2312；

一、name 属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

1、<meta name="keywords" content="keyword" >：keyword关键词，以逗号区分开，"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类；2、<meta name="description" content="description" >：description描述，content里面是具体的描述；3、<meta name="renderer" content="webkit">：优先使用chrome内核渲染页面；4、<meta name="author" content="author,email address">：定义页面作者，这个很少见人用貌似，当然也有很多人不认识，之前一个项目交付给老板后他看到这段不认识说我们在他们网站放木马==论多读书多识字的重要性；5、<meta name="robots" content="index,follow">：定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow；6、<meta name="viewport" content="width=device-width, initial-scale=1.0">：这个应用的就比较多了，为移动设备设定，viewport也可作为宽度单位，一些参数设定，width viewport 宽度(数值/device-width)，height viewport 高度(数值/device-height)，initial-scale 初始缩放比例，user-scalable 是否允许用户缩放(yes/no)，一般移动网页上都是设定设备宽度，默认不可缩放的；7、<meta name="apple-mobile-web-app-capable" content="yes" />：有个apple，没错，这是苹果设备转用的，这个是是否启用 WebApp 全屏模式；苹果的设备可以说单成一家，有很多特定的设置；8、<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />：设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效；9、<meta name="format-detection" content="telephone=no,email=no" />：不自动识别页面中的 电话和邮箱，就是点击数字或邮箱样的字符不会做其他操作；10、<meta name="HandheldFriendly" content="true">：恩，如果你单词量多一些，可以看出来这个是什么意思，友好优化手持设备，貌似是针对不认识viewport的设备(苹果都成街机了，谁闲的没事用塞班看网页？)，反正我没用过，所以可以认为没什么卵用；11、<meta name="screen-orientation" content="portrait">：uc强制竖屏；12、<meta name="x5-orientation" content="portrait">：QQ强制竖屏；13、<meta name="full-screen" content="yes">：UC强制全屏；14、<meta name="x5-fullscreen" content="true">:QQ强制全屏；15、<meta name="browsermode" content="application">:UC应用模式；16、<meta name="x5-page-mode" content="app">:QQ应用模式;

二、http-equiv 属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

1、<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">：优先使用最新版ie和chrome浏览器；2、<meta http-equiv="Cache-Control" content="no-siteapp" />：通过手机百度打开网页时，百度可能会对你的网页进行转码，只展现页面内容，头底部会被替换并且一般会加点广告。

三、content 属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。

四、scheme 属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由标签的 profile 属性指定的概况文件中进行了定义。

meta标签及其含义大全相关推荐

网站元数据meta标签的含义和用法
最近在做网页,个人对网站元数据meta标签的含义和用法了解的不是很深,所以在网上搜到了一些关于这方面的知识,并摘抄至此,希望能够与大家共同学习,高手勿喷哦~~~ (注:此文原文内容访问地址:http: ...
最齐全的网站元数据meta标签的含义和用法
最齐全的网站元数据meta标签的含义和用法随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到如今Windows 7.Windows 8的IE9 ...
移动端html头部meta标签的含义
 <meta name="viewport" content="width=device-width, ...
meta标签使用手册
目录一.meta标签的含义二.meta使用说明 1. charset 2. http-equiv (1). content-security-policy (2). content-type (3 ...
元数据标签的含义和用法
最齐全的网站元数据meta标签的含义和用法随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到如今Windows 7.Windows 8的IE9 ...
meta标签大全（荐）
html的meta总结(常用) 1.Meta标签大全 <meta charset='utf-8'><!-- 优先使用 IE 最新版 ...
关于Meta标签中format-detection属性及含义
一.Meta标签中的format-detection属性及含义意为:格式检测或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...
html meta标签大全
整理一下经常用到的 meta 方便忘记的时候来查找一下 keywords,description(经常用到的两个) 页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ','号隔开 <m ...
WebApp 里Meta标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

meta标签及其含义大全

meta标签及其含义大全相关推荐

最新文章

热门文章