html5和css3的总结 -凯发k8官方网
简单的罗列一个html5的新东西，以后的几天里详细的过一遍
一个挺有用的网站：www.css88.com
【h5的新标签】
用之前的标签完全可以代替的：header footer aside atrical nav address time mark section
新增的重要的标签：video audio caves（画图）
这些新标签的作用：语义化，使代码的可读性更强；便于提高搜索优化。
再谈谈兼容性：兼容ie9 ，ie8及其以下有些可以解决，但大部分的还是放弃。这里有两个词我觉得挺好，简单写两句。
优雅降级：保证功能在高级浏览器上的使用，放弃低级浏览器。
渐进增强：低级浏览器只保证基本功能的实现，高级浏览器确保的是更好的用户体验。
一个有用的小东西，可以解决部分ie浏览器兼容性问题：html5shiv.js
【js部分的新东西】
1》获取元素
odiv=document.queryselectorall('css选择器'); ——》选择一组
odiv=document.queryselector('css选择器'); ——》选择一个，如果选择一组的话只选择第一个
兼容性：只兼容ie8 （ie8只支持css2.0选择器）
2》js自定义属性
不标准
ff chrome 不支持 浏览器认为自定义属性不规范，将其过滤掉了
h5中自定义属性前面加 ： data-自定义属性 浏览器承认这个为自定义属性
打印自定义属性 console.log(this.dataset); ---->打印出来的是一个json，没有length
this,dataset.自定义属性=“值” 可以设置自定义属性的值
测试性能
程序之前 consolog.time('hello');
程序结束 consolog.timeend('hello');
this.dataset 的性能比getattribute 高
3》classlist
用于在元素中添加、删除、切换css类；
classlist属性是只读的，但可用add()/remove()方法修改他；
可多项添加和删除，在括号内添加多个css类名即可；
兼容ie10
element.classlist.add(); 添加类名
element.classlist.remove(); 删除类名
element.classlist.contains(); 返回布尔值 true表示元素包含该类名，false表示不包含
【html5的新功能】
1》地理定位（重要） geolocation
2》websql 前端数据库 鸡肋，没有隐私可言
3》js中多线程和单线程
单线程：一次只能做一件事
多线程：同事可以做很多事
多线程的实现：webworker 鸡肋：只能进行一些计算
4》websocket（重要）
ajax：单项 请求服务器---然后服务器再给你返回数据 性能一般
websocket：双向的 性能高 直播
5》本地存储（重要）：
cookie
localstorage
查看 f12--applition cookie上面
localstrorage和cookie的相同点：不能跨域，
cookie localstorage
大小 4k 4m
有效期 session（会话结束：关闭浏览器） 不过期
环境要求 走网络（传递方式） 不走网络（本地）
兼容性 兼容ie6 不兼容ie6
简便写法： localstorage.username='xiaoer';
标准写法 localstorage.setitem('username','xiaoer');
alert(localstorage.getitem('username'));
setitem
getitem
removeitem
clear
兼容性：
兼容ie7
6》表单
原来的表单元素 input
input新的属性 placeholder
required 不能为空，必须填
autocomplete 输入内容提示，默认值为on（开启），off（关闭）
tel：电话类型
data日期
month 月
week 周
color 颜色 ——————》获取值用onchange this.value
range 滑块（范围）
进度条
value：
min：
max：
value：
min：
max：
事件：
新表单，在手机端的优势：自动切换键盘
oncopy 在你复制的时候
oninput
7》canvas 画图标签
画出的图形是矢量图形：放大不失真
安布雷拉
css3：新样式
css三角形
图形字符
icon-font
border-radius：
tianox.com
动画效果：
transition:1s all ease/linear;
时间 哪个属性 加速减速
兼容性：
浏览器前缀
chrome -webkit-
ff -moz-
ie -ms-
opear 原来用自己的内核，现在用webkit内核
标准内核 不写也行-webkit-transition:
js添加浏览器前缀：---->有的浏览器 上也是小写
odiv.style.transiton
odiv.style.webkittransition
odiv.style.moztransition
odiv.style.mstransition
盒子阴影： box-shadow:0px 0px 100px #000;
x方向位移 y方向位移 模糊程度 颜色
线性渐变： background:-webkid-linear-gradient(渐变的角度/渐变开始的位置，颜色1 颜色1开始渐变的位置，颜色2 颜色2开始渐变的位置);
当位置为 top left /right bottom 的时候-websit-必须写
从左上到右下为-45deg
写一个四个颜色的跳变
background:-webkit-linear-gradient(red 25%,green 25%,green 50%,yellow 50%,yellow 75%,deepskyblue 75%);
径向渐变：background:-webkit-radial-gradient(圆心的位置，形状（circle），颜色1 颜色1开始渐变的位置，颜色2 颜色2开始渐变的位置);
圆心位置可以写center center/top left等等
重复渐变：background:-webkit-repeating-linear/radial-gradient();
可以画飞镖盘了
蒙版：-webkit-mask:;
background-size:contain/cover; 高度撑开，宽度自适应/宽度撑开，高度自适应
【其他一些不经常使用的滤镜】
-webkit-filter:blur(px);
1.图像高斯模糊
-webkit-filter:blur(4px);
范围随便写就行，记得加px
2. 图片进行棕褐色处理
-webkit-filter:sepia(1);
处理范围是0-1或者0%-100%
3. 图片灰色处理
-webkit-filter:grayscale(1);
范围是 0-1或者0%-100%
4. 图片反色处理
-webkit-filter:invert(1);
范围是 0-1或者0%-100%
5. 图像饱和度调节
-webkit-filter:saturate(30);
范围是 取值范围>=0数字或百分比 1为无效果，0为灰度图
6. 图像对比度调节
-webkit-filter:contrast(90);
取值范围>=0数字或百分比 1为无效果
7. 图像亮度调节
-webkit-filter:brightness(3);
取值范围>=0数字或百分比 1为无效果
8. 图像色相旋转
-webkit-filter:hue-rotate(300deg);
取值范围0deg-365deg, 0默认值，为无效果
9. 阴影滤镜
-webkit-filter:drop-shadow(5px 5px 3px #333);
今天就先写到这把，明天继续
转载于:https://www.cnblogs.com/jasonwang2y60/p/5958759.html
总结
以上是凯发k8官方网为你收集整理的html5和css3的总结的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：