Skip to content
On this page

02: meta标签属性有哪些?

简介: 常用于定义页面的说明,关键字,最后修改日期和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。

charset属性

html
<!-- 定义网页文档的字符集 -->
<meta charset="utf-8" />

name + content属性

html
<!-- 网页作者 -->
<meta name="author" content="mj"/>
<!-- 网页地址 -->
<meta name="website" content="https://mj132.github.io/blog/"/>
<!-- 网页版权信息 -->
 <meta name="copyright" content="2017-2020 mj.com"/>
<!-- 网页关键字, 用于SEO -->
<meta name="keywords" content="meta,html"/>
<!-- 网页描述 -->
<meta name="description" content="网页描述"/>
<!-- 定义网页搜索引擎索引方式,多个值使用英文逗号「,」分割,通常有如下几种取值:none,noindex,nofollow,all,index和follow -->
<meta name="robots" content="index,follow" />
<!-- 移动端常用视口设置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- 
  viewport参数详解:
  width:宽度(数值 / device-width)(默认为980 像素)
  height:高度(数值 / device-height)
  initial-scale:初始的缩放比例 (范围从>0 到10)
  minimum-scale:允许用户缩放到的最小比例
  maximum-scale:允许用户缩放到的最大比例
  user-scalable:用户是否可以手动缩 (no,yes)
 -->
<!--WebApp全屏模式隐藏地址栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--苹果强制全屏显示-->
<meta name="apple-touch-fullscreen" content="yes" />
<!--强制全屏显示-->
<meta name="full-screen" content="yes" />
<!--制定iphone中safari顶端的状态条的样式,(default:白色 ; black:黑色,black-translucent:半透明)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--告诉设备忽略将页面中的数字识别为电话号码-->
<meta name="format-detection" content="telephone=no" />
<!--告诉设备忽略将页面中的地址识别-->
<meta name="format-detection" content="address=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 告知浏览器本页面属于什么类型设备的页面, pc mobile -->
<meta name="applicable-device" content="pc,mobile">

rel属性

http-equiv属性

html
<!-- expires指定网页的过期时间。一旦网页过期,必须从服务器上下载。 -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
<!-- 等待一定的时间刷新或跳转到其他url。下面1表示1秒 -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<!-- 禁止浏览器从本地缓存中读取网页,即浏览器一旦离开网页在无法连接网络的情况下就无法访问到页面。 -->
<meta http-equiv="pragma" content="no-cache"/>
<!-- 也是设置cookie的一种方式,并且可以指定过期时间 -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2020 18:18:18 GMT,path=/"/>
<!-- 禁止百度转码-->
<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 如果安装了Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,
则使用最高版本 IE 内核渲染。-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 当前访客是移动访客且支持HTML5时,转向网址https://baidu.com/m/
标注Meta声明这一适配方案仅限适用于百度移动搜索,即只有当用户通过百度移动搜索访问站点时,
适配才会生效;通过其他渠道则不生效。 -->
<meta http-equiv="mobile-agent" content="format=html5; url= https://baidu.com/m/">