html头部信息元数据

网站描述信息

<!--网站描述信息-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

网站关键字

<!--网站关键字-->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

网页布局区域

<!--
			理想区域 = 可视区域（手机模拟器大小）= 网页布局区域。
			视口作用：
			1、可以让网页布局区域跟随屏幕大小动态改变
			2、禁止用户缩放页面
-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

给网站状态栏添加快捷图标

<link rel="shortcut icon" href="img/xc.png"/>

引入字体图标

<!--引入字体图标-->
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>

移动端样式

*{
				margin: 0;
				padding: 0;
			}
			html, body{
				width: 100%;
				height: 100%;
			}
			body{
				display: flex;
				flex-direction: column;
			}
			header{
				width: 100%;
				height: 80px;
				background-color: #ccc;
			}
			main{
				background-color: yellow;
				flex: 1;
			}
			footer{
				width: 100%;
				height: 100px;
				background-color: black;
				color: #fff;
			}
			i{
				font-size: 66px !important;
				color: red;
			}
			span{
				font-size: 66px !important;
				color: hotpink;
			}

字体图标

<header>
	<!--字体图标，把图变成了字体类似文字去使用，加载速度和执行速度比普通图片要快-->
	<i class="iconfont icon-gouwuchekong"></i>
	<span class="iconfont icon-richscan_icon"></span>
	<span class="iconfont icon-tianmao"></span>
</header>

html头部信息元数据

原文：https://www.cnblogs.com/sehnen/p/14843368.html