HTML5和css3的总结
简单的罗列一个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 滑块(范围)
<progress></progress > 进度条
value:
min:
max:
<meter></meter>
value:
min:
max:
事件:
新表单,在手机端的优势:自动切换键盘
oncopy 在你复制的时候
oninput
7》canvas 画图标签
<canvas></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:url();
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);
今天就先写到这把,明天继续
HTML5和css3的总结的更多相关文章
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...
- 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结
今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Modernizr.js:为HTML5和CSS3而生!
原文链接:http://caibaojian.com/modernizr-js.html modernizr这个JS,在国外的主题里面很多地方都看到,就只记得是为html补充的,有点类似与respon ...
- <HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
- Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
<Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
随机推荐
- 奇怪的float
我在项目的实践中遇到了这样的一个问题 <div class="main"> <p>aaaa</p> <p>bbbb</p> ...
- WCF服务部署到IIS7.5
下面介绍如何把WCF服务部署到IIS: 为WCF服务创建.svc文件 我们知道,每一个ASP.NET Web服务都具有一个.asmx文本文件,客户端通过访问.asmx文件实现对相应Web服务的调用.与 ...
- CKEditor与CKFinder的配置
CKEditor与CKFinder的配置使用(一) 将CKEditor 与 CKFinder 的包含在项目中 从http://cksource.com网站上下载CKEditor与CKFinder,并将 ...
- 实践GTD三周年后的体会
从2011年7月开始实践GTD到现在已经3年多了,按照年初设定的目标,应该写点GTD的体会,但提起笔来的时候却发现并没有什么太新的体会,大部分体会都已经在以前的文章中写到了,甚至有些流程已经简化了,看 ...
- 《C程序设计的抽象思维》2.10编程练习(未完)
本文地址:http://www.cnblogs.com/archimedes/p/programming-abstractions-in-c-2.html,转载请注明源地址. 2.按照规定求圆柱的表面 ...
- 发布的时候Archive灰色
主要是因为发布的时候要选为将模拟器选择一下,选为Generic iOS Device. 来自为知笔记(Wiz)
- iOS开发之网络数据解析(二)--XML解析简介
前言:本篇随笔介绍的是XML解析. 正文: 1.XML解析方式有2两种: DOM:一次性将整个XML数据加载进内存进行解析,比较适合解析小文件 SAX:从根元素开始,按顺序一个元素一个元素往下解析,比 ...
- iOS设计模式简介
开闭原则: 一个模块的修改,对拓展开放而对修改关闭. 举个例子:有一个类在项目中很多地方被使用了,但是由于需求,想对这个类进行拓展,这里可以使用继承拓展出子类,可以对子类进行修改,尽量不要修改原来的类 ...
- animation of android (4)
TimeAnimator: 与objectAminator不同,它反馈的时间间隔.也就是说TimeAnimator不产生实际的动画效果,他反馈的时间间隔和时间值. 而你并不关心 interpolate ...
- APP国际化
1.app本地内容国际化 ①在项目中新建一个New File ---> iOS Resource -> String File ---> 命名为Localizable(之所以命名为L ...