您好,欢迎访问一九零五行业门户网

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

在前面介绍了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更加注重内容与结构而不专注表现,举个例子:
<body> <header> <hgroup>导航相关数据</hgroup> </header> <nav>菜单</nav> <article> <h1>标题:html5专题</h1> 发布日期:<time>19:00</time> <time datetime="2013-2-14">情人节</time> <p>测试相关内容</p> </article> <footer> <address>csdn-大碗干拌的博客</address> </footer> </body>
像上面这个html5中的很多标签,在以前的html4中我们都可以使用<div>标签代替,那么为什么还有用这么多没有使用过的标签呢,这反而增加了记忆难度?事实上不是这样的,这样做有很多好处,这些特定名称的标签更容易区分各自的功能,比如可以同时在pc浏览器和移动端浏览器上识别并以很好的布局展现。
还有一个区别就是,html5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素,如下面的声明:
html4的声明:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitonal//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-t...... <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
html5的声明:
<!doctype html> <meta charset=utf-8/>
在引入javascript或css文件的时候,html4中写法如下:
<script src="js/juery-1.6.2.js" type="text/javascript"></script>
在html5中变的更简单:
<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也新增了很多标签,下面列举部分新增标签:
<article> 标记定义一篇文章 <aside> 标记定义页面内容部分的侧边栏 <audio> 标记定义音频内容 <canvas> 标记定义图片 <command> 标记定义一个命令按钮 <datalist> 标记定义一个下拉列表 <details> 标记定义一个元素的详细内容 <dialog> 标记定义一个对话框(会话框) <embed> 标记定义外部的可交互的内容或插件 <figure> 标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部 <header> 标记定义一个页面或一个区域的头部 <hgroup> 标记定义文件中一个区块的相关信息 <keygen> 标记定义表单里一个生成的键值 <mark> 标记定义有标记的文本 <meter> 标记定义 measurementwithin apredefinedrange <nav> 标记定义导航链接 <output> 标记定义一些输出类型 <progress> 标记定义任务的过程 <rp> 标记是用在rubyannotations 告诉那些不支持ruby元素的浏览器如何去显示 <rt> 标记定义对rubyannotations的解释 <ruby> 标记定义 rubyannotations. <section> 标记定义一个区域 <source> 标记定义媒体资源 <time> 标记定义一个日期/时间 <video> 标记定义一个视频
以前制作网页头部导航的代码如下:
<div class="header"> <div class="navigation"> <ul class="nav_list"> <li><a href="#" title="home">home</li> <li><a href="#" title="about">about</li> </ul> </div><!--导航标签结束--> </div><!--头部结束-->
用html5实现如下:
<header> <nav> <ul id="nav-list"> <li><a href="#" title="home">home</a></li> <li><a href="#" title="about">about</a></li> </ul> </nav> </header>
有朋友可能会问了,这样写有什么优势吗?在html5中用独立的标签代表特定的功能,比如1aa9e5d373740b65a0cc8f0a02150c53表示头部,c787b9a589a3ece771e842a6176cf8e9表示导航,这样代码变的非常有语义且容易理解(不用像上面一样添加额外的注释),同意对于搜索引擎来说,更容易找到。
以上就是 小强的html5移动开发之路(3)——html5与html4比较的内容。
其它类似信息

推荐信息