• 1. Html5与css3杨亮
  • 2. HTML5 是下一代的 HTMLHTML 5是一个新的网络标准,目标在于取代现有的HTML 4.01, XHTML 1.0 and DOM Level 2 HTML标准。 例子
  • 3. 标准的发展HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
  • 4. 支持html5的浏览器最新版本的 Safari(3+)、Chrome(3+)、Firefox(3.5+) 、Opera(10)以及ie(9)支持某些 HTML5 特性,以及一些双内核浏览器。
  • 5. 为 HTML5 建立的一些规则 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明
  • 6. HTML5 中的一些有趣的新特性 用于媒介回放的 video 和 audio 元素 用于绘画的 canvas 元素 对本地离线存储的更好的支持 新的表单控件,比如 calendar、date、time、email、url、search 新的特殊内容元素(标签),比如 article、footer、header、nav、section
  • 7. HTML5 视频大多数视频是通过插件(比如 Flash)来显示的。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 支持格式 Ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • 8.
  • 9. HTML5 音频大多数音频是通过插件(比如 Flash)来显示的。 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 支持格式 Ogg Mp3 Wav
  • 10.
  • 11. 标签canvas [’kænvəs]提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个“上下文( context )” (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。 冰霜绘画板, deviantART Muro
  • 12. HTML5 Web 存储HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 Web 存储的缺陷主要集中在其安全性方面: 浏览器会为每个域分配独立的存储空间,但是浏览器却不会检查脚本所在的域与当前域是否相同 存储在本地的数据未加密而且永远不会过期,极易造成隐私泄漏。
  • 13. HTML5 表单HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 email,url,number,range,Date pickers,search,color HTML5 拥有若干涉及表单的元素和属性。datalist,keygen,output 演示(需用opera浏览)
  • 14. HTML5 标签:语义化的标签HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的
    标签。

    Div Soup

    Posted on

    Lorem ipsum text.

    Lorem ipsum text.

  • 15. 美丽的html代码
  • 16. CSS3CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 备受期待的 CSS 3 新功能:圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、文字阴影、盒阴影、RGBa - 加入透明色等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。 机器猫,太阳系
  • 17. CSS3圆角border-radius Box阴影box-shadow Text阴影text-shadow 边框图片border-image 多背景图background-image 透明颜色RGBA及透明度opacity
  • 18. border-radius为边框增加圆角效果,是CSS3中最受期待的属性,如border-radius:1px 2px 3px 4px,属性顺序为左上、右上、右下、左下。 兼容性(以最新版为准) Webkit 内核:√ Gecko 内核:需加前缀-moz- Presto 内核:√最受期待CSS3 - 圆角border-radius
  • 19. CSS3 – 块阴影box-shadowbox-shadow为块增加圆角效果,如box-shadow:1px 1px 2px #ccc,属性顺序为水平偏移,垂直偏移,模糊程度,阴影颜色 兼容性(以最新版为准) Webkit 内核:需加前缀-webkit- Gecko 内核:需加前缀-moz- Presto 内核:√
  • 20. CSS3 – 文字阴影text-shadowtext-shadow为块增加圆角效果,如text-shadow:1px 1px 2px #ccc,属性顺序为水平偏移,垂直偏移,模糊程度,阴影颜色 兼容性(以最新版为准) Webkit 内核: √ Gecko 内核: √ Presto 内核:√
  • 21. CSS3 –透明颜色RGBA及透明度opacitybackground-color: rgba(0,0,0,0.5) opacity:0.50; 兼容性(以最新版为准)rgbaopacityWebkit 内核√√Gecko 内核√√Presto 内核√√
  • 22. 回顾回顾
  • 23. 理念浏览器兼容性没必要做到所有浏览器效果完全一致。 要充分提现高级浏览器用户的优越性,引导用户升级浏览器。
  • 24. 谢谢