html5 中 meta 标签的使用

目录:

1、定义

2、用法

  2.1 设置网页的定时跳转

  2.2 设定有效日期

  2.3 禁止从缓存中调用

  2.4 删除过期的cookie

  2.5 注明作者、网页描述

内容

1、定义

  <meta>元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。

  <meta>标签位于文档的头部,不包含任何内容,多是键值对。

2、内容

2.1 设置网页的定时跳转

  在该语法中,refresh表示网页的刷新,而在content中设置刷新的时间和刷新之后的重新链接地址。默认情况下,跳转的时间是以秒为单位的。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
    <title>设置网页的定时跳转</title>
</head>
<body>
    本页面在3秒之后将自动跳转到百度首页
</body>
</html>

2.2 设定有效日期

  在某些网站上会设置网页的到期时间,一旦过期则必须到服务器上重新调用。

  在该语法中,到期的时间必须是GMT格式。即星期 日 月 年 时 分 秒。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="expires" content="Wed,14 september 2017 16:20:00 GMT"/>
    <title>设置有效期限</title>
</head>
<body>
</body>
</html>

2.3 禁止从缓存中调用

  使用网页缓存可以加快网页的浏览速度,但是如果网页的内容经常更新,网页制作者希望用户随时都能够查到最新的网页内容,则可以通过meta语句禁止网页缓存

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache"/>
    <title>禁止从缓存中调用</title>
</head>
<body>
</body>
</html>

2.4 删除过期的cookie

  如果网页过期,则删除存盘的cookie

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="set-cookie" content="Web,14 september 2017 16:20:00 GMT"/>
    <title>删除过期的cookie</title>
</head>
<body>
</body>
</html>

2.5  注明作者、网页描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="Cassie" />
    <meta name="description" content="test" />
    <title>注明作者、网页描述</title>
</head>
<body>
</body>
</html>
时间: 2024-07-29 12:39:14

html5 中 meta 标签的使用的相关文章

HTML中&lt;meta&gt;标签如何正确使用

如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少<meta>元素.对于网页而言,<meta>元素是必不可少的.我们在创建一个html5文档时,就会发现类似于<meta charset="UTF-8">这样的标签,来规定解析文档的字符类型.那么,它还有哪些作用呢?下面,我将一探究竟!我会通过下面几个部分来讲解,如果你希望直接看后面部分的内容,可以直接点击下面的

HTML中&lt;meta&gt; 标签的用法

<meta> 标签位于<head></head>标签中,用来提供页面的元信息. 1.设置页面的字符集 <meta charset="UTF-8"> 2.设置网页的描述 <meta name="description" content="HTML5的meta标签"> 3.设置网页的关键词 <meta name="keyword" content="HTM

HTML中&lt;meta&gt;标签的使用

HTML中<meta>标签的使用 <meta>标签基本介绍 <meta>标签是HTML网页源代码中一个重要的html标签.META便签用来描述一个HTML网页文档的属性,例如作者.日期.关键词.页面刷新.除此之外<meta>标签用于搜索引擎优化(SEO).它位于HTML文档中<head>元素内,虽然它提供的信息不可见,但它却是文档最基本的元信息. <meta>标签的属性列举 <meta>标签中属性可以分为必选属性和可选的属

HTML中meta标签作用及属性总结

在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作用. meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! meta标签共有两个属性,它们分别是http-equiv属性和name属性. 1.http-equ

HTML中META标签一些用法

你的个人网站做得再精彩,在如此庞大的网络空间,被人发现实属不易.那么如何推广个人网站,人们一般会这样做: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站的链接 ● 在论坛中发帖子宣传你的个人网站 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性! META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以

HTML5头部&lt;meta&gt;标签常用信息

查找总结了一些HTML5头部<meta>标签常用信息,有错误的,敬请留言指正,或可以留言补充,欢迎留言交流! <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <meta name="keywords" content="" /> <!-- 说明 --> <meta name="description&qu

html中meta标签及用法理解

自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不多说了,开始今天的主题. Html中meta标签 一.meta标签 含义 <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性

HTML5中&lt;template&gt;标签的详细介绍

HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: 1 2 3 <script type="text/template"> /

好程序员web前端分享html中meta标签及用法详解

好程序员web前端分享html中meta标签及用法详解,这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看,Html中meta标签一.meta标签 含义 <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性定义了与文档相关联的名称/值对.二.meta 中常用属性 charset? (字符集) 说明:规