HTML中的meta的属性作用

在写前端页面时，常常忽略meta标签的作业，只是习惯性的粘贴常用的一些代码，很多不明白meta还有其他很多用法，下面是我整理的一部分。
meta标签的组成：
meta标签原本有两个属性，它们分别是http-equiv属性和name属性，后h5发布了一个新属性charset；每个属性有不同的参数值，这些不同的参数值就实现了不同的网页功能；下面我们介绍一下属性；

charset(h5增加的属性)
charset 属性规定 HTML 文档的字符编码；html中必带属性；
<meta charset="UTF-8">
name属性；
name属性主要用于描述网页，属性值为content，content中的内容常用在SEO中。
<meta name="参数"content="具体的参数值">。
Keywords(关键字)
keywords用来告诉搜索引擎此页面的关键字是什么，主要用于SEO的优化
<meta name="keywords"content="文章的关键字，需要搜索的关键字">
description(网站的内容描述)
description用来告诉搜索引擎网站主要内容，用简短的概括性文字描述网站，也是主要用于SEO的优化。
<meta name="description"content="网站的简短介绍">
robots(机器人向导)
robots用来告诉搜索机器人哪些页面需要被索引，哪些页面不需要被索引。
<meta name="robots"content="all/none/index/noindex/follow/nofollow">
具体参数如下：
信息参数为all：文件可被检索，且页面上的链接可以被查询；
信息参数为none：文件不可被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不可检索，但页面上的链接可以被查询；
信息参数为nofollow：文件可被检索，但页面上的链接不可以被查询；
author(网页的开发人员)
标注网页的开发人员；
举例：
<meta name="author"content="姓名,邮箱">
viewport(控制页面是否可以缩放，主要用于移动端)
在移动端的布局中，css中的1px并不等于物理上的1px，现在手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，这就说明一个物理像素点实际上塞入了好几个像素。
所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
参数的详解如下：
width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
revisit-after
revisit-after参数表示多久后网站重新访问,1days代表1天，依此类推。
<meta name="revisit-after" content="1days">
generator参数，代表说明网站的采用的什么软件制作。
COPYRIGHT
COPYRIGHT的信息参数，表示说明此网站的版权信息。

<meta name="COPYRIGHT" content="版权信息">

http-equiv属性

http-equiv可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，对应的属性值为content;
   meta标签的http-equiv属性语法格式是：
   ***<meta http-equiv="参数"content="参数变量值">***
   http-equiv属性有以下几种参数：

Expires(期限)

用于设定网页的到期时间。时间到时网页自动过期，页面必须到服务器上重新传输。
   ***<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 注意：必须使用GMT的时间格式。***

Pragma(cache模式)

Pragma禁止浏览器从本地计算机的缓存中访问页面内容，每一次的加载页都是从网络服务器中加载；这样设定，访问者将无法脱机浏览，必须在联网的状态下浏览页面；
   ***<meta http-equiv="Pragma"content="no-cache">***

Refresh(设置自动刷新)

设置页面在等待多久时间后自动刷新页面或者指向新页面，跳转页面。
   ***<meta http-equiv="Refresh"content="10;URL=http://www.haorooms.com"> //(注意后面的引号，分别在秒数的前面和网址的后面，此例子为10秒后跳转)***

Set-Cookie(cookie删除)

网页过期时，本地计算机中的cookie将自动被删除。
   ***<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 注意：必须使用GMT的时间格式。***

Window-target(设置显示窗口的默认设定)

强制改变页面在当前窗口的显示方式为独立显示，可以用来防止别人在框架里调用自己的页面。
   ***<meta http-equiv="Window-target"content="_top">***

content-Language（显示语言的设定）

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

meta其他

忽略数字自动识别为电话号码
   <meta content="telephone=no" name="format-detection" />
   忽略识别邮箱
   <meta content="email=no" name="format-detection" />

WebApp(全屏模式：伪装app，离线应用)。

***<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 启用 WebApp 全屏模式 -->***

meta在移动端的用法

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
   <meta name="HandheldFriendly" content="true">
   <!-- 微软的老式浏览器 -->
   <meta name="MobileOptimized" content="320">
   <!-- uc强制竖屏 -->
   <meta name="screen-orientation" content="portrait">
   <!-- QQ强制竖屏 -->
   <meta name="x5-orientation" content="portrait">
   <!-- UC强制全屏 -->
   <meta name="full-screen" content="yes">
   <!-- QQ强制全屏 -->
   <meta name="x5-fullscreen" content="true">
   <!-- UC应用模式 -->
   <meta name="browsermode" content="application">
   <!-- QQ应用模式 -->
   <meta name="x5-page-mode" content="app">
   <!-- windows phone 点击无高光 -->
   <meta name="msapplication-tap-highlight" content="no">

HTML < base > 标签
为页面上所有默认链接：
例如：

***<base href="连接地址">***
    <base> 标签为页面上的所有链接规定默认地址或默认目标

为页面上所有链接指定默认打开方式(和meta的Window-target有作用相似)：
例如：

***<base target="_self">***
    target指定页面中所有标签都是本页打开

HTML中的meta的属性作用

相关推荐