zoukankan      html  css  js  c++  java
  • 前端开发中的 meta 整理

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

    属性介绍

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

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

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

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

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

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

    2.description(网站内容描述)。说明:description用来告诉搜索引擎你的网站主要内容。

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

    3.robots(机器人向导)。说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

               content的参数有all,none,index,noindex,follow,nofollow。默认是all。

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

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

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

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

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

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

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

    4.author(作者)。说明:标注网页的作者。

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

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

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

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

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

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

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

    http-equiv属性

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

    格式为:

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

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

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

    <meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 

    2.Pragma(cache模式)。说明:禁止浏览器从本地计算机的缓存中访问页面内容。

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

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

    3.Refresh(刷新)。说明:自动刷新并指向新页面。

    注意:其中的2是指停留2秒钟后自动刷新到URL网址。

    <meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> //(注意后面的引号,分别在秒数的前面和网址的后面) 

    4.Set-Cookie(cookie设定)。说明:如果网页过期,那么存盘的cookie将被删除。

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

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

    5.Window-target(显示窗口的设定)。说明:强制页面在当前窗口以独立页面显示。

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

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

    6.content-Type(显示字符集的设定)。说明:设定页面使用的字符集。

      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时,代表世界通用的语言编码;

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

    7.content-Language(显示语言的设定)。

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

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

    9.http-equiv="imagetoolbar。指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

    <meta http-equiv="imagetoolbar"content="false"/> 

    10.Content-Script-Type。W3C网页规范,指明页面中脚本的类型。

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

    在了解Viewport。

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。等等。

    Viewport 基础

    一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

    width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
    height:和 width 相对应,指定高度。
    initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
    maximum-scale:允许用户缩放到的最大比例。
    minimum-scale:允许用户缩放到的最小比例。
    user-scalable:用户是否可以手动缩放

    content 参数:

    width: viewport 宽度(数值/device-width)

    height: viewport 高度(数值/device-height) initial-scale:

    初始缩放比例 maximum-scale:

    最大缩放比例 minimum-scale:

    最小缩放比例 user-scalable:

    是否允许用户缩放(yes/no)

    简单说一嘴,网上有很多关于Viewport的介绍在这里就不一 一介绍了。

    不说废话,直接上meta

    一些特殊浏览器设置:

    QQ强制竖屏

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

    QQ强制全屏

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

    QQ应用模式

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

    QQ手机锁定屏幕在特定方向

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

    UC强制竖屏

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

    UC强制全屏

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

    UC应用模式

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

    UC手机浏览器将屏幕锁定在特定的方向。

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

    UC手机浏览器当页面有太多文字时禁止缩放

    <meta name="wap-font-scale" content="no">

    UC应用模式,默认将全屏,禁止长按菜单,禁止手势,标准排版,强制图片显示

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

    360浏览器的极速模式(webkit)。

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

    360选择使用的浏览器解析内核。

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

    Google,禁止自动翻译。

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

    windows phone 点击无高光 。

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

    Windows 8 磁贴颜色。

    <meta name="msapplication-TileColor" content="#000"/>

    Windows 8 磁贴图标。

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

    针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓。

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

    老浏览器IE。避免IE使用兼容模式。

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

    设置屏幕缩放。

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

    还有好多

    .

  • 相关阅读:
    Calling a parent window function from an iframe
    JSON with Java
    Posting array of JSON objects to MVC3 action method via jQuery ajax
    What's the difference between jquery.js and jquery.min.js?
    jquery loop on Json data using $.each
    jquery ui tabs详解(中文)
    DataTables warning requested unknown parameter
    Datatables 1.10.x在命名上与1.9.x
    jQuery 1.x and 2.x , which is better?
    DataTabless Add rows
  • 原文地址:https://www.cnblogs.com/chen527/p/9592661.html
Copyright © 2011-2022 走看看