25个有用的HTML5速查手册和教程
fmms 12年前
<p>Web开发者必须尽快熟悉并使用起HTML5，因为它在web端开发的发展趋势已经明朗，可以用来创建丰富多彩的效果。使用HTML5还是有一些复杂的，所以本文介绍了25个优秀的HTML教程及速查手册。</p> <hr /> <p><a href="/misc/goto?guid=4958198974620150199" target="_blank"><strong>Making A Beautiful HTML5 Portfolio</strong></a></p> <hr /> <p><a href="/misc/goto?guid=4958198974620150199"><img class="aligncenter size-full wp-image-18311" alt="Making A Beautiful HTML5 Portfolio" src="https://simg.open-open.com/show/fb2903d68536306eb47d887b52dc3fab.jpg" width="500" height="280" /></a></p> <p>使用本教程，你可以学习创建HTML5组合，jQuery和Quicksand插件。它可以用来展示您的最新作品，因为它是可定制的。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958198976083118273" target="_blank">How To Code A Clean Website Template In HTML5 & CSS3</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958198976083118273"><img class="aligncenter size-full wp-image-18312" alt="How To Code A Clean Website Template In HTML5 & CSS3" src="https://simg.open-open.com/show/ee1855bdc14819c965460b32be45393c.jpg" width="500" height="329" /></a></p> <p>MediaLoot拥有一个干净的网页模板设计（使用Adobe Fireworks）。我们已经证明我们的客开始户使用它创建一个时尚的网页，编码到HTML和CSS。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958184458914217857" target="_blank">Fullscreen Slideshow With HTML5 Audio And jQuery</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958184458914217857"><img class="aligncenter size-full wp-image-18313" alt="Fullscreen Slideshow With HTML5 Audio And jQuery" src="https://simg.open-open.com/show/599efb805d553b6ba016f59125cd3410.jpg" width="500" height="269" /></a></p> <p>这教程可以被用于创建一个全屏的照片幻灯片，以显示“纽约”图片系列。您还可以使用HTML5音频元素添加声音给你的生活画廊。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958195606109646724" target="_blank">Build A Neat HTML5 Powered Contact Form</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958195606109646724"><img class="aligncenter size-full wp-image-18314" alt="Build A Neat HTML5 Powered Contact Form" src="https://simg.open-open.com/show/a1f2fc7b51cb7ad83bc67e21e5ae2400.jpg" width="500" height="651" /></a></p> <p>本教程将帮助您学习创造一个优雅的HTML5 AJAX联系人表单。表单将拥有许多最新的HTML5输入元素和属性，将通过浏览器的内置表单验证来验证。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958198999345833451" target="_blank">Create A Page Flip Effect With HTML5 Canvas</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958198999345833451"><img class="aligncenter size-full wp-image-18315" alt="Create A Page Flip Effect With HTML5 Canvas" src="https://simg.open-open.com/show/32b5e38b442dbc738868e0756e4c8a4a.jpg" width="500" height="373" /></a></p> <p>Hakim El Hattab，Web开发人员和具备创造性的程序员告诉我们如何创建“Flash页面翻转”，用的可是HTML5画布和JavaScript。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199014059077604" target="_blank">Learning The Basics Of HTML5 Canvas</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199014059077604"><img class="aligncenter size-full wp-image-18316" alt="Learning The Basics Of HTML5 Canvas" src="https://simg.open-open.com/show/d47140059da23875ae01db0a9dd31394.jpg" width="500" height="400" /></a></p> <p>Rob Hawkes<span id="result_box" lang="zh-CN"><span>告诉您如何</span><span>利用</span><span>canvas元素</span><span>，</span><span>绘制</span><span>基本</span><span>形状和文本</span><span>，</span><span>改变</span><span>颜色</span><span>，</span><span>擦除</span><span>画布</span><span>，以及</span><span>使其</span><span>填充</span><span>浏览器窗口。</span></span></p> <hr /> <p><strong><a href="/misc/goto?guid=4958199640475424869" target="_blank">HTML5’s Microdata, Search, And The Collaboration Of The Search Giants</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199640475424869"><img class="aligncenter size-full wp-image-18317" alt="HTML5’s Microdata, Search, And The Collaboration Of The Search Giants" src="http://static.open-open.com/news/uploadImg/20111116/HTML5%E2%80%99s-Microdata-Search-And-The-Collaboration-Of-The-Search-Giants.jpg" width="500" height="300" /></a></p> <p><span id="result_box" lang="zh-CN"><span>HTML5的其中一个很牛的</span><span>新功能是</span><span>Microdata（微观数据）</span><span>。</span><span>它可以让</span><span>你</span><span>更具体的</span></span><span id="result_box" lang="zh-CN"><span>对您的网页内容</span></span><span id="result_box" lang="zh-CN"><span>进行分类和</span><span>标签</span><span>。</span></span></p> <hr /> <p><strong><a href="/misc/goto?guid=4958199025747122489" target="_blank">HTML5 & CSS3 – What You Should Know</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199025747122489"><img class="aligncenter size-full wp-image-18318" alt="HTML5 & CSS3 – What You Should Know" src="http://static.open-open.com/news/uploadImg/20111116/HTML5-CSS3-%E2%80%93-What-You-Should-Know.jpg" width="500" height="280" /></a></p> <p>HTML5，与CSS3的整合，将是如何创建网页的一个巨大的变化，更新及新增的特性，帮助你在这里查找。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199643235484049" target="_blank">HTML5 Web Applications</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199643235484049"><img class="aligncenter size-full wp-image-18319" alt="HTML5 Web Applications" src="https://simg.open-open.com/show/472c06974ea11e6d3103c689daac89fa.jpg" width="500" height="300" /></a></p> <p>Deep Blue Sky创建一个免费的网络应用程序，帮助您找出目前浏览器的HTML5/CSS3支持状态。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199644665508232" target="_blank">Structural Tags In HTML5</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199644665508232"><img class="aligncenter size-full wp-image-18320" alt="Structural Tags In HTML5" src="https://simg.open-open.com/show/01f500628fd80997149b2fe4a5f06f36.jpg" width="500" height="300" /></a></p> <p>HTML5规范增加了对一些真正有用的tags，这些tags将从我们的代码中替代div。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199646070809852" target="_blank">Touch The Future: Create An Elegant Website With HTML 5 And CSS3</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199646070809852"><img class="aligncenter size-full wp-image-18321" alt="Touch The Future- Create An Elegant Website With HTML 5 And CSS3" src="http://static.open-open.com/news/uploadImg/20111116/Touch-The-Future-Create-An-Elegant-Website-With-HTML-5-And-CSS3.jpg" width="500" height="290" /></a></p> <p>创造力、创造力，赋予你实施的能力。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199647482368224" target="_blank">Simple Website Layout Tutorial Using HTML 5 And CSS 3</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199647482368224"><img class="aligncenter size-full wp-image-18322" alt="Simple Website Layout Tutorial Using HTML 5 And CSS 3" src="https://simg.open-open.com/show/261a1f85cfcb2e0e4bf532a5390e2e23.jpg" width="500" height="400" /></a></p> <p><span id="result_box" lang="zh-CN"><span>一个非常简单的</span><span>网页</span><span>创建</span><span>示例，HTML 5和</span><span>CSS</span><span>3</span><span> 为你带来。</span></span></p> <hr /> <p><strong><a href="/misc/goto?guid=4958198987726504503" target="_blank">Build Your First Game With HTML5</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958198987726504503"><img class="aligncenter size-full wp-image-18323" alt="Build Your First Game With HTML5" src="https://simg.open-open.com/show/0e2cdcea11de33854d271cb09ab4673c.jpg" width="500" height="360" /></a></p> <p>HTML5正在日益强大，甚至是在游戏世界！本教程将教给你使用Box2D的HTML5canvas来创建您的第一个游戏。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199650284352632" target="_blank">Designing Search Boxes With HTML5 And CSS3</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199650284352632"><img class="aligncenter size-full wp-image-18324" alt="Designing Search Boxes With HTML5 And CSS3" src="https://simg.open-open.com/show/4c0280029d1e04d5f494e0fb8c2be0fb.jpg" width="500" height="100" /></a></p> <p>这是一个非常好的教程，实用的技术-跨浏览器的设计，符合标准的搜索框，HTML5，CSS3和一点点的jQuery。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199651695939059" target="_blank">How To Make An HTML5 iPhone App</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199651695939059"><img class="aligncenter size-full wp-image-18325" alt="How To Make An HTML5 iPhone App" src="https://simg.open-open.com/show/6ce4fe53783def8de6ae2ea83e2e211f.jpg" width="500" height="380" /></a></p> <p>铁杆的Objective C开发人员已经成为iPhone编写应用程序的唯一，但，Objective - C是非常艰难的。看看这个吧，给你惊喜。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958190769958773650" target="_blank">How To Create Offline HTML5 Web Apps in 5 Easy Steps</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958190769958773650"><img class="aligncenter size-full wp-image-18326" alt="How To Create Offline HTML5 Web Apps in 5 Easy Steps" src="https://simg.open-open.com/show/bb52f7a0b8287c70518864f96435bc37.jpg" width="500" height="400" /></a></p> <p>5步创建html5离线web应用，听起来就很美妙！</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199021340384432" target="_blank">Link Users To Geolocation Data With HTML5</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199021340384432"><img class="aligncenter size-full wp-image-18327" alt="Link Users To Geolocation Data With HTML5" src="https://simg.open-open.com/show/88b4db5cdc930e4b039cc28a4769b12b.jpg" width="500" height="425" /></a></p> <p>Christopher Schmitt，CSS Cookbook 作者，Environments for Humans 联合创始人，展示如何优化HTML5 GeoLocation 地理位置jQuery插件。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199028682127274" target="_blank">Accessibility And HTML5 Block Links</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199028682127274"><img class="aligncenter size-full wp-image-18328" alt="Accessibility And HTML5 Block Links" src="https://simg.open-open.com/show/1fd15fb8c5fe688702bc7da0bdc86764.jpg" width="500" height="350" /></a></p> <p>HTML5推出了很多新的元素和功能。Block links（块链接）就是其中之一，它让您包装一个块级元素周围的链接。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199657137611625" target="_blank">HTML5 Body Elements #6 Links</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199657137611625"><img class="aligncenter size-full wp-image-18329" alt="HTML5 Body Elements #6 Links" src="https://simg.open-open.com/show/4a0d2d81b685b2026dc911cc20765140.jpg" width="500" height="350" /></a></p> <p>本教程介绍如何使用HTML5中的锚标记来创建超链接。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199658551127664" target="_blank">Create A Basic HTML5 Page With The New Layout Tags</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199658551127664"><img class="aligncenter size-full wp-image-18330" alt="Create A Basic HTML5 Page With The New Layout Tags" src="https://simg.open-open.com/show/955252624f9d3cbe548f92af6be3ec33.jpg" width="500" height="420" /></a></p> <p>本教程将向您展示如何创建一个简单的单页模板，展示了HTML5的新技术。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199659959379607" target="_blank">Creating A Minimal Blog Design Using HTML5, CSS3 And jQuery</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199659959379607"><img class="aligncenter size-full wp-image-18331" alt="Creating A Minimal Blog Design Using HTML5, CSS3 And jQuery" src="https://simg.open-open.com/show/df98708ee27b148de7226875a44e00e3.jpg" width="500" height="350" /></a></p> <p>本教程将向您展示设计和编写前端代码的一个完整的步骤，它采用许多新技术，如HTML5，CSS3，@font-face 和jQuery。整个项目可作为一个zip下载。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199661355778218" target="_blank">HTML5: Creating A Base Template</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199661355778218"><img class="aligncenter size-full wp-image-18332" alt="HTML5-- Creating A Base Template" src="https://simg.open-open.com/show/ee4efed85cba1bfb759e4637e5182058.jpg" width="500" height="300" /></a></p> <p>使用用HTML5创建一个基础模板。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199662796071864" target="_blank">50 Performance Tricks To Make Your HTML5 Web Sites Faster</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199662796071864"><img class="aligncenter size-full wp-image-18333" alt="50 Performance Tricks To Make Your HTML5 Web Sites Faster" src="https://simg.open-open.com/show/a0e87fe88a5ff49c0c7118cbb866bc9b.jpg" width="500" height="300" /></a></p> <p>Internet Explorer的团队教你一些技巧，让您的网站的速度更快。这些家伙也给你带来了GPU加速图形和编译JavaScript，使用Internet Explorer 9</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199030157370290" target="_blank">Creating An HTML5 Form Using The New Form Types</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199030157370290"><img class="aligncenter size-full wp-image-18334" alt="Creating An HTML5 Form Using The New Form Types" src="https://simg.open-open.com/show/5845b9df00aff77b3822869cfd2088f8.jpg" width="500" height="500" /></a></p> <p>HTML5拥有一些新的表单类型，如果浏览器不支持这些新类型，它会简单地恢复到它们支持的类型。因此，本教程将教你什么是新的及什么是支持的。</p> <hr /> <p><strong><a href="/misc/goto?guid=4958199031622621091" target="_blank">Simple Tool To Create Free HTML5 Slideshows Of Images</a></strong></p> <hr /> <p><a href="/misc/goto?guid=4958199031622621091"><img class="aligncenter size-full wp-image-18335" alt="Simple Tool To Create Free HTML5 Slideshows Of Images" src="https://simg.open-open.com/show/994c0eb532327699f4a4bbee7784768f.jpg" width="500" height="330" /></a></p> <p>在快速幻灯片放映中，显示您的照片，因为有些人可能不感兴趣，不看到所有照片。</p>