`

<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种随机选择一种

分享到:
评论

相关推荐

    meta标签详解

    在网页开发过程中,正确使用`&lt;meta&gt;`标签对于确保页面的兼容性、搜索引擎优化(SEO)以及用户访问体验具有重要意义。本文将详细介绍`&lt;meta&gt;`标签的各种属性及其用途,并通过实例帮助读者更好地理解如何在实际项目中...

    HTML5 对各个标签的定义与规定:section

    3. **合理选择元素**:在选择使用`&lt;section&gt;`之前,请确保它是最合适的元素。例如,如果是侧边栏或导航栏,应该使用`&lt;aside&gt;`或`&lt;nav&gt;`标签。 #### 四、示例代码解析 以下是一个简单的HTML5示例,展示了如何使用`...

    实验1.pdf

    1. 使用 `&lt;meta&gt;` 元素设置字符集、 viewport、关键词、描述等信息。 2. 使用 `&lt;title&gt;` 元素设置网页的标题。 3. 使用 `&lt;style&gt;` 元素设置 CSS 样式。 4. 使用 `&lt;body&gt;` 元素的属性设置网页的背景颜色、文本颜色等...

    HTML5 对各个标签的定义与规定:meta

    `&lt;meta&gt;`标签通常位于`&lt;head&gt;`部分,它可以为空元素,意味着它没有结束标签。例如: ```html &lt;meta charset="UTF-8"&gt; ``` #### 二、`&lt;meta&gt;`标签的主要属性 `&lt;meta&gt;`标签有以下几种重要的属性: 1. **`name`属性*...

    网页设计中meta详解

    在网页设计中,`&lt;meta&gt;` 标签扮演着至关重要的角色。它是 HTML5 文档类型中的一个元素,用于提供关于文档的各种元信息,这些信息包括网页的字符编码、描述、关键词、重定向、刷新等。`&lt;meta&gt;` 标签通常位于 `&lt;head&gt;`...

    HTML的基本标签是构成网页内容结构的基础元素,下面是一些常见的HTML基本标签

    * `&lt;li&gt;`:列表项,在`&lt;ul&gt;`或`&lt;ol&gt;`内部使用。 图片标签 * `&lt;img&gt;`:插入图像,src 属性指定图片源文件路径。 块级元素与内联元素 * 块级元素(如`&lt;div&gt;`)默认独占一行,可以设置宽度、高度和外边距等属性。 *...

    html中级.docx编程资料

    通过本篇教程的学习,我们不仅加深了对`&lt;span&gt;`与`&lt;div&gt;`的理解,还掌握了`&lt;meta&gt;`标签在网页SEO优化中的重要性,以及如何更灵活地使用表格元素。这些进阶技巧将进一步提升我们在前端开发领域的技能水平。

    html笔记.docx

    &lt;meta name="description" content="这是一个简单的网页"&gt; &lt;meta name="keywords" content="HTML,CSS,JavaScript"&gt; &lt;meta name="author" content="张三"&gt; ``` - `&lt;style&gt;`:定义内嵌样式。 - 示例: ```html ...

    html详解,让你从新手变高手

    此外,还有&lt;table&gt;、&lt;tr&gt;、&lt;td&gt;用于创建表格,&lt;div&gt;作为布局容器,&lt;form&gt;、&lt;input&gt;、&lt;button&gt;等用于构建表单元素。 学习HTML的同时,你还需要理解HTML5的新特性,如语义化标签如&lt;header&gt;、&lt;nav&gt;、&lt;section&gt;、...

    HTML5 对各个标签的定义与规定:aside

    1. **位置灵活性**:`&lt;aside&gt;`元素可以在页面中的任何位置使用,并且它可以包含在`&lt;article&gt;`、`&lt;section&gt;`或直接包含在`&lt;body&gt;`标签中。 2. **语义化**:使用`&lt;aside&gt;`时要注意保持良好的语义化,确保其内容真正...

    [Java.Web培训视频]_001.HTML常见标签深入详解

    8. 框架标签:`&lt;frameset&gt;`和`&lt;frame&gt;`用于创建框架布局,但现代Web开发中已较少使用,更推荐使用CSS布局。 9. 表单标签:`&lt;form&gt;`定义表单,`&lt;input&gt;`用于输入数据,有多种类型如文本、密码、提交按钮等,`&lt;label&gt;...

    HTML练习题

    为了实现这一目标,我们可以使用`&lt;span&gt;`元素来包裹需要变红的文字,并应用内联样式来设置颜色和字号。 **示例代码:** ```html &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;HTML...

    HTML语法详解.txt

    - **`&lt;meta&gt;`**:定义元数据,如字符集、刷新时间等。 - **`&lt;noscript&gt;`**:定义在客户端脚本未启用或不支持时显示的内容。 ### 总结 以上介绍了一些基本的HTML标签及其用法,这些标签构成了HTML文档的核心部分。...

    HTML常用标签以及常用技巧等说明

    - 有序列表:`&lt;ol&gt;`,同样使用`&lt;li&gt;`表示列表项,可以通过`type`属性改变编号样式。 ##### 14. 其他标签 - `&lt;span&gt;`:一般用于样式处理。 - `&lt;strong&gt;`:表示重要的文字。 - `&lt;em&gt;`:强调文字,通常表现为斜体。 -...

    网页设计HTML基础.pdf

    - 使用`&lt;ul&gt;`和`&lt;li&gt;`来构建导航菜单。 - 示例: ```html &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;产品&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;服务&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;&lt;/li&gt; &lt;/...

    html网页制作详解案例.zip

    在HTML中,我们使用各种元素(`&lt;element&gt;`)来表示不同的内容类型,例如`&lt;h1&gt;`到`&lt;h6&gt;`定义标题,`&lt;p&gt;`定义段落,`&lt;a&gt;`创建链接,`&lt;img&gt;`插入图像,`&lt;ul&gt;`和`&lt;ol&gt;`创建无序和有序列表,`&lt;div&gt;`用于分组内容等。元素...

    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

    html标签大全标签用法详解

    对于响应式设计,可以利用`&lt;meta&gt;`标签的`viewport`属性和媒体查询(`@media`)来适应不同设备。 表单元素:`&lt;form&gt;`用于创建表单,`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`和`&lt;button&gt;`则用于输入数据、文本区域、...

Global site tag (gtag.js) - Google Analytics