html5学习（2）——html5与html4比较

最新推荐文章于 2024-07-12 11:17:09 发布

原创最新推荐文章于 2024-07-12 11:17:09 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

HTML5作为Web开发标准的重要里程碑，不仅关注内容展示，还强调结构化与交互性。本文介绍HTML5相较于HTML4.0的主要变化，包括新标签、简化语法及更好的跨平台兼容性。

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>优快云-大碗干拌的博客</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/>

从上面可以看出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>   标记定义一个视频