来看看：HTML5与CSS3对网页计划制造事情的优点
最近群里面很多人在问html5应该怎么学，这个问题其实没有标准答案。我开这个帖子，目的是为了收集大家每天的学习心得，欢迎大家来回复。破洛洛文章简介：别忧虑，有HTML5、CSS3在.HTML5和CSS3高潮正横扫收集，处置互联网行业，出格是前端事情者，人人或多或少都有懂得、进修和利用，HTML5和CSS3包括丰厚的手艺内容，在每周的手艺分享交换会中，页面构建工程师@Sunshine珍同砚，从三个出格的角度动身，共同丰厚的实例，归纳综合了HTML5与CSS3对页面事情带来的互相关注的变更和出色。
1、我们忧虑忧?的那末事儿
1.1关于页面构建者来讲：
体现层会碰到一些困难，浏览壮丽的UI计划稿的同时，也在忧?如何用现用的手艺力气往完成圆角，暗影，高光，突变，通明等各类体现效果。为了精准UI复原度，我们会不吝消费更多字节数切年夜图大概增加一些过剩的空标签。
布局层一样也会碰到贫苦。起首看页面首行代码doctype，包括了，冗杂而庞大，处置多年开辟的你能记着这段话吗？
接着看满屏几近都是毫无语义的div标签，为了完成庞大的计划效果，我们不能不利用多个层级嵌套，形成代码冗余。
再看看页面中一些交互动画效果，基础都是JS和flash开辟职员所完成，页面构建在现有手艺上只能故意而有力。
1.2关于js开辟职员来讲：
一个复杂的交互效果，一个又一个表单考证，必要利用一年夜段JS代码往完成，为了兼容各个扫瞄器，不能不多写数行代码。
1.3关于flash开辟职员来讲：
Flash开辟职员忧虑的是用户没有安装需要的插件，忧虑插件被禁用大概屏障，像如今apple的ipad就已不撑持flash插件了。
以上的忧虑与忧?你曾有过吗？假如有，别怕，HTML5和CSS3来了，已来了！
2、我们高兴盼来的那末事儿
HTML5和CSS3的到来，让我们网页开辟者能够做的更多，更好！
CSS3带来了圆角，半通明，暗影，突变，多背景图等新的特性，轻松完成了计划稿中罕见的图层款式，用简便的代码替换图片，取代了过剩的空标签。CSS3带来的媒体查询能够为分歧的显现设备界说相婚配的款式，天真完成了智能的流体结构，CSS3还为我们带来了壮大的选择器和变形动画。上面让我们一同来看看实践事情中的详细使用吧~
（实例一）
相似实例一的计划稿，我们罕见的做法是在无序列表li里为分歧小图标识写上分歧的class类名，大概独自为每一个小图标写上空标签订义款式，如许带来的成绩之一是html布局不洁净简便，二是使后续的开辟工程师多了一层判别。
而使用CSS3壮大的选择器就可以轻松办理这个成绩，E［foo^=”bar”］暗示的是选择婚配E的元素，且该元素界说了foo属性，foo属性值包括前缀为bar的子字符串。
以下是片断代码。
CSS3包括了良多新的属性特性，动画效果尤其受人人喜好。实例二是为此次分享做的一个进修动弹盘。用JS和CSS3往把持转盘的指针动弹效果。
（实例二）
该实例重点在于animation-play-state属性，paused暗示的是停息。
Animation属性包括了动画称号Animation-name，动画工夫Animation-duration，动画播放体例Animation-timing-function，动画入手下手播放工夫Animation-delay，动画播放次数Animation-iteration-count，动画播放偏向Animation-direction等等，实例具体代码请见PPT。
领阅了CSS3带来的代价，那末HTML5给我们带来了哪些盼来的事儿呢？
HTML5的标语是复杂至上，尽量地简化：简化了doctype，如；简化了字符集声明；新增了更多语义化标志header、footer、section、article、aside、nav；新增了良多标识元素如canvas、audio、video，共同复杂而又壮大的HTML5API，让扫瞄器发扬它原生的才能，来替换庞大的javascript代码。
（实例三）
实例三是用canvas画的一个weibologo图标。这里用到了两个常识重点：
其一，context.lineCap=［value］，线帽作风有三种：对接（butt）默许值，圆形（round）方形（square）；
其二，arc（x，y，radius，startAngle，endAngle，anticlockwise），x，y指定绘制的圆弧的圆心下xy轴坐标，radius是圆的半径，startAngle和endAngle指定了肇端弧和停止弧，anticlockwise指定是不是利用逆时针偏向画图，逆时针偏向（TRUE），顺时针偏向（FALSE）。
（实例四）
实例四是用audio标签做的一个音乐播放器，用HTML5API供应的属性往把持该控件的播放play()，停息pause()，进度条，以后工夫currentTime，音量volume，歌曲选择且封面和曲名响应变更等效果。
先容audio标签经常使用的几个可剧本把持的特征：
Autoplay：把持音频在停当后主动播放，大概查询是不是已设置为autoplay。
Controls：向用户显现或埋没默许控件界面，好比播放按钮。
loop：用来设置媒体文件是不是轮回播放。
currenTime：前往从入手下手播放到如今所用的工夫（以S为单元）。
Muted：设置静音大概打消静音。
（实例五）
实例五是演示壮大的表单，它的壮大不但表现在更多的type范例tel，email，url，search，range，number，color，datetime等更强的表现在它对应的HTML5formsAPI.
讲三个事情中罕见的交互效果所用到的特征：
1、autofocus指定某个表单位素主动取得核心，但必要注重每一个页面仅只同意一个autofocus特征。
2、placeholder表单输出型控件的默许案牍，当取得核心大概输出值时，默许案牍主动消散。
3、list特征和datalist元素，利用该组合，能够完成罕见的遐想输出浮层。
3、我们正满怀等候的那些事儿
幻想老是优美的，但是不论是扫瞄器的汗青遗留成绩，仍是互联网用户的习气，都或多或少的限定着HTML5和CSS3的推行，我们等候标准制订者们可以尽快推出一致的尺度，各个扫瞄器厂商可以更好更多地撑持新特征。
等候我们不再为了兼容各类扫瞄器，而写上大批的公有特征，不再由于某些扫瞄器的限定，而接纳不用要的冗余措施。
等候更多的互联网利用者尽快和老固执IE6说拜拜。
等候在实践事情中让我们介入更多，做的更多。
由于HTML5和CSS3，统统不必忧虑。
PPT地点：http://momolovei.sinaapp.com（为了失掉更好的视觉效果请利用FF扫瞄器）
sunshine珍儿
</p>
有些差异相对轻微，有充分的理由将这两种HTML5规范草案合并为一，让浏览器制造商与网络开发者不必面对不兼容的窘境。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
页:
[1]