W3C为万维网联盟
W3C标准：
结构标准：HTML
样式标准：CSS
行为标准：W3C DOM，ECMAscript
——————————————————–
HTML历史
1980年 蒂姆。伯纳斯-李 创建了HTML
1993年超文本标记语言（第一版）
1995年 HTML 2.0
1997年 HTML 3.2
1999年 HTML4.0
2009年W3C联合WATWG以及数百家互联网公司开始制定2012年12月19号W3C宣布HTML5标准定稿
————————————————————
HTMML5是什么
HTML5是最新的一项Web标准，在原有HTML4的基础上定义了一些新的标签和新的Javascript API。是原有HTML标准的超集
API 编程接口
————————————————————-
服务器是存放系统资源的主机
————————————————————-
为什么制定HTML5
HTML4已然落后，为了能够实现并改进Web应用并实现web应用的多设备同时支持而产生
————————————————————-
HTML5能做什么
多媒体支持，图形动画支持，更强大的实时数据通信特性，离线应用特性，本地存储特性，
————————————————————-
url:统一资源定位符，简称路径。
————————————————————-
header:头部。
footer:脚步
nav:导航
article:正文
aside：边栏，旁白
section：文章中的段
box-shadow还支持多阴影，例如：box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);所表示的含义是，无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏
移2像素，模糊10像素，透明度0.25的白色内阴影。
————————————————————-
在HTML5中一个header元素通常报告一个h1-h6的元素也可以包括像表单表格nav等元素.
footer通常包括
article
aside
————————————————————-
display：inline 行内显示； display:inline-block 行内显示块
————————————————————-
<audio>、<video>
src 音/视频文件的路径
controls 向用户显示控件
loop 播放结束时重新开始播放
autoplay 就绪马上播放
width 指定视频宽度,只有<video>标签具有
height 指定视频高度,只有<video>标签具有
————————————————————-
css渐变效果
1.线性渐变
css3里面提供了linear-gradient属性实现背景颜色的渐变功能.
linear-gradient三个属性值（方位，起始色，末尾色）
方位：to top,
to top right,
to right,
to bottom,
to bottom left,
to left,
to top left.
通过角度设置方位，0-360deg之间，还可以是负值。角度会沿着逆时针方向
随着你的角度增加而增加。
默认的情况下：起始颜色的百分比位置是0%，末尾颜色的百分比位置是100%，其他位置按照平均值分配，也可以使用px像素来设定。
repeating-linear-gradient（）//设置颜色的像素值就可以实现百叶窗似的背景
起始色：必选参数，颜色值。末尾色：必选参数，颜色值。
2.径向渐变（放射性渐变）
radial-gradient （方位，起始色，末尾色）
方位：可选参数，径向的方位，可以使用的值有：像素px，百分比，固定值或者符合搭配使用
circle（圆形） ellipse（椭圆形默认值）
设置形状的发散方向：top left right bottom center
设置发散的距离，也就是圆的半径长度。（
closest-side（） 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner() 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side（） 指定径向渐变的半径长度为从圆心到离圆心最远的边
fatthest-corner（）指定径向渐变的半径长度为从圆心到离圆心最远的角
）
起始色：必选参数，颜色值。末尾色：必选参数，颜色值。
————————————————————-
text-shadow 阴影效果
text-overflow:clip 超出隐藏
text-overflow:ellipsos 超出显示省略号
text-stroke,text-stroke-width,text-stroke-color 文字描边
text- fill-color 文本填充
text-align: start 文本靠左
text-align:end 文本靠右
word-wrap:nprmal break-word 换行
text-indent 设置文本缩进
————————————————————-
css3表格
caption 标题
thead 添加表头
tfoot 页脚
colgroup 设置列
为了处理某个列，span属性定义处理哪些咧。1表示第一列，2表示前俩列。
如果有单独设置第二列，那么需要声明俩个，先处理一个，将列点移入第二位。
address 联系信息
————————————————————-
—表单
autocomplete 提示
autofocus 光标聚焦
label user 关联
maxlenght 输入的长度
placeholder 输入的文字
<input type=”date” />
<input type=”month” />
<input type=”time” />
<input type=”week” />
<input type=”datetime-local” />
<input type=”color” />
<input type=”email” />
<input type=”tel” />
<input type=”url” />
<input type=”color” />
<input type=”number” />
<input type=”range” />
————————————————————-
：是伪类选择器 ：：是伪元素选择器
first-letter 第几个改变
first-line 第一行
a::before {
content：“”
}
前面添加
a::after {
content：“”
}
后面添加
input disadle
————————————————————-
js 常用正则表达式表单验证代码
方法一：
var re=/正则表达式/;
re.test($(“txtid”).val())
方法二：
$(“txtid”).val.match(/正则表达式/)；
验证数字的正则表达式集（转载）
验证数字：^[0-9]*$
验证n位的数字：^\d{n}$
验证至少n位数字：^\d{n,}$
验证m-n位的数字：^\d{m,n}$
验证零和非零开头的数字：^(0|[1-9][0-9]*)$
验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数：^\+?[1-9][0-9]*$
验证非零的负整数：^\-[1-9][0-9]*$
验证非负整数（正整数 + 0） ^\d+$
验证非正整数（负整数 + 0） ^((-\d+)|(0+))$
验证长度为3的字符：^.{3}$
验证由26个英文字母组成的字符串：^[A-Za-z]+$
验证由26个大写英文字母组成的字符串：^[A-Z]+$
验证由26个小写英文字母组成的字符串：^[a-z]+$
验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串：^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$
正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。
验证是否含有 ^%&,;=?$\” 等字符：[^%&,;=?$\x22]+
验证汉字：^[\u4e00-\u9fa5],{0,}$
验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；
^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码：^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$：
–正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
验证身份证号（15位或18位数字）：^\d{15}|\d{}18$
验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。
整数：^-?\d+$
非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?
————————————————————-
变型（transform）
1.transform
（1）translate(平移)
translate(200px)
ranslateX(200px)
ranslateY(200px)
（2）scale(缩放)
scale(1.5)
（3）rotate(旋转)
transform :rotate(45deg)
（4）skew(倾斜)
transform:skew(45deg,20deg)
2.transform-origin
3.3D变形
translate3d(x,y,z)
translateZ（z）
scale3d(x,y,z)
scaleZ(z)
rotate3D(x,y,z)
perpective(长度值)[设置一个透视投影矩阵,该属性会设置查看者的位置]
//设置在元素的父元素上，需要再配合候命的功能属性和变形配置，才能看到效果
transform-style:flat(默认值，表示所有子元素在2D平面呈现)
transform-style:preserve-3D(表示子元素在3D空间呈现)
————————————————————-
过度transition
1.transition-property(过度或者动态模拟的属性)
none:没有指定任何样式
all:默认值，指定元素所支持的transition-property所有样式
指定样式：指定支持transition-property的样式
2.transition-duration(指定过度所需的时间)
3.transition-timing-function(指定过度的函数)
ease(默认值，元素样式从初始状态过度到终止状态时速度由快到慢，逐渐变慢)
linear（元素样式从开始状态过度到终止状态时时恒速的）
ease-in（元素样式从开始状态到终止状态时，速度越来越快，是一种加速状态）
ease-out（元素样式从初始状态过度到终止状态时，速度越来越慢，是一种减速状态）
ease-in-out(元素样式从开始状态过度到终止状态时，先加速，后减速)
cubic-bezier（x,x,x,x）[x取值范围0-1之间]
4.transition-delay（指定过度开始出现的延迟时间）
animation（用于实现动画效果）
1.通过关键帧声明一个动画
2.在animation属性中调用关键帧声明的动画
animation－name（用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。css加载时会应用animation－name指定的动画）
animation-delay （用来指定动画的延迟时间）
animation-duration （用来设置动画播放所需的时间）
animation-iteration-count(用来指定动画播放的循环次数)
animation-timing-function(用来指定动画播放的方式)
animation-direction(用来指定动画的播放方向)
animation-play-state(用来控制动画的播放状态)
@keyframes name {}
ease(默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。)
linear（元素样式从开始状态过渡到终止状态时是恒速的。）
ease－in（元素样式从开始状态到终止状态时，速度越来越快，是一种加速状态。）
ease－out（元素样式从初始状态过渡到终止状态时，速度越来越慢，是一种减速的状态）
ease－in－out（元素样式从开始状态过渡到终止状态时，先加速，后减速。）
animation: myAnimation 1s 1s linear infinite;
infinite（无限次播放）
animation-direction:alternate/normal
——————————————————————————————————————————————————————————-
在html5中，form元素和input元素都具有一个checkValidity方法。用该方法，可以显式的对表单内所有元素内容进行验证。
checkValidity方法以boollean的形式返回验证结果。
<details open=”open”>
<summary >周杰伦</summary>
<p>周杰伦是台湾歌手，是我最喜欢的歌手</p>
</details>
<mark>周杰伦</mark>
——————————————————————————————————————————————————————————-
拖拽事件。
一、给需要拖拽的元素设置draggable属性，他有三个值：true元素可以被拖拽；
false元素不能被拖拽；
auto浏览器自己判断元素是否能被拖拽；
二、处理拖拽事件
1、当我们拖拽对象的时候会触发拖拽事件包括：
A.dragstart:当元素拖拽开始触发；
B.drag:在元素拖拽过程中触发；
C.dragend:元素拖拽结束时触发；
三、创建投放区
1、当拖拽对象进入投放区的时候会触发相关事件；
A.dragenter:当拖拽对象进入投放区时触发；
B.dragover:拖拽对象在投放区移动时触发；
C.dragleave:拖拽对象没有投放到投放区，离开投放区的时候触发；
D.drop:拖拽对象投放在投放区时触发；
2、注意：dragenter、dragover、可能会受到默认事件的影响，所以我们在这两个事件当中使用e.preventDefault()来阻止事件默认事件
——————————————————————————————————————————————————————————-
拖拽事件
1.dragstart :被拖放的元素开始拖放操作。
2.drag：被拖放的元素拖放过程中执行的操作
3.dragcenter：拖放过程中鼠标经过的元素（表示被拖放的元素进入本元素范围内）
4.dragover：拖放过程中鼠标经过的元素（表示被拖放的元素正在本元素范围内移动。）
5.dragleave：拖放过程中鼠标经过的元素（表示被拖放的元素离开本元素范围内）
6.drop：拖放的目标元素（有其他元素被拖放到了本元素中）
7.dragend：拖放的对象元素（拖放操作结束）
dataTransfer(一个对象)存放拖拽时要携带的数据 有两个值一个是所要存放的数据类型 一个是存放的内容
目标元素默认不允许接受元素的 为了实现效果要先关掉默认设置 然后给目标元素设置：事件对象.preventDefault() 方法
1.dropEffect属性，表示拖放操作的视觉效果。该效果必须在用effecAllowed属性指定的允许的视觉效果范围内。
四个值为：none，copy，move，link
2.effectAllowed属性，用来指定当元素被拖放时所允许的视觉效果。
值为：none，copy，copyLink,copyMove,link,linkMove,move,all
规则为：1.如果effectAllowed属性设置为none，则不允许拖放元素。
2.如果dropEffect属性设定为none，则不允许被拖放到目标元素中
3.如果effectAllowed属性设置为all或者不设置，则dropEffect属性允许被设定为任何值，并且按照指定的视觉效果显示。
4.如果effectAllowed属性设置为具体效果，dropEffect属性也设定了具体效果，则两个具体效果值必须完全相等，否则不允许将被拖放的元素拖放到目标元素中。
3.setData()方法用于在拖放开始的时候向dataTransfer对象中存入数据，它用types属性指定数据存放的类型。
getData()方法用于在拖放结束的时候读取dataTransfer对象中的数据。
clearData()方法用于清楚DataTransfer对象中的数据。
———————————————————————————————————————————————————-
FileReader接口的方法
1.readAsBinaryString(将文本读取为二进制码)
这个方法将文件读取为二进制字符串，通常情况下是要把这些二进制字符串传送给后端，后端可以利用它们存储文件。
2.readAsText(将文件读取为文本)
默认的文本编码方式为UTF-8,将文件以文本的方式读取，读取的结果就是文本文件中的内容。
3.readAsDataURL(将文件读取为DataURL)
将一些小文件（通常指图像与html格式的文件）以一种特殊格式的URL地址形式直接读入页面。
4.abort(中断读取操作)
FileReader接口的事件
1.onabort 数据读取中断时候触发
2.onerror数据读取出错时候触发
3.onloadstart数据读取开始时候触发
4.onprogress数据读取中
5.onload数据读取成功时候触发
6.onloadend数据读取完成时候触发，无论成功还是失败
————————————————————————————————————————————————————-
cache 储存数据
node.js,是用来写服务器端的语言
mango DB 内存
数据库:DB2 mysal mysql
cookies的缺点
（1）http请求头上会带着，会让http请求显得特别长
（2）大小有限制，4k
（3）主 Domain污染（安全泄漏）
userData:把所有数据都存储在一个XML文件里
————————————————————————————————————————————————————————————
HTML5本地存储 API
一.localstorage 永久存储 永不失效 除非手动删除 (使用前先判断浏览器支持不支持)
sessionstorage 只要关闭浏览器或者在新页面打开 就会失效
它们是以key－value的形式进行存储的
5种方法:
(1)getItem
(2)setItem
(3)removeItem
(4)key
(5)clear
二.application(简称APP) cache
三.indexDB和webSql
跨域:子页面与父页面 子页面与子页面进行数据通信
html5 postmessage
保存数据：sessionstorage.setItem(key,value)
读取数据：var 变量 ＝ sessionstorage.getItem(key)
Web Storage保存数据格式也是key－value(键值)的形式进行存储的
1.saveStorage函数 保存数据
2.loadStorage函数 加载数据
3.clearStorage函数 清楚数据
1. localStorage API 基本使用方法
设置数据方法 localStorage.setItem(key,value)
for(var i=0; i<10; i++){
localStorage.setItem(i,i);
}
for(var i=0; i<10; i++){
localStorage.getItem(i);
}
3.删除数据：localStorage.removeItem(key)
for(var i=0; i<5; i++){
localStorage.removeItem(i);
}
4.清空全部数据：localStorage.clear()
N 个数据的 key 键值：localStorage.key(N)
————————————————————————————————————————————————–
1.Geolocation API (地理定位) GPS(全球定位系统) IP(绑定地理定位) wifi定位 蓝牙定位
纬度：latitude
经度：longitude
速度：speed
海拔：altitude
精度：accuracy
设备朝向：heading
得到地理位置的时间：timeStamp
1.navigation.geolocation.getCurrentposion
(onSuccess,onEnov,potions)
navigator 导航
window.onload = function(){
if(navigator.geolocation){
alert(“支持定位系统”)
}
else{
alert(“不支持定位系统”)
}
}
1.navigation.geolocation.getCurrentposition
(onSuccess,onError,options)
成 功 报错
onError可分为：(1)code
1.拒绝浏览器
3.加载超时
options可分为: 1 enableHighAccuracy
bool(trne,false)
2.timeOut 请求超时
3maximumAge 对地理位置进行缓存的有效时间
navigation.geolocation.getCurrentposition
(function cposition)
地图被实例化并完成初始化以后，就可以对地图进行进行各种操作，如缩放、拖拽。
1.移动地图方法
map.enableDragging(); 以上方法默认开启，即无论设置还是不设置该方法，均可用手指拖动地图实现地图的移动。 除以上方法外，以下两个方法也可以通过改变地图中心点实现地图的移动。
map.setCenter(new BMap.Point(116.409, 39.918));
map.panTo(new BMap.Point(116.409, 39.918));
2.缩放地图方法
map.addControl(new BMap. ZoomControl ());
您除了可以在地图上双指缩放地图外，还可以通过添加缩放控件、操作缩放控件实现地图的缩放。
地图的运行和调试 如上代码保存时，选择utf-8的编码方式且后缀名存为html，之后将html页面放置到apache等网络服务器上，通过手机浏览器访问相应地址即可显示如下地图：
如果要调试代码，可以在PC端模拟移动端浏览器进行。以下以chrome浏览器为例说明PC端设置方式：
1. chrome浏览器下F12快捷键弹出如下调试工具：
2. 点击如上图右下角红框内的设置图标，弹出设置面板：
第一个红框用于设置PC端模拟的手机型号，如iOS4或者Android；第二个红框选择后，可以用鼠标模拟手指拖拽地图。
————————————————————————————————————————————————————————–
多栏布局
什么是网页布局？
是指在页面中如何对标题，导航栏，主要内容，页脚，表单等各种构成要素进行一个合理的编排。
1.多栏布局 column-count属性来进行多栏布局，这个属性的含义是讲一个元素中的内容分为多栏进行显示。
写法 column-count：栏目数
兼容写法：-webkit-column-count:3 -moz-column-count:3
需要注意的是，在使用多栏布局的时候，要将元素的宽度设置成整个栏目的总宽度
2.column-width: 我们可以用这个属性单独设置每一栏的宽度，而不设定元素的宽度。
兼容写法：-webkit-column-width:3 -moz-column-width:3
3.column-gap用来设置多栏之间的间隔距离。
column-gap:2em
4.column-rule用来设置在栏与栏之间增加一条隔线，并且设置间隔线的宽度，颜色等。该属性的属性值的指定方法与css中的border属性的属性值指定方向相同
column-rule：1px solid red
—————————————————————————————————————————————————————————————–
一.盒布局：display:box 兼容性写法：-webkit-box -moz-box (写在父元素上)
二.盒布局和多栏布局的区别：
1.使用多栏布局时，各栏的宽度必须是相等的，在指定每栏的宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。
2.使用多栏布局是，也不可能具体指定什么栏中显示什么内容，因此，比较合适用于显示文章内容的时候，不适合用于安排整个页面中由各元素组成 的网页结构时。
三.弹性盒布局
（1）使用自适应窗口的弹性盒布局box-flex (只在一个div上使用)
如何才能让div的宽度跟随浏览器窗口的变化而变化？
兼容性写法: -webkit-box-flex: 1 -moz-box-flex: 1
（2）改变元素的显示顺序 box-ordinal-group (在每个元素中使用)
兼容性写法:-webkit-box-ordinal-group -moz-box-ordinal-group
（3）改变元素的排列方向 box-orient
horizontal:在水平行中从左到右排列子元素
vertical:从上到下垂直排列子元素
兼容性写法:-webkit-box-orient:vertical -moz-box-orient:vertical
（4）元素的宽度和高度自适应
在使用盒布时，元素的宽度和高度具有自适应性，就是元素的宽度和高度可以根据排列方向的改变而改变
（5）使用弹性盒布局来消除空白
方法就是给子div中加入一个box-flex属性
（6）对多个元素使用box-flex属性
让浏览器或者容器中的元素的宽度或者是总高度都等于浏览器或者容器的高度
（7）指定水平方向和垂直方向的对齐方式
使用盒布局的时候,可以使用box-pack属性及box-align属性来指定元素中的文字,图像，以及子元素的水平或者垂直方向上的对齐方式。
兼容性写法: -webkit-box-pack:1 -moz-box-pack:1 -webkit-box-align:1 -moz-box-align:1
值：属性值 排列方向 box-pack属性值的含义 box-align属性值的含义
start horizontal 左对齐,文字,图像或者子元素被放置在元素最左边 顶部对齐,文字,图像或子元素被放置在元素最顶部
center horizontal 中对齐,文字,图像或者子元素被放置在元素中部 中部对齐,文字,图像或子元素被放置在元素最中部
end horizontal 右对齐,文字,图像或者子元素被放置在元素右边 底部对齐,文字,图像或子元素被放置在元素最底部
start vertical 顶部对齐,文字,图像或者子元素被放置在元素最顶部 左对齐,文字,图像或者子元素被放置在元素最左边
center vertical 中部对齐,文字,图像或者子元素被放置在元素中部 中对齐,文字,图像或者子元素被放置在元素中部
end vertical 底部对齐,文字,图像或者子元素被放置在元素最底部 右对齐,文字,图像或者子元素被放置在元素右边
———————————————————————————————————————————————————————————–
一.
在css3中的众多模块中，有一个与各种媒体都相关的重要的模块Media Queries，本章将对这一模块进行详细介绍。
1.掌握css3中Media Queries模块的基本概念，以及使用Media Queries模块可以实现的功能。
2.掌握如何编写媒体查询表达式来让浏览器根据当前窗口尺寸自动在样式表中挑选一种样式并使用。
了解iphone和ipad touch设备在支持Media Queries时有什么特殊之处，以及应该用何种方法来指定iphone和ipad touch设备中的safari浏览器
再处理页面时根据多少像素的窗口宽度来处理
3.掌握媒体查询表达式的编写方法，熟悉CSS3中定义的所有设备类型及设备特性，媒体查询表达式中各种关键字的含义，
以及结合使用设备类型，设备特性和各种关键字来正确编写媒体查询表达式
二.
在Css3中，与媒体相关的样式定义是从css2.1开始的，css2.1中定义了各种媒体类型，包括显示器，便携设备，电视机等等
在css3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式
换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。
在css3中单独增加了Media Queries模块，使用这个模块，网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式，然后让浏览器根据不同的窗 口尺寸来选择使用不同的样式即可。
三. Media Queries的使用方法
@media 设备类型 and(设备特性) {样式代码}
(1) 设备类型(媒体类型) 有10中
1.all(所有设备)
2.screen(电脑显示器)
3.print(打印用纸或者打印预览视图)
4.handheld(便携设备)
http://5.tv(电视机类型的设备)
6.speech(语音和音频合成器)
7.braille(盲人用点字法触觉回馈设备)
8.embossed(盲人打字机)
9.projection(各种投影设备)
10.tty(使用固定密度字母栅格的媒介,比如电传打印机和终端)
(2) 设备特性有13种大部分设备特性的指定值接受min和max前缀
特性 可指定值 是否允许min/max前缀 特性说明
width 带单位的长度数值(例如:400px) 允许 浏览器窗口的宽度
height 带单位的长度数值(例如:400px) 允许 浏览器窗口的高度
device-width 带单位的长度数值(例如:400px) 允许 设备屏幕分辨率的宽度值
device-height 带单位的长度数值(例如:400px) 允许 设备屏幕分辨率的高度值
orientation 只能指定两个值:portrait或landscape 不允许 浏览器窗口的方向是纵向还是横向。
当窗口的高度值大于等于宽度值时，
该特性值为portrait,否则landscape
aspect-ratio 比例值(例如16/9) 允许 浏览器窗口的纵横比,比例值为浏览器
窗口的宽度值/高度值
device-aspect-ratio 比例值(例如16/9) 允许 屏幕分辨率的纵横比,比例值为设备屏幕
分辨率的宽度值/高度值
color 整数值 允许 设备使用多少位的颜色值，如果不是彩色
设备，该值为0
color-index 整数值 允许 色彩表中的色彩数
monochrome 整数值 允许 单色帧缓冲器中每像素的字节数
resolution 分辨率值(比如300dpi) 允许 设备的分辨率
scan 只能指定两个值:progressive或interlace 不允许 电视机类型设备的扫描方式。
progressiv表示逐行扫描
interlace表示逐行扫描
grid 只能指定两个值：0或1 不允许 设备是基于栅格还是基于位图。
基于栅格时该值为1，否则该值为0
(3) 1.可以使用多条语句来将同一个样式应用于不同的设备类型和设备特征中，指定方式类似如下所示:
@media screen and(max-width:639px),handheld and (min-width:360px){样式代码}
2.可以在表达式中加上not关键字或only关键字
not关键字表示对后面的表达式之行取反操作，书写方法如下：
（样式代码将被使用在除了便携设备之外的其他设备或者非彩色便携设备中）
@media not handheld and (color){样式代码}
only关键字的作用是，让那些不支持media queries但是能够读取media type的设备浏览器将表达式中的样式隐藏起来。
@media only screen and (color){}
对于支持media queries的设备来说，将能够正确的应用样式，就仿佛only不存在一样。对不支持media queries但能够读取media type的设备来说， 由于先读取到的是only而不是screen，将忽略这个样式。对于不支持media queries的浏览器来说，无论是否有only都将忽略这个样式。
css3中的media queries模块也支持对外部样式表的引用，使用方法如下：
<link real=”stylesheet” type=”text/css” media=”screen and (min-width:1000px)” href=”style.css”>
