meta标签的作用_meta标签_Meta标签详解 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

<meta>标签的作用

<META> 是放于 <HEAD> 与 </HEAD>之间的标记，功用与变化等对，所以我公式化地介绍。 <meta name="Description" content="This is Chris's Home Page"> 该网页的描述，作用于搜索引擎的登录。 <meta name="Keywords" content="Chris, Web, Music, photo"> 该网页的关键字，作用于搜索引擎的登录。 <meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT"> <meta http-equiv="Pragma" content="no-cache"> 以上行功能相同，都是要浏览器重新载入该页，不要使用快取功能，当然可以修改 Expire （过期）时间。 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 设定这是 HTML 文件及其编码语系，简体中文网页使用charset=gb2312，繁体中文使用charset=big5，或者不设编码也可，纯英文网页建议使用 iso-8859-1。 <meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]"> <meta name="GENERATOR" content="Microsoft FrontPage 3.0"> 这只表示该网页由什么编辑器写的。 <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com/"> 这行较为实用，能于预定秒数内自动转到指定网址。原代码中 10 表示 10秒。

03

Meta 标签使用详解

meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：

03

您找到你想要的搜索结果了吗？

是的

没有找到

HTML中Meta标签的作用及使用方法

meta标签是head部的一个辅助性标签，提供关于 HTML 文档的元数据。它并不会显示在页面上，但对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（SEO），或其他 web 服务。

02

如何给网站添加Web Bookmark

在查看阮一峰老师最新的周刊时，发现了一个很好玩的工具https://bookmark.style/[1]，作用就是输入网站，会根据网站上的信息生成精美的分享卡片，可以保存成图片并进行分享。

01

HTML meta标签总结与属性使用介绍

之前学习前端中，对meta标签的了解仅仅只是这一句。 <metacharset="UTF-8"> 但是打开任意的网站，其head标签内都有一列的meta标签。比如我博客的。但是自己却很不熟悉，于是

06

移动web开发需要注意的二十点

（现在大部分移动浏览器包括wp都支持viewport的width选项），这些meta标签在开发webapp时起到非常重要的作用，可以给用户提供更好的体验

02

Apache环境下页面乱码的几种可能总结

采用典型的LAMP架构开发的时候，环境中多处涉及到编码的指定，有一个地方忽略，都有可能造成页面汉字乱码的产生，本文将总结这些乱码产生的可能的原因，方便我们排查。

01

主流浏览器图片反防盗链方法总结

还记得之前写的那个无聊的插件，前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片，使得我这个小插件无法工作。本以为是一个很简单的问题，但是没想到这个小问题硬是让我改了五六遍才改好，可以说是非常的蠢了。总结一下自己犯傻的原因，还是由于自己懒得去深入研究，谷歌百度了问题就直接把方案拿来用了，浅尝辄止人云亦云，解决了表面的问题而没有深入的总结。当然，从另外一个方面讲，我也是初步领会到了前端程序员面对要兼容各种浏览器的需求时头有多大了。

01

w3c标准html5手册_在w3c中规定html决定页面的

下面的图是我在网上看到的一张图，总结的非常好。转： HTML常用标签及其用法

02

主流浏览器图片反防盗链方法总结

还记得之前写的那个无聊的插件，前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片，使得我这个小插件无法工作。本以为是一个很简单的问题，但是没想到这个小问题硬是让我改了五六遍才改好，可以说是非常的蠢了。总结一下自己犯傻的原因，还是由于自己懒得去深入研究，谷歌百度了问题就直接把方案拿来用了，浅尝辄止人云亦云，解决了表面的问题而没有深入的总结。当然，从另外一个方面讲，我也是初步领会到了前端程序员面对要兼容各种浏览器的需求时头有多大了。

05

meta标签大全（荐）

5、IOS中Safari设置保存到桌面图标：这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px

03

HTML标记语法总结

语法：<标记名>…标记内容…</标记名>，如：这是百度的主页

02

利用css @viewport 做设备适配

在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。

01

前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？

提到HTML标签，我们会非常熟悉，开发中经常使用。但我们往往关注更多的是页面渲染效果及交互逻辑，也就是对用户可见可操作的部分，比如表单、菜单栏、列表、图文等。其实还有一些非常重要却容易忽视的标签，这些标签大多数用在页面头部head标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、搜索优化，合理利用它们可以让我们在开发中达到事半功倍的效果。

04

7-2.表单-HTML基础

<input type="radio" name="组名" value="取值" />

02

WEBAPP开发技巧总结

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。

02

[译]对《优化浏览器渲染》的补充

ISD Webteam的大布同学（twitter：@tc_bryanzhang）在2010年1月翻译了google Page Speed系列中的Optimize browser rendering，很是方便了大家。在此基础上，google又有了更新，我且在此把google新增的部分翻译一下，作为对大布同学译稿的补充。 google这篇文章关注的是资源被下载到客户端以后，在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化，提出了5个要点：使用高效率的CSS选择器避免CSS ex

06

网站开发html_网页基础代码大全

<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

02

robots协议标准

前两天刚知道用爬虫抓取page有个协议的问题，尤其是对于open source的爬虫，刚看到一篇blog，写的就是如此，难怪之前看google的robots也和另外一个U.S.的网站相同，感情是大家都商量好了，可能这方面中国的一些站点这种意识要稍微淡一点。。。同时这也害得毕设还得另谋思路。。。搜索引擎三巨头打的不亦乐乎，但偶尔也合作一下。去年Google，雅虎，微软就合作，共同遵守统一的Sitemaps标准。前两天三巨头又同时宣布，共同遵守的 robots.txt文件标准。Google，雅虎，微软各自在自己的官方博客上发了一篇帖子，公布三家都支持的robots.txt文件及Meta标签的标准，以及一些各自特有的标准。下面做一个总结。三家都支持的robots文件记录包括： Disallow - 告诉蜘蛛不要抓取某些文件或目录。如下面代码将阻止蜘蛛抓取所有的网站文件： User-agent: * Disallow: / Allow - 告诉蜘蛛应该抓取某些文件。Allow和Disallow配合使用，可以告诉蜘蛛某个目录下，大部分都不抓取，只抓取一部分。如下面代码将使蜘蛛不抓取ab目录下其他文件，而只抓取其中cd下的文件： User-agent: * Disallow: /ab/ Allow: /ab $通配符 - 匹配URL结尾的字符。如下面代码将允许蜘蛛访问以.htm为后缀的URL： User-agent: * Allow: .htm$ *通配符 - 告诉蜘蛛匹配任意一段字符。如下面一段代码将禁止蜘蛛抓取所有htm文件： User-agent: * Disallow: /*.htm Sitemaps位置 - 告诉蜘蛛你的网站地图在哪里，格式为：Sitemap: <sitemap_XXXXXX> 三家都支持的Meta标签包括： NOINDEX - 告诉蜘蛛不要索引某个网页。 NOFOLLOW - 告诉蜘蛛不要跟踪网页上的链接。 NOSNIPPET - 告诉蜘蛛不要在搜索结果中显示说明文字。 NOARCHIVE - 告诉蜘蛛不要显示快照。 NOODP - 告诉蜘蛛不要使用开放目录中的标题和说明。上面这些记录或标签，现在三家都共同支持。其中通配符好像以前雅虎微软并不支持。百度现在也支持Disallow，Allow及两种通配符。Meta标签我没有找到百度是否支持的官方说明。只有Google支持的Meta标签有： UNAVAILABLE_AFTER - 告诉蜘蛛网页什么时候过期。在这个日期之后，不应该再出现在搜索结果中。 NOIMAGEINDEX - 告诉蜘蛛不要索引页面上的图片。 NOTRANSLATE - 告诉蜘蛛不要翻译页面内容。雅虎还支持Meta标签： Crawl-Delay - 允许蜘蛛延时抓取的频率。 NOYDIR - 和NOODP标签相似，但是指雅虎目录，而不是开放目录。 Robots-nocontent - 告诉蜘蛛被标注的部分html不是网页内容的一部分，或者换个角度，告诉蜘蛛哪些部分是页面的主要内容（想被检索的内容）。 MSN还支持Meta标签：Crawl-Delay 另外提醒大家注意的是，robots.txt文件可以不存在，返回404错误，意味着允许蜘蛛抓取所有内容。但抓取robots.txt文件时却发生超时之类的错误，可能导致搜索引擎不收录网站，因为蜘蛛不知道robots.txt文件是否存在或者里面有什么内容，这与确认文件不存在是不一样的。

04

详解robots.txt和Robots META标签

大家好，又见面了，我是你们的朋友全栈君。对于网站管理者和内容提供者来说,有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法：一个是robots.txt,另一个是The Robots meta标签。

01

如何给网站添加Web Bookmark

在查看阮一峰老师最新的周刊时，发现了一个很好玩的工具bookmark.style/，作用就是输入网站，会根据网站上的信息生成精美的分享卡片，可以保存成图片并进行分享。

05

网站SEO优化：Meta标签如何书写？Vue项目怎么优化Meta标签？

什么是Meta标签呢？这可不是最近很火的“元宇宙”或是FB。Meta标签，或者说Meta元素，是HTML内head标签的一部分。通常用于指定页面描述、关键字以及未在其他head元素、属性中提供的其他元数据。间接参与浏览器页面渲染，或者为搜索引擎的爬虫提供引导（进而让搜索引擎更好收录网站）。

05

2.文本标签-HTML基础

这六个标题标签在页面中的重要性是有区别的，其中 h1 标签的重要性最高，h6 标签的重要性最低。

03

Meta标签详解

您的个人网站即使做得再精彩，在“浩瀚如海”的网络空间中，也如一叶扁舟不易为人发现，如何推广个人网站，人们首先想到的方法无外乎以下几种：　　●　在搜索引擎中登录自己的个人网站　　●　在知名网站加入你个人网站的链接　　●　在论坛中发帖子宣传你的个人网站

02

移动端开发需要注意事项

请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大

02

1.基本标签

<html xmlns="http://www.w3.org/1999/xhtml">

06

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域

05

网页页面下各种标签的含义

编码格式告诉给浏览器用什么方式来都这页代码，，这里是用UTF-8编码的，utf-8是国际编码，实用性比较强推荐使用。

01

xpath进阶用法

xpath作为对网页、对xml文件进行定位的工具，速度快，语法简洁明了，在网络爬虫解析内容的过程中起到很大的作用，除了xpath的基础用法之外xpath中还存在着非常之多的进阶用法，本文将对笔者日常使用中积累的xpath进阶用法进行总结并举例说明：

04

3.列表-HTML基础

到现在为止，我们学习了很多标签，但是由于不熟悉标签的语义化，有时我们可能会用别的标签代替另一个标签，从而实现相同的效果，但这是一种错误的思想。

01

网页页面下各种标签的含义

编码格式告诉给浏览器用什么方式来都这页代码，，这里是用UTF-8编码的，utf-8是国际编码，实用性比较强推荐使用。

01

7-1.表单-HTML基础

一、表单 1.表单是什么? 之前我们学的标签做出来都是静态页面，而不是动态的。要想做出一个动态页面，就需要借助表单来实现。如果一个页面仅仅供用户浏览,那就是静态页面；若这个页面还能实现与服务器进

02

公开web漏洞报告逻辑分析整理[持续更新]

最近因为个人所得税要补很多，所以重新整理复盘下漏洞报告，准备挖src补一下子亏空。

02

2.CSS特性-CSS进阶

二、CSS特性 CSS具有两大特性：继承性层叠性 1.继承性 CSS的继承性，指的是子元素继承父元素的某些样式属性，例如：在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色。不是所有属性都具有继承性不过，并不是所有属性都具有继承性，如：padding、margin、border等就不具备继承性，况且要是这些属性也可以继承，那对于网页来说是一场噩梦。（1）具有继承性的属性 W3C规定，只有那些能让我们轻松书写的属性才可以继承。在CSS中，具有继承性的属性有

02

【说站】max-image-preview是什么意思，meta robots详解

里面包含了一个robots meta标签和里面的max-image-preview:large。

02

360浏览器根据网页META 自动切换内核

由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。

04

移动Web 开发中的一些前端知识收集汇总

在开发DeveMobile 与EaseMobile 主题的时候积累了一些移动Web 开发的前端知识，本着记录总结的目的，特写这篇文章备忘一下。要说移动Web 开发与传统的PC 端开发，感觉也没什么不同，但得益于苹果对于智能机的推动，CSS3+HTML5几乎可以毫无顾忌的使用，然后浏览器端考虑webkit内核的就差不多了。 webkit内核中一些私有的meta标签 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="vi

05

Bootstrap

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap支持响应式布局!响应式布局指的是一个网站能够兼容多种终端设备访问!. 终端设备:..电脑、平板电脑、手机

03

6.超链接-HTML基础

一、何为超链接 1.a标签在HTML中，使用a标签来实现超链接。（1）语法格式文本或图片 ① 说明 href表示想要跳转到的那个页面的路径，可以是相对路径，也可以是绝对路径。我们可以将文本设置为超链接，即文本超链接；也可以将图片设置为超链接，即图片超链接。（2）示例 ① 例1-文本超链接 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

03

Silverlight SEO优化

Silverlight SEO优化 SEO优化 2008年10月份，微软发布了针对Silverlight应用程序进行搜索引擎优化的指导文档，该文档描述了对Silverlight应用程序进行搜索引擎优化一些最佳实践。这些实践知识可以帮助开发人员将他们开发的基于Silverlight的内容能够出现在搜索引擎的页面上，并对那些没有启用或者没有安装Silverlight插件的用户也能够提供一种让人接受的访问体验。搜索引擎识别的是HTML内容，并不能识别Silverlight内容，这与不能识别HTML中的

05

nofollow标签的作用和使用方法有了重大变化

关于nofollow标签作用和使用方法大家都了解了，今天聊聊在昝辉老师博客上看到的一篇文章，nofollow标签的作用有重大变化。nofollow标签是Google和Yahoo等搜索引擎2005年推出的，到目前已经有了16年的历史了，它目的是告诉搜索引擎不要跟踪加了nofollow的链接，不要传递链接权重，不要在搜索算法中计算这个链接。当然百度也是支持nofollow标签的。

02

nofollow标签的作用和使用方法有了重大变化

关于nofollow标签作用和使用方法大家都了解了，今天聊聊在昝辉老师博客上看到的一篇文章，nofollow标签的作用有重大变化。nofollow标签是Google和Yahoo等搜索引擎2005年推出的，到目前已经有了16年的历史了，它目的是告诉搜索引擎不要跟踪加了nofollow的链接，不要传递链接权重，不要在搜索算法中计算这个链接。当然百度也是支持nofollow标签的。

04

国内环境下前端网页开发的几个“中国特色”代码

起这个标题多少有诚惶诚恐的感觉，作为一个有近3年经验的小站长+前端开发菜鸟，多多少少算有点经历。下面就说说个人了解的几个因为国内环境而做出的妥协——所谓之“中国特色”代码。毫无疑问，本文是水文。代码一：<meta name="renderer" content="webkit|ie-comp|ie-stand"> 如果说小标题的meta 标签你不懂，那么下面几个你该有点印象吧： <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

360浏览器兼容模式文档模式默认以ie7标准渲染?

今天，360浏览器下在线报名的页面数据显示异常，极速下并没有问题。 360帮助中心是这么说的：浏览器默认内核的指定只需在head标签中添加一行代码即可：若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand"

05

CSS入门1-认识html之标签

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。）

02

10.超链接样式-CSS基础

一、超链接伪类 1.何为超链接伪类在CSS中，使用超链接伪类来定义超链接在鼠标点击的不同时期的样式。（1）语法格式 a:link{...} a:visited{...} a:hover{...} a:active{...} ① 伪类伪类说明 a:link 定义a元素未访问时的样式。 a:visited 定义a元素访问后的样式。 a:hover 定义鼠标经过a元素时的样式。 a:active 定义鼠标点击激活时的样式。 Ⅰ.定义顺序定义这四个伪类时，必须按照link、visited、hov

01

前端基础-HTML(meta标签)

这种情况就是乱码，是因为我们输入的中文，往计算机中保存的时候，最终都要转成2进制的数据形式，也就是说有一个编码的过程，在保存文件的时候默认使用的是ANSI编码格式，浏览器显示文件中内容的时候，还需要将2进制的数据转换成文字形式显示出来，也就是说还有解码的过程，浏览器被指定为utf-8格式来解码，也就是说编码和解码不一致所造成的乱码

01

彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小

为了方便用户的查看浏览器在移动默认设置用户可以放大或者缩小，但是随着前端届的日新月异的变化，反而随意放大缩小成了我们需要解决的问题；安卓手机解决方案： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/> // 以下为注释 //在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。 <meta

01

网站头配置

我们只需在网站的head标签中添加上面的代码，即可以相对应的模式来渲染网站。同时我们也可以同时指定多个内核名称，之间以符号”|”进行分隔，如下代码：

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭