首页 >web前端 >html教程 >网站性能之meta标签_html/css_WEB-ITnose

网站性能之meta标签_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:56:061152浏览

meta标签常被html初学者忽略 就是作死,但对于一个网站来说,它十分重要。

  • 定义:提供页面有关的元信息。比如针对搜索引擎和更新频度的关键字和描述。简单地说meta标签和搜索引擎打交道,可以优化网站SEO
  • 格式:
  • head标签内
  • 自闭和标签
  • 浏览器支持:全
  • 属性:
  • content:定义与http-equiz和name有关的元信息 
  • http-equiz:将content关联到http头部
  • name:将content关联到name上
  • scheme:用于指定要用来翻译属性值的方案(h5已放弃
  • charset:便捷设置编码(H5
  • 作用:(讲的都是常用的,或者是有用的以备不时之需
  • 编码设置
  • http-equiz="Content-Type" content=""
  • ex:

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

     

  • 页面语言设置
  • 便于浏览器分类
  • ex: 

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

     

  • 定时刷新与重定向
  • 给不知道的同学提供
  • ex:  

    <meta http-equiz="Refresh" content="10"><meta http-equiz="Refresh" content="10; Url=http://www.ecjtu.net">

     

  • 关键字
  • ex: 

    <meta name="keywords" content="华东交大 华东交通大学 日新网">

     

  • 为搜索引擎提供关键词列表,这对SEO尤其重要!另外网上看见有这样写的

    <Meta name="Keywords" Lang="EN" Content="vacation,greece,sunshine"> 

     

    meta的属性我在前面也写了,并没有lang,任何标准都没有发现。声明语言应使用前面提及的content-language或者在html标签中lang="zh"如此设置
  • 网页内容描述
  • ex:   
  • 当然是用来告诉搜索引擎啦
  • 设置机器人访问权限
  • ex: 

    <meta name="robots" content="NOINDEX,NOFOLLOW">

     

  • 代码来源teambition,可以设置robot/蜘蛛如何登录网站 content的参数有all、none、index、noindex、follow、nofollow。默认是all。
  • 其他设置
  • 如作者,版权
  •  

  • 手机端meta使用(移动端大势所趋!
  • name="viewport"    用来设置手机页面窗口。这个是响应式必备,缩放控制也可以防止布局混乱。
  • width: 宽度,其中device-width表示设备宽度
  • height:高度。device-height
  • initial-scale:设置初始缩放比例
  • minimum-scale:设置最小缩放比例
  • maxmum-scale:设置最大缩放比例
  • user-scalable:设置用户是否能够缩放,默认yes
  • name="format-detection"    检测页面内某些字符串的格式,并限制其行为,其实就是手机号。content="telephone=no" 设置数字不被当做手机号链接识别

  •   

  • 设置iphone浏览器能否全屏浏览
  •    设置iphone safari顶端状态栏的样式  默认为black
  • 参考资料:
  •  https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW1
  • http://www.quirksmode.org/mobile/viewports2.html
  • http://css-tricks.com/snippets/html/responsive-meta-tag/
  •  

     

  • 接下去就是不负责任推荐了,在搜集资料的时候觉得有用就记录了下来,还未测试。
  • cookie设置
  • 代码说明一切可设置选项 
  • ex: 

    <Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">

     

  • 窗口显示设定
  • 可以防止页面别其它页面嵌入哦
  • ex:  Content选项:_blank、_top、_self、_parent, a标签怎么用就怎么用

    <Meta http-equiv="Widow-target" Content="_top">

     

  • RSAC等级评定
  • 可以用来防止网站莫名其妙被当做黄网屏蔽唷
  • ex: 

    <meta http-equiv="Pics-label" content="(PICS-1.1'http://www.rsac.org/ratingsv01.html' I gen comment 'RSACi North America Sever' by 'inet@microsoft.com' for 'http://www.microsoft.com' on '1997.06.30T14:21-0500' r(n0 s0 v0 l0))">

     

  • RSAC的站点:http://www.rsac.org/
  • 缓存控制
  • 只实现了禁止缓存呢
  • 设置缓存的过期时间,格式为GMT ex: 

    <meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0">

     

  • 其它功能
  • 其实IE一些功能应用也多,但终究不是普遍现象,就提供个链接,有兴趣的可以看下
  • http://msdn.microsoft.com/en-us/library/ie/ms533876(v=vs.85).aspx
  •  

     

     

    PS:有些meta功能过于陈旧,chrome下看不见效果,ie下也不想测试了。

    声明:
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn