您现在的位置是:首页 > 网站制作 > 网站建设网站建设

HTML中meta标签的作用及使用方法

胜于蓝2019-07-30【网站建设】人已围观

简介一、meta标签的定义meta标签是head部的一个辅助性标签,提供关于 HTML 文档的元数据。它并不会显示在页面上,但对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索

一、meta标签的定义AoT胜于蓝|优秀个人博客

meta标签是head部的一个辅助性标签,提供关于 HTML 文档的元数据。它并不会显示在页面上,但对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(SEO),或其他 web 服务。AoT胜于蓝|优秀个人博客

二、meta标签的作用AoT胜于蓝|优秀个人博客

meta标签里的数据是供机器解读的,其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等等。AoT胜于蓝|优秀个人博客

三、meta标签的可选属性AoT胜于蓝|优秀个人博客

在W3school中,对于meta标签的可选属性提到了三个,分别是http-equiv、name和scheme,新近又出了一个property属性,下面我们一个个介绍:AoT胜于蓝|优秀个人博客

1、http-equiv属性AoT胜于蓝|优秀个人博客

http-equiv属性是添加http头部内容,对一些自定义的或者需要额外添加的发送到浏览器中的http头部内容,我们就可以是使用这个属性。AoT胜于蓝|优秀个人博客

http-equiv属性语法格式:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="参数" content="具体的参数值">

name属性主要有以下几种参数:AoT胜于蓝|优秀个人博客

a、charsetAoT胜于蓝|优秀个人博客

说明:用以说明网页制作所使用的文字以及语言。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="charset" content="iso-8859-1">

b、expiresAoT胜于蓝|优秀个人博客

说明:设置网页的过期时间,一旦过期则必须到服务器上重新获取。需要注意的是必须使用GMT时间格式AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="expires" content="31 Dec 2018">

c、refreshAoT胜于蓝|优秀个人博客

说明:用于设定网页在特定时间内自动刷新并转到新页面AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="refresh" contect="5;url=https://zx201.com">

d、pragmaAoT胜于蓝|优秀个人博客

说明:用于设定禁止浏览器从本地计算机的缓存中访问页面内容。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="pragma" contect="no-cache">

e、windows-targetAoT胜于蓝|优秀个人博客

说明:用于设定强制页面在窗口中以独立页面显示,防止自己的网页被别人当作一个frame页调用。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="windows-target" contect="_top">

f、set-cookieAoT胜于蓝|优秀个人博客

说明:用于设定一个自定义cookie,如果网页过期,那么存盘的cookie将被删除,注意必须使用GMT的时间格式。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="Set-Cookie" content="name=deanhan; expires=Friday,12-Jan-2018 18:18:18 GMT; path=/">

g、content-TypeAoT胜于蓝|优秀个人博客

说明:用于设定页面使用的字符集。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta http-equiv="content-Type" content="text/html; charset=utf-8">

h、page-enter,page-exitAoT胜于蓝|优秀个人博客

说明:用于设定页面进入和离开时的过渡效果,注意被添加的页面不能在一个frame中。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1AoT胜于蓝|优秀个人博客
2
<meta http-equiv="page-enter" contect="revealTrans(duration=10,transtion=23)">AoT胜于蓝|优秀个人博客
<meta http-equiv="page-exit" contect="revealTrans(duration=20,transtion=6)">

其中duration表示滤镜特效的持续时间(单位:秒),transition是滤镜类型,表示使用哪种特效,取值为0-23:AoT胜于蓝|优秀个人博客

0 矩形缩小AoT胜于蓝|优秀个人博客

1 矩形扩大AoT胜于蓝|优秀个人博客

2 圆形缩小AoT胜于蓝|优秀个人博客

3 圆形扩大AoT胜于蓝|优秀个人博客

4 下到上刷新AoT胜于蓝|优秀个人博客

5 上到下刷新AoT胜于蓝|优秀个人博客

6 左到右刷新AoT胜于蓝|优秀个人博客

7 右到左刷新AoT胜于蓝|优秀个人博客

8 竖百叶窗AoT胜于蓝|优秀个人博客

9 横百叶窗AoT胜于蓝|优秀个人博客

10 错位横百叶窗AoT胜于蓝|优秀个人博客

11 错位竖百叶窗AoT胜于蓝|优秀个人博客

12 点扩散AoT胜于蓝|优秀个人博客

13 左右到中间刷新AoT胜于蓝|优秀个人博客

14 中间到左右刷新AoT胜于蓝|优秀个人博客

15 中间到上下AoT胜于蓝|优秀个人博客

16 上下到中间AoT胜于蓝|优秀个人博客

17 右下到左上AoT胜于蓝|优秀个人博客

18 右上到左下AoT胜于蓝|优秀个人博客

19 左上到右下AoT胜于蓝|优秀个人博客

20 左下到右上AoT胜于蓝|优秀个人博客

21 横条AoT胜于蓝|优秀个人博客

22 竖条AoT胜于蓝|优秀个人博客

23 以上22种随机选择一种AoT胜于蓝|优秀个人博客

2、name属性AoT胜于蓝|优秀个人博客

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

name属性语法格式:AoT胜于蓝|优秀个人博客

1 <meta name="参数" content="具体的参数值">

name属性主要有以下几种参数:AoT胜于蓝|优秀个人博客

a、keywordsAoT胜于蓝|优秀个人博客

说明:keywords用来告诉搜索引擎你网页的关键字是什么。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="keywords" content="逐梦博客,个人博客,个人网站">

b、descriptionAoT胜于蓝|优秀个人博客

说明:description用来告诉搜索引擎你的网站主要内容。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="description" content="逐梦博客,是一个记录博主学习和成长的个人纪实博客,主要关注web前端及周边技术的学习和研究。">

c、robotsAoT胜于蓝|优秀个人博客

说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。AoT胜于蓝|优秀个人博客

content的参数有all,none,index,noindex,follow,nofollow。默认是all。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="robots" content="none">

其中content具体参数如下:AoT胜于蓝|优秀个人博客

1) all:文件将被检索,且页面上的链接可以被查询AoT胜于蓝|优秀个人博客

2) none:文件将不被检索,且页面上的链接不可以被查询AoT胜于蓝|优秀个人博客

3) index:文件将被检索AoT胜于蓝|优秀个人博客

4) follow:页面上的链接可以被查询AoT胜于蓝|优秀个人博客

5) noindex:文件将不被检索,但页面上的链接可以被查询AoT胜于蓝|优秀个人博客

6) nofollow:文件将被检索,但页面上的链接不可以被查询AoT胜于蓝|优秀个人博客

d、authorAoT胜于蓝|优秀个人博客

说明:author标注网页的作者AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="author" content="826554003@qq.com">

e、generatorAoT胜于蓝|优秀个人博客

说明:generator用于说明网站的采用的什么软件制作。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="generator" content="Sublime"/>

f、copyrightAoT胜于蓝|优秀个人博客

说明:generator用于说明网站版权信息。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="copyright" content="xxx">

g、viewportAoT胜于蓝|优秀个人博客

说明:viewport用于说明移动端网站的宽高缩放比例等信息AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="viewport" content="width=device-width, initial-scale=1.0">

其中content的距离参数如下:AoT胜于蓝|优秀个人博客

1) width 宽度(数值/device-width)AoT胜于蓝|优秀个人博客

2) height 高度(数值/device-height)AoT胜于蓝|优秀个人博客

3) initial-scale 初始缩放比例AoT胜于蓝|优秀个人博客

4) maximum-scale 最大缩放比例AoT胜于蓝|优秀个人博客

5) minimum-scale 最小缩放比例AoT胜于蓝|优秀个人博客

6) user-scalable 是否允许用户缩放(yes/no)AoT胜于蓝|优秀个人博客

f、rendererAoT胜于蓝|优秀个人博客

说明:用于告诉浏览器使用什么内核进行解析AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta name="renderer" content="webkit">

3、schemeAoT胜于蓝|优秀个人博客

说明:用于指定要用来翻译属性值的方案。此方案应该在由 标签的 profile 属性指定的概况文件中进行了定义。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1 <meta scheme="ISBN" name="identifier" content="0-14-XXXXXX-1" >

4、property="og"AoT胜于蓝|优秀个人博客

说明:og是一种新的HTTP头部标记,即Open Graph Protocol,这种协议可以让网页成为一个“富媒体对象"。用了property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用。AoT胜于蓝|优秀个人博客
SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。AoT胜于蓝|优秀个人博客

用法:AoT胜于蓝|优秀个人博客

1AoT胜于蓝|优秀个人博客
2AoT胜于蓝|优秀个人博客
3AoT胜于蓝|优秀个人博客
4AoT胜于蓝|优秀个人博客
5
<meta property="og:type" content="video/website/article"/>AoT胜于蓝|优秀个人博客
<meta property="og:title" content="逐梦博客"/>AoT胜于蓝|优秀个人博客
<meta property="og:description" content="逐梦博客,是一个记录博主学习和成长的个人纪实博客,主要关注web前端及周边技术的学习和研究。"/>AoT胜于蓝|优秀个人博客
<meta property="og:image" content="https://www.deanhan.cn/wp-content/uploads/2017/09/logo.png″/>AoT胜于蓝|优秀个人博客
<meta property="og:url" content="https://www.deanhan.cn/"/>

最后列出一些比较常见的用法:AoT胜于蓝|优秀个人博客

1AoT胜于蓝|优秀个人博客
2AoT胜于蓝|优秀个人博客
3AoT胜于蓝|优秀个人博客
4AoT胜于蓝|优秀个人博客
5AoT胜于蓝|优秀个人博客
6AoT胜于蓝|优秀个人博客
7AoT胜于蓝|优秀个人博客
8AoT胜于蓝|优秀个人博客
9AoT胜于蓝|优秀个人博客
10AoT胜于蓝|优秀个人博客
11AoT胜于蓝|优秀个人博客
12AoT胜于蓝|优秀个人博客
13AoT胜于蓝|优秀个人博客
14AoT胜于蓝|优秀个人博客
15AoT胜于蓝|优秀个人博客
16AoT胜于蓝|优秀个人博客
17AoT胜于蓝|优秀个人博客
18AoT胜于蓝|优秀个人博客
19AoT胜于蓝|优秀个人博客
20AoT胜于蓝|优秀个人博客
21AoT胜于蓝|优秀个人博客
22AoT胜于蓝|优秀个人博客
23AoT胜于蓝|优秀个人博客
24AoT胜于蓝|优秀个人博客
25AoT胜于蓝|优秀个人博客
26AoT胜于蓝|优秀个人博客
27AoT胜于蓝|优秀个人博客
28AoT胜于蓝|优秀个人博客
29AoT胜于蓝|优秀个人博客
30AoT胜于蓝|优秀个人博客
31AoT胜于蓝|优秀个人博客
32AoT胜于蓝|优秀个人博客
33AoT胜于蓝|优秀个人博客
34AoT胜于蓝|优秀个人博客
35AoT胜于蓝|优秀个人博客
36AoT胜于蓝|优秀个人博客
37AoT胜于蓝|优秀个人博客
38AoT胜于蓝|优秀个人博客
39AoT胜于蓝|优秀个人博客
40AoT胜于蓝|优秀个人博客
41AoT胜于蓝|优秀个人博客
42AoT胜于蓝|优秀个人博客
43AoT胜于蓝|优秀个人博客
44AoT胜于蓝|优秀个人博客
45AoT胜于蓝|优秀个人博客
46AoT胜于蓝|优秀个人博客
47AoT胜于蓝|优秀个人博客
48AoT胜于蓝|优秀个人博客
49AoT胜于蓝|优秀个人博客
50AoT胜于蓝|优秀个人博客
51AoT胜于蓝|优秀个人博客
52AoT胜于蓝|优秀个人博客
53AoT胜于蓝|优秀个人博客
54AoT胜于蓝|优秀个人博客
55AoT胜于蓝|优秀个人博客
56AoT胜于蓝|优秀个人博客
57AoT胜于蓝|优秀个人博客
58AoT胜于蓝|优秀个人博客
59AoT胜于蓝|优秀个人博客
60
<!-- 设定字符集 -->AoT胜于蓝|优秀个人博客
<meta charset="utf-8">AoT胜于蓝|优秀个人博客
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 页面关键词 keywords -->AoT胜于蓝|优秀个人博客
<meta name="keywords" content="your keywords">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 页面描述内容 description -->AoT胜于蓝|优秀个人博客
<meta name="description" content="your description">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 定义网页作者 author -->AoT胜于蓝|优秀个人博客
<meta name="author" content="author,email address">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 -->AoT胜于蓝|优秀个人博客
<meta name="robots" content="index,follow">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 优先使用最新的chrome版本 -->AoT胜于蓝|优秀个人博客
<meta http-equiv="X-UA-Compatible" content="chrome=1" />AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 禁止自动翻译 -->AoT胜于蓝|优秀个人博客
<meta name="google" value="notranslate">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 禁止转码 -->AoT胜于蓝|优秀个人博客
<meta http-equiv="Cache-Control" content="no-transform">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 选择使用的浏览器解析内核 -->AoT胜于蓝|优秀个人博客
<meta name="renderer" content="webkit|ie-comp|ie-stand">AoT胜于蓝|优秀个人博客
 AoT胜于蓝|优秀个人博客
<!-- 移动端 -->AoT胜于蓝|优秀个人博客
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />AoT胜于蓝|优秀个人博客
<meta name="apple-mobile-web-app-capable" content="yes" />AoT胜于蓝|优秀个人博客
<meta name="apple-mobile-web-app-status-bar-style" content="black" />AoT胜于蓝|优秀个人博客
<meta name="format-detection"content="telephone=no, email=no" />AoT胜于蓝|优秀个人博客
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />AoT胜于蓝|优秀个人博客
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->AoT胜于蓝|优秀个人博客
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->AoT胜于蓝|优秀个人博客
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->AoT胜于蓝|优秀个人博客
<!-- 启用360浏览器的极速模式(webkit) -->AoT胜于蓝|优秀个人博客
<meta name="renderer" content="webkit">AoT胜于蓝|优秀个人博客
<!-- 避免IE使用兼容模式 -->AoT胜于蓝|优秀个人博客
<meta http-equiv="X-UA-Compatible" content="IE=edge">AoT胜于蓝|优秀个人博客
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->AoT胜于蓝|优秀个人博客
<meta name="HandheldFriendly" content="true">AoT胜于蓝|优秀个人博客
<!-- 微软的老式浏览器 -->AoT胜于蓝|优秀个人博客
<meta name="MobileOptimized" content="320">AoT胜于蓝|优秀个人博客
<!-- uc强制竖屏 -->AoT胜于蓝|优秀个人博客
<meta name="screen-orientation" content="portrait">AoT胜于蓝|优秀个人博客
<!-- QQ强制竖屏 -->AoT胜于蓝|优秀个人博客
<meta name="x5-orientation" content="portrait">AoT胜于蓝|优秀个人博客
<!-- UC强制全屏 -->AoT胜于蓝|优秀个人博客
<meta name="full-screen" content="yes">AoT胜于蓝|优秀个人博客
<!-- QQ强制全屏 -->AoT胜于蓝|优秀个人博客
<meta name="x5-fullscreen" content="true">AoT胜于蓝|优秀个人博客
<!-- UC应用模式 -->AoT胜于蓝|优秀个人博客
<meta name="browsermode" content="application">AoT胜于蓝|优秀个人博客
<!-- QQ应用模式 -->AoT胜于蓝|优秀个人博客
<meta name="x5-page-mode" content="app">AoT胜于蓝|优秀个人博客
<!-- windows phone 点击无高光 -->AoT胜于蓝|优秀个人博客
<meta name="msapplication-tap-highlight" content="no">AoT胜于蓝|优秀个人博客
<!-- 适应移动端end -->

Tags:

很赞哦! ()

文章评论

当前时间

合作加盟

  • 快钱POSS机
  • 费率:0.038%(刷1万=38元手续费)
  • 单笔最高刷卡金额:5万
  • 单月最高刷卡金额:600万

快钱代理公告

  • 凡事扫码代理必须实名认证
  • 实名认证后才可拉进代理微信群
  • 代理微信群有相关活动政策等

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计986篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们