Chapter 5
   锋利的 jQuery
“ 动感新势力”( HTML5 以及
      CSS3 )
HTML5 官方 logo
1 、语义学

     2 、本地存储                                 8 、 CSS3

         3 、设备访问                       7 、性能集成

                4 、连结性            6 、平面和三维
                    5 、多媒体
下载这些资源: http://www.w3.org/html/logo/
HTML5 特性
• 新的 Doctype


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
  ……………………>




   <!DOCTYPE html>
HTML5 特性
• 语义化

• <img src="path/to/image" alt="About
  image" /> <p>Image of Mars. </p>

• <figure> <img src="path/to/image"
  alt="About image" /> <figcaption> <p>This
  is an image of something interesting. </p>
  </figcaption> </figure>
HTML5 特性
           <!DOCTYPE HTML>
• 多媒体支持    <html>
           <body>
           <video width="800"
           height="600"
           controls="controls">
             <source src="movie.ogg"
           type="video/ogg">
             <source src="movie.mp4"
           type="video/mp4">
           Your browser does not
           support the video tag.
           </video>
           </body>
           </html>
HTML5 特性
• CSS3

• 纯 CSS3 测试浏览器

Web设计 5 “动感新势力”(css3 html5 以及 web_gl)

  • 1.
    Chapter 5 锋利的 jQuery “ 动感新势力”( HTML5 以及 CSS3 )
  • 2.
  • 3.
    1 、语义学 2 、本地存储 8 、 CSS3 3 、设备访问 7 、性能集成 4 、连结性 6 、平面和三维 5 、多媒体 下载这些资源: http://www.w3.org/html/logo/
  • 4.
    HTML5 特性 • 新的Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ……………………> <!DOCTYPE html>
  • 5.
    HTML5 特性 • 语义化 •<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p> • <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
  • 6.
    HTML5 特性 <!DOCTYPE HTML> • 多媒体支持 <html> <body> <video width="800" height="600" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>
  • 7.
    HTML5 特性 • CSS3 •纯 CSS3 测试浏览器