精华内容
下载资源
问答
  • html meta标签属性用法集合.pdf
  • Meta 标签属性含义与详细用法

    千次阅读 2020-10-16 09:59:01
      meta 元素用于指定页面的信息和部分行为。通常用于指定网页的描述,关键字等元数据。   可以被使用浏览器、...  charset是HTML 5的新属性,替换了HTML 4.01的指定字符编码的方式,可以减少部分代码量。 <.

    在这里插入图片描述

      meta 元素用于指定页面的信息和部分行为。通常用于指定网页的描述,关键字等元数据。

      可以被使用浏览器、搜索引擎或其他 Web 服务调用。

    <meta name="" http-equip="" content="" charset="">
    

    1 charset

      charset规定HTML文档的字符编码。

    <meta charset="utf-8">
    

      charsetHTML 5的新属性,替换了HTML 4.01的指定字符编码的方式,可以减少部分代码量。

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

    2 name

    2.1 keyewords

      指定页面关键字。

    <meta name="keyewords" content="html,css">
    

    2.2 description

      指定页面描述信息。

    <meta name="description" content="html description">
    

    2.3 author

      标注页面作者。

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

    2.4 copyright

      标注页面版权信息。

    <meta name="copyright" content="Baidu">
    

    2.5 generator

      标注开发网页的工具或软件。

    <meta name="generator" content="VS Code">
    

    2.6 robots

      告知搜索引擎抓取页面的方式。

      其中content参数如下。

    • index:搜索引擎可以索引此页面,默认属性,不设置meta标签,搜索引擎也会默认索引此页面
    • noindex:搜索引擎不可索引此页面
    • noimageindex:搜索引擎不可索引此页面的图片
    • follow:爬虫可以爬取此页面的链接
    • nofollow:爬虫不可爬取此页面的链接
    • allindexfollow的简写,搜索引擎可以索引此页面,爬虫可以爬取此页面的链接
    • nonenoindexnofollow的简写,搜索引擎不可索引此页面,爬虫不可爬取此页面的链接
    • noarchive:阻止搜索引擎在搜索结果中显示此页面的缓存版本,即网页快照
    • nocache:功能同noarchive一致,适用于MSN/Live引擎
    • nosnippet:搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容,此属性即搜索引擎不可显示该内容,另外搜索引擎也不会保存该页面的快照
    • noodp:搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容,阻止使用DMOZ信息做为此内容
    • noydir:搜索引擎的搜索结果中将显示一部分搜索文字上下文的内容,阻止Yahoo directory信息作为此内容
    <meta name="robots" content="index, follow">
    

    2.7 renderer

      指定浏览器以哪种浏览器内核渲染页面,其中content参数包括webkitwebkit内核,极速模式)、ie-compIE兼容模式,即IE6IE7IE8的渲染模式)、ie-standIE标准模式,即以IE9及以上版本渲染)。

    <meta name="renderer" content="">
    

    2.8 format-detection

      移动端浏览器中,用于识别电话号码、电子邮箱和地理位置的格式。其中content参数为yes(开启,默认值)、no(关闭)。

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

    2.9 revisit-after

      告知搜索引擎每隔多少天访问一次此页面。

      一般情况下,网站不需要此属性来限制搜索引擎的访问频率。只有网站数据量非常大时,被搜索引擎频繁抓取,会占用过多的服务器资源,影响网站的反应速度,这种情况一般设置每隔5-7天来访问抓取一次网页即可。

      网站抓取时间取决于此属性和搜索引擎的重访时间,假设revisit-after设置为5天,若搜索引擎每隔10天访问一次,revisit-after不会生效,而最终搜索引擎按照10天访问一次。搜索引擎每隔3天访问一次,revisit-after设置的5天则会生效,最终搜索引擎每隔5天访问一次页面。

    <meta name="revisit-after"  content="5 days">
    

    2.10 referrer

      referrer有来源页面的意思,即表示当前页面是由哪个页面跳转过来的,具体则是跳转至当前页面的http请求的请求头中的Referer字段包含了上一个页面的URL地址。

      可能会发现拼写少了一个r,正确的拼写其实是Referrer,但是由于http标准发布时没有发现拼写错误,所以就一直沿用至今。

      例如,当前页面的URL地址为http://127.0.0.1:5500/

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <body>
        <a href="http://www.baidu.com">百度</a>
    </body>
    
    </html>
    

      点击跳转至百度页面,查看页面请求的请求头。
    在这里插入图片描述
      因此服务端可以统计用户来源,并以此进行统计分析、日志记录以及缓存优化等。

      但是注意Referer可能会暴露用户的浏览历史 ,并且很多时候当前页面的URL是会包含用户的个人信息的(例如token),所以某些时候需要移除、禁用或者修改策略。

    <meta name="referrer" content="">
    

      content属性值如下。

    • no-referrer:不发送Referer信息
    • no-referrer-when-downgrade:默认值,安全级别下降时不发送Referer信息,目前仅一种情况安全级别下降,即https网页跳转至http网页,其它情况发送Referer完整信息
    • origin:会发送Referer信息,但是仅发送源信息,包括协议、域名和端口号
    • same-origin:仅同源链接发送Referer完整信息
    • strict-origin:即originno-referrer-when-downgrade合并,安全级别下降时不发送Referer信息,安全级别未下降时发送 Referer源信息
    • origin-when-cross-origin:跨域时发送Referer源信息,非跨域时即同源情况发送Referer完整信息
    • strict-origin-when-cross-origin:同源链接发送Referer完整信息,安全级别下降时不发送Referer信息,其它情况发送Referer源信息
    • unsafe-url:最不安全的策略,无论什么情况都发送 Referer完整信息

      meta标签指定content是修改全局策略。

      单个a标签可通过referrerpolicy属性修改局部策略,更多 详细参考

    <a href="http://www.baidu.com" referrerpolicy="no-referrer">百度</a>
    

    在这里插入图片描述

    3 http-equiv

    3.1 content-type

      规定HTML文档的字符编码。

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

    3.2 content-language

      标注页面的目标受众或者标注当前页面存在的语言。

    <meta http-equiv="content-language" content="en">
    

    3.3 content-script-type

      标注页面中脚本的类型。

    <meta http-equiv="content-script-type" content="text/javascript"> 
    

    3.4 refresh

      刷新或跳转(重定向)页面,content表示刷新或跳转的时间与跳转的网址。

      3s后刷新页面。

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

      3s后页面跳转至百度,跳转方式为当前窗口下跳转。

    <meta http-equiv="refresh" content="3; url=http://www.baidu.com">
    

    3.5 expires

      指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新加载到本地缓存才能访问。

      指定网页在未来的某个时间过期,注意时间格式为GMT(格林尼治标准时间)。

    <meta http-equiv="expires" content="Mon, 31 May 3021 06:00:00 GMT">
    

      指定网页可在本地缓存的时间(秒),指定0或负数,则每次访问网页都需要从服务器重新加载内容。

    <meta http-equiv="expires" content="2000">
    

    3.6 pragma

      禁止浏览器从本地缓存中访问页面的内容,即用户无法脱机浏览。

      注意仅IE浏览器能识别此段meta标签含义,其它主流浏览器仅能识别cache-control属性的meta标签。为了网页兼容性,最好pragmacache-control两者一起使用。

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    

    3.7 window-target

      设置页面显示的窗口方式,content参数如下,详细参考

    • _top:页面以当前整个窗口的方式显示,可用于防止页面被其他网页嵌套
    • _black:页面以新打开的方式显示
    • _self:页面以当前容器或窗口显示
    • _parent:页面以父容器或窗口显示
    <meta http-equiv="window-target" content="_top">
    

    3.8 set-cookie

      设置cookie值及其有效时间。

      注意浏览器正在远离此方式,可能由于浏览器版本原因,会产生警告或错误。此功能已在M63中废弃,并且在M65中完全删除。

    <meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Mon, 31 May 3021 06:00:00 GMT; path=/">
    

    3.9 pics-label

      网页等级评定,IE浏览器可以根据网页的限制等级来过滤网页。

    <meta http-equiv="pics-label" content="">
    

    3.10 page-enter / page-exit

      设置网页退出和进入的过渡效果。

      其中包括blendTrans淡入淡出过渡效果,此效果只能设置过渡持续时间(秒)。

      另一种revealTrans,可以设置过渡效果类型和过渡持续时间(秒)。

      淡入持续5秒。

    <meta http-equiv="page-enter" content="blendTrans(duration=5)">
    

      矩形扩大持续2秒。

    <meta http-equiv="page-enter" content="revealTrans(duration=2, transition=1)">
    

      其中transition过渡效果有24种,包括0(矩形缩小)、1(矩形扩大)、2(圆形缩小)、3(圆形扩大)、4(下到上刷新)、5(上到下刷新)、6(左到右刷新)、7(右到左刷新)、8(竖百叶窗)、9(横百叶窗)、10(错位横百叶窗)、11(错位竖百叶窗)、12(点扩散)、13(左右到中间刷新)、14(中间到左右刷新)、15(中间到上下)、16(上下到中间)、17(右下到左上)、18(右上到左下)、19(左上到右下)、20(左下到右上)、21(横条)、22(竖条)、23(以上22种随机选择一种)。

      注意由于浏览器的版本原因,多数都不再支持page-enter/page-exit属性。

    3.11 X-UA-compatible

      针对IE8的特殊属性,指定在IE8浏览器内以哪种IE版本的模式来渲染页面内容,以此来解决IE浏览器的兼容问题。

      指定多个模式,如下在IE8中浏览页面时,将会使用IE7的标准模式渲染页面。由于IE8自身不支持IE9IE10,而IE7是相对IE5IE6的最高版本的渲染模式,故最终会以IE7渲染页面。

    <meta http-equiv="X-UA-compatible" content="IE=5,6,7,9,10">
    

      使用最新版本的IE浏览器渲染页面,即使用的是什么版本的IE浏览器,就用什么版本的标准渲染模式。

    <meta http-equiv="X-UA-compatible" content="IE=edge">
    

      指定IE浏览器使用Google Chrome FrameGCF)模式渲染页面,GCF是谷歌内嵌浏览器框架,专门为IE浏览器开发的浏览器内核插件,支持IE6IE7IE8等多个版本的IE浏览器。

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    

       绝大多数网站均使用如下方式,即IE浏览器安装了GCF插件,则使用GCF浏览器内核渲染页面,若未安装GCF插件,则使用最高版本的IE内核渲染页面。

    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    

    3.12 cache-control

       用于控制浏览器和服务器之间的缓存请求和响应。

    <meta http-equiv="cache-control" content="">
    

       其中content参数如下。

    • public:可以在任何客户端(浏览器、本地缓存、各种代理服务器等)中缓存,但是不能设置缓存期限
    • max-age:不仅可以被任何客户端缓存,而且还可以设置缓存期限。缓存期限是相对服务器时间而言的,超过设置时间,缓存则被认为过期,再次访问需要重新请求服务器加载缓存。如下最大缓存时间为60秒,超过60秒,缓存则被认为过期
    <meta http-equiv="cache-control" content="max-age=60">
    
    • private:只能被单个用户缓存,不允许中间代理缓存。例如CDN不能缓存private的响应
    • only-if-cached:若缓存存在,只使用缓存,不需要请求服务器加载更新内容
    • no-cache:先发送请求,与服务器确认资源是否被修改,若未被修改,则使用缓存
    • no-store:不允许缓存,再次访问需重新从服务器上加载缓存
    • no-transform:不可对网页内容或网页中的资源进行转换,以便节省缓存空间
    • no-siteapp:禁止百度、搜狗等搜索引擎对网页进行转码

      禁止百度、搜狗等网页进行转码处理。

    <meta http-equiv="cache-control"  content="no-transform">
    <meta http-equiv="cache-control"  content="no-siteapp">
    

      每次打开网页,清除网页缓存。http 1.1协议需要用到cache-control来规范,而http 1.0适用pragmaexpires来规范,为了网页兼容性,最好三个一起使用。

    <meta http-equiv="cache-control"  content="no-cache">
    <meta http-equiv="pragma"  content="no-cache">
    <meta http-equiv="expires"  content="0">
    

    3.13 x-dns-prefetch-control

      禁用隐式的 DNS 预解析。

    <meta http-equiv="x-dns-prefetch-control" content="off">
    

    4 移动端

    4.1 viewport

      用于优化移动端的网页,使得web端的网页在手机端正常显示,页面布局不会错位。注意metaviewpoint属性只对移动端浏览器有效,对pc端浏览器是无效的。

      viewport主要包括如下三种类型。

    • 布局视区:是指整个网页在移动端浏览器中显示的区域,此布局在大多数移动端浏览器中默认显示的宽度为980px(也有少部分1024px或者其他宽度的),故只要整个网页宽度不超过此默认值,页面就可以正常显示
    • 可见视区:指的是移动端设备本身的屏幕显示区域,不同的移动设备,可见视区的尺寸也不同
    • 理想视区:指的是布局视区能完美适配移动设备的可见视区,即布局视区的宽度等于可见视区的宽度,因此不需要缩放和横向滚动条就能正常查看整个网页
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    

      viewport属性及其用法如下。

    • width:控制布局视区的宽度,也可指定为固定宽度值,或者设置为device-width。如果width不设置或者为空,则使用默认宽度,即上述的980px1024px。如果设置为device-width,则表示设置为理想视区,即布局视区宽度等于可见视区宽度。如果width设置为固定宽度,单位为px,也可以不带单位,默认单位为px
    • height:控制布局视区的高度,一般不设置,极少使用
    • initial-scale:设置布局视区初始化缩放比例(即每一次加载页面时的缩放比例),为一个数字,可以是小数。如果设置initial-scale1,则和width=device-width一致,表示设置为理想视区。但是两者均有一个小缺陷,即width=device-width会导致iPhoneiPad横竖屏不分,initial=1.0会导致IE横竖屏不分,故两者都使用,可互相弥补缺陷
    • maximum-scale:允许用户缩放的最大比例值,为一个数字,可以带小数。需要大于minimum-scale
    • minimum-scale:允许用户缩放的最小比例值,为一个数字,可以带小数
    • user-scalable:是否允许用户手动缩放布局视区,非必须参数,其中参数为no(不允许)、yes(允许)

    5 浏览器

    5.1 QQ 浏览器

    5.1.1 x5-orientation

      指定屏幕方向,其中content参数为landscape(横屏)、portrait(竖屏)。

    <meta name="x5-orientation" content="landscape">
    

    5.1.2 x5-fullscreen

      全屏显示。

    <meta name="x5-fullscreen" content="true">
    

    5.1.3 x5-page-mode

      指定页面以应用模式显示。

    <meta name="x5-page-mode" content="app">
    

    5.2 UC 浏览器

    5.2.1 screen-orientation

      指定屏幕方向,其中content参数为landscape(横屏)、portrait(竖屏)。

    <meta name="screen-orientation" content="portrait">
    

    5.2.2 full-screen

      全屏显示。

    <meta name="full-screen" content="yes">
    

    5.2.3 browsermode

      指定页面以应用模式显示。

    <meta name="browsermode" content="application">
    

    5.2.4 nightmode

      夜间模式,其中content参数为enable(开启)、disable(关闭),注意若用户开启浏览器的夜间模式,而nightmode设置为disable,页面也是以非夜间模式显示。

    <meta name="nightmode" content="disable">
    

    5.2.5 imagemode

      强制图片显示,浏览器为用户提供了无图模式,但是某些页面图片是必须的(如验证码等),如下可强制页面显示图片。

    <meta name="imagemode" content="force">
    

      imagemode设置为force会作用于整个页面,单张可设置如下。

    <img src="" show="force">
    

    5.2.6 layoutmode

      指定页面排版模式,其中content参数为fitscreen(简化页面处理,适用页面阅读省流)、standard(同标准浏览器一致),注意layoutmode指定后,浏览器提供的页面排版模式将会失效。

    <meta name="layoutmode" content="fitscreen">
    

    5.2.7 viewport

      缩放不显示滚动条,其中content参数为yes(用户缩放不会出现滚动条)、no(同标准浏览器一致)。

    <meta name="viewport" content="uc-fitscreen=yes">
    

    5.3 IOS

    5.3.1 apple-mobile-web-app-capable

      隐藏苹果默认的工具栏和菜单栏,其中content参数包括yes(页面以全屏运行)、no(正常显示)。

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

    5.3.2 apple-mobile-web-app-status-bar-style

      设备顶部状态栏背景色,其中content参数包括default(白色,默认值)、black(黑色)、black-translucent(灰色半透明)。

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

    5.3.3 apple-mobile-web-app-title

      网页添加到主屏幕后的标题(类似App的名称)。

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

    5.3.4 apple-touch-icon

      网页添加到主屏幕后的图标如下,其中apple-touch-icon支持sizes属性,用来对应不同设备。

      57 * 57(默认值)对应320 * 640iPhone老设备,72 * 72对应iPad114 * 114对应retina屏幕的iPhoneiTouch144 * 144对应iPad的高分辨率。

      其中图标匹配方式如下。

    • 若没有与当前设备推荐尺寸一致的图标,则优先使用比推荐尺寸大,最接近推荐尺寸的图标
    • 若没有比推荐尺寸大的图标,则优先使用最接近推荐尺寸的图标
    • 若多个图标符合推荐尺寸,优先使用含precomposed关键字的图标
    • 若未用link指定图标,自动搜索网站根目录下带有app-touch-icon或者app-touch-icon-precomposed前缀的图标

      retina图标是标准图标大小的两倍,实际仅仅需要114 * 114144 * 144两款图标即可。将retina图标的大小设置成标准图标的尺寸,IOS会根据情况自动进行缩放。

    <link rel="apple-touch-icon" sizes="57x57" href="assets/imgs/logo.png">  
    <link rel="apple-touch-icon" sizes="114x114" href="assets/imgs/logo.png">  
    <link rel="apple-touch-icon" sizes="72x72" href="assets/imgs/logo@2x.png">  
    <link rel="apple-touch-icon" sizes="144x144" href="assets/imgs/logo@2x.png">
    

    5.3.5 apple-touch-startup-image

      网页添加到主屏幕后,设置打开后的启动画面。

      其中在iPhoneiTouch设备上只支持竖屏模式,图片分辨率为320 * 640,在iPad上支持竖屏和横屏两种模式,分辨率为768 * 1004748 * 1024

      apple-touch-startup-image不支持sizes属性,可以使用media来支持多种屏幕。

    <link rel="apple-touch-startup-image" href="assets/imgs/startup-l.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="assets/imgs/startup-l.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="assets/imgs/startup.png">
    

    5.3.6 apple-touch-icon-precomposed

      区别于apple-touch-icon,若属性值为apple-touch-icon-precomposed时,系统不会对图标添加类似于圆角和高光的效果,若属性值为apple-touch-icon时系统会自动为图标添加圆角和高光。

    <link rel="apple-touch-icon-precomposed" href="assets/imgs/logo.png">
    

    5.3.7 apple-itunes-app

      告知iPhonesafari浏览器,网页对应的appid,便于在页面显示app的下载广告条。

    <meta name="apple-itunes-app" content="app-id=123456789">
    

    5.4 Google 浏览器

    5.4.1 google

      禁止自动翻译。

    <meta name="google" value="notranslate">
    

    5.4.2 mobile-web-app-capable

      使用Chrome for Android版本的浏览器添加到主屏幕后,页面以全屏显示,即隐藏工具栏和菜单栏。

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

    5.4.3 theme-color

      指定Chrome for Android版的浏览器的设备顶部状态栏主题色。

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

    5.5 Web

    5.5.1 application-name

      指定页面代表的web应用程序的名称,光标悬停在Win7任务栏的固定网站按钮上时,此名称将出现在工具提示中,详细参考 application-name

    <meta name="application-name" content="">
    

    5.5.2 msapplication-tap-highlight

      禁止页面链接高亮。

    <meta name="msapplication-tap-highlight" content="no">
    

    5.5.3 msapplication-tooltip

      光标悬停在网页快捷方式上,将会显示此提示文本,详细参考 msapplication-tooltip

    <meta name="msapplication-tooltip" content="">
    

    5.5.4 msapplication-starturl

      指定网页快捷方式的根URL,不指定则默认使用当前页的地址,详细参考 msapplication-starturl

    <meta name="msapplication-starturl" content="">
    

    5.5.5 msapplication-window

      指定网页快捷方式的首次启动的初始窗口大小,若用户调整了窗口大小,网页将保留新的尺寸值,详细参考 msapplication-window

    <meta name="msapplication-window" content="width=1024;height=768">
    

    5.5.6 msapplication-navbutton-color

      自定义网页快捷方式的浏览器窗口中前进和后退按钮的颜色,详细参考 msapplication-navbutton-color

    <meta name="msapplication-navbutton-color" content="#FF3300">
    

    5.5.7 msapplication-task

      将某个网页同引用程序一般固定在Win7任务栏,在点击后显示一个相关站点的列表,详细参考 msapplication-task

    <meta name="msapplication-task" content="name=xxx; action-uri=http://www.xxx.com; icon-uri=/imgs/logo.ico">
    

    5.5.8 msapplication-task-separator

      在msapplication-task中呈现的站点列表中,在各个任务之间放置一条分割线。若指定多条分割线,则通过声明不同content来使每条分割线都具有唯一性。

    <meta name="msapplication-task-separator" content="id">
    

    5.5.9 msapplication-TileImage

      Win8版本后,支持将网页固定在开始屏幕中,且可以自定义图标和背景图,此属性用来指定图标,详细参考 msapplication-TileImage

    <meta name="msapplication-TileImage" content="/imgs/logo.png">
    

    5.5.10 msapplication-TileColor

      同 msapplication-TileImage类似,指定背景色,详细参考 msapplication-TileColor

    <meta name="msapplication-TileColor" content="#FF3300">
    

    5.5.11 msApplication-ID

      用于网页关联Win8应用程序,IE识别用户计算机是否安装了关联应用,若未安装,则提供指向安装此应用程序的直接链接,若安装了则显示切换到xxx应用,详细参考 msApplication-ID

    <meta name="msApplication-ID" content="App">
    

    5.5.12 msApplication-PackageFamilyName

      用于将网页连接到商店,详细参考 msApplication-PackageFamilyName

    <meta name="msApplication-PackageFamilyName"content="">
    

    5.5.13 msApplication-Arguments

      传递给应用程序的参数字符串,详细参考 msApplication-Arguments

    <meta name="msApplication-Arguments" content="">
    

    5.5.14 msApplication-MinVersion

      强制要求应用程序的最低版本,若用户尝试切换到过低版本的应用程序,会被链接到应用商店更新应用程序,详细参考 msApplication-Arguments

    <meta name="msApplication-MinVersion" content="">
    

    5.5.15 msApplication-OptOut

      是否阻止用户安装或者切换应用程序,详细参考 msApplication-Arguments

    <meta name="msApplication-OptOut" content="install">
    

    5.5.16 msapplication-badge

      将网页固定到开始屏幕后,Win8可以轮询更新更新其中的应用程序,如下指定应用程序的更新方式,详细参考 msapplication-badge

    <meta name="msapplication-badge" content="">
    

    5.5.17 msapplication-config

      自定义网页快捷方式的更新方式、开始屏幕中图标等,注意需使用XML文件设置,详细参考 msapplication-config

    <meta name="msapplication-config" content="http://www.xxx.com/config.xml">
    

    5.5.18 MSThemeCompatible

      是否在IE中开启xp的主题,其中yes表示打开xp的蓝色立体按钮系统显示样式。

    <meta http-equiv="MSThemeCompatible" content="yes">
    

    5.5.19 MSSmartTagsPreventParsing

      IE 6中包含有Smart tag开关,如下用户将看不到某些链接。

    <meta name="MSSmartTagsPreventParsing" content="true">
    

    5.5.20 HandheldFriendly

      针对手持设备优化,主要是部分不识别viewport的浏览器,例如黑莓。

    <meta name="HandheldFriendly" content="true">
    

    5.5.21 MobileOptimized

      布局菜单桌面选择,浏览器根据此属性的content值与屏幕宽度对比,决定使用何种布局方式,详细参考 MobileOptimized

    <meta name="MobileOptimized" content="240">
    

    5.6 其他

    5.6.1 Open Graph Protocol

      og是一种新的http头部标记,此协议可以让网页成为富媒体对象,即网页内容可以被其它社会化网站引用,目前此协议被SNS网站(Facebook等)采用。

      网页遵守此协议,SNS可以有效从页面提取信息并呈现给用户,从而提高网站的传播效率。

      og主要标签属性包括title(标题)、type(类型,常用值包括articlebookmovie)、image(缩略图地址)、url(页面地址)、description(页面描述)、site_name(页面所在网站名)、videosrc(视频或flash地址)、audiosrc(音频地址)。

    <meta property="og:title" content="">
    <meta property="og:description" content="">
    

    5.6.2 App Links

      移动端点击一个链接会产生一个弹出框,询问用户打开哪种应用。而App Links让用户在点击一个普通链接时候可以打开指定app的指定页面,若用户未安装则跳转到web页面,或者直接跳转到app的下载页面。

    <meta property="al:ios:url" content=""> 
    <meta property="al:ios:app_store_id" content=""> 
    <meta property="al:ios:app_name" content=""> 
    <meta property="al:android:url" content=""> 
    <meta property="al:android:app_name" content=""> 
    <meta property="al:android:package" content=""> 
    <meta property="al:web:url" content="">
    
    展开全文
  • meta标签属性有哪些

    千次阅读 2020-05-02 15:36:55
    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    charset属性

    <!-- 定义网页文档的字符集 -->
    <meta charset="utf-8" />
    

    name + content属性

    <!-- 网页作者 -->
    <meta name="author" content="开源技术团队"/>
    <!-- 网页地址 -->
    <meta name="website" content="https://sanyuan0704.github.io/frontend_daily_question/"/>
    <!-- 网页版权信息 -->
     <meta name="copyright" content="2018-2019 demo.com"/>
    <!-- 网页关键字, 用于SEO -->
    <meta name="keywords" content="meta,html"/>
    <!-- 网页描述 -->
    <meta name="description" content="网页描述"/>
    <!-- 搜索引擎索引方式,一般为all,不用深究 -->
    <meta name="robots" content="all" />
    <!-- 移动端常用视口设置 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <!-- 
      viewport参数详解:
      width:宽度(数值 / device-width)(默认为980 像素)
      height:高度(数值 / device-height)
      initial-scale:初始的缩放比例 (范围从>0 到10)
      minimum-scale:允许用户缩放到的最小比例
      maximum-scale:允许用户缩放到的最大比例
      user-scalable:用户是否可以手动缩 (no,yes)
     -->
    

    http-equiv属性

    <!-- expires指定网页的过期时间。一旦网页过期,必须从服务器上下载。 -->
    <meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
    <!-- 等待一定的时间刷新或跳转到其他url。下面1表示1秒 -->
    <meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
    <!-- 禁止浏览器从本地缓存中读取网页,即浏览器一旦离开网页在无法连接网络的情况下就无法访问到页面。 -->
    <meta http-equiv="pragma" content="no-cache"/>
    <!-- 也是设置cookie的一种方式,并且可以指定过期时间 -->
    <meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
    <!-- 使用浏览器版本 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 针对WebApp全屏模式,隐藏状态栏/设置状态栏颜色,content的值为default | black | black-translucent -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    
    展开全文
  • 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School 必要属性 属性 值 ...
  • 前端meta标签总结 <meta charset="UTF-8"> <!-- charset 属性规定 HTML 文档的字符编码 charset 属性是 HTML5 中的新属性,且替换了:<meta http-equiv="Content-Type" content="text/html; ...

    前端meta标签属性功能作用总结

       	<meta charset="UTF-8">
           <!-- charset 属性规定 HTML 文档的字符编码 charset 属性是 HTML5 中的新属性,且替换了:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
    
           <meta http-equiv=”Cache-Control” content=”no-siteapp” />
           <!-- 不让百度转码 通过手机百度打开网页时,百度可能会对你的网页进行转码,修改,会添点广告啥的。 -->
    
           <meta http-equiv="X-UA-Compatible" content="IE=7" />
           <!-- 无论页面是否包含 <!DOCTYPE> 指令,IE8/9都会以 IE7 的标准渲染模式 -->
    
           <meta http-equiv="X-UA-Compatible" content="IE=8" />
           <!-- IE8/9都会以 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码 -->
    
           <meta http-equiv="X-UA-Compatible" content="IE=edge" />
           <!-- Edge 模式通知IE浏览器  以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789,那么就调用高版本的那个也就是IE9 -->
    
           <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
           <!-- 如果IE有安装Google Chrome Frame,那么就走安装的组件,如果没有就和<meta http-equiv="X-UA-Compatible" content="edge" />一样。 -->
    
           <meta http-equiv="Window-target" content="_top">
           <!-- 指定要显示在一个特定框架中的页面 -->
    
           <meta http-equiv="reflash" content="60"/>
           <!-- 定时刷新或重定向,用户不可控制,慎用。 上面的是60秒刷新一次。 -->
           <meta http-equiv="refresh" content="60; url=https://www.baidu.xxx.com" />
           <!-- 页面60秒后,跳转到其他网页, content: 表示时间,单位秒。 url :跳转地址。 -->
    
    
                      <!-- 缓存机制 -->
           <!-- 强制页面在当前窗口以独立的页面显示,防止别人在框架里调用你的页面 -->
           <meta http-equiv="pragma" content="no-cache"/>  
           <!-- 禁止浏览器从本地计算机的缓存中访问页面内容 -->
    
           <meta http-equiv="cache-control" content="no-cache"/>  
           <!-- 设定页面使用的字符集  no-cache表示先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。   即第一条被替换的格式-->
    
           <meta http-equiv="expires" content="0"/> 
           <!-- 设定网页的到期时间。一旦网页过期,必须到服务器上重新传输 -->
           <!-- 上面三条:清除浏览器中的缓存,几句合起来用,就可以使你再次进入曾经访问过的页面时,ie浏览器必须从服务端下载最新的内容,达到刷新的效果 -->
    
    
           <meta http-equiv="x-dns-prefetch-control" content="off">
           <!-- 通过设置为 “off” 完全退出 DNS 预取 -->
           
           <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
           <!-- 在客户端存储 cookie,web 浏览器的客户端识别, 如果网站过期,网站存在本地的cookie会被删除。-->
    
           <meta name="keywords" content="网页 关键字" />
           <meta name="keywords" content="网页 描述文字">
    
           <!-- 上面两条:可以让搜索引擎搜索到你的网站 -->
    
           <meta http-equiv="Page-Enter" content="revealTrans(duration=5.0, transition=20)">
           <meta http-equiv="Page-Exit" content="revealTrans(duration=5.0, transition=20)">
    
           <!-- 上面两条:可以让网站在进入或者离开网页的一刹那实现动画效果 效果见:https://www.cnblogs.com/something/archive/2012/10/18/2728765.html  https://blog.csdn.net/coooliang/article/details/39206715-->
    
           <meta name="author" content="Hege Refsnes">
           <!-- 定义网页作者 -->
    
           <meta name="language" content="en">
           <!-- 此标签为语系标签,即作用就是声明编码默认语系  【不推荐】 -->
    
           <meta name="robots" content="index(允许检索该页面)),noindex(不允许检索该页面),fllow(允许检索该页面上的链接), nofollow(不允许检索该页面的链接),"> 
           <!-- 指定搜索引擎爬虫的行为 -->
    
           <meta name="revisit-after" content="7 days" >
           <!-- 如果网站不经常更新,为了减少搜索引擎爬虫对服务器带来的压力,可以设置一个爬虫访问时间。 -->
           
           <meta name="rating" content="General">
           <!-- 对当前页面一个等级衡量,告诉蜘蛛当前页面在整个网站中的权重到底是多少。General是一般页面,Mature是比较成熟的页面,Restricted代表受限制的。 -->
    
           <meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
    
           <meta name="referrer" content="no-referrer(不发送referrer),no-referrer-when-downgrade(协议降级时,不发送referrer),origin(只发送host部分,不包括路径和参数),origin-when-crossorigin(在跨域的时候只发送host部分,同源则发送完整的url),unsafe-URL(总是发送referrer字段,最宽松的策略,不考虑是否同源等问题)"> 
           <!-- 控制网页发送给服务器的referrer信息 -->
    
           <meta name="generator" content="FrontPage 4.0">
           <!-- 生成文档的一个软件包(不用于手写页面),文件是用FrontPage 4.0来生成的. -->
           <meta name="url" content="https://www.baidu.xxx.com">
           <!-- 在seo优化网站时,告诉收索引擎,这个网页的地址是什么 -->
    
           <meta name="copyright" content="Iris_mao">
           <!-- 注明网页的版权所有 copyright(版权) -->
           <meta name="subject" content="你的网站主题">
           <!-- 关于你的网站主题的简短描述 --> 
               
           <meta name="topic" content="">
           <!-- 描述网站的主题 -->
       
           <meta name="summary" content="">
           <!-- 公司概要或网站目的 -->
    
    
                       <!-- goodle 专用 -->
           <meta http-equiv="X-UA-Compatible" content="chrome=1" />
           <!-- 优先使用最新的chrome版本 -->
    
           <meta name="google" content="nositelinkssearchbox">
           <!-- 告诉 Google 不显示网站链接的搜索框 -->
               
           <meta name="google" content="notranslate">
           <!-- 告诉 Google 不提供此页面的翻译 -->
               
           <meta name="google-site-verification" content="verification_token">
           <!-- 验证 Google 搜索控制台的所有权 -->
    
           <meta name="renderer" content="webkit"> 
           <!-- 双核浏览器,用于指定浏览器的渲染内核 【默认webkit内核】-->
    
           <meta name=”Distribution” content="Global">
           <!-- 这个用语声明你网站的发布对象是面向全球,还是仅仅针对当地。 -->
    
           <meta name="applicable-device" content="pc">
           <!-- pc站 -->
           <meta name="applicable-device" content="mobile" />
           <!-- 手机移动站 -->
           <meta name="applicable-device"content="pc,mobile">
           <!-- 不需要经过url自适配跳转就可以根据浏览器的屏幕大小自适应的展现合适的效果,同时适合在移动设备和电脑上进行浏览 即响应式的-->
    
    
    
           <!-- 移动设备 -->
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
              <!--  viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放
               width - viewport的宽度 height - viewport的高度
               initial-scale - 初始的缩放比例
               minimum-scale - 允许用户缩放到的最小比例
               maximum-scale - 允许用户缩放到的最大比例
               user-scalable - 用户是否可以手动缩放 -->
    
           <meta name="format-detection" content="telephone=no,email=no">
           <!-- 禁用自动检测和格式化可能的电话号码 ,即点击数字或邮箱样的字符不会做其他操作。-->
    
           <meta name="HandheldFriendly" content="true">
           <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
           
           <meta name="MobileOptimized" content="320">
           <!-- 微软的老式浏览器 -->
           
           <meta name="screen-orientation" content="portrait">
           <!-- uc强制竖屏 -->
    
           <meta name="x5-orientation" content="portrait">
           <!-- QQ强制竖屏 -->
    
           <meta name="full-screen" content="yes">
           <!-- UC强制全屏 -->
    
           <meta name="x5-fullscreen" content="true">
           <!-- QQ强制全屏 -->
    
           <meta name="browsermode" content="application">
           <!-- UC应用模式 -->
    
           <meta name="x5-page-mode" content="app">
           <!-- QQ应用模式 -->
           
           <meta name="msapplication-tap-highlight" content="no">
           <!-- windows phone 点击无高光 -->
    
    
    展开全文
  • 也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义...html的meta总结meta标签的组成:meta标签共有两个属性,它们分别是http-equiv

    前言

    meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!

    html的meta总结

    meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    1、name属性

    name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    meta标签的name属性语法格式是:

    <meta name="参数"content="具体的参数值">

    其中name属性主要有以下几种参数: 

    A、Keywords(关键字) 

    说明:keywords用来告诉搜索引擎你网页的关键字是什么。

    举例:

    <meta name="keywords"content="meta总结,html meta,meta属性,meta跳转"> 

    B、description(网站内容描述)

    说明:description用来告诉搜索引擎你的网站主要内容。

    举例:

    <meta name="description"content="haorooms博客,html的meta总结,meta是html语言head区的一个辅助性标签。"> 

    C、robots(机器人向导)

    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

    举例:

    <meta name="robots"content="none"> 

    具体参数如下:

    信息参数为all:文件将被检索,且页面上的链接可以被查询;

    信息参数为none:文件将不被检索,且页面上的链接不可以被查询;

    信息参数为index:文件将被检索;

    信息参数为follow:页面上的链接可以被查询;

    信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;

    信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;

    D、author(作者)

    说明:标注网页的作者

    举例:

    <meta name="author"content="root,root@xxxx.com"> 

    E、generator

    <meta name="generator"content="信息参数"/> 

    meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。

    F、COPYRIGHT

    <META NAME="COPYRIGHT"CONTENT="信息参数"> 

    meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。

    G、revisit-after

    <META name="revisit-after"CONTENT="7days"> 

    revisit-after代表网站重访,7days代表7天,依此类推。

    2、http-equiv属性

    http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

    meta标签的http-equiv属性语法格式是:

    <meta http-equiv="参数"content="参数变量值">

    其中http-equiv属性主要有以下几种参数:

    A、Expires(期限)

    说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

    用法:


    注意:必须使用GMT的时间格式。

    B、Pragma(cache模式)

    说明:禁止浏览器从本地计算机的缓存中访问页面内容。

    用法:

    <meta http-equiv="Pragma"content="no-cache"> 

    注意:这样设定,访问者将无法脱机浏览。

    C、Refresh(刷新)

    说明:自动刷新并指向新页面。

    用法:

    <meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com">

    //(注意后面的引号,分别在秒数的前面和网址的后面)
    注意:其中的2是指停留2秒钟后自动刷新到URL网址。

    D、Set-Cookie(cookie设定)

    说明:如果网页过期,那么存盘的cookie将被删除。

    用法:

    <meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> 

    注意:必须使用GMT的时间格式。

    E、Window-target(显示窗口的设定)

    说明:强制页面在当前窗口以独立页面显示。

    用法:

    <meta http-equiv="Window-target"content="_top"> 

    注意:用来防止别人在框架里调用自己的页面。

    F、content-Type(显示字符集的设定)

    说明:设定页面使用的字符集。

    用法:

    <meta http-equiv="content-Type"content="text/html;charset=gb2312"> 

    具体如下:

    meta标签的charset的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;

    meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;

    meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;

    meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;

    meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;

    meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码;

    G、content-Language(显示语言的设定)

    用法:

    <meta http-equiv="Content-Language"content="zh-cn"/> 

    H、Cache-Control指定请求和响应遵循的缓存机制。

    Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

    ly-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消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

    J、Content-Script-Type

    <Meta http-equiv="Content-Script-Type"Content="text/javascript"> 

    W3C网页规范,指明页面中脚本的类型。

    L 页面跳转,只用于IE

    具体请看 http://www.haorooms.com/post/liulanq_think_ie

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 182,862
精华内容 73,144
关键字:

meta标签的属性