小強的HTML5行動開發之路（3）－HTML5與HTML4比較
- 黄舟原創
- 2017-01-22 10:29:091191瀏覽
在前面介紹了HTML5的新特性，新標籤的使用，智能表單設計，引入多媒體對象，Canvas對像你的畫布，擴展圖形標記，HTML5中的地理應用，獨立數據存儲，新的網絡連接。
HTML 5是近十年來Web開發標準最巨大的飛躍。和以前的版本不同，HTML 5並非僅僅用來表示Web內容，它的新使命是將Web帶入一個成熟的應用平台，在HTML 5平台上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。 （HTML5也有了自己的logo）.學習Html5需要掌握下面幾方面知識。
1、HTML基礎知識
2、CSS樣式知識
3、JavaScript知識
很多以前學過HTML 4.0的朋友可能此時會感到很迷惑，到底 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中我們都可以用
標籤代替，那為什麼還有這麼多沒使用過的標籤呢，這反而增加了記憶難度？事實上不是這樣的，這樣做有很多好處，這些特定名稱的標籤更容易區分各自的功能，例如可以同時在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中變的更簡單：
rrreML鬆散的語法，例如<script><script>大小寫混用。 <p><p><br/>從上面可以看出HTML5在先前瀏覽器發展的基礎上對標籤進行了簡化。另外HTML5中將標籤從語法上也進行了分類：<p>（1）不允許寫結束符號的標籤：area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、 source、Track、wbr<p>（2）可以省略結束符的標籤：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th<p>（3）可以完全省略的標籤：html、head、body、colgroup、tbody<p>在html4的基礎上html5也新增了很多標籤，以下列舉部分新增標籤：<p><pre class="brush:html;toolbar:false"><script src="js/juery-1.6.2.js"></script></pre>以前製作網頁頭部導航的程式碼如下：<p><pre class="brush:html;toolbar:false"><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> 标记定义一个视频</pre>用HTML5實作如下：<p><pre class="brush:html;toolbar:false"><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><!--头部结束--></pre>有朋友可能會問了，這樣寫有什麼優勢嗎？在HTML5中用獨立的標籤代表特定的功能，例如<header>表示頭部，<nav>表示導航，這樣代碼變的非常有語義且容易理解（不用像上面一樣添加額外的註釋），同意對於搜索引擎來說，比較容易找到。 <p><br/>以上是 小強的HTML5行動開發之路（3）－HTML5與HTML4比較的內容，更多相關內容請關注PHP中文網（www.php.cn）！ <p></script>陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn