meta
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
meta 之http-equiv
http-equiv 属性为名称/值对提供了名称。顾名思义，相当于http的文件头作用，他可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content的内容其实就是各个参数的变量值。
refresh：定义文档自动刷新的时间间隔。
<meta http-equiv="refresh" content="300">
content-type：规定文档的字符编码。
<meta http-equiv="content-type" content="text/html”; charset=”UTF-8">
content-language（显示语言的设定）
<meta http-equiv=“content-language” content=“zh-cn”/>
要为网页指定文件兼容性模式，需要在网页的meta标签中的http-equiv设置为X-UA-Compatible。
如果优先使用 IE 最新版本和 Chrome，则对应的content值为“IE=edge，chrome=1”
<meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
description：规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
<meta name="description" content="Free web tutorials">
keywords：规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）
<meta name="keywords" content="HTML, meta tag, tag reference">
Viewport
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0,maxinum-scale=1.0,user-scalable=0">
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
yes:可以手动
no:不可以
/*我们在开发移动设备的网站时，最常见的一个动作就是把上面的这段代码复制到我们的head标签中。该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样设定的话，那就会使用那个比屏幕宽的默认viewport，也就是会出现横行滚动条。*/
format-detection翻译成中文的意思是“格式检测”
顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name=“format-detection” content="adress=no"
也可以连写：meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具体说下每个设置的作用
一、telephone
你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下： telephone=no就禁止了把数字转化为拨号链接！
telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！
二、email
告诉设备不识别邮箱，点击之后不自动发送
email=no禁止作为邮箱地址！
email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！
三、adress
adress=no禁止跳转至地图！
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！
-webkit-user-select：none | text
默认值：text
none：文本不能被选择
text：可以选择文本
去掉webkit默认的表单样式
例：
button,input,optgroup,select,textarea {
-webkit-appearance:none; /*去掉webkit默认的表单样式*/
}
去掉a、input和button点击时的蓝色外边框和灰色半透明背景
例：
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}
修改webkit中input的planceholder样式
例：
input::-webkit-input-placeholder {
color:#ccc; /*修改webkit中input的planceholder样式*/
}
最后一个
em 相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险
rem是CSS3新增的一个相对单位.仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，也可以避免字体大小逐层复合的连锁反应