仓酷云

标题: 来一发HTML5和CSS3的一些新变更 [打印本页]

作者: 萌萌妈妈 时间: 2015-1-15 23:17
标题: 来一发HTML5和CSS3的一些新变更
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。网页制造poluoluo文章简介：互联网的开展老是在不休地催生新手艺的发生，而HTML5和CSS3是比来一向被会商的抢手话题，关于每一个互联网开辟者特别是前端开辟者而言，都充斥了猎奇与巴望。那末HTML5和CSS3事实有哪些让我们长远一亮的器材呢？
互联网的开展老是在不休地催生新手艺的发生，而HTML5和CSS3是比来一向被会商的抢手话题，关于每一个互联网开辟者特别是前端开辟者而言，都充斥了猎奇与巴望。那末HTML5和CSS3事实有哪些让我们长远一亮的器材呢？我在WebRebuild北京交换会和珍珠奶茶帮上给人人分享了《揭秘HTML5和CSS3》，PPT在这里：
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8
HTML5

HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C回收，并建立了新的HTML事情团队。在2008年1月22日，第一份正式草案公布。HTML5是近十年来Web开辟尺度最伟大的奔腾。和之前的版本分歧，HTML5并不是仅仅用来暗示Web内容，它的新任务是将Web带进一个成熟的使用平台，在HTML5平台上，视频，音频，图像，动画，和同电脑的交互都被尺度化。那末我们来看一下HTML5的手艺概览有哪些：
HTML5新增和移除的元素

HTML5新增了良多多媒体和交互性元素如video,audio，在HTML4傍边假如要嵌进一个视频或是音频的话必要引进一年夜段的代码，另有兼容各个扫瞄器，而HTML5只必要经由过程引进一个标签就能够，就像img标签一样便利。在页面结构和内容完成方面HTML5新增了良多布局化标签元素和块级及语义元素，假如你要用HTML暗示一个文件的上传进度条，在HTML5中你能够用progress这个元从来暗示，它有一个value属性形貌了已完成了几义务，另有一个属性max形貌了这个义务一共必要几，还能够经由过程DOM接口失掉这个进度条的position属性(只读)，也就是义务完成的百分比。Youtube在HTML5手艺上已做了一个实验，http://www.youtube.com/html5(必要翻墙)是用HTML5做的一个DEMO，从全部页面源代码来看，十分简便。固然HTML5也对一些元素新增了一些属性，如input和textarea的placeholder属性，相称于输出框的输出提醒，script有一个async属性会影响剧本的加载和实行。关于一切的HTML共有的属性我们一般把它称作是“全局属性”，如class,id,tabindex,title，HTML5也新增了一些全局属性，如contenteditable,contextmenu,hidden等属性。HTML5还增添了关于微数据的撑持，如HTML5新增的item,itempro,subject等属性。
固然HTML5也移除一些暗示页面展示的元素，如font,center,strike等，这些本应当是CSS来做的，以是仍是很好了解的，也移除一些影响网站可会见性的元素如frame,frameset,noframe和一些不经常使用的元素如acronym，而接纳abbr来暗示缩写。HTML5还移除一些影响客户端兼容性的HTML熟习，如link的rev属性，td的scope属性；HTML5也移除一些暗示页面展示的属性如一些元素的align,bgcolor属性。
HTML5对表单的撑持

HTML5供应了壮大的控件范例如url,email,date,tel等，壮大的束缚属性，如required暗示必填，文件上传的accept属性，和一些表单反复元素模子的撑持，HTML5在提交表单的时分还能够设置提交的体例为XML提交体例，如许服务器端吸收到的数据将是XML格局，HTML5的表单被界说为“WebForms2.0”，今朝opera9.5+对WebForms2.0的撑持较为完善。
点此检察WebForms2.0DEMO，必要Opera9.5+
HTML5DOM变更

HTML5在DOMLEVEL2HTML方面良多都是承继自HTMLDocument的接口，固然HTML5在DOM上也有一些值得注重的新成员，如：撑持getElementsByClassName，能够依据class类名选择元素，getSelection()将会前往以后选中的工具，在选择器下面有两个办法querySelector和querySelectorAll能够依据css选择符来猎取要查询的元素，相称于YUI3中的Y.one和Y.all。
HTML5的JavascriptAPIs

HTML5在Javascript下面新增了哪些API呢？

Video/Audio:HTML5为Video和Audio供应了API来闪开发者把持他们本人的用户界面，如能够播放或停息媒体内容。
Canvas:Canvas是一个新的HTML元素，这个元素能够被Script言语(一般是JavaScript)用来绘制图形。比方能够用它来绘图、分解图像、或做复杂的(和不那末复杂的)动画。Canvas是一个奇妙的器材，它给我的第一感到就像是在用Photoshop一样，它的每个办法跟Photoshop是那末地类似，经由过程canvas.getContext(’2d’)就能够失掉这个canvas的API，你能够经由过程fillStyle设置其添补色彩或是经由过程strokeStyle设置其描边色彩，乃至它画路径的操纵跟Photoshop的钢笔操纵更是不约而合。Canvas在良多网站都已有使用，如Firefox的及时下载形态统计，乃至还能够用canvas来编写WebGame。
Drag&Drop:在唆使设备的视觉媒体中，”Drag”的操纵就是鼠标按下(mousedown)并陪伴着鼠标挪动(mousemove)的事务，而”Drop”则是鼠标开释时触发的事务。在Drag&Drop里界说了DataEvent和DataTransfer接口，同时当拖拽操纵产生时会触发如dragstart,dragenter,dragleave,drop,dragend等事务。
WebWorkers:让Javascript多线程，能够在背景做良多事情而不会阻断以后的扫瞄器操纵。
Geolocation:地舆地位定位，运转navigator.geolocation.getCurrentPosition(success,error)这个办法时扫瞄器会提醒是不是要共享你的地舆地位，假如选择共享，则会回调success函数，success函数有一个参数是position工具，这个position工具有一个coords工具，coords工具包括了良多地舆地位信息如latitude(维度)和longitude(经度)，如许就能够晓得你的详细地位了，这个功效在一些手机如Iphone上已有普遍的使用了。
ApplicationCache:这是HTML5关于离线使用的撑持，经由过程在html元素上加一个属性manifest，扫瞄器会提醒你是不是要将数据缓存到客户端，假如用户选择了同意，则会依照指定的manifest文件列表缓存必要的文件，当你的收集不成用时，你仍是可使用这个使用的。关于离线使用，Google也开辟了GoogleGears扫瞄器扩大，不外最初Google转投HTML5大概也是看到了HTML5存储和离线使用的这类上风。
Storage:Webkit已完成了databasestorage，你能够像后端操纵数据库一样查询数据并实行一些操纵。另有一种存储是键值对存储，如sessionStorage和localStorage，能够经由过程setItem和getItem来存储与猎取值，相对Cookie的存储来讲，存储的容量要年夜良多。
X-DocumentMessaging:扫瞄器由于平安和隐私的缘故原由，制止了分歧域之间文档的通讯，固然这是一个平安限定，可是关于那些没有伤害的分歧域的文档通讯带来了良多成绩，可是HTML5能够完成这类跨文档通讯，让我们能够不必管源域是来自那里，同时能够避免剧本打击。

HTML5让你心动了吗？那末HTML5甚么时分会成为尺度呢？听说要比及2022年，这有一个很成心思的网站http://ishtml5readyyet.com/告知你另有几天HTML5会真正到来。
点击检察HTML5DEMO，必要Firefox3.5+/Safari4.0+

网页制造poluoluo文章简介：互联网的开展老是在不休地催生新手艺的发生，而HTML5和CSS3是比来一向被会商的抢手话题，关于每一个互联网开辟者特别是前端开辟者而言，都充斥了猎奇与巴望。那末HTML5和CSS3事实有哪些让我们长远一亮的器材呢？

CSS3

CSS3关于我们Web开辟者来讲不但是别致的手艺，更主要的是这些全新观点的web使用给我们带来更多无穷的大概性，也极年夜地进步了我们的开辟效力。我们将不用再依附图片大概Javascript往完成圆角、多背景、用户自界说字体、3D动画、突变、盒暗影、笔墨暗影、通明度等进步Web计划质量的特征使用。
CSS3在选择器下面的撑持

使用属性选择器我们能够依据属性值的开首或开头很简单选择某个元素，使用兄弟选择器能够选择同级兄弟结点或紧邻下一个结点的元素，使用伪类选择器能够选择某一类元素，CSS3在选择器上的丰厚撑持让我们能够天真的把持款式，而不用为了选择某些元素给他们加上如”odd”或”even”如许的类名。
CSS3在款式上的撑持

有一个查询拜访说开辟者最等候CSS3的特征是甚么，最初票数最多的是“圆角”，不错，圆角这个功效能够给我们这些前端工程师省往良多工夫和精神往切图拼集一个圆角。CSS3还撑持暗影，盒暗影和文本暗影，突变，之前你多是经由过程IE的滤镜看到过，实在CSS3完成起来加倍便利。@font-face能够自界说字体，假如用传统的体例，VD把一个带有特别笔墨的计划图给你让你来完成的话你大概会把它做成一个图片，而经由过程CSS3用@font-face就能够了。CSS3关于一连文本换行也新增了一个属性word-wrap,你能够设置其为normal(不换行)或break-word(换行)，这办理了一连英笔墨符呈现页面错位的成绩，也不必要后端往截取这个一连字符。利用CSS3你还能够给边框加背景，这在iphone上也有使用的例子。CSS3在背景上撑持背景调剂巨细，如当你用一张年夜图要做一个小的元素背景时能够经由过程background-size来调剂背景图的巨细来顺应这个元素。CSS3撑持opacity,rgba和hsl/a,opacity和rgba的区分是opacity设置的通明对其内容也会发生影响，而rgba只对你使用的元素发生影响。CSS3在结构上关于盒模子供应了撑持，能够设置box-sizing为content-box或border-box，使用为content-box就是一般的形式，而使用为border-box和IE5.5的盒模子很类似，即元素的宽度包含border和padding，这个在结构上大概会对照便利，不必往管究竟这个元素会占用多年夜的宽度，而用content-box还必要手动盘算一下这个元素实践占用的宽度。
CSS3关于动画的撑持

CSS3撑持的动画范例有：transform(变更)、transition(过渡)和animation(动画)。你能够对特定的属性设置transition，transiton和animation的区分不年夜，animation的动画是本人界说的，面向的更多的是剧本开辟者，常常加倍庞大。
为了利用年夜部分CSS3特征，我们不能不与本来的属性一同利用临盆商专有扩大。缘故原由是直到如今，年夜部分扫瞄器只撑持部分CSS3属性。最多见的公有属性是用于Webkit中心扫瞄器的(好比,Safari)，它们以-webkit-入手下手，和Gecko中心的扫瞄器(好比,Firefox)，以-moz-入手下手，另有Konqueror(-khtml-)、Opera(-o-)和InternetExplorer(-ms-)都有它们本人的属性扩大（今朝只要IE8撑持-ms-前缀）
那我们在开辟中该怎样往用CSS3呢？

我以为起首是遵守一个文雅升级的准绳，好比后面谈到的圆角，我们能够针对Firefox和Safari等这些撑持圆角的扫瞄器中使用CSS圆角，而那些不撑持CSS圆角的扫瞄器则显现为直角。其次就是关于不撑持CSS3的扫瞄器可使用Javascript来完成，如CSS3任何元素撑持:hover伪类，我们就能够对只撑持链接:hover的IE6用JS来完成。最初就是在向用户或老板推行新手艺的同时也要存眷他们的方针与可行性，不克不及为了手艺而手艺。
点击检察CSS3DEMO，必要Firefox3.5+/Safari4.0+
</p>
Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。

作者: 若天明 时间: 2015-1-17 21:39
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 第二个灵魂 时间: 2015-1-24 16:02
可以使用 CSS 检查工具进行设计。

作者: 飘灵儿 时间: 2015-2-2 11:05
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 柔情似水 时间: 2015-2-7 19:02
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: admin 时间: 2015-2-23 09:05
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 深爱那片海 时间: 2015-3-7 07:55
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 爱飞 时间: 2015-3-14 19:34
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 因胸联盟 时间: 2015-3-21 15:25
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

欢迎光临仓酷云 (http://www.ckuyun.com/)