美文网首页饥人谷技术博客
HTML 中常用的 meta 元素

HTML 中常用的 meta 元素

作者: 流光号船长 | 来源:发表于2017-03-08 23:06 被阅读0次

    (以html5文档为基准)

    1. name属性

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

    meta标签的name属性语法格式是:<meta name="参数"content="具体的参数值">

    • 页面关键字

    每个网页应具有描述该网页内容的一组唯一的关键字。
    使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。
    <meta name="keywords" content="壁纸 音乐 电影 吉他" />

    • 页面描述

    页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
    <meta name="description" content="全球最大同性交友网站" />

    • 搜索引擎索引方式

    有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法:一个是robots.txt,另一个是The Robots META标签。

    <meta name="Robots" contect="all|none|index|noindex|follow|nofollow">  
    <!--
    默认是all其中的属性说明如下: 
    设定为all:文件将被检索,且页面上的链接可以被查询; 
    设定为none:文件将不被检索,且页面上的链接不可以被查询; 
    设定为index:文件将被检索; 
    设定为follow:页面上的链接可以被查询; 
    设定为noindex:文件将不被检索,但页面上的链接可以被查询; 
    设定为nofollow:文件将不被检索,页面上的链接可以被查询。
    -->
    
    • 声明作者

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

    • 浏览器内核选择

    国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。
    <meta name="renderer" content="webkit|ie-comp|ie-stand">

    2. http-equiv属性

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

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

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

    • 优先使用 IE 最新版本和 Chrome

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 关于X-UA-Compatible -->
    <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
    <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
    <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
    
    • 页面重定向和刷新

    content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。
    <meta http-equiv="refresh" content="0;url=" />

    • 设定期限

    可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
    <metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT">
    注意:必须使用GMT的时间格式。

    • Pragma(cache模式)

    禁止浏览器从本地计算机的缓存中访问页面内容。这样设定,访问者将无法脱机浏览。
    <metahttp-equiv="Pragma"content="no-cache">

    • 自动刷新并指向新页面。

    用法:<metahttp-equiv="Refresh"content="2;URL=http://www.jb51.net">
    2是指停留2秒钟后自动刷新到URL网址。

    • Set-Cookie(cookie设定)

    如果网页过期,那么存盘的cookie将被删除。
    用法(必须使用GMT时间格式)

    <metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> 
    
    • 设定显示的语言

    用法::<metahttp-equiv="Content-Language"content="zh-cn"/>

    3. 特殊

    • 声明编码H5最新写法

    <meta charset='utf-8' />

    相关文章

      网友评论

        本文标题:HTML 中常用的 meta 元素

        本文链接:https://www.haomeiwen.com/subject/gnyigttx.html