1.2 HTML 5的优势

HTML 5相对于前面的版本，以HTML、XHTML来说，增加了一些实用的新功能，对于用户和网页开发来说，HTML 5的出现意义很重大。但是HTML 5并不是革命性的改版，不会对开发者带来过多的冲击。本节我们就来介绍HTML 5的一些优势。

1.2.1 解决跨浏览器问题

对于网页设计程序员来说，跨浏览器问题绝对是使其记忆深刻的一个问题。

在HTML 5前面的版本中，由于不同的浏览器对于HTML标准支持的不同，致使同样的网页在不同的浏览器中表现的效果不同。对于HTML 5，各大浏览器厂商对于HTML 5都表示出很高的热情，这是解决跨浏览器的根本所在。

1.2.2 部分代替了原来的JavaScript

HTML 5中新增了一些功能，这些功能可以部分代替JavaScript。如打开一个页面后，想让某个文本框获得输入焦点，很多人会想到用JavaScript来完成。

【例1-1】（实例文件：ch01\Chap1.1.html）获取文本框的焦点。

      <!DOCTYPE html>
      <html>
      <head>
         <meta charset="UTF-8">
         <title>Title</title>
      </head>
      <body>
      <form action="demo">
         姓名: <input type="text" name="Name"><br>
         成绩: <input type="text" name="Grade" id="grade"><br>
      </form>
      </body>
      </html>
      <script>
         document.getElementById("grade").focus()
      </script>

相关的代码实例请参考Chap1.1.html文件，在Chrome浏览器中运行的结果如图1-1所示。

图1-1 获取文本框的焦点

在HTML 5中，则只需要设置autofocus属性就可以代替JavaScript代码，代码如下：

      <form action="demo">
         姓名: <input type="text" name="Name"><br>
         成绩: <input type="text" name="Grade" autofocus><br>
      </form>

在HTML 5中，如一些输入验证的属性，以前都需要通过JavaScript来完成，现在都只需要一个HTML 5属性就可以实现。

1.2.3 更明确的语义支持

在HTML 5以前，布局基本都是使用<div>标签来实现，通过id来区分，这样就缺乏明确的语义。HTML 5则提供了更明确的语义元素，代码如下：

      <body>
      <header>...</header>
      <nav>...</nav>
      <section>...</section>
      <footer>...</footer>
      </body>

1.2.4 增强了Web应用程序的功能

HTML对于Web应用程序来说功能太匮乏了，如上传文件时想同时选择多个文件都不行，为了弥补类似的不足，在HTML 5中新增大量API来提高应用程序性能，增强用户体验，以及对应用程序现有的功能进行扩展。

上一章目录下一章