- HTML5 移動Web開發從入門到精通（微課精編版）
- 前端科技
- 962字
- 2019-11-15 20:21:42
1.5 案例實戰
目前最新主流瀏覽器對HTML5都提供了很好的支持，下面結合示例介紹如何正確創建HTML5文檔。
1.5.1 編寫第一個HTML5文檔
本節示例將遵循HTML5語法規范編寫一個文檔。本例文檔省略了html、head、body等元素，使用HTML5的DOCTYPE聲明文檔類型，簡化meta元素的charset屬性設置，省略p元素的結束標簽，使用<元素/>的方式來結束br元素等。
這段代碼在IE瀏覽器中的運行結果如圖1.3所示
圖1.3 編寫HTML5文檔
通過短短幾行代碼就完成了一個頁面的設計，這充分說明了HTML5語法的簡潔。同時，HTML5不是一種XML語言，其語法也很隨意，下面從這兩方面進行逐句分析。
第一行代碼如下。
<!DOCTYPE html>
不需要包括版本號，僅告訴瀏覽器需要一個DOCTYPE來觸發標準模式，可謂簡明扼要。
接下來說明文檔的字符編碼，否則將出現瀏覽器不能正確解析的情況。
<meta charset="utf-8">
同樣也很簡單，HTML5不區分大小寫，不需要標記結束符，不介意屬性值是否加引號，即下列代碼是等效的。
<meta charset="utf-8">
<META charset="utf-8" />
<META charset=utf-8>
在主體中，可以省略主體標記，直接編寫需要顯示的內容。雖然在編寫代碼時省略了html、head和body元素，但在瀏覽器進行解析時，將會自動進行添加。但是，考慮到代碼的可維護性，在編寫代碼時，應該盡量增加這些基本結構元素。
1.5.2 比較HTML4與HTML5文檔結構
下面通過示例具體說明HTML5是如何使用全新的元素編寫網頁的。
【示例1】本例設計將頁面分成上、中、下3部分：上面顯示網站標題；中間分兩部分，左側為輔助欄，右側顯示網頁正文內容；下面顯示版權信息，如圖1.4所示。使用HTML4構建文檔基本結構如下。
<div id="header">[標題欄]</div>
<div id="aside">[側邊欄]</div>
<div id="article">[正文內容]</div>
<div id="footer">[頁腳欄]</div>
圖1.4 簡單的網頁布局
盡管上述代碼不存在任何語法錯誤，也可以在HTML5中很好地解析，但該頁面結構對于瀏覽器來說是不具有區分度的。對于不同的用戶來說，ID命名可能因人而異，這對瀏覽器來說，就無法辨別每個div元素在頁面中的作用，因此也必然會影響其對頁面的語義解析。
【示例2】下面使用HTML5新增元素重新構建頁面結構，明確定義每部分在頁面中的作用。
<header>[標題欄]</header>
<aside>[側邊欄]</aside>
<article>[正文內容]</article>
<footer>[頁腳欄]</footer>
雖然兩段代碼不一樣，但比較上述兩段代碼，使用HTML5新增元素創建的頁面代碼更簡潔、明晰。可以看出，使用<div id="header">、<div id="aside">、<div id="article">和<div id="footer">這些標記元素沒有任何語義，瀏覽器也不能根據標記的ID名稱來推斷它的作用，因為ID名稱是隨意變化的。
而HTML5新增元素header，明確地告訴瀏覽器此處是頁頭，aide元素用于構建頁面輔助欄目，article元素用于構建頁面正文內容，footer元素定義頁腳注釋內容。這樣極大地提高了開發者的便利性和瀏覽器的解析效率。
- Visual Basic程序開發（學習筆記）
- Manga Studio Ex 5 Cookbook
- Raspberry Pi Networking Cookbook（Second Edition）
- HBase從入門到實戰
- Python自然語言處理（微課版）
- Microsoft Dynamics GP 2013 Reporting, Second Edition
- 軟件項目管理實用教程
- Python Data Analysis Cookbook
- PySpark Cookbook
- Instant Lucene.NET
- Visual Basic程序設計教程
- 匯編語言編程基礎：基于LoongArch
- Swift 4從零到精通iOS開發
- Qt 4開發實踐
- Instant Apache Camel Messaging System