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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tags:

很赞哦! ()

文章评论

当前时间

快速排名

  • 网站建设|万词霸屏,企业软文推广,刷下拉框
  • 快速排名:不用再等SEO三个月,只需3-7天即可把行业关键词覆盖百度搜索引擎首页,点击不收费,排名报表,真实访问量报表一目了然。

合作加盟

  • 扫码请注明来意,否则不会通过
  • 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
  • 扫码成为快钱代理
  • 扫码加站长微信,为您推荐快钱总部负责人
  • 快钱POSS机(电签版)
  • 1,免押版:签约费率快捷交易0.38%,常规交易0.65%
  • 贷记卡单笔≥3000元视为激活
  • 2,,有押版:签约快捷交易0.38%,常规交易0.65%
  • 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
  • 电签版ipos参与每月扶持奖励
  • 电签版ipos与Mpos单独考核台均
  • 30台以上有效激活奖励3000元扶持金
  • 当月交易额≥3000元的为活跃用户

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计7074篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 扫描二维码:请注明来意,否则不会通过
  • 微信号:扫描二维码,关注我们
歌名 - 歌手
0:00