互联网发展越来越快,有些东西总会要被取代;HTML4+CSS2将渐渐退出舞台,而HTML+CSS3将取而代之,这只是一个过程;那么提早的学习新的技术,是一个技术工作必要的事;
HTML5规范是2004年新成立的WHATWG工作组创立的;2006年W3C加入HTML,并于2008年发布了HTML5工作草案,2009年,XHTML2工作组停运;2010年HTML5开始解决实际问题,渐渐的各大浏览器厂家开始升自己的产品以支持HTML5+css3,HTML5得到了持续的完善,2012年HTML5完成规范编写工作,将在2022年发布HTML5推荐版;似乎这个过程,我们不必要关心哦,因为,还有十来年的过渡,对于你来说,不着急;
那么HTML4+CSS2与HTML5+CSS3有什么区别
一. 语法的改变
1.1 HTMl5中的标记方法
1. 内容类型文件扩展符不变,仍为.htm或.htm,内容类型为“text/html”
2. DOCTYPE的声明 <! DOCTYPE HTML>
3. 指定字符的编码 <meta charset = “utf-8”>(推荐使用utf-8)
1.2 HTML确保了与之前的HTML版本的兼容性三个方面:
1.可以省略标记的元素不允许使用结束标记的元素有:
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、sourse、track、wbr。
可以省略结束的标记元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thread、tbody、tfoot、tr、td、th。
可以省略的全部标记的元素有:html、head、body、colgroup、tbody。
2. 具有boolean的属性
参考代码示例:
<!—只写属性不写属性值代表属性为true-->
<input type = “checkbox” checked>
<!—属性值= 属性名,代表属性为true-->
<input type = “checkbox”checked = “checked”>
3. 省略引号,当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时,属性的两边的符号可以省略。
1.3 标记示例
<!DOCTYPE HTML>
<meta charset = “utf-8”>
<title>HTML5 标记示例</title>
<p>这段代码是HTML5 <br/>语法编写的
2.1 新增的元素和废除的元素
1. 与结构相关的元素
1) section元素 表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它与h1、h2。。。等元素结合起来
用标示文档结构。 <section>..</section>
2) article元素 表示页面中的一块与上下文不相关的独立内容,譬如博客的一篇文章。<article>..<article>
3) aside元素 表示article元素之外的、与article元素内容相关的辅助信息。 <aside>..</aside>
4) header元素 表示页面中的一个内容区块或整个页面的标题。<header>..</header>
5) hgroup元素 用于对整个页面或页面中的一个内容去快的标题进行组合。<hgroup>..</hgroup>
6) footer元素 表示整个页面或页面中的一个内容区块的标注。 <footer>..</footer>
7) nav元素 表示页面中的导航的链接部分。 <nav>..</nav> 8) figure元素 表示一段独立的内容,一般表示文档主题流内容
中的独立单元。使用figcaption元素为figure添加标题。
<figure>
<figcaption>PRC</figcaption>
<p>Hello World!</p>
</figure>
2. 新增的其他元素
1) Video元素
HTML5中的代码示例:
<video src = “movie.ogg”controls = “controls”>video元素</video>
HTML4中 的代码示例:
<object type = “video/ogg” data = “movie.ogv”>
<param name = “src” value = “movie.ogv”>
</object>
2) Audio元素 Audio元素定义音频。
HTML5中的代码示例:
<audio src = “someaudio.wav”>audio元素</audio>
HTML4中的代码示例:
<object type = “application/ogg” data = “someaudio.wav”>
<param name = “src” value =“someaudio.wav”>
</object>
3) Embed元素 用于插入各种多媒体.
HTML5中的代码示例:
<embed src = “horse.wav”/>
HTML4中的代码示例:
<object data = “flash.swf”type = “application/x-shockwave-flash”>
</object>
4) Mark元素 主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。Mark元素是一个比较典型的应用就是在搜索
结果中向用户高亮显示搜索的关键词。 HTML5中的代码示例: <mark>..</mark> HTML4中的代码示例: <span>..</span>
5) Progress元素 表示在运行中的进程,可以使用progress元素来显示javascript中耗费时间函数的进程。
HTML5中的代码示例:
<mark>..</mark>
HTML4中的代码示例:
<span>..</span>
6) Meter元素 表示度量衡仅用于已知最大值和最小值的度量。必须定义度量的范围,既可以在元素的文本中也可以在min/max属
性中定义。
HTML5中的代码示例:
<meter>..</meter>
7) Time元素 表示时间或日期,也可以同时表示两者。 HTML5中的代码示例: <time>..</time>
8) Ruby元素 表示ruby注释。(中文注音或字符)
9) Rt元素 表示字符的发音或解释。 10) Rp元素 在ruby注释中使用,以定义不支持ruby元素浏览器所显示的内容。
3.1 全局属性
使用contentEditable属性,当列表元素被加上contentEditable元素之后,该元素变成可编辑 。
属性示例:
<!DOCTYPE HTML>
<head>
<meta charset = “utf-8”>
<title>contentEditable属性示例</title>
</head>
<h2>可编辑列表</h2>
<ul contentEditable = “true”>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>
HTML5有什么优点呢?
第一,HTML5兼容以前HTML4下浏览器
第二,HTML5新增加的元素都是对现有的网页和用户习惯进行跟踪、分析和概括
第三,HTML5规范是以用户优先为准的编写,以提高用户开发效率为基础
第四,HTML5更安全;HTML5引入了一种新的基地来源的安全模型,该模型不仅易用,而且对各种不同的API通用
第五,HTML5将表现与内容分离
第六,HTML5化繁为简
a,以浏览器原生能力替代复杂的JAVASCRIPT代码;
b,简化了DOCTYPE;
c,简化的字符集声明;
d,简单而的强大的HTML5 API;
第七,HTML5无插件范式;
原来的HTML4插件存在一些问题:
a,插件安装可能失败;
b,插件可以被禁用或屏蔽;
c,插件自身有漏洞;
d,插件不容易与HTML文档的其他部分集成,因为插件的边界、剪裁和透明度问题;