HTML5第二节-追梦-dream

第二回合：HTML5的新特性

与之前的HTML4.01相比，HTML5增加了非常多的改变：

① 新的语义元素 ：、、 、 、 、 、 、 和 等等

② 新的元素特性 ：增加新的元素属性、表单元素、验证功能等内容。

③ 多媒体 ：增加音频、 视频元素等内容。

④ 2D/3D 绘图 ：增加 绘图元素。

⑤ 存储 ：增加在线、离线存储功能。

⑥ 连通性 ：增加客户端与服务器交互的两个内容：Web Sockets(客户端与服务器持久连接)和Server-sent events(服务器推送数据)等。

⑦ 集成 ：提供Web Workers、History API、requestAnimationFrame、地理位置等强大的功能。

⑧ 设备访问 ：提供对摄像头、移动设备的支持。

⑨ CSS3样式 ：提供了新的背景样式特性、动画、边框等样式。

下面我们用实例来说明下各个标签的使用以及h5与c3的配合。

html代码如下：

   DOCTYPE html  > 
   html  > 

   head  > 
     meta   charset  ="utf-8"   /> 
     title  > HTML5   title  > 
     link   rel  ="stylesheet"   href  ="html5.css"  > 

   head  > 

   body  > 

      header   class  ="show"  > 
        h1  > Header   h1  > 
        h2  > Subtitle   h2  > 
 
      header  >     头部结束   --> 

       div   id  ="container"  > 

           nav  > 
             h3  > Nav   h3  > 
             a   href  =""  > HTML5   a  > 
             a   href  =""  > CSS3   a  > 
             a   href  =""  > Javascript   a  > 
           nav  >     导航链接部分   --> 

           section  > 
               article  > 
                   header  > 
                       h1  > Article Header   h1  > 
                   header  >     定义头部   --> 
                   p  > Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.   p  > 
                   p  > Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.   p  > 
                   footer  > 
                       h2  > Article Footer   h2  > 
                   footer  >     定义尾部   --> 
               article  >     定义文章   --> 
               article  > 
                   header  > 
                       h1  > Article Header   h1  > 
                   header  > 
                   p  > HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio   p  > 
                   footer  > 
                       h2  > Article Footer   h2  > 
                   footer  > 
               article  > 
           section  >     定义文档中的节   --> 

           aside  > 
               h3  > Aside   h3  > 
               p  > do you love this case? if you want make friends with me ,you can add my qq: 1125911451,thank you for your join.   p  > 
               img   src  ="lian.jpg"   alt  =""   width  ="220"   height  ="250"  > 
           aside  >     定义侧边栏目   --> 
           footer  > 
               h2  > Footer   h2  > 
           footer  > 
       div  > 
   body  > 

   html  >

css代码如下：
  

 body  { 
    background-color : #CCCCCC ; 
    font-family : Geneva,Arial,Helvetica,sans-serif ; 
    margin :  0px auto ; 
    max-width : 900px ; 
    border : solid ; 
    border-color : #FFFFFF ;
} 

header  { 
    background-color :  #F47D31 ; 
    display : block ; 
    color : #FFFFFF ; 
    text-align : center ;
} 

header h2  { 
    margin :  0px ;
} 

h1  { 
    font-size :  72px ; 
    margin :  0px ;
} 

h2  { 
    font-size :  24px ; 
    margin :  0px ; 
    text-align : center ; 
    color :  #F47D31 ;
} 

h3  { 
    font-size :  18px ; 
    margin :  0px ; 
    text-align : center ; 
    color :  #F47D31 ;
} 

h4  { 
    color :  #F47D31 ; 
    background-color :  #fff ; 
    -webkit-box-shadow :  2px 2px 20px #888 ; 
    -webkit-transform :  rotate(-45deg) ; 
    -moz-box-shadow :  2px 2px 20px #888 ; 
    -moz-transform :  rotate(-45deg) ; 
    position :  absolute ; 
    padding :  0px 150px ; 
    top :  50px ; 
    left :  -120px ; 
    text-align : center ;
    
} 

nav  { 
    display : block ; 
    width : 25% ; 
    float : left ;
} 

nav a:link, nav a:visited  { 
    display :  block ; 
    border-bottom :  3px solid #fff ; 
    padding :  10px ; 
    text-decoration :  none ; 
    font-weight :  bold ; 
    margin :  5px ;
} 

nav a:hover  { 
    color :  white ; 
    background-color :  #F47D31 ;
} 

nav h3  { 
    margin :  15px ; 
    color :  white ;
} 

#container  { 
    background-color :  #888 ;
} 

section  { 
    display : block ; 
    width : 50% ; 
    float : left ;
} 

article  { 
    background-color :  #eee ; 
    display : block ; 
    margin :  10px ; 
    padding :  10px ; 
    -webkit-border-radius :  10px ; 
    -moz-border-radius :  10px ; 
    border-radius :  10px ;
} 

article header  { 
    -webkit-border-radius :  10px ; 
    -moz-border-radius :  10px ; 
    border-radius :  10px ; 
    padding :  5px ;

} 

article footer  { 
    -webkit-border-radius :  10px ; 
    -moz-border-radius :  10px ; 
    border-radius :  10px ; 
    padding :  5px ;
} 

article h1  { 
    font-size :  18px ;
} 

    
aside  { 
    display : block ; 
    width : 25% ; 
    float : left ;
} 

aside h3  { 
    margin :  15px ; 
    color :  white ;
} 

aside p  { 
    margin :  15px ; 
    color :  white ; 
    font-weight :  bold ; 
    font-style :  italic ;
} 
    

footer  { 
    clear :  both ;     
    display :  block ; 
    background-color :  #F47D31 ; 
    color : #FFFFFF ; 
    text-align : center ; 
    padding :  15px ;
} 

footer h2  { 
    font-size :  14px ; 
    color :  white ;
}


 /*   links   */  
a  { 
    color :  #F47D31 ;
} 

a:hover  { 
    text-decoration :  underline ;
} 
.show  { 
           
          
            -webkit-animation :  show 25s ease-out infinite ; 
            -moz-animation :  show 25s ease-out infinite ; 
            -o-animation :  show 25s ease-out infinite ; 
            animation :  show 25s ease-out infinite ; 
            -webkit-transform :  translate3d(0, 0, 0) ; 
            -ms-transform :  translate3d(0, 0, 0) ; 
            -o-transform :  translate3d(0, 0, 0) ; 
            transform :  translate3d(0, 0, 0) ;
        } /*  调用动画  */  
 @-webkit-keyframes show  { 
            0% {
                background :  #f47d31 ; 
                color :   white ;
            } 

            50%  { 
                background :  #e0a014 ; 
                color :  #a3d9ff ;
            } 

            100%  { 
                background :  purple ; 
                color :  pink ;
            } 
        }  /*  定义动画  */
效果图如下图所示   

查看更多关于HTML5第二节-追梦-dream的详细内容...