简单的罗列一个HTML5的新东西，以后的几天里详细的过一遍一个挺有用的网站：www.css88.com
【H5的新标签】
用之前的标签完全可以代替的：header
新增的重要的标签：video
caves（画图）
这些新标签的作用：语义化，使代码的可读性更强；便于提高搜索优化。
再谈谈兼容性：兼容IE9+，IE8及其以下有些可以解决，但大部分的还是放弃。这里有两个词我觉得挺好，简单写两句。优雅降级：保证功能在高级浏览器上的使用，放弃低级浏览器。渐进增强：低级浏览器只保证基本功能的实现，高级浏览器确保的是更好的用户体验。
一个有用的小东西，可以解决部分IE浏览器兼容性问题：HTML5shiv.js
【js部分的新东西】1》获取元素
oDiv=document.querySelectorAll('css选择器');
——》选择一组
oDiv=document.querySelector('css选择器');
——》选择一个，如果选择一组的话只选择第一个
兼容性：只兼容IE8+（IE8只支持css2.0选择器）
2》js自定义属性
浏览器认为自定义属性不规范，将其过滤掉了
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类名即可；
element.classList.add(); 添加类名 Element.classList.remove(); 删除类名 element.classList.contains(); 返回布尔值
true表示元素包含该类名，false表示不包含
【html5的新功能】1》地理定位（重要）
geolocation2》websql
前端数据库
鸡肋，没有隐私可言3》js中多线程和单线程+
单线程：一次只能做一件事
多线程：同事可以做很多事
多线程的实现：webworker
鸡肋：只能进行一些计算4》websocket（重要）
ajax：单项
请求服务器---然后服务器再给你返回数据
websocket：双向的
直播5》本地存储（重要）：
localStorage
f12--applition
cookie上面
localStrorage和cookie的相同点：不能跨域，
localStorage
session（会话结束：关闭浏览器）
不过期环境要求
走网络（传递方式）
不走网络（本地）兼容性
简便写法：
localStorage.username='xiaoer';
localStorage.setItem('username','xiaoer');
alert(localStorage.getItem('username'));
removeItem
原来的表单元素
input新的属性
placeholder
不能为空，必须填
autocomplete
输入内容提示，默认值为on（开启），off（关闭）
tel：电话类型
——————》获取值用onchange
this.value
滑块（范围）
&progress&&/progress &
&meter&&/meter&
新表单，在手机端的优势：自动切换键盘
在你复制的时候
&canvas&&/canvas&
画出的图形是矢量图形：放大不失真
css3：新样式
border-radius：
tianox.com
动画效果：
transition:1s
浏览器前缀
原来用自己的内核，现在用webkit内核
不写也行-webkit-transition:
js添加浏览器前缀：----&有的浏览器 上也是小写
oDiv.style.transiton
oDiv.style.WebkitTransition
oDiv.style.MozTransition
oDiv.style.msTransition
盒子阴影：
box-shadow:0px 0px 100px
线性渐变： 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/ 高度撑开，宽度自适应/宽度撑开，高度自适应 【其他一些不经常使用的滤镜】 -webkit-filter:blur(px);1.图像高斯模糊-webkit-filter:blur(4px);范围随便写就行，记得加px2. 图片进行棕褐色处理-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有什么值得推荐的书籍？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。4被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答赞同 4 条评论分享收藏感谢收起赞同 添加评论分享收藏感谢收起写回答HTML5和CSS3 - 简书
HTML5和CSS3
html5上新增加了语义化标签（结构标签），表单属性，表单种类，全局属性。
css3增加了transition过渡属性，transfrom变形属性，animation帧动画
标签语义化：用合理的标签做合理的事情
CSS3有哪些新特性？
1、css3实现了圆角（border-radius），阴影（box-shadow）
2、对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
3、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4、增加了更多的css选择器和多背景 rgba
5、在css3中唯一引用的伪元素是 ：selection
6、媒体查询和多栏布局
7、border-image：将图片规定为包围 div 元素的边框
2、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
1、拖拽释放（Drag and drop） API
2、语义化更好的内容标签（header：头部，nav：导航部分，footer：尾部，aside：用于主要内容部分，article：表示独立的一块，section：表示页面中的一块区域）
3、音频，视频（audio，video）API
4、画布（Canvas）API
5、地理（Geolocation）API
6、本地离线存储 localStorage 长期存储数据，浏览器关闭数据不丢失
7、sessionStorage的数据浏览器关闭后会自动删除
8、表单控件，calendar、date、time、email、url、search
9、新的技术webworker, websocket, Geolocation
表单种类：
time：时间
tel：手机号 数字键盘
表单属性：
autocomplete：是否保存用户输入信息
required： 必须输入内容
移除了的元素：
1、纯表现的元素：basefont，big，center，font，s，strike，tt，u。
2、对可用性产生负面影响的的元素：frame，frameset，noframes。
新增标签的兼容问题：
HTML5语义化标签在IE6-8下，对于不支持的标签不会有任何的样式,也默认的当成行内元素来出理,所以在样式表里要对这些标签定义一下 它默认的display
通过引入如下js来解决ie9以下新增标签的兼容问题
什么是响应式设计？
他是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站正常运行
CSS3新增加了那些伪类？
1、p:first-of-type 选择属于其父元素的首个 p 元素的每个p元素。
2、p:last-of-type
选择属于其父元素的最后 p元素的每个 p 元素。
3、p:only-of-type
选择属于其父元素唯一的 p 元素的每个 p 元素。
4、p:only-child
选择属于其父元素的唯一子元素的每个 p 元素。
5、p:nth-child(2)
选择属于其父元素的第二个子元素的每个 p 元素。
:enabled：启用、:disabled：关闭（ 控制表单控件的禁用状态）。:checked，单选框或复选框被选中
css3的核心模块：
transition：过渡动画
transform：变形属性
animation：帧动画
Transition过渡：
transition-property
all|[attr]
transition-duration 过渡时间
transition-delay 延迟时间
linear：（匀速）
css3的结构选择器：
nth-child(n) 获取第几个子元素
first-child 第一个子元素
在css2中所有的属性都是即时效果的
在css3中增加了动画属性，可以实现动画效果
响应式开发：
1、设置viewport（视口）
2、页面布局不能使用绝对宽度
3、引入媒体查询
现存的三种布局方式:
响应式布局：
响应式布局说白就是页面根据不同的屏幕像素宽高适应页面布局
就是随着页面的属性（宽高）变化，页面也跟这变化
主要css技术：
1、多使用max-width/min-width，不写死宽度
2、多使用 media查询来响应不同的分辨率
3、使用动态，rem方案保证移动端的显示效果
响应式和自适应的区别：
1、自适应布局（流体布局、fluid、layout）值得是页面的宽度不固定，跟响应式宽度没关系
2、自适应页面强调不写死宽度；响应式页面强调 响应
3、自适应页面可以响应式，也可以不响应式
4、响应式页面可以自适应，也可以不自适应，（也就是定宽度）
移动端常用的事件类库
1、百度云TOUCH手势事件库
2、Zepto(移动端的小型jQuery=&它的用法和实现完全是按照JQ实现的)
css预处理器-less
less自带一套语法及解析器，通过解析器可以将less代码转换成css代码
1、增加了变量
2、增加了Mixin混合：其实指的就是将其他选择器里的内容拿过来用
增加了变量、Mixin、函数等特性
在当前LESS文件中导入所依赖的LESS文件
reference：只是导入过来供调取使用,编译的时候不编译这里的代码
@import "reset";
@import (reference) "public";
简述一下Sass、Less，且说明区别？
他们是动态的样式语言，是css预处理器，css上的一种抽象层，他们是一种特殊的语法/语言而编译成css
1、变量符不一样，less是@，Sass$
2、Sass支持条件语句，可以使用if{}，else{}，for循环等等，而less不支持
3、Sass是基于Ruby的，是在服务器端处理的，而less是需要引入ess.js来处理less代码输出css到浏览器
Sass和less的相同之处
1、变量：可以单独定义一些通用的样式，在需要的时候进行调用
2、混合（Mixin）：class中的class（将一个class引入另一个class中，实现class之间的继承），还可以带参数的混合，就像函数一样
3、嵌套：class中嵌套class，从而较少class的重复
4、运算：提供了加减乘除
Sass和less的不同之处
1、实现方式：less是基于JavaScript，是在客户端进行处理的。而sass是基于Ruby的，是在服务器端进行的处理的
2、定义变量：less定义变量使用前缀是@，而sass是$
3、混合：less使用混合时，只需要在classB中根据classA的命名来使用，Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。
4、解析方式：Less可以向上/向下解析；Sass只能向上解析
5、变量的作用域：Less中的变量有全局和局部之分；Sass可以变量可以理解为都是全局的，但可以通过在变量后面跟！default，在引入Sass文件之前改变变量的属性值来解决这一问题。
6、比起Less，Sass中增加了条件语句（if、if...else）和循环语句（for循环、while循环和each循环）还有自定义函数：
html5上新增加了语义化标签（结构标签），表单属性，表单种类，全局属性。css3增加了transition过渡属性，transfrom变形属性，animation帧动画 标签语义化：用合理的标签做合理的事情 CSS3有哪些新特性？ 1、css3实现了圆角（border-r...
因为有机会参与一个项目的早起设计，因此搭建framework的时候不可避免的遇到了如何满足响应式的问题。翻阅了《响应式Web设计：HTML5和CSS3实践》和《Implementing Responsive Design》并记录了篇笔记，以供参考，另一本书的笔记以及在项目开...
CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)&!DOCTYPE htm...
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
响应式Web设计:HTML5和CSS3实战(第2版) 第六章 CSS3 高级技术 6.1 CSS3 文字阴影特效 基本语法： 缩写值的规则是“右偏移量，下偏移量，模糊距离（阴影从有到无的渐变距离），色值” 想把阴影向左上方偏移，可以使用负值 6.1.1 省略blur值 如果...
对于在学校每学年体检一次的我来说，被前段时间的一次晕倒吓坏了。 我在放假期间就没有一天是早早起床的，总是在窗帘实在挡不住阳光了的时候才揉眼醒来，所以我就错过了每一次早餐。一天的营养就是从早餐开始摄取，但是我从来不吃早餐，所以，可想而知，我的身体从早餐这里就出了问题了。 然而...
高中时有一个玩得很好的朋友，上厕所都会手拉着手那种。她高考时没发挥好，与二本擦肩而过，没有复读，也没有选择大专，毅然决然奔赴南下打工。那时我们都还没有手机，自此，失去联系。 几年之后偶然在校友群看到她的QQ号，激动的加了她，有一种失而复得的欣喜。 通过我的好友请求之后，我缠...
写了好多思念你的文字，却似乎从来没写过你是什么样子的人。突然觉得很遗憾，只顾着想你，却从来没好好的想过为什么想你，又或者是什么在吸引着我。 你在我心里是这样的。你在我眼里从来不是别人说的女汉子，你是温柔的女子。你喜欢养肉肉，我想每个可以把肉肉养的枝繁叶茂还可以给肉肉换盆的姑...
践行到了中期，不知道大家感觉如何，那天在组长群5组组长付付发问，（聊天记录）激情不够了怎么办？ 其实，有倦怠期，，就有重启期，（园妈分享的图片）只要你认为PPT是值得你去做的，而你又处在倦怠期，平静期，甚至时衰退期，那么，请为自己寻找那个甚至连自己都不知道什么时候会到来的恢...CSS3 选择器——属性选择器_css3选择器, 属性选择器, CSS选择器 教程_w3cplusHTML5中CSS3的属性选择器
CSS3属性选择器：
E[att] (选择具有att属性的E元素。 )
E[att="val"] (选择具有att属性且属性值等于val的E元素。 )
E[att^="val"] (选择具有att属性且属性值为以val开头的字符串的E元素。 )
E[att$="val"] (选择具有att属性且属性值为以val结尾的字符串的E元素。 )
E[att*="val"] (选择具有att属性且属性值为包含val的字符串的E元素。 )
E[att~="val"] (选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 )
E[att|="val"]
(选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。有多个时，没有效果 )
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
/*1.img[alt="234"]{
margin: 20
/*2.img[alt^="2"]{!*以2开头*!
margin: 20
/*img[alt$="3"]{!*以3结尾*!
margin: 20
/*img[alt*="3"]{!*全部属性有3的*!
margin: 20
img[alt~="123"]{/*以3结尾*/
margin: 20px;
.divHeight{
height: <span style="color:#px;
.divWidth{
width: <span style="color:#px;
background-color: red;
background-color: yellow;
&title&属性选择器&/title&
&img src="../../img/11.jpg" alt="123"&
&img src="../../img/11.jpg" alt="234"&
&div class="divHeight divWidth divBg"&
&div class="divWidth divHeight divBg2"&
&div class="a-div"&
&div class="b-div"&
&div class="c-div"&
css3选择器详细探索
css3选择器--基本选择器，层次选择器，属性选择器
css3中的属性选择器
css3属性选择器
css3中属性选择器的使用
Acticle 19:css3选择器的汇总
CSS3属性选择器
CSS3 选择器——属性选择器
没有更多推荐了，}