HTML4 CSS2与HTML5 CSS3区别
时间:2016年04月14日 人气:...

互联网发展越来越快,有些东西总会要被取代;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 = checkboxchecked>

                         <!—属性值= 属性名,代表属性为true-->

                         <input type = checkboxchecked = checked>

     3. 省略引号,当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时,属性的两边的符号可以省略。       

 1.3 标记示例  

                   <!DOCTYPE HTML> 

                  <meta charset = “utf-8”> 

                  <title>HTML5 标记示例</title>

                 <p>这段代码是HTML5 <br/>语法编写的   

2.1 新增的元素和废除的元素    

       1.  与结构相关的元素

          1) section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它与h1h2。。。等元素结合起来                                                                                                                                   

         用标示文档结构。 <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文档的其他部分集成,因为插件的边界、剪裁和透明度问题;

 


热门评论