html5,实例开发代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <style type="text/css">
        body{margin: 0px;}
        header{width: 100%;height: 50px;background:#aefeee;}
        h4{display: inline;}
        aside{width: 20%;height: 540px;background:#708090;float: left;}
        section{width: 80%;height: 540px;background: #d8bfd8;float: left;overflow: auto;}
        footer{width: 100%;height: 50px;background: #f0ffff;clear: left;}
        figure{padding: 0px;}
        figcaption{text-align: center;}
        img{max-width: 70%;}
        ul{list-style: none;}
        li{display: inline;}
        a{text-decoration: none;}
    </style>

</head>
<body>
    <header>
        <hgroup>
            <img src="h.jpg"  alt="h1" style="width: 30px;height: 30px;">
            <h4>移动开发练习</h4>
        </hgroup>
    </header>
    <aside>
        <ul>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" >超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" >超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" >超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" >超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" >超级链接</a></li>
        </ul>
    </aside>
    <section>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
    </section>
    <footer>
    <nav>
        <ul>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" ></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" ></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" ></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" ></a></li>                
        </ul>        
    </nav>        
    </footer>
</body>
</html>

时间: 2024-11-06 03:54:04

html5,实例开发代码的相关文章

当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)

读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. --国际巨头Google.苹果等都支持HTML 5标准,要不要学,你看着办! BAT三巨头都偷偷用上HTML 5了 HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,他们都已经争先恐后地将HTML 5的新技术融入到现实的开发领域中了.本书的例子会涉及WebQQ.

免费的HTML5连载来了《HTML5网页开发实例具体解释》连载(六)媒体查询

响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上响应式设计.媒体查询能够来解决这一问题.媒体查询能够为特定的浏览器和设备提供特定的样式.媒体查询是CSS 3的一个新特性,是对媒体类型的扩展. 提示:W3C列出了10种媒体类型,请參考http://www.w3.org/TR/CSS2/media.html#media-types. 在响应式设计中,

免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

推荐一本《HTML5网页开发实例》书,都是例子,比较好学

清华大学出版社推出的<HTML5网页开发实例详解>是一本最全的HTML 5技术书,是一本最全的HTML 5案例书,由大众点评网资深前端工程师周遥和聚划算资深前端工程师李春城联袂奉献.所有的实例和框架在这里给读者做一个预览. 1.当前天气的APP                        2.新闻阅读列表APP 3.一个网站的用户增长曲线图             4.网页中的3D效果 5.用Node.js搭建Web Server              6.销售数据图表 7.带字幕的视频

免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询

响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应式设计.媒体查询可以来解决这一问题.媒体查询可以为特定的浏览器和设备提供特定的样式.媒体查询是CSS 3的一个新特性,是对媒体类型的扩展. 提示:W3C列出了10种媒体类型,请参考http://www.w3.org/TR/CSS2/media.html#media-types. 在响应式设计中,媒体

【墙裂推荐】适合高中生看的HTML5网页开发实例入门书

清华大学出版社推出的<HTML5网页开发实例详解>是一本最全的HTML 5技术书,是一本最全的HTML 5案例书,由大众点评网资深前端工程师周遥和聚划算资深前端工程师李春城联袂奉献.所有的实例和框架在这里给读者做一个预览. 1.当前天气的APP                       2.新闻阅读列表APP 3.一个网站的用户增长曲线图            4.网页中的3D效果 5.用Node.js搭建Web Server             6.销售数据图表 7.带字幕的视频播放器

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图4.44  Fiddler原理示意图 Fiddler安装的系统要求为Windows XP或Windows 8中的版本,其中Fiddler2依赖于Microsoft.NET Framework 2.0,最新的Fiddler4依赖于Microsoft.NET Framework 4.0. Fiddler

感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了!

感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(一) 免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(二)内容交互 免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(三)DOCTYPE和字符集 免费的HTML5连载来了<HTML5网页开发实

《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和FileList对象.用于创建和写入的Blob和FileWriter对象.用于目录和文件系统访问的DirectoryReader和LocalFileSystem对象等,FileSystem功能的出现是浏览器在文件系统上的突破,具有里程碑的意义,虽然目前还尚未完全成熟,但足以让开发者发挥更大的想象空间.