meta

　　当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

　　meta 之http-equiv

　　　　http-equiv 属性为名称/值对提供了名称。顾名思义，相当于http的文件头作用，他可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content的内容其实就是各个参数的变量值。

　　

　　refresh：定义文档自动刷新的时间间隔。

 

　　

　　content-type：规定文档的字符编码。

　　

　

　　content-language（显示语言的设定）

 　　

 

　　

　　要为网页指定文件兼容性模式，需要在网页的meta标签中的http-equiv设置为X-UA-Compatible。

　　如果优先使用 IE 最新版本和 Chrome，则对应的content值为“IE=edge，chrome=1”

　　　　

　　　　

　　description：规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。

　　

 

　　keywords：规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）

 

 

 

　　Viewport

　　　　viewport 是用户网页的可视区域。

　　　　viewport 翻译为中文可以叫做"视区"。

　　　　手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

　　　　一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

 

 

　　

　　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根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，也可以避免字体大小逐层复合的连锁反应

谨记当初奋斗的自己,是他让现在的自己,享受美好,                                           敬给还在奋斗的你们,望与君共勉.