meta标签

元数据

name+content

viewport

Keywords (关键字)

Description (网页描述)

Robots (机器人向导)

Author (作者)

Generator (编辑器)

Revisit-after (重访)

其它name可指定属性

http-equiv+content

刷新重定向

声明文档使用字符编码

其它常用的 HTTP-header 值

scheme

各浏览器常用meta标签

Microsoft Internet Explorer

Google Chrome

360浏览器

UC手机浏览器

QQ手机浏览器

Apple iOS

Google Android

App Links

常见移动端meta标签

meta标签

通常用于指定网页的描述、关键词（用于爬虫检索）、文件的最后修改作者和其他元数据。通常啊可以在meta标签中设置以下属性和值。

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type expires refresh（定义浏览器刷新事件，可以用于重定向） set-cookie charset(定义文档的字符编码。)	把 content 属性关联到 HTTP 头部。
name	author description keywords generator revised others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。不支持。

元数据

以名称/值对的形式出现且不会显示在客户端，但是会被浏览器解析的数据。可以被使用的浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

在meta标签中通过name或http-equiv定义名称，content定义值。

name+content

viewport

用于移动端页面布局。详细作用见链接介绍。

https://blog.csdn.net/AIWWY/article/details/120499036

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

Keywords (关键字)

说明：告诉搜索引擎你网页的关键字是什么。
用法：<meta name="keywords" content="SEO优化,SEO优化教程,网站优化,搜索引擎优化教程">

Description (网页描述)

说明：Description用来告诉搜索引擎你的网页主要内容。
用法：<meta name="description" content="学习研究搜索引擎优化网提供专业的SEO优化教程，收集整理SEO优化文章、SEO优化工具，为网络营销贡献出自己的一份力量。" />

Robots (机器人向导)

说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

Author (作者)

说明：标注网页的作者或制作组
用法：<meta name="author" content="mycodewind，mycodewind@qq.com">
注意：Content可以是：你或你的制作组的名字,或Email

Copyright (版权)

说明：标注版权
用法：<meta name="copyright" content="本网站版权归CSDN所有">

Generator (编辑器)

说明：编辑器的说明
用法：<meta name="generator" content="PCDATA|FrontPage|">
注意：Content="你所用编辑器"

Revisit-after (重访)

说明：通知搜索引擎多少天访问一次
用法：<meta name="revisit-after" content="7 days" >

其它name可指定属性

最齐全的网站元数据meta标签的含义和用法_freshlover的专栏-CSDN博客

http-equiv+content

http-equiv是添加http头部内容，对一些自定义的或者需要额外添加的http头部内容，发送到浏览器中。即告诉浏览器如何解析这个页面或添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

那么浏览器的头部就会包括这些（注意：只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义）:

charset:iso-8859-1
expires:31 Dec 2008

刷新重定向

下面例子指5秒后将刷新页面，并重定向到指定页面

<meta http-equiv="Refresh" content="5;url=https://blog.csdn.net/AIWWY/article/details/116381739" />

声明文档使用字符编码

用于解决乱码问题，注意charset一定要写第一行，不然就可能会产生乱码了。

charset有两种写法：

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

其它常用的 HTTP-header 值

值	描述
cache-control	控制文档的缓存机制。允许的值： public - 所有内容都将被缓存(客户端和代理服务器都可缓存) private - 内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存) no-cache - 不缓存 no-store - 缓存当不归档 but not archived 实例: <meta http-equiv="cache-control" content="no-cache">
content-language	响应体的语言实例: <meta http-equiv="content-language" content="en-US">
content-type	返回内容的MIME类型提示: 通常用于字符集的设置。实例: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
date	原始服务器消息发出的时间实例: <meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT">
expires	响应过期的日期和时间实例: <meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">
last-modified	请求资源的最后修改时间实例: <meta http-equiv="last-modified" content="Mon, 03 Jan 2011 17:45:57 GMT">
location	用来重定向接收方到非请求URL的位置来完成请求或标识新的资源实例: <meta http-equiv="location" content="URL=http://www.runoob.com">
set-cookie	创建一个 cookie ，包含了 cookie 名，cookie 值，过期时间。实例: <meta http-equiv="set-cookie" content="runoobcookie=myContent;expires=Fri, 30 Dec 2015 12:00:00 GMT; path=http://www.runoob.com">
window-target	指定要载入的框架名

scheme

设置或返回用于解释 content 属性的值的格式。

<meta name="revised" content="2011-02-03" scheme="YYYY-MM-DD">

各浏览器常用meta标签

Microsoft Internet Explorer

<!-- 优先使用最新的ie版本 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 是否开启cleartype显示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Pinned Site -->
<!-- IE 10 / Windows 8 -->
<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">
<!-- IE 11 / Windows 9.1 -->
<meta name="msapplication-config" content="ieconfig.xml">

Google Chrome

<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate">

360浏览器

<!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

<!-- 将屏幕锁定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏显示页面 -->
<meta name="full-screen" content="yes">
<!-- 强制图片显示，即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 应用模式，默认将全屏，禁止长按菜单，禁止手势，标准排版，强制图片显示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜间模式显示 -->
<meta name="nightmode" content="disable">
<!-- 使用适屏模式显示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 当页面有太多文字时禁止缩放 -->
<meta name="wap-font-scale" content="no">

QQ手机浏览器

<!-- 锁定屏幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- 页面将以应用模式显示 -->
<meta name="x5-page-mode" content="app">

Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- 禁止自动探测并格式化手机号码 -->
<meta name="format-detection" content="telephone=no">
<!-- Add to Home Screen添加到主屏 -->
<!-- 是否启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="App Title">

Google Android

<meta name="theme-color" content="#E64545">
<!-- 添加到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->

常见移动端meta标签

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别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 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

meta标签详解（name、http-equiv、scheme、charset、各浏览器常用meta标签、常见移动端meta标签）、viewport详解相关推荐

一文弄懂元学习 (Meta Learing)（附代码实战）《繁凡的深度学习笔记》第 15 章元学习详解（上）万字中文综述
<繁凡的深度学习笔记>第 15 章元学习详解 (上)万字中文综述(DL笔记整理系列) 3043331995@qq.com https://fanfansann.blog.csdn.net ...
移动端js触摸touch详解（附带案例源码）
移动端触摸滑动原理详解案例,实现过程通过添加DOM标签的触摸事件监听,并计算触摸距离,通过距离坐标计算触摸角度,最后通过触摸角度去判断往哪个方向触摸的. 触摸的事件列表触摸的4个事件: touchs ...
ueditor上传组件显示乱码_最全面的移动端 UI组件设计详解：中篇
上一期给大家讲解了<最全面的移动端UI组件设计详解:上篇>,主要分享了:布局组件和导航组件2个部分:这次给大家带来:基础组件.表单组件和反馈组件详解,希望你在设计APP.小程序.H5页面中 ...
Sonic 开源移动端云真机测试平台 - 设备中心接入安卓设备实例演示，Agent端服务部署过程详解
Sonic 开源移动端云真机测试平台 - Agent端服务部署与安卓设备接入演示一加8手机连接效果图展示第一章:环境准备 ① agent-sources 资源包下载 ② Android SDK安装 ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...
PCBA加工中常见的两种焊接方式详解
PCBA加工中常见的两种焊接方式详解 PCBA加工,两种常见的焊接方式就是回流焊和波峰焊,与手动焊接技术相比,自动焊接技术具有减少人为因素的影响.提高效率.降低成本.提高质量等优势,在PCBA加工中, ...
java vue 服务端渲染_vue服务端渲染缓存应用详解
服务端渲染简介服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲 ...
移动端实时音视频详解（三）：编码和封装
移动端实时音视频详解(三):编码和封装视频编码是本系列一个重要的部分,如果把整个流媒体比喻成一个物流系统,那么编解码就是其中配货和装货的过程,这个过程非常重要,它的速度和压缩比对物流系统的意义非常大 ...
Flink常见的关键技术与特性详解
转载:http://bigdata.51cto.com/art/201702/531036.htm Flink常见的关键技术与特性详解 Flink项目是大数据处理领域最近冉冉升起的一颗新星,其不同于其 ...
移动端实时音视频详解（二）：处理
移动端实时音视频详解(二):处理视频或者音频完成采集之后得到原始数据,为了增强一些现场效果或者加上一些额外的效果,我们一般会在将其编码压缩前进行处理,比如打上时间戳或者公司 Logo 的水印,祛斑美 ...

meta标签详解（name、http-equiv、scheme、charset、各浏览器常用meta标签、常见移动端meta标签）、viewport详解

meta标签

元数据

name+content

viewport

Keywords (关键字)

Description (网页描述)

Robots (机器人向导)

Author (作者)

Copyright (版权)

Generator (编辑器)

Revisit-after (重访)

其它name可指定属性

http-equiv+content

刷新重定向

声明文档使用字符编码

其它常用的 HTTP-header 值

scheme

各浏览器常用meta标签

Microsoft Internet Explorer

Google Chrome

360浏览器

UC手机浏览器

QQ手机浏览器

Apple iOS

Google Android

App Links

常见移动端meta标签

meta标签详解（name、http-equiv、scheme、charset、各浏览器常用meta标签、常见移动端meta标签）、viewport详解相关推荐

最新文章

热门文章