HTML5入门

HTML5架构(HTML5 Boilerplates )

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

为什么HTML5会成今天炙手可热的前端语言,而不是2022年后呢,本文会给出一系列的HTML5架构,你现在就可以在你的项目小试牛刀了。 html5文档的快速建立 html5文档非常容易建立,你只需

为什么HTML5会成今天炙手可热的前端语言,而不是2022年后呢,本文会给出一系列的HTML5架构,你现在就可以在你的项目小试牛刀了。

html5文档的快速建立
html5文档非常容易建立,你只需要改变文档头部的DOCTYPE声明。

复制内容到剪贴板
  1. <!DOCTYPE html>  

这样你就已经建立好一个HTML5文档了,看看谷歌首页是怎么做的吧

复制内容到剪贴板
  1. <!doctype html>  
  2. <head>  
  3. <title> HTML 5 - Google Search </ title>  
  4. <script>  
  5. ..  

但是谷歌的验证和搜索结果页面都没有使用,因为那些页面还存在很多无效标签,如<font>等,但是没关系还是可以使用一些正确的标签比如<script>在当前HTML5 DOCTYPE下解析

HTML5简易例子
一个完整的html5页面,不需要很多复杂的标签

复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <title> Small HTML 5</title>  
  3. <p> Hello world </p>  

这就是一个简单而完整的例子了。

(有趣的是,当我删除了 <title> 标记。 Hixie's DOM viewer 解析是通过W3C验证器的。但 Henri Sivonen's 验证器说这是无效的无的标记。)

HTML5的完整性和兼容性
最好,这里提供一个完整的HTML5例子,加入了样式和新的标签,为了解决一些IE内核的浏览器无法观看,这里插入了解决这个问题的JS脚本

复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>HTML 5 complete</title>  
  6. <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  
  7. <style>  
  8. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <p>Hello World!</p>  
  13. </body>  
  14. </html>  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5常用标签总结

    HTML5常用标签总结

    2016-03-23 14:02

  • html5学得好不好,看掌握多少标签

    html5学得好不好,看掌握多少标签

    2015-09-28 12:53

  • 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    2015-06-02 14:32

  • 小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

    小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

    2015-06-02 14:34

网友点评