meta标签通常用于设置网页自身的信息
1、设置网页的编码类型
<!--meta标签charset属性，用于设置网页的编码类型-->
<!--注意：meta标签是单标签，不需要闭合标签，规范写法，单标签需要自闭合-->
<meta charset = "UTF-8" />
2、设置文档作者的名字
<!--name="author"表示规定文档的作者的名字，通过content属性设置作者名字-->
<meta name="author" content="作者名字">
3、设置搜索关键字
<!--name="keywords"表示搜索关键字，通过content属性设置具体的搜索关键字，目的是提高网站的搜索排名-->
<meta name="keywords" content="搜索关键字">
4、设置网站描述
<!--name="description"表示网站描述，通过content属性设置完整的描述信息，目的是提高网站的搜索排名-->
<meta name="description" content="网站描述" >
二、开发手机端中常用的meta标签
1、基本配置
<!--name="viewport"表示配置手机端信息-->
<!--width: viewport的宽度(width=device-width意思是：宽度等于设备宽度)-->
<!--hight: viewport的高度(height=device-height意思是：高度等于设备宽度)-->
<!--initial-scale: 初始的缩放比例-->
<!--minimum-scale: 允许用户缩放到的最小比例-->
<!--maximum-scale: 允许用户缩放到的最大比例-->
<!--user-scalable: 用户是否可以手动缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- 针对手持设备优化，主要是针对一些老的不识别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">
2、特殊配置
2.1、 禁止将数字变成电话号码
<!--禁止将数字变成电话号码，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话-->
<meta name="format-detection" content="telephone=no" />
2.2、转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta
<meta http-equiv="Cache-Control"content="no-siteapp" />
2.3.、 搜索引擎抓取
<meta name="robots" content="index,follow"/>
2.3.、 设置浏览器主题色
<meta name="theme-color" content="#000000">
2.2、 ios私有标签
<!--iphone设备中的safari私有meta标签，允许全屏模式浏览，隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 指定的iphone中safari顶端的状态条的样式-->
<!--默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
三、自定义图标
1、网站选项卡上面的图标
<!--设置网站选项卡上面的图标-->
<link rel="shortcut icon" href="#">
2、手机收藏自定义图标
<!--支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标-->
<link rel="apple-touch-icon-precomposed" href="#.png">
