【HTML】头部meta标签

name属性

语法:

<meta name="参数"content="具体的参数值"> 
  • Keywords:用来告诉搜索引擎网页中的关键字
  • description:用来告诉搜索引擎网站主页内容。
  • robots:用来告诉搜索机器人哪些页面需要索引,哪些不需要。
  • all:文件将被检索,且页面上的链接可以被查询。
  • none:不检索。
  • index:文件被检索。
  • follow:文件上的链接可以被查询。
  • noindex:文件将不被检索,但页面上链接可以查询。 弄
  • follow:文件将被检索,但页面上的链接不被查询。
  • author:作者
  • generator:采用什么软件制作此网站
  • COPYRIGHT:网站版权信息
  • rewisit-after:网站重访。7days代表七天。
<META name="revisit-after"CONTENT="7days">

  • http-equiv属性
<meta http-equiv="参数"content="具体的参数值"> 
  • Expries:设定网页的到期时间(必须使用GMT时间格式),一旦过期就必须在服务上重新部署。 Pragma:禁止浏览器本地计算的缓冲中访问页面内容。
<meta http-equiv="Pragma"content="no-cache"> 
  • Refresh:自动刷新并指向新页面
<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> 
  • Set-Cookie:
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> 
  • content-Type:字符集的设置
<meta http-equiv="content-Type"content="text/html;charset=gb2312"> 
  • content-Language:显示语音设定
  • Cache-Control:指定请求和相应遵循的缓存机制。
  • no-cache:指示请求或响应不能缓存。
  • no-store:用于放置重要的信息被无意的发布。在请求信息中发哦送你个将使得请求和响应消息都不使用缓存。
  • max-age:指客户机可以接收生存期不大于指定时间的响应。
  • min-fresh:指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
  • max-stale:指示客户机可以接收超出时期间的响应消息。
  • private:对于单个也能更好的整个或部分响应消息不能被共享缓存处理。 移动设备
  • viewprot:优化移动浏览器的显示
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

width:宽度(数值 / device-width)(范围从200 10,000,默认为980 像素) height:高度(数值 / device-height)(范围从223 10,000) initial-scale:初始的缩放比例 (范围从>0 10) minimum-scale:允许用户缩放到的最小比例 maximum-scale:允许用户缩放到的最大比例 user-scalable:用户是否可以手动缩 (no,yes) minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用) 
  • WebApp全屏模式:伪装app,离线应用
<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题"> 

忽略数字自动识别为电话号码

<meta content="telephone=no" name="format-detection" /> 

忽略识别邮箱

<meta content="email=no" name="format-detection" />

添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 

针对手持设备优化,主要是针对一些老的不识别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"> 

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 关于X-UA-Compatible --> <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --> <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --> <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 --> 

头部中的link用法

  • 设置dns与解析:当用户访问此网站时会缓存设置的网页或者文件,下次再次访问时直接去浏览器的缓冲记录。可以提高网站的访问效率。
<link rel="dns-prefetch" href=""/>
  • 引入icon文件
<link rel="shortcut icon" href=""/>
  • 引入css文件
<link rel="stylesheet" href=""/>

猜你喜欢

转载自www.cnblogs.com/Seven77yixuan/p/10895331.html