meta标签_Meta标签详解_Wemassembly集合meta标签 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

01

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

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

05

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

是的

没有找到

HTML标记语法总结

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

02

利用css @viewport 做设备适配

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

01

Meta 标签使用详解

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

03

<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

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

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中Meta标签的作用及使用方法

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

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

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

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

02

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

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

04

2.文本标签-HTML基础

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

03

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

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

02

移动端开发需要注意事项

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

02

7-2.表单-HTML基础

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

02

meta标签大全（荐）

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

03

如何给网站添加Web Bookmark

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

01

3.列表-HTML基础

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

01

WEBAPP开发技巧总结

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

02

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

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

02

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

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

06

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

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

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

01

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

Meta标签详解

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

02

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

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

02

6.超链接-HTML基础

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

03

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

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

网站头配置

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

02

META标签优化SEO

meta标签，位于HTML文档的< head >与< title >之间，它提供的信息虽然用户不可见，但却是文档最基本的元信息。meta标签除了提供文档字符集、使用语言、作者等基本信息外，还涉及关键词和网页等级的设定。 meta标签的内容设计对搜索引擎优化（seo）来说是很重要的一个元素，合理运用Description和Keywords属性，可以优化网站。

03

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

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

05

5.CSS层次选择器-CSS进阶

这些都是CSS中最基本的选择器。层次选择器，就是通过元素之间的层次关系来选择元素。层次选择器在实际开发中也是相当重要的，常见的层次关系包括:父子、后代、兄弟和相邻。

04

自定义QQ发网址显示卡片内容

嘛但是呢，另一位仁兄再说使用META标签来做成的卡片，这应该是基于QQ的API一些东西（我也不是很清楚）反正用这个META标签后就会生成一张卡片（嗯对就是这样）

01

7-1.表单-HTML基础

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

02

H5实现移动端禁止页面缩放（适用Android和IOS）

要实现Android和IOS浏览器禁止页面缩放，通用的设置方式是给HTML页面设置meta标签来实现，具体添加标签内容如下：

01

2.CSS选择器-CSS基础

一、元素的id和class id 和 class 是元素最基本的两个属性，一般情况下，id 和 class都是用来选择元素，进而进行CSS操作或JavaScript操作。 1.id属性 id属性具有唯一性，也就是说一个页面中相同的id只能出现一次。若出现多个相同id，那么CSS或JavaScript会无法识别，这个id对应的是哪个元素。 2.class属性 class，类。思想和别的编程语言相似。我们可以通过为同一个页面的相同元素或不同元素设置相同的class，然后使得具有相同clas

02

PHP中的页面跳转

点击按钮<input type="submit" name = "submit" value="确定" />

03

如何给网站添加Web Bookmark

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

05

1.基本标签

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

06

一、前端基础-html-head标签

05

原生css写响应式网页

写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开

09

xpath进阶用法

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

04

2016.06 第一周群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport（视口）参考答案 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> width=device-width 是设置视口宽度为设备的宽度，还可以固定视口的宽度，例如： width

07

移动端适配之viewport适配

前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧!

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭