HTML5篇
什么是html5?
h5并不是新的语言，而是html语言第五次重大修改的版本
- ie9以上主流浏览器全部支持html5
- 增加了用户与文档的交互方式：video audio canvas
- 新增一些特性、和语义化标签（本地存储、网页多媒体、动画、过度、2d、3d）
- 相比h4 抛弃了一些不常用的标签和属性 新增了一系列的语义化标签和属性
html5的语义标签（没有什么不同的就是单纯的命名div）
| 语义标签 | 作用 |
|---|---|
| nav | 导航标签 |
| header | 页眉也就是头部 |
| footer | 页脚也就是是底部 |
| main | 文档的主要内容，也就是内容区域 |
| article | 内容左侧 |
| aside | 内容右侧 |
Ie8无法识别HTML5不支持语义标签
第一种方式
要通过js手动创建 并且要转成块级元素
(document.creatElement(‘header’)) display:block
第二种方式引入html5shiv.js这个插件，就可以实现ie的兼容
表单
表单TYPE属性
- type=‘emali’ //邮箱对应的写法 email提供了默认的电子邮箱验证 不写好会阻断提交
- type=‘tel’ //它并不是用来实现验证的，它本质是为了能够在移动端打开数字键盘，数字键盘就限制了用户只能输入数字
- type=‘url’ //它只能输入合法的网址 包含http://这种的
- type=‘number’ //他只能输入数字，不能输入其他的字符，可以输入小数点 ：最大值100 属性 max=‘100’ :最小值0 属性 min=‘0’ :value 属性 默认显示值
- type=‘search’ //他会提供更人性化的搜索框 带x删除的那种
- type=‘range’ //是一个范围文本框 提供范围的 需要设置最大值和最小值也就是 max min 默认值为中间 也可以通过默认 value修改默认值
- type=‘color’ //颜色文本框，可以选取颜色
- type=‘time’ //时间 时分秒 type=‘data’ //时间 年月日
- type=‘datatime’ //时间 年月日时分秒 但是只有苹果浏览器支持
- type=‘datatime-local’ //时间 各大浏览器支持的年月日时分秒
- type=‘month’ //月份 type=‘week’ //星期
表单属性
- placeholder – 默认浅灰色提示文本
- autofocus – 页面刷新自动获取焦点
- autocomplete --自动完成 有值 on是打开 off是关闭 需要提交并且必须有name属性才会提示记录
- required – 必须输入属性，不允许为空否则提交时会验证
- pattern – 表单验证 正则验证的
- multiple – 文件上传多个选择 邮箱多个填写输入多个地址(逗号分隔)
- form – 会对照form中的id进行挂靠将没有放置在form表单中的数据一并提交过去
新增表单元素
- datalist --下拉框父元素包裹options 需要与input进行关联 input的list属性填入与datalist中id一致的值 但是浏览器的支持程度不一样所以要少用
- keygen – 传递公钥加密
- output – 语义标签不能修改
新增表单事件
- oninput – 就是表单内容被修改时被触发事件
- oninvalid – 当验证不通过时触发 表单添加required 通过js方法this.setCustomValidity,来改变默认的不通过提示信息
新增进度条
- progress --max属性时最大值，通过value来设置进度条的大小
- merer – max是最大值 min是最小值 high较高值 low较低值
fieldset 文本边框（和卡片差不多的那么一个容器）
legend标签在fieldset中开辟小块标题
html5自定义属性
data开头 data-后至少有一个字符
使用dataset取值时需要使用驼峰命名法
html5接口
网络连接事件和网络断开事件
网络连接：window.addEventListener(‘online’,匿名函数)
网络断开：window.addEventListener(‘offline’,匿名函数)
全屏接口的使用
全屏显示：div.(webkit谷歌/moz火狐/ms IE/o 欧鹏)RequestFullScreen()
退出全屏只能使用document来退出：document.(webkit谷歌/moz火狐/ms IE/o 欧鹏)CancelFullScreen()
判断是否全屏：document.(webkit谷歌/moz火狐/ms IE/o 欧鹏)FullscreenElement// ||或运算符判断 有就是true也就是全屏否则就是false
判断是什么浏览器只需要判断当前对应的节点有没有对应浏览器下所对应的那个方法即可
读取文件接口
onchange也可以获取当前的文件改变状态
- files属性获取表单文件元素的文件
- new FileReader() 读取文件实例对象
- abort none 中断读取
- readAsBinaryString file 将文件读取为二进制码
- readAsDataURL file 将文件读取为 DataURL base64
- readAsText file, [encoding] 将文件读取为文本
通过new FileReader()实例对象的readAsDataURL（图片文件）也就是我们使用document.querySelector(‘文件input’).files获取到的元素放在里面
当读取完成后就会将数据存放在new FileReader()内的result中，因为new FileReader()内没有返回值，所以我们需要调用new FileReader()的一系列事件状态，通俗的讲就是钩子函数来实现对应的功能
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
拖拽事件
默认p标签是不能拖拽的 因为鼠标移入就会变成 I 所以我们要加入一个属性
draggable=true
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
ondrop默认不触发所以我们要在ondragover事件中阻止浏览器默认行为 e.preventDefault()
注意在我们appendchild()想目标元素追加我们要拖动的元素时，因为页面上已有对应的属性，appendchild的作用就相当于剪切，而不是追加！
e.dataTransfer.setData(‘text/html’,e.target) //传值
e.dataTransfer.getData(‘text/html’) //取值
sessinoStorage的使用
- sessionStorage存储数据到本地，存储的容量是5MB左右，存进去的都是字符串，关闭页面自动清除
- setItem（key，value）：存储数据键值队方式
- getItem（key）：查询数据
- removeItem（key）：删除数据
- clear（）：清除所有内容
localStorage的使用
- sessionStorage存储数据到本地，存储的容量是20MB左右，存进去的都是字符串，关闭页面不会清除
-
- setItem（key，value）：存储数据键值队方式
- getItem（key）：查询数据
- removeItem（key）：删除数据
- clear（）：清除所有内容
应用缓存机制 cache manifest文件
- 需要在meth标签中添加manifest属性值为路径名扩展名最好为appcache
- 如manifest=‘app.appcache’
- 在app.appcache中我们需要添加3项 文件中#开头的是注释
| 填写项 | 作用 |
|---|---|
| CACHE MANIFEST | 开头必写第一项，标记当前文件是一个缓存文件 |
| CACHE:路径如…/img/1.jpg | 需要缓存的清单列表 |
| NETWORK:路径如…/img/1.jpg | 每一次都需要重新请求的文件清单 |
| FALLBACK:…/img/2.jpg …/img/1.jpg | 文件找不到就用指定文件代替 |
| CACHE中的 * | 代表所有文件需要缓存 |
| FALLBACK中的 / | 代表所有文件找不到就都会用指定文件代替 |
CSS3篇
选择器
属性选择器
E[attr]:获取拥有对应的属性的标签
E[attr=value]:严格匹配对应属性相等的，并且值相等的标签
E[attr*=value]:查找指定attr属性，并且值中任意位置包含value的
E[attr^=value]:查找指定attr属性，并且值开头value的
E[attr$=value]:查找指定attr属性，并且值value结尾的
伪类选择器
兄弟伪类：获取当前元素满足条件的元素
- +：获取当前元素的相邻的满足条件的元素
- .first + li {} 获取添加了.first类相邻的li标签元素
- ~：获取当前元素的满足条件的所有兄弟元素
- .first ~ li {} 获取添加了.first类所有的兄弟li标签元素
相对于父元素的结构伪类
- E:first-child：查找E元素的父元素的第一个必须是E的元素
- E:last-child：查找E元素的父元素的最后一个必须是E的元素
- E:first-of-type:查找E元素的父元素的第一个E的元素
- E:last-of-type:查找E元素的父元素的最后一个E的元素
E:nth-child(从1开始的索引||关键字||表达式):
- E:nth-child(4):查找E元素的父元素的第四个元素
- E:nth-child(even):查找E元素的父元素的所有子元素是偶数的元素
- E:nth-child(odd):查找E元素的父元素的所有子元素是奇数的元素
- E:nth-of-type(-n+5)查找E元素的父元素的当前E元素的前5个元素
- E:nth-last-of-type(-n+5)查找E元素的父元素的当前E元素的前5个元素
- E:empty 内容是空值的，连空格都没有的
- E:target 可以为锚点目标添加元素，当E锚点被触发时，就会触发对应的样式
E:nth-of-type() 和上方一样限制元素，不会选取所有的子元素而是E
伪元素选择器
默认时行内样式,如若设置宽高需要设置为块级元素必须设置content:""
E::before --之前
E::after --之后
E::first-letter --设置E元素首字样式 文本环绕 float:left;即可
E::first-line --设置E元素的首行样式 如果设置了::first-letter 那么无法同时设置他的样式
E::selection --设置当前E元素选中内容的样式，只能设置显示样式，不能设置大小
颜色样式
- rgba:红橙黄绿青蓝紫（红，绿，蓝，透明度）
- hsla:h=>0-360分别代表红橙黄绿青蓝紫 s=>0-100%饱和度，深淡 L=>0-100%亮度越低越黑，默认是50%，超过50%就会越来越白建议写50%
- 通过opcity设置的透明度，整个元素都会变得透明，通过背景的rgba，hsla来设置就是单纯的背景透明，文字不透明
- transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值
文件阴影
- text-shadow(文本阴影): X轴偏移量 y轴偏移量 模糊样式越高阴影越模糊反之清晰 阴影颜色 ，逗号分隔可绑多个
- box-shadow(文本阴影): X轴偏移量 y轴偏移量 模糊样式越高阴影越模糊反之清晰（可选）阴影的大小默认为0px（可选） 阴影颜色（可选）inster（默认外阴影，加inster变成内阴影） ，逗号分隔可绑多个
盒子模型
- 默认情况下盒子width仅为内容的宽度，不包括padding和边框
1.W3C盒模型（标准盒模型）
- 给一个标签添加：box-sizing:content-box；(元素默认)
这个标签就转换为了w3c盒模型
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
2怪异盒模型(又称ie盒模型)
2. 给一个标签添加：box-sizing:border-box；
这个标签就转换为了怪异盒模型
标签得实际宽度 = 设置的宽度
如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。
线性渐变（从一个方向往另一个方向渐变颜色）
- linear-gradient(方向或者度数45deg就是度，开始颜色 位置从什么地方开始0%，颜色2 位置从什么地方结束30%，颜色3 位置从什么地方开始30%。。。。)
- 如background:linear-gradient(toright,red 0%,blue 100%)
径向渐变（从一个中心点向外围渐变颜色）
- radial-gradient(形状正方形circle 适配ellipse，大小默认最远边，从某个位置开始的渐变色 at left top或写像素进行开始定位，)
- 如background:radial-gradient(red ,blue)
边框图片
- border-image-source:url()默认填充到4个角点
- border-image-slice:怎么分隔 27 fill默认填充内容
- border-image-width:边框的宽度和border宽度一样就好
- border-image-outset:0px扩展边框背景
- border-image-repeat:repeat/round/stretch 一个是完全平铺 一个是按个平铺 一个是拉伸
过渡
- 过渡效果执行完毕之后默认会回到原始状态 而且只能从某一个值到另一个具体的值的过渡
- transtiton-property：添加过渡效果的样式属性名称left属性 有过渡效果
- tramstiton-duration:过渡的耗时，以秒做单位 2s
- transition-timin-function：控制运动的速度
- transiotion-delay:延时多长时间 2s
- 简写:transition:属性名称 过渡时间 时间函数 延迟
- transition:left 2s linear 0s，background-color…; 配合div:active使用,可以用逗号分隔添加多个
- transition:all 2s linear 0s; 为所有样式添加过渡效果效率不高
- steps(4)以4次去完成这个过渡
- ie10往上才支持transtion 添加前缀
2d转换
- tranform:translate() :active执行完毕之后会恢复到原来的地方样式也可以在translate后添加X、Y
- tarnform:scale() 缩放如果只有一个参数就是xy相等比例缩放，两个就是x，y，值>1就是放大反之就是缩小，参照于元素的正中心也可以后scale之后添加X、Y与前方用法一致
- tranform:rotate() 只能写一个值 z轴旋转也就是屏幕平行转正值顺时针转，负值逆时针转 度数用deg来表示 例如就是30deg
- tranform:skew() 斜切的 X Y
- tranform-origin:left top 切换轴心点
动画
- 动画可以添加多个关键帧，动画的核心就是关键帧
- animation-name:下方动画名称；
- animation-duration:2s;时间
- animation-iteration-count:2；指定默认动画执行次数，默认一次，也可制定infinite指定无数次
- animation-direction:alternate; 来回交替执行
- animation-delay：2s；动画延时
- animation-fill-mode：forwards保留动画结束时状态 backwards如果动画有初始状态有延时，可以看到初始状态，不会保留结束状态 both两者结合
- animation-timing-function：linear匀速 ease先快后满
- animation-play-state：paused暂停 running播放
- 创建动画关键字 @keyframs 动画名称{0%{} 50%{} 100%{} 百分比计算由总耗时计算 0%可以改成from 100%改成to}
多列布局
- column-count：3；文本呈3列分布
- column-rule：solid 3px red；和border边框样式一样
- column-gap：50px；设置列间隙
- column-width：500px；设置每列的列宽
- column-span：all/1;整行显示
2628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
