haizhilin2013 commented 5 years ago

第28天说说你对<meta>标签的理解

18163759011 commented 5 years ago

SEO优化的标签TDK，设置文本格式utf-8等等，设置HTTP头部，设置视口专门做移动端缩放

hbl045 commented 5 years ago

还可以作为网站的信息介绍、作者、关键字、描述；做的较多的也是IE兼容。

设置meta标签设置页面长串数字不与跳转

防止长串数字电话或以邮箱的形式外链出去

设置meta标签 IE适配

用于IE浏览器的适配

设置meta标签移动端IOS

用于适配苹果手机，用于全屏显示

设置meta标签清除页面缓存

Cache-Control头域

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下 Public指示响应可被任何缓存区缓存 Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效 no-cache指示请求或响应消息不能缓存 no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应 min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应 max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)

,常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：

1）打开新窗口值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)

2）在地址栏回车值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。值为no-cache，那么每次都会访问。值为max-age，则在过期之前不会重复访问。

3）按后退按扭值为private、must-revalidate、max-age，则不会重访问，值为no-cache，则每次都重复访问

4）按刷新按扭无论为何值，都会重复访问 Cache-control值为“no-cache”时，访问此页面不会在Internet临时文件夹留下页面备份。

,指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东，如果服务器上的网页经常变化，就把它设置为0，表示立即过期。

这是我之前收集的meta特殊用法，仅供参考，详情百度。

xiangshuo1992 commented 5 years ago

之前梳理移动端知识点的时候，总结了一些常用的meta，原文地址：https://blog.csdn.net/u013778905/article/details/78077149

以下是回答：

什么是meta

Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。

Meta ：即 元数据（Metadata）是数据的基本信息。

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

用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果，它就起作用了，所以我们称之为“ 元数据 ”。

它内部可填写的属性如下：

属性	值	描述
charset (HTML5)	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 属性值的格式。

移动端meta

1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

3、禁止将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

4、忽略对邮箱地址的识别

<meta name="format-detection" content="email=no" />

5、当网站添加到主屏幕快速启动方式，伪装webapp，可隐藏工具栏/菜单栏/地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->

6、添加到主屏幕后，全屏显示

<meta name="apple-touch-fullscreen" content="yes">

7、设置ios的safari浏览器顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

8、添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

9、添加智能 App 广告条 Smart App Banner 告诉浏览器这个网站对应的app，并在页面上显示下载banner。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

10、其他meta

<!-- 针对手持设备优化，主要是针对一些老的不识别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">

针对苹果手机说明：

配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定，如下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径

使用：该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。图片尺寸可以设定为 5757（px）或者 Retina 可以定为 114114（px），iPad 尺寸为 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />

说明：这个 link 就是设置启动时候的界面。

使用：放置的路径和上面一样。官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释：Meta Tags

关于 link 方面还有更多的参数设置（例如：iPod、iPad、iPhone 不同尺寸不同图标），可以查看官方标准文档：Configuring Web Applications

参考： 1.前端 Meta 用法大汇总 2.移动端meta汇总

jiamianmao commented 4 years ago

我补充一个吧，好像大家都没注意到。 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> 可以在 https 协议下请求 http

Konata9 commented 4 years ago

<meta> 标签放在 <head> 中间，不会在网页中显示，主要是给机器以及爬虫来阅读的。

比较常用的属性有下面几个：

charset: 在 HTML5 中推荐的用法，一般设为 UTF-8 防止出现乱码。 <meta charset="UTF-8" />
name 与 content 的搭配使用: <meta name="xxx" content="xxx" />
- name=viewport: 移动端开发使用的属性，用来设置视窗的宽度，是否允许缩放等。与 Day 10 viewport 常见设置都有哪些？ 相关
- name=author: 用来设置作者，给 SEO 使用
- name=description: 页面的描述，在浏览器用作书签时会显示对应的内容
- name=keywords: 网页的关键字，给 SEO 使用
http-equiv 与 content 的搭配使用
- refresh: 允许页面在一定时间后刷新或者重定向到另一个地址

参考文章： HTML meta 标签总结与属性使用介绍 <meta> MDN

MrZ2019 commented 3 years ago

标签放在中间，不会在网页中显示，主要是给机器以及爬虫来阅读的。

比较常用的属性有下面几个：

charset: 在 HTML5 中推荐的用法，一般设为 UTF-8 防止出现乱码。 name 与 content 的搭配使用: name=viewport: 移动端开发使用的属性，用来设置视窗的宽度，是否允许缩放等。与 Day 10 viewport 常见设置都有哪些？相关 name=author: 用来设置作者，给 SEO 使用 name=description: 页面的描述，在浏览器用作书签时会显示对应的内容 name=keywords: 网页的关键字，给 SEO 使用 http-equiv 与 content 的搭配使用 refresh: 允许页面在一定时间后刷新或者重定向到另一个地址

chenshijin1 commented 3 years ago

meta元素内容含义

前言

打开VSCode，输入html:5，按下tab，一个基本的html结构出来了，却从未注意过里面某些元素的含义。今天就来总结总结这些重要却不起眼的元素标签meta。

head内各种meta含义

首先meta元素有什么作用呢？看英文版w3schools

The **** tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。

总而言之, meta标签是用来让机器识别的，同时它对SEO起着重要的作用。

charset

指定了html文档的编码格式，常用的是utf-8(Unicode的字符编码)，还有ISO-8859-1(拉丁字母的字符编码)。当然还有其他的，但是一般不常用也就不介绍了

<meta charset="utf-8">

name & content

指定元数据的名称(这部分对SEO非常有用)

`author`——定义了页面的作者

<meta name="author" content="Tony">

`keywords`——为搜索引擎提供关键字

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

`description`——对网页整体的描述

<meta name="description" content="My tutorials on HTML, CSS and JavaScript">

`viewport`——对页面视图相关进行定义

width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化
initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数)
maximum-scale=1.0——允许用户缩放的最大比例(0.0-10.0正数)，必须大于等于minimum-scale
minimum-scale=1.0——允许用户缩放的最小比例(0.0-10.0正数)，必须小于等于maximum-scale
user-scalable=no——是否允许用户手动缩放(yes或者no)

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

`generator`——包含生成页面软件的标识符

which contains the identifier of the software that generated the page.

<meta name="generator" content="Hexo 3.8.0">

`theme-color`——定义主题颜色

<meta name="theme-color" content="#222">

http-equiv & content

Provides an HTTP header for the information/value of the content attribute

`refresh`——每30s刷新一次文档

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

`X-UA-Compatible`——告知浏览器以何种版本渲染界面。下面的例子有限使用IE最新版本

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

关于是否有必要使用这一条在stack overflow尚且有争议。个人认为如果不想兼容低版本的IE，可以直接忽略这一条。

`Cache-Control`——请求和响应遵循的缓存机制，可以声明缓存的内容，修改过期时间，可多次声明

no-transform——不得对资源进行转换或转变。
no-siteapp——禁止百度进行转码

<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">

为什么我会介绍这两个呢？因为我的博客在head内存在，查了一下原因，正如之前所述，这个是针对百度转码的。具体可以看github的issue

其他更多内容可以查看MDN

property & content

可以让网页成为一个富媒体对象，同意网页内容被其他网站引用，同时在应用的时候不会只是一个链接，会提取相应的信息展现给用户。

<meta property="og:type" content="website">
<meta property="og:url" content="https://zjgyb.github.io/index.html">
<meta property="og:site_name" content="tony's blog">

具体可以参照The Open Graph protocal

总结

我只总结了一些常用的meta标签，其他的不太常用的也就暂时不总结了，如果将来用到再进行补充。总算是有了一些了解。

来源：https://juejin.cn/post/6844903957169438728

wisenchen commented 3 years ago

刚好之前有记过 https://github.com/wisenchen/blog/issues/8

Iambecauseyouare commented 1 year ago

meta元数据元素，设置name属性，元素提供的是文档级别的元数据，应用于整个页面，http-equiv，则是编译指令，charset，字符集声明，itemprop，提供用户定义的元数据

18163759011 commented 1 year ago

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

never123450 commented 10 months ago

<meta> 标签是HTML中用于定义文档元数据的标签。它通常位于HTML文档的 <head> 标签内，并提供关于文档的信息，如字符编码、视口设置、关键词等。

下面是一些常见的 <meta> 标签及其用途：

字符编码设置： <meta charset="UTF-8"> 用于指定文档的字符编码，确保浏览器正确地解析和显示文档中的字符。
视口设置： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于控制文档在移动设备上的视口大小和缩放比例，以确保在不同设备上获得一致的显示效果。
关键词和描述： <meta name="keywords" content="关键词1, 关键词2, ..."> 用于指定文档的关键词，有助于搜索引擎了解文档内容。 <meta name="description" content="文档描述"> 用于提供文档的简要描述，有助于搜索引擎显示相关搜索结果的描述。
网页重定向： <meta http-equiv="refresh" content="秒数;URL=重定向URL"> 用于在指定的秒数后自动将页面重定向到另一个URL。
其他元数据： <meta name="author" content="作者名"> 用于指定文档的作者。 <meta name="robots" content="noindex, nofollow"> 用于指示搜索引擎不要索引或跟踪文档。

<meta> 标签的目的是提供关于文档的信息，以便浏览器、搜索引擎和其他工具可以正确地处理和显示文档。通过使用适当的 <meta> 标签，我们可以改善网页的可访问性、搜索引擎优化和用户体验。

18163759011 commented 10 months ago

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

haizlin / fe-interview

[html] 第28天说说你对<meta>标签的理解 #98

设置meta标签设置页面长串数字不与跳转

设置meta标签 IE适配

设置meta标签移动端IOS

设置meta标签清除页面缓存

什么是meta

移动端meta

针对苹果手机说明：

meta元素内容含义

前言

head内各种meta含义

charset

name & content

`author`——定义了页面的作者

`keywords`——为搜索引擎提供关键字

`description`——对网页整体的描述

`viewport`——对页面视图相关进行定义

`generator`——包含生成页面软件的标识符

`theme-color`——定义主题颜色

http-equiv & content

`refresh`——每30s刷新一次文档

`X-UA-Compatible`——告知浏览器以何种版本渲染界面。下面的例子有限使用IE最新版本

`Cache-Control`——请求和响应遵循的缓存机制，可以声明缓存的内容，修改过期时间，可多次声明

property & content

总结

haizlin / fe-interview

[html] 第28天 说说你对<meta>标签的理解 #98

设置meta标签 设置页面长串数字不与跳转

设置meta标签 IE适配

设置meta标签 移动端IOS

设置meta标签 清除页面缓存

什么是meta

移动端meta

针对苹果手机说明：

meta元素内容含义

前言

head内各种meta含义

charset

name & content

author——定义了页面的作者

keywords——为搜索引擎提供关键字

description——对网页整体的描述

viewport——对页面视图相关进行定义

generator——包含生成页面软件的标识符

theme-color——定义主题颜色

http-equiv & content

refresh——每30s刷新一次文档

X-UA-Compatible——告知浏览器以何种版本渲染界面。下面的例子有限使用IE最新版本

Cache-Control——请求和响应遵循的缓存机制，可以声明缓存的内容，修改过期时间，可多次声明

property & content

总结

[html] 第28天说说你对<meta>标签的理解 #98

设置meta标签设置页面长串数字不与跳转

设置meta标签移动端IOS

设置meta标签清除页面缓存

`author`——定义了页面的作者

`keywords`——为搜索引擎提供关键字

`description`——对网页整体的描述

`viewport`——对页面视图相关进行定义

`generator`——包含生成页面软件的标识符

`theme-color`——定义主题颜色

`refresh`——每30s刷新一次文档

`X-UA-Compatible`——告知浏览器以何种版本渲染界面。下面的例子有限使用IE最新版本

`Cache-Control`——请求和响应遵循的缓存机制，可以声明缓存的内容，修改过期时间，可多次声明