`

<meta> 元素使用详解

    博客分类:
  • HTML
 
阅读更多

meta标记
  meta标记看似是HTML语言HEAD区的一个辅助性标签,其实它的作用很大。META标签共有两个属性,它们分别是Http-equiv属性和Name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
 1.Name属性
  Name属性主要用于描述网页,与之对应的属性值为Content,Content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
  Meat标签的Name属性语法格式是:
  
<meta name="参数" content="具体的参数值">   
  其中Name属性主要有以下几种参数:
  A.Keywords(关键字)
  说明:Keywords用来告诉搜索引擎你网页的关键字是什么。
  举例:
    
<meta name="keywords" content="science,education,culture,politics,ecnomics relationships,entertaiment,human">   
  B.Description(网站内容描述)
  说明:Description用来告诉搜索引擎你的网站主要内容。
  举例:
  
<meta name="description" content="This page is about the meaning of science, education,culture.">   
  C.Robots(机器人向导)
  说明:Robots用来告诉搜索机器人需要索引的页面有哪些。
  Content的参数有All、None、Index、Noindex、Follow、Nofollow。默认是All。
  举例:
  
<meta name="robots" content="none">  
  D.Author(作者)
  说明:标注网页的作者
  举例:
  
<meta name="author" content="zys666,zys666@21cn.com">  
 2.Http-equiv属性
  Http-equiv,顾名思义,相当于HTTP的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确显示网页内容,与之对应的属性值为Content,Content中的内容其实就是各个参数的变量值。
  Meat标签的Http-equiv属性语法格式是:
 
<meta http-equiv="参数" content="参数变量值">   
  
 其中Http-equiv属性主要有以下几种参数:
  A.Expires(期限) 
  说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
  用法:
<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">  
  注意:必须使用GMT的时间格式。
  B.Pragma(Cache模式)
  说明:禁止浏览器从本地计算机的缓存中访问页面内容。
  用法:
<meta http-equiv="pragma" content="no-cache">   
  注意:这样设定访问者将无法脱机浏览。
  C.Refresh(刷新)
  说明:自动刷新并指向新页面。
  用法:
<meta http-equiv="refresh" content="2;url=http://www.onchina.net">  
  注意:其中的"2"是指停留2秒钟后自动刷新到URL网址,可以更改,但建议不要改得太大。
  D.Set-cookie(Cookie设定)
  说明:如果网页过期,那么存盘的Cookie将被删除。
  用法:
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT;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">     

G.Content-type((进入页面时产生一些特殊效果)
  说明:这些特殊效果只对在 top 中进入的新页面有效。
  用法:
< meta http-equiv="Page-Enter" content= "revealTrans(Duration=5.0,Transition=n)" > 

其中,n的取值范围为0-23,具体的意义如下:

0 矩形缩小 1 矩形扩大 2 圆形缩小  

3 圆形扩大 4 下到上 5 上到下 

6 左到右 7 右到左 8 竖百叶窗 

9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗 

12 点 13 左右到中间 14 中间到左右 

15 中间到上下 16 上下到中间 17 右下到左上 
      18 右上到左下 19 左上到右下 20 左下到右上 
      21 横条 22 竖条 23 以上 
      24种随机选择一种

分享到:
评论

相关推荐

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来...&lt;span&gt;span&lt;/span&gt; &lt;div&gt; &lt;span&gt;span&lt;/span&gt; &lt;a&gt; &lt;span&gt;1&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;a&gt; &lt;spa

    【JavaScript源代码】JavaScript offsetParent案例详解.docx

    JavaScript offsetParent案例详解  1. offsetParent定义:那么offsetParent就是距离该子元素最近的...DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt;

    html入门到放弃笔记

    标记在使用时,用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:&lt;标记&gt;内容&lt;/标记&gt; Demo : 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 ...

    【HTML 元素】标记文字详解

    1.用基本的文字元素标记内容 先看显示效果: ... &lt;!DOCTYPE html&gt;  &lt;... &lt;p&gt; 元素 b —— &lt;b&gt; I am the example.&lt;/b&gt;&lt;/p&gt;  &lt;p&gt; 元素 em —— &lt;em&gt; I am the example.&lt;/e

    自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景,通过详解几种属性让读者更明确自适应布局的注意点,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

    AngularJS ng-bind-template 指令详解

    &lt;p&gt; 元素上绑定两个表达式: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; [removed][removed] &lt;/head&gt; &lt;body&gt; &lt;div ng-app="myApp" ng-bind-template="{{firstName}...

    AngularJS基础 ng-mouseleave 指令详解

    AngularJS ng-mouseleave 指令 AngularJS 实例 在鼠标指针离开元素时执行表达式: &lt;!DOCTYPE html&gt; &lt;...meta charset=utf-8&gt;...&lt;div ng-mouseleave=count ng-init=count&gt;鼠标从我这移开!...&lt;h1&gt;{{c

    html中meta标签及用法详解

    &lt;meta&gt; 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看吧

    AngularJS ng-app 指令实例详解

    AngularJS ng-app 指令 AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: ...&lt;p&gt;我的第一个表达式: {{ 5 + 5 }}&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; 运行结果: 我的第一个表达式:10 定义和用法 ng-

    Bootstrap 按钮样式与使用代码详解

    1. 可用于&lt;a&gt;, &lt;button&gt;, 或 &lt;input&gt; 元素的按钮样式 按钮样式使用: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=Content-Type content=text/html; charset=utf-8/&gt; &lt;...

    vue v-model表单控件绑定详解

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释。 1、v-model 双向绑定文本 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang=en&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;&lt;/title&...

    div+css有实例,易学易懂

    5.6.3 背景属性在内联元素中的使用 5.6.4 背景属性的缩写 5.6.5 页面文本的样式 5.6.6 链接的样式 5.7 布局的基础 5.7.1 布局页面的步骤 5.7.2 使用ID 还是Class 5.7.3 控制内容显示的display 属性 5.7.4 控制内容...

    详解js删除数组中的指定元素

    本篇文章将会给大家介绍两种删除数组中的指定元素的方式,分别为: 1、单独定义一个的函数,通过函数来删除指定数组元素。...meta charset=UTF-8&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=demo

    meta标签在移动平台开发中的应用详解

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?...

    详解vue添加删除元素的方法

    meta charset="UTF-8"&gt; &lt;title&gt;vue实例:添加删除元素r&lt;/title&gt; &lt;style type="text/css"&gt; .form-group{ margin:10px; } .form-group&gt;label{ display: inline-block; width: 5rem; ...

    jQuery的remove()方法使用详解

    说明:remove()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,不过除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。 语法结构: $(selector).remove...

    CSS伪类:before在元素之前 :after 在元素之后实例讲解

    本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下。 :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素...

    jQuery的bind()方法使用详解

    此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用。 语法格式: $...

    js在HTML的三种引用方式详解

    1.内联样式 内联样式分为两种,一是直接写入元素的标签内部 &lt;... &lt;title&gt;js样式内联写法&lt;/title&gt;...meta http-equiv=content-type content=text/html;... &lt;div class=img&gt; ... &gt;&lt;... &lt;/div&gt;

Global site tag (gtag.js) - Google Analytics