1.meta标签的作用

1.搜索引擎优化(SEO)

2.定义页面使用语言

3.自动刷新并指向新的页面

4.实现网页转换时的动态效果

5.控制页面缓冲

6.网页定级评价

7.控制网页显示的窗口

meta标签常用的属性有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

2.meta 的使用

name属性

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

meta标签的name属性语法格式是:

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

1.Keywords(关键字) 

keywords用来告诉搜索引擎你网页的关键字是什么

<meta name="keywords"content="雅思学习哪家好">

2.description(网站内容描述)

description用来告诉搜索引擎你的网站主要内容。

<meta  name="description"content="雅思学习哪家好">

3.author(作者)

标注网页的作者

<meta name="author" content="root,root@xxxx.com">

4.renderer(渲染)

用于告诉浏览器使用什么内核进行解析

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

5.generator

代表说明网站的采用的什么软件制作

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

6.viewport(视图模式)

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>// width 宽度(数值/device-width)
//height 高度(数值/device-height)
// initial-scale 初始缩放比例
// maximum-scale 最大缩放比例
// minimum-scale 最小缩放比例
// user-scalable 是否允许用户缩放(yes/no)

http-equiv属性

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是:

<meta http-equiv="参数"content="参数变量值">

1.content-Type(显示字符集的设定)

设定页面使用的字符集。

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

2.Expires(期限)

可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

<meta http-equiv="expires"content="Fri,01Jan202018:18:18GMT">

3.Refresh(刷新)

自动刷新并指向新页面。

<meta http-equiv="refresh" contect="5;url=https://www.baidu.cn">

4.Pragma(cache模式)

用于设定禁止浏览器从本地计算机的缓存中访问页面内容。

<meta http-equiv="Pragma" content="no-cache">

5.Window-target(显示窗口的设定)

用于设定强制页面在窗口中以独立页面显示,防止自己的网页被别人当作一个frame页调用。

<meta http-equiv="windows-target" contect="_blank">

6.X-UA-Compatible(浏览模式)

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

7.Set-Cookie(cookie设定)

用于设定一个自定义cookie,如果网页过期,那么存盘的cookie将被删除,注意必须使用GMT的时间格式。

<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">

8.content-Language(显示语言的设定)

<meta http-equiv="Content-Language" content="zh-cn"/>

9.copyright(网站版权信息)

<meta http-equiv="Copyright" content="RSHY"/>

10.Robots

告诉搜索引擎机器人抓取哪些页面

<meta name="Robots" contect="all">// 信息参数为all:文件将被检索,且页面上的链接可以被查询;
// 信息参数为none:文件将不被检索,且页面上的链接不可以被查询;
// 信息参数为index:文件将被检索;
// 信息参数为follow:页面上的链接可以被查询;
// 信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;
// 信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;

11.page-enter,page-exit

用于设定页面进入和离开时的过渡效果,注意被添加的页面不能在一个frame中。

<meta http-equiv="page-enter" contect="revealTrans(duration=10,transtion=23)">
<meta http-equiv="page-exit" contect="revealTrans(duration=20,transtion=6)">// 其中duration表示滤镜特效的持续时间(单位:秒),transition是滤镜类型,表示使用哪种特效,取值为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 以上22种随机选择一种

meta 标签的使用以及作用相关推荐

  1. [html] html5中的meta标签renderer有什么作用?

    [html] html5中的meta标签renderer有什么作用? 指定双核浏览器,默认以什么浏览器方式渲染页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...

  2. [html] html5中的meta标签robots有什么作用?

    [html] html5中的meta标签robots有什么作用? 禁止搜索引擎对本页面内容进行收录,不会出现在SRP页面上 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...

  3. Html中meta标签的用法和作用

    mate标签的用法和作用: meta标签一般用于网页中的<head>与</head>之间,meta标签的种类有很多.在我们网页设计中用的比 较多的有keywords,descr ...

  4. description在PHP中作用,html元素meta标签name=“description”属性作用及用法详解

    在html元素meta标签中的属性name="description"的用法: content属性值是网页描述文字,尽量用简洁的文字描述该网页的主要内容,一般控制在60字以内. 下 ...

  5. HTML标签meta在seo中的作用

    1.Meta标签 META标签,是在HTML网页源代码中一个重要的html标签.META标签用来描述一个HTML网页文档的属性,例如作者.日期和时间.网页描述.关键词.页面刷新等. 2.在seo中的作 ...

  6. [html] html5中的meta标签http-equiv属性有什么作用?

    [html] html5中的meta标签http-equiv属性有什么作用? http-equiv是http5新增的属性,用于把 content 属性关联到 HTTP 头部,可模拟响应头.例如:con ...

  7. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 您的 ...

  8. html的meta标签作用,网站meta标签就什么,meta标签的作用

    Meta标签如何优化?对SEOer来说,meta标签是网站参与排名的基础,这也在某一方面决定了SEO的优化周期以及效果,会做和做好其实就是两个概念,虽然Mate标签操作不难,难度就在于标签的精炼,今天 ...

  9. meta标签的作用及整理

    欢迎访文我的博客YangChen's Blog meta的标签的使用是我在前端学习中曾经困惑过一段时间的问题.一方面不是很了解meta标签的用途,另一方面是对于meta标签里的属性和值不是懂,也不知道 ...

最新文章

  1. 精心推荐10个高质量的网站,打开新世界的大门
  2. c语言程序朴素贝叶斯分类器,生成式学习算法(四)之----朴素贝叶斯分类器
  3. Android SingleTask启动模式与Home键的问题
  4. 机器学习第一篇:开篇
  5. html怎么做交互留言,简单html与servlet交互
  6. 2d 蓝图_“二渲三”打破传统思维!Netflix冲奥动画会推动2D动画变革吗?
  7. 52个外文文献论文网站,写论文的你必囤!
  8. 开放源代码现象的经济基础
  9. 笔记本电脑风扇转速测试软件,笔记本温度查看和风扇转速调节工具
  10. Python代码对接抖音去水印提取API接口、TikTok去水印解析接口的源码
  11. Ubuntu无法调节屏幕亮度问题
  12. 鸿蒙系统如何设置字体,图解鸿蒙OS独特的字体系统!
  13. CocosCreator第一个小游戏范例总结
  14. 深入理解iOS App的启动过程
  15. 使用leaflet仿原神提瓦特大地图制作日记
  16. PDF文件有修改权限如何取消
  17. 中恒BM工作组依据技术专业机电二次深化设计的专业技能和优点
  18. Numerical Optimization Ch17. Penalty and Augmented Lagragian Methods
  19. 【毕业设计】单片机和stm32设计选题,proteues仿真、程序完整资料-转发分享
  20. Ubuntu安装Ipopt过程

热门文章

  1. 最优雅的数据结构之一——字典树Trie(Java)
  2. python输出空心长方形_python3打印空心三角*形状
  3. 延续千年腊八传统 山东孔府布粥暖年味
  4. 中一级计算机word2010测试题,中一级计算机WORD2010测试题(经修改).doc
  5. 前端与后端是怎么合作的
  6. j2me的property备忘和IT职位中英文对照表
  7. 当前主流电脑的BIOS调出键
  8. python列表最多有多少元素_Python中包含一百万个元素的列表会占用多少...
  9. android裁剪图片功能,Android通过ClipDrawable实现图片裁剪功能
  10. 用GPT写的CSDN付费专栏被订阅——感谢ChatGPT带来的第一桶金