html中的meta标签以及图标自定义

一、html中常用的meta标签

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" />

2、特殊配置

2.1、 禁止将数字变成电话号码

<!--禁止将数字变成电话号码，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话-->
<meta name="format-detection" content="telephone=no" />

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">