HTML基础（一）--meta属性

 

meta

属性：name属性和http-equiv属性

1.name属性

• name属性主要用来设置网页信息，比如搜索引擎的关键词，网页主要内容描述

属性值	说明
keywords	用于告诉搜索引擎，该网页关键字是什么
generator	用于标明网页使用什么软件制作
author	用于标明网页制作者
copyright	用于声明版权
description	用于描述网页的主要内容
viewport	用来是适配不同的设备
robots	告诉爬虫哪些页面可以索引，哪些不可以索引
revisit-after	告诉爬虫重访的时间，时间过短会给服务器造成压力
renderer	指定双核浏览器默认哪种渲染方式
format-detection	忽略识别电话号码或者邮箱
application-name	webApp名字
apple-mobile-web-app-capable	是否启动WebAPP全屏模式
apple-touch-fullscreen	添加到主屏后是否以全屏显示
apple-mobile-web-app-title	添加到主屏后的标题
apple-mobile-web-app-status-bar-style	隐藏状态栏/设置状态栏颜色

• 实例：

1.keywords

<meta   name="keywords" content="关键词" />

2.generator

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

3.author

<meta name="author" content="作者lzs1998" />

4.copyright

<meta name="copyright" content="版权" />

5.viewport****重点,在后面的博客中会重点提出来介绍

 <meta name="viewport"  content="width=device-width, initial-scale=1.0, minimum-scale=2.0, maximum-scale=1.0 ,user-scalable=yes" >

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

width	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

此外，在安卓中还支持  target-densitydpi  这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素 

target-densitydpi

值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

 

6.robots

none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
noindex : 搜索引擎不索引此网页。
nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
index : 搜索引擎索引此网页。
follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

　<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">：可以抓取本页，而且可以顺着本页继续索引别的链接

　　<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">：不许抓取本页，但是可以顺着本页抓取索引别的链接

　　<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">：可以抓取本页，但是不许顺着本页抓取索引别的链接

　　<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">：不许抓取本页，也不许顺着本页抓取索引别的链接。

7.description

<meta   name="description" content="网页主要描述"/>

8.revisit-after

<meta name="revisit-after" content="1 days">

9.WebApp全屏

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
<!--添加到主屏后是否以全屏显示-->
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-title" content="添加到主屏后的标题">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--隐藏状态栏/设置状态栏颜色-->

10.format-detection

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

11.renderer

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

2. http-equiv

      相当于http的文件头作用

值	描述
cache-control	控制文档的缓存机制。 no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。 no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施） public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果 private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应） maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
content-language	响应体的语言 实例:<meta http-equiv="content-language" content="en-US">
content-type	返回内容的MIME类型,提示: 通常用于字符集的设置。实例:<meta http-equiv="content-type" content="text/html; charset=UTF-8">
date	原始服务器消息发出的时间.实例:<meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT">
expires	响应过期的日期和时间.实例:<meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">
last-modified	请求资源的最后修改时间实例:<meta http-equiv="last-modified" content="Mon, 03 Jan 2011 17:45:57 GMT">
location	用来重定向接收方到非请求URL的位置来完成请求或标识新的资源实例:<meta http-equiv="location" content="URL=http://www.runoob.com">
refresh	定义间隔多久后刷新页面。实例:<meta http-equiv="refresh" content="3，url=https://blog.youkuaiyun.com/Lzs1998">
set-cookie	创建一个 cookie ，包含了 cookie 名，cookie 值，过期时间。实例<meta http-equiv="set-cookie" content="runoobcookie=myContent;expires=Fri, 30 Dec 2015 12:00:00 GMT; path=https://blog.youkuaiyun.com/Lzs1998">
window-target	指定要载入的框架名

实例

<meta http-equiv="content-type" content="text/html"  charset="utf-8" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta http-equiv="expires" content="Sunday 26 May 2019 01:00 GMT"/>
<meta http-equiv="refresh" content="antiquewhite,url=https://blog.youkuaiyun.com/Lzs1998" />
<meta http-equiv="set-cookie" content="User=xxxx,path=xxxx........" />