1.3　HTML5的改進(jìn)

HTML5的主要目標(biāo)是能夠創(chuàng)建更簡(jiǎn)單的程序，編寫更簡(jiǎn)潔的代碼。例如，為了使Web應(yīng)用程序的開發(fā)變得更加容易，HTML5中提供了很多API。為了使HTML代碼變得更簡(jiǎn)潔，在HTML5中開發(fā)了新的屬性、新的元素等。總體來說，HTML5為Web平臺(tái)提供了很多新的功能。本節(jié)將介紹HTML5的幾個(gè)新增特性。

1.3.1　部分代替了原來的JavaScript

HTML5增加了很多非常實(shí)用的功能，這些功能可以部分代替JavaScript，只需要通過為標(biāo)簽增加一些屬性即可。

例如，打開一個(gè)頁面后立即讓某個(gè)單行文本框獲得輸入焦點(diǎn)，在HTML5之前，可能需要通過JavaScript來實(shí)現(xiàn)。代碼如下。

     <form>
          <p><label>用戶名：<input name="search" type="text" id="search"></label></p>
          <script type="text/javascript">
               document.getElementById("search").focus();
          </script>
     </form>

上面的代碼片段通過JavaScript來完成這個(gè)功能，但在HTML5中則只需要設(shè)置一個(gè)屬性即可。如果使用HTML5，則可以把上面的代碼改為如下形式。

     <form>
          <p><label>用戶名：<input name="search" autofocus></label></p>
     </form>

在這個(gè)示例中，我們可以看到，在HTML4中使用了一段JavaScript代碼，而在HTML5中并沒有使用這段代碼，取而代之的是一個(gè)在HTML5中新出現(xiàn)的屬性。

我們把兩個(gè)代碼片段放在一起進(jìn)行對(duì)比，不難發(fā)現(xiàn)使用HTML5之后簡(jiǎn)潔得多。除了這里示范的autofocus可用于自動(dòng)獲得焦點(diǎn)，HTML5還支持其他一些屬性，例如一些輸入校驗(yàn)的屬性，以前都必須通過JavaScript來完成，但現(xiàn)在都只要一個(gè)HTML5屬性即可。

1.3.2　更明確的語義支持

在HTML5之前，如果要表達(dá)一個(gè)文檔結(jié)構(gòu)，則只能通過<div>元素來實(shí)現(xiàn)。例如，我們來看一個(gè)在以前的HTML中的一種頁面結(jié)構(gòu)，代碼如下。

     <div id="header">...</div>
     <div id="nav">...</div>
     <div class="article">
     ...
     </div>
     <div id="aside">...</div>
     <div id="footer">...</div>

在上面的頁面結(jié)構(gòu)中，所有的頁面元素都采用<div>元素來實(shí)現(xiàn)，不同<div>元素的id不同，不同id的<div>元素代表不同含義，但這種采用<div>布局的方式導(dǎo)致缺乏明確的語義，因?yàn)樗袃?nèi)容都是<div>元素。

HTML5則為上面的頁面布局提供了更明確的語義元素，此時(shí)可以將上面的代碼片段改為如下形式。

     <header>...</header>
     <nav>...</nav>
     <article>
     ...
     </article>
     <aside>...</aside>
     <footer>...</footer>

在這個(gè)示例中，我們可以看到，HTML4中常見的用<div>劃分頁面結(jié)構(gòu)的方法已經(jīng)被HTML5中一種新出現(xiàn)的元素所取代。這些元素可以提供更加清晰的語義。

除此之外，以前的HTML可能會(huì)通過<em>這樣的元素來表示“被強(qiáng)調(diào)”的內(nèi)容，但到底是哪一種強(qiáng)調(diào)，HTML卻無法表達(dá)。HTML5提供了更多支持語義的強(qiáng)調(diào)元素，例如：

     <time>2023-10-10</time>
     <mark>被標(biāo)記的文本</mark>

上面的第一個(gè)<time>元素用于強(qiáng)調(diào)被標(biāo)記的內(nèi)容是日期或時(shí)間，而<mark>元素則用于強(qiáng)調(diào)被標(biāo)記的文本。HTML5新增的這兩個(gè)元素提供了比<em>元素更豐富的語義。

1.3.3　增強(qiáng)了Web應(yīng)用程序功能

一直以來，HTML頁面的功能被嚴(yán)格地限制著，客戶端從服務(wù)器下載HTML頁面數(shù)據(jù)，瀏覽器負(fù)責(zé)呈現(xiàn)這些HTML頁面數(shù)據(jù)。出于對(duì)客戶機(jī)安全性的考慮，以前的HTML在安全性方面確實(shí)做得足夠安全。

當(dāng)HTML頁面變得過于安全時(shí)，我們就需要通過JavaScript等其他方式來增加HTML的功能。換句話來說，HTML對(duì)Web程序而言功能過于簡(jiǎn)單，例如上傳文件時(shí)無法同時(shí)選擇多個(gè)文件，前端開發(fā)者不得不通過Flash、JavaScript等各種技術(shù)來克服這個(gè)困難。為了彌補(bǔ)這種不足，HTML5規(guī)范增加了不少新的API，這些API可以輕松地實(shí)現(xiàn)類似批量上傳這樣的Web應(yīng)用功能。