王阅

 

html5页面结构

我是html5初学者,最近闲来无事,和各位一起学些下html5.

开发环境 jdk1.6,tomcat6,开发工具eclipse.

新建一个web工程,创建一个index.jsp页面。页面代码如下。

 

一般页面设计分为头(header)、体(content)、尾(footer)三个部分。

<!DOCTYPE html><!-- html5标识 -->  

 <html>     

     <head>

            <meta charset="UTF-8">     <!-- 中文乱码处理 -->

        <!--每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机-->  
        <meta name="viewport" content="width=device-width, initial-scale=1">   

           <!--相关jquery mobile框架的css和js的引入-->

           <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />    
           <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>    
           <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  

     </head>     

     <body>      

         <!-- 页面结构 -->  

       <div data-role="page" id="firstExample">

  

            <div data-role="header">      

                       <h1>页面头部</h1>   

            </div><!-- /header -->   

 

            <div data-role="content">        

              <p>页面内容</p>   

            </div><!-- /content -->   

 

           <div data-role="footer">      

              <h4>页面底部</h4>   

           </div><!-- /footer -->

 

     </div><!-- /page -->     

 

  </body>  

</html>

打包发布,打开手机浏览器,访问。注:我的手机和pc机器在同一个无线网络。

 

 

posted on 2013-09-18 18:39  王阅  阅读(1320)  评论(0编辑  收藏  举报

导航