HTML5入门

小强的HTML5移动开发之路(3)——HTML5与HTML4比较

字号+ 作者:CodingSnail 来源:CSDN 2014-11-26 15:14 我要评论( )

在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,Canvas对象你的画布,扩展图形标记,HTML5中的地理应用,独立数据存储,新的网络连接。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内

在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,Canvas对象你的画布,扩展图形标记,HTML5中的地理应用,独立数据存储,新的网络连接。

HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。(HTML5也有了自己的logo).学习HTML5需要掌握下面几方面知识。

1、HTML基础知识

2、CSS样式知识

3、JavaScript知识

很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,到底html 4.0和HTML5的区别是什么,学过html4.0会对学习HTML5有什么帮助疑问 其实HTML5和HTML4最大的区别就是HTML5更加注重内容与结构而不专注表现,举个例子:

  1. <body>   
  2.   
  3. <header>  
  4. <hgroup>导航相关数据</hgroup>  
  5. </header>   
  6.   
  7. <nav>菜单</nav>   
  8.   
  9. <article>  
  10. <h1>标题:HTML5专题</h1>  
  11. 发布日期:<time>19:00</time>  
  12. <time datetime="2013-2-14">情人节</time>  
  13. <p>测试相关内容</p>  
  14. </article>  
  15.   
  16. <footer>   
  17. <address>CSDN-大碗干拌的博客</address>  
  18. </footer>   
  19.   
  20. </body>   

像 上面这个html5中的很多标签,在以前的html4中我们都可以使用<div>标签代替,那么为什么还有用这么多没有使用过的标签呢,这反 而增加了记忆难度?事实上不是这样的,这样做有很多好处,这些特定名称的标签更容易区分各自的功能,比如可以同时在PC浏览器和移动端浏览器上识别并以很 好的布局展现。

还有一个区别就是,HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素,如下面的声明:

HTML4的声明:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   
  2. Transitonal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t......  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>  
HTML5的声明:
  1. <!DOCTYPE html>  
  2. <meta charset=utf-8/>  

在引入JavaScript或CSS文件的时候,HTML4中写法如下:

  1. <script src="js/juery-1.6.2.js" type="text/javascript"></script>  
在HTML5中变的更简单:
  1. <script src="js/juery-1.6.2.js"></script>  
不仅如此,HTML5接受一些比较松散的的语法,比如<sCript><script>大小写混用。

从上面可以看出HTML5在以前浏览器发展的基础上对标签进行了简化。另外HTML5中对标签从语法上也进行了分类:

(1)不允许写结束符的标签:area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、Track、wbr

(2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th

(3)可以完全省略的标签:html、head、body、colgroup、tbody

在html4的基础上html5也新增了很多标签,下面列举部分新增标签:

  1. <article>  标记定义一篇文章  
  2. <aside>  标记定义页面内容部分的侧边栏  
  3. <audio>  标记定义音频内容  
  4. <canvas>   标记定义图片  
  5. <command>  标记定义一个命令按钮  
  6. <datalist>  标记定义一个下拉列表  
  7. <details>   标记定义一个元素的详细内容  
  8. <dialog>   标记定义一个对话框(会话框)  
  9. <embed>   标记定义外部的可交互的内容或插件  
  10. <figure>   标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部  
  11. <header>   标记定义一个页面或一个区域的头部  
  12. <hgroup>   标记定义文件中一个区块的相关信息  
  13. <keygen>   标记定义表单里一个生成的键值  
  14. <mark>   标记定义有标记的文本  
  15. <meter>   标记定义 measurementwithin apredefinedrange  
  16. <nav>   标记定义导航链接  
  17. <output>   标记定义一些输出类型  
  18. <progress>   标记定义任务的过程  
  19. <rp>   标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示  
  20. <rt>   标记定义对rubyannotations的解释  
  21. <ruby>   标记定义 rubyannotations.  
  22. <section>   标记定义一个区域  
  23. <source>   标记定义媒体资源  
  24. <time>   标记定义一个日期/时间  
  25. <video>   标记定义一个视频   

以前制作网页头部导航的代码如下:

  1. <div class="header">  
  2.     <div class="navigation">  
  3.         <ul class="nav_list">  
  4.             <li><a href="#" title="Home">Home</li>  
  5.             <li><a href="#" title="About">About</li>  
  6.         </ul>  
  7.     </div><!--导航标签结束-->  
  8. </div><!--头部结束-->  
用HTML5实现如下:
  1. <header>  
  2.     <nav>  
  3.         <ul id="nav-list">  
  4.             <li><a href="#" title="Home">Home</a></li>  
  5.             <li><a href="#" title="About">About</a></li>  
  6.         </ul>  
  7.     </nav>  
  8. </header>  
有朋友可能会问了,这样写有什么优势吗?在HTML5中用独立的标签代表特定的功能,比如<header>表示头部,<nav>表示导航,这样代码变的非常有语义且容易理解(不用像上面一样添加额外的注释),同意对于搜索引擎来说,更容易找到。

 

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

相关文章
  • 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

  • 小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问

    小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问

    2015-06-02 14:34

网友点评