META标签的设置

时间: 2019-10-05阅读: 576标签: 标签

定义及用法

⑴<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

⑵<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

⑶元数据(metadata)是关于数据的信息。元数据总是以名称/值的形式被成对传递的。

⑷典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

⑸元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

 

可选属性

技术图片

注意:当有http-equiv或者name属性时,必须要有content属性,content 属性提供了名称/值对中的值,content属性定义与 http-equiv 或 name 属性相关的元信息。content始终要和 name 属性或 http-equiv 属性一起使用。

 

name属性

⑴定义元数据的名称,与content属性包含的值相关联。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。

⑵application-name:定义正运行在该网页上的网络应用名称

    •简单的网页不应该去定义
⑶author:文档的作者名称

⑷description:内容的简短和精确描述,一些浏览器,如Firefox和Opera,将其用作书签页面的默认描述。

⑸generator:生成页面的软件的标识符

⑹keywords:用逗号分隔的与页面内容相关的单词

⑺referrer:控制所有从该页面发出的HTTP请求中referer首部的内容。

⑻content取值:

技术图片

⑼creator:文档创建者的名称,可以是机构的名称,有多个的话必须定义多个meta

⑽googlebot:robots谷歌的索引抓取工具Googlebot 的同义词,只适用于google

⑾publisher:以自由格式定义文档发布者的名称,可以是机构的名称。

⑿robots:定义协作爬虫应该与页面的行为,以逗号分隔的值的列表。
技术图片

 ⒀slurp:与robots一样, 但其仅使用于 Slurp – Yahoo Search的抓取工具。

 ⒁rebderer:为双核浏览器准备,用于指定双核浏览器默认以何种方式渲染页面 

 ⒂viewport:提供有关视口初始大小的提示,仅供移动设备使用。

技术图片


http-equiv

指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

⑴content-language:定义页面使用的默认语言
    •尽量使用全剧属性lang来代替

⑵content-security-policy:允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击。

⑶content-type:定义文档的MIME type
    •使用charset代替

⑷default-style:指定了在页面上使用的首选样式表

⑸refresh
    •如果content只包含一个正整数,则是重新载入页面的时间间隔
    •如果content包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔

⑹set-cookie:为页面定义cookie
    •该用HTTP的Set-Cookie代替

移动端meta标签配置

控制显示区域各种属性

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

⑴width - viewport的宽度(范围从 200 到 10,000,默认为 980 像素)

⑵height – viewport的高度(范围从 223 到 10,000 )

⑶initial-scale - 初始的缩放比例(范围从 > 0 到 10)

⑷minimum-scale - 允许用户缩放到的最小比例

⑸maximum-scale – 允许用户缩放到的最大比例

⑹user-scalable – 用户是否可以手动缩放(no,yes)

1.http-equiv 属性的 Content-Type 值(显示字符集的设定)

说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。

用法:

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

注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。

2.name 属性设置作者姓名及联系方式

<meta name="author" contect="liudanyun, liudy102@163.com" />

3.忽略将数字变为电话号码:

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

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!

4.IOS中Safari允许全屏浏览:

<meta content="yes" name="apple-mobile-web-app-capable">

5.IOS中Safari顶端状态条样式:

<meta content="black" name="apple-mobile-web-app-status-bar-style">

6.使用特殊链接:

如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,

<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>

或用于单元格:

<td onclick="location.href=‘tel:122‘">


meta标签常用的写法

<meta charset="utf-8"> <!-- 设置文档字符编码 -->
<meta http-equiv="x-ua-compatible" content="ie=edge"><!-- 告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 指定页面初始缩放比例。-->
 
<!-- 上述3个meta标签须放在head标签最前面;其它head内容放在其后面,如link标签-->
 
<!-- 允许控制加载资源 -->
<meta http-equiv="Content-Security-Policy" content="default-src ‘self‘">
<!-- 尽可能早的放在文档 -->
<!-- 只适用于下面这个标签的内容 -->
 
<!-- 使用web应用程序的名称(当网站作为一个应用程序的时候)-->
<meta name="application-name" content="Application Name">
 
<!-- 页面的简短描述(限150个字符)-->
<!-- 在某些情况下这个描述作为搜索结果中所示的代码片段的一部分。-->
<meta name="description" content="A description of the page">
 
<!-- 控制搜索引擎爬行和索引的行为 -->
<meta name="robots" content="index,follow,noodp"><!-- 所有搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 谷歌 -->
 
<!-- 告诉谷歌搜索框不显示链接 -->
<meta name="google" content="nositelinkssearchbox">
 
<!-- 告诉谷歌不要翻译这个页面 -->
<meta name="google" content="notranslate">
 
<!-- Google网站管理员工具的特定元标记,核实对谷歌搜索控制台所有权 -->
<meta name="google-site-verification" content="verification_token">
 
<!-- 说明用什么软件构建生成的网站,(例如,WordPress,Dreamweaver) -->
<meta name="generator" content="program">
 
<!-- 简短描述你的网站的主题 -->
<meta name="subject" content="your website‘s subject">
 
<!-- 很短(10个词以内)描述。主要学术论文 -->
<meta name="abstract" content="">
 
<!-- 完整的域名或网址 -->
<meta name="url" content="https://example.com/">
 
<meta name="directory" content="submission">
 
<!-- 对当前页面一个等级衡量,告诉蜘蛛当前页面在整个网站中的权重到底是多少。General是一般页面,Mature是比较成熟的页面,Restricted代表受限制的。 -->
<meta name="rating" content="General">
 
<!-- 隐藏发送请求时请求头表示来源的referrer字段。 -->
<meta name="referrer" content="no-referrer">
 
<!-- 禁用自动检测和格式的电话号码 -->
<meta name="format-detection" content="telephone=no">
 
<!-- 通过设置“off”,完全退出DNS队列 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
 
<!-- 在客户端存储 cookie,web 浏览器的客户端识别-->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
 
<!-- 指定要显示在一个特定框架中的页面 -->
<meta http-equiv="Window-Target" content="_value">
 
<!-- 地理标签 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5803

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义实现时,如何解决不同域问题并实现页面中图片资源的安全下载呢?本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?

HTML的<Object>标签怎么用?

<object>标签是一个HTML标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体;它通常用于嵌入由浏览器插件处理的Flash页面元素,如Flash和Java项目。它还可以用于在HTML页面内显示另一个网页。

a标签中防止跳转的href=javascript:;、void(0);等都是什么意思

a标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行

vue自定义标签和单页面多路由实现

比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:

html中meta标签及Keywords

关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处

video标签的属性

HTML5是下一代HTML,新增了许多新的标签,这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。

小程序如何写动态标签

动态配置标签的好处一是所有逻辑在JS端控制,二是使得我们的模板非常规范,方便后续维护更新,碎片模板可以很好的控制,三是我们可以根据使用场景很方便的配置props的属性

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

浏览器是如何将标签转成 DOM ?

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分;浏览器引擎- 用来查询及操作渲染引擎的接口

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广