##三天熟练掌握HTML5和CSS3 1.认识html5
-
HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言
-
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一系列Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏，同时结合CSS3的过渡、转换、动画等特性，可以极大的增强用户体验，提升开发功能的可应用性。
2.为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。
标签 语义
3.输入类型（这些属性在移动设备上面支持较好，存在兼容性。)
类型 使用示例 含义email 输入邮箱格式tel 输入手机号码格式url number 输入手机号码格式search 搜索框（体现语义化）range 自由拖动滑块color 拾色器time date datetime month week
4.表单属性
属性 用法 含义placeholder 占位符autofocus 自动获得焦点multiple 多文件上传autocomplete 自动完成form required 必填项pattern 自定义验证
5.表单元素
元素 含义
6.表单事件
在html5 当中，新增了两个事件，一个是oninput 事件，一个是oninvalidoninput 当输入输入数据的时候触发。oninvalid 当验证不通过的时候触发
7.音频
8.视频
同样，通过附加属性可以更友好的控制视频的播放autoplay 自动播放controls 是否显示默认播放控件loop 循环播放width 设置播放窗口宽度height 设置播放窗口的高度
9.DOM扩展
-
获取元素
-
document.getElementsByClassName ('class') 通过类名获取元素，以伪数组形式存在
document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll('selector') 通过CSS选择器获取元素，以伪数组形式存在。
-
类名操作
-
1、Node.classList.add('class') 添加class 2、Node.classList.remove('class') 移除class
-
自定义属性
-
<!-- 自定义属性， 1:怎么为当前元素添加要给属性 2:怎么去获取属性对应的值 自定义属性： data- 固定写法 获取值的话，我们需要使用dataset获取自定义属性的值 -->
<div class="one" data-attr-one="属性"></div> <script> /* var attr=document.querySelector(".one").dataset['attr']; alert(attr);*/ alert(document.querySelector(".one").dataset['attrOne']);
10.选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性选择器1、E[attr] 表示存在attr属性即可；div[class]2、E[attr=val] 表示属性值完全等于val；div[class=mydemo]3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；div[class*=mydemo]4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；div[class^=mydemo]5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；div[class$=demos]伪类选择器E:first-child 第一个子元素E:last-child 最后一个子元素E:nth-child(n) 第n个子元素E:nth-last-child(n) 倒数第n个子元素li:nth-child(2n-1) 选中所有的奇数的lili:nth-child(7n) 选中所有的7 的倍数的lili:nth-child(-1n+5) 选中前面五个li:nth-last-child(-1n+5) 选中后面五个li:nth-child(even) 所有的偶数li:nth-child(odd) 所有的奇数n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)E:empty 选中没有任何子节点的E元素；伪元素选择器E::before 往当前元素的子元素的最前面添加一个元素E::after 往当前元素的子元素的最后面添加一个元素E::first-letter 获取当前文本的第一个字母或字E::first-line 获取当前元素里面的文本的第一行E::selection 可改变选中文本的样式
11.颜色
一种新的颜色的表示方式
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。rgba(255,0,0,0.1)R、G、B 取值范围0~255H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色S 饱和度 取值范围0%~100%L 亮度 取值范围0%~100%A 透明度 取值范围0~1
12.关于透明度：
1、 opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；2、 transparent 不可调节透明度，始终完全透明，RGBA、HSLA可应用于所有使用颜色的地方。
13.文本 (text-shadow阴影)
例子1：text-shadow: 2px 3px 7px red;第一个参数：2px影子水平的偏移位置，如果是正数，向右，如果之越大，越往右如果是负数，水平向左，绝对值越大，越往左偏移第二个参数：3px影子的垂直方向偏移位置，如果是正数，向下，如果值越大，越往下如果是负数，垂直向上，绝对值越大，越往上第三个参数：影子的模糊度 这个模糊度不能是负数。第四个参数影子的颜色例子2：为一个文本添加多个影子text-shadow: 4px 10px 4px red,-10px -10px 4px green;
14.盒子阴影(box-shadow阴影)
例子：/*我们可以为盒子添加多个阴影*//*box-shadow: 3px 3px 3px red, -10px -10px 4px blue;*//*内阴影*/box-shadow: inset 3px 3px 2px #abcdef,inset -4px -4px 2px #ababab;
15.盒模型
通过box-sizing 来指定盒模型:box-sizing 有两个值:content-box border-box;content-box:对象的实际宽度等于设置的width值和border、padding之和;border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width );
16.border-radius 属性
17.多重背景
可以为盒子设置多张背景图片例子： background: url("images/bg1.png") no-repeat left top, url("images/bg2.png") no-repeat right top, url("images/bg3.png") no-repeat right bottom, url("images/bg4.png") no-repeat left bottom, url("images/bg5.png") no-repeat center 18.渐变
1.线性渐变linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果；(a、方向 b、起始色 c、终止色 d、渐变距离) .linear-gradient { width: 200px; height: 200px; margin: 100px auto;/* 任务1 如何实现一个最简单的线性渐变 */ /* 1：渐变方向 to right to top to bottom to left 2：起始颜色 3：终止颜色*/ /* background: linear-gradient( to top, yellow, green );*/ /* 任务3 如何实现一个任意角度的渐变 */ /* background: linear-gradient( 180deg, yellow, green );*/}/*在一个盒子实现背景多个距离的渐变。也就是多个起点跟终点。*/例子： .box{ width: 1000px; height: 100px; margin: 100px auto; /* background: linear-gradient( to right, yellow 0%, green 25%, pink 50%, red 75%, blue 100% );*/ background: linear-gradient( 135deg, #000 0%, #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75% ); /* 控制背景的大小，大小都是100px */ background-size: 100px 100px; }2.径向渐变radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果a) 辐射范围即圆半径b) 中心点 即圆的中心c) 渐变起始色d) 渐变终止色e) 渐变范围例子：background: radial-gradient( 100px at 20px 20px, yellow, green); 19.过渡
过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。关于补间动画更多学习可查看
1.过渡初体验- 通过all设置所有属性的过渡效果- 将过渡属性transition设置在A或B状态例子：.box2{ width:200px; height:200px; background-color:green; position:absolute; top:100px; left:800px; cursor:pointer; /* 使用transition 属性来完成过度 */ transition:1s; }.box2:hover{ width:300px; } 2.transition属性拆解 - transition:是一个复合属性，它有四个值。 transition-property：all：需要设置的过度的属性 transition-duration：4s 过度的持续时间。 transition-timing-function: ease 默认值。 delay 延迟的意思 transition-delay：过度的延迟时间 /* 任务2 如何让div的过渡速度发生变化呢？ */ /* 过渡时间函数 transition-timing-function 改变属性变化过程中的速率的属性 过度的速度 */ 20.2D转换
1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；a) 移动位置相当于自身原来位置b) y轴正方向朝下c) 除了可以像素值例子： transform:translate(200px,300px); translateX 沿着水平方向移动 translateY 沿着垂直方向移动2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；a) 当元素旋转以后，坐标轴也跟着发生的转变b) 调整顺序可以解决，把旋转放到最后4、transform-origin可以调整元素转换的原点例子： /* 改变选中的中心角的位置。 */ transform-origin: left bottom;transform: translate() rotate() scale() ...例子：/*设置过渡效果*/ .share1 img,.share2 img{ transition: all 0.8s ease-in-out; } /*设置变形*/ .share1 img:hover { transform: rotate(360deg) scale(1.5); } .share2 img:hover { transform: rotate(-360deg) scale(0.7); } 5，透视：perspective: 100px;调整的是观察者与目标物的距离，所谓的3d 只是在一个2d 平面实现3d 的效果。 21.CSS中的3D坐标系
1.动画必要元素：a、通过@keyframes指定动画序列；b、通过百分比将动画序列分割成多个节点；c、在各节点中分别定义各属性d、通过animation将动画应用于相应元素；关键属性a、animation-name设置动画序列名称b、animation-duration动画持续时间c、animation-delay动画延时时间d、animation-timing-function动画执行速度，linear、ease等e、animation-play-state动画播放状态，running、paused等f、animation-direction动画逆播，alternate等g、animation-fill-mode动画执行完毕后状态，forwards、backwards等h、animation-iteration-count动画执行次数，inifinate等i、steps(60) 表示动画分成60步完成参数值的顺序：关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意例子： html, body { height: 100%; } body { margin: 0; padding: 0; background-color: #F7F7F7; } .box { width: 200px; height: 200px; background-color: green; /*执行动画的名称*/ animation-name:orbit ; /*执行动画的持续时间*/ animation-duration: 3s; /*动画的速度*/ animation-timing-function: linear; /*动画的延迟时间*/ animation-delay: 0s; /* 动画执行的次数 iteration 迭代 count 次数 infinite 无数次 */ animation-iteration-count:2; /*动画的方向direction*/ /* 1:alternate 动画先正常运行再反方向运行，并交替运行 2:reverse 反方向运行 3：normal alternate ：会受动画的次数影响，如果动画执行的是无数次， 这个动画持续交替运行。 */ animation-direction:alternate; /* 第七个参数。 forwards 动画的状态为结束时候的状态 backwards 动画的状态为开始的时候的状态。 */ animation-fill-mode: backwards; /* 暂停动画，开始动画 paused 暂停状态 */ /* animation-play-state: ;*/ animation-play-state:running; } .box:hover { /*!*设置动画暂停*! animation-play-state: paused;*/ } /*定义动画 orbit 轨道*/ @keyframes orbit { /* 定义动画 的第一种写法 /*from{ }to{ }*/ /* 假设我在这里定义了这个动画，我在上面要使用这个动画， 指定这个动画的执行时间，假设我是指定10s 完成这个动画，0秒 第五秒执行50%，结束的时候执行 100 */ 0%{ width:200px; width:200px; } /*50%{ width: 400px; height: 400px; }*/ 100%{ width: 400px; height: 400px; } } 22.伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换。1、必要元素：a、指定一个盒子为伸缩盒子 display: flexb、设置属性来调整此盒的子元素的布局方式 例如 flex-directionc、明确主侧轴及方向d、可互换主侧轴，也可改变方向2、各属性详解flex-direction：调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reversejustify-content：主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-around、space-between几种方式align-items：调整侧轴方向对齐方式，包括flex-start、flex-end、center、stretchflex-wrap：控制是否换行，包括wrap、nowrapalign-content：堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制，以侧轴对齐,包括flex-start、flex-end、center、space-between、space-around、stretchflex：控制伸缩项目的伸缩比例 例子：flex:2;align-self：同align-items可覆盖父元素设置的algin-items，包括flex-start、flex-end、center、stretchorder：控制伸缩项目的顺序 例子：order:3;详见案例：360原版，携程旅行
23.web字体的使用
例子 /* 定义 */ @font-face {font-family: 'webfont'; src: url('webfont.eot'); /* IE9*/ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* chrome、firefox */ url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } /* 使用。 */ p{ font-family:"webfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体http://www.iconfont.cn/ 24.Web存储 window.sessionStorage（会话存储） window.localStorage （本地存储）
拖拽元素，事件监听例子：拖拽元素目标元素。
25.事件监听
1.网络状态我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值 window.online用户网络连接时被调用 window.offline用户网络断开时被调用 window.addEventListener("online",function(){ alert("已经建立了网络连接") }) window.addEventListener("offline",function(){ alert("已经失去了网络连接")}) 26.地理定位 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service) Position. coords.latitude 纬度 var longitude = position. coords.longitude ; // 经度
例子：