澳门威斯尼斯人pg电子游戏

書名： HTML5+CSS3從入門到精通（微課精編版）
作者名：前端科技
本章字數： 1515字
更新時間： 2021-02-03 09:30:35

1.4　案例實戰

目前主流瀏覽器對HTML5提供了很好的支持，下面結合示例介紹如何正確創建HTML5文檔。

1.4.1　編寫第一個HTML5文檔

視頻講解

本節示例將遵循HTML5語法規范編寫一個文檔。本例文檔省略了<html>、<head>、<body>等標簽，使用HTML5的DOCTYPE聲明文檔類型，簡化<meta>的charset屬性設置，省略<p>標簽的結束標記、使用<元素/>的方式來結束<meta>和<br>標簽等。

這段代碼在IE瀏覽器中的運行結果如圖1.1所示。

示例效果

圖1.1　編寫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.4.2　比較HTML4與HTML5文檔結構

視頻講解

下面通過示例具體說明HTML5是如何使用全新的結構化標簽設計網頁的。

【示例1】本例設計將頁面分成上、中、下三部分：上面顯示網站標題；中間分兩部分，左側為輔助欄，右側顯示網頁正文內容；下面顯示版權信息，如圖1.2所示。使用HTML4構建文檔基本結構如下：

    <div id="header">[標題欄]</div>
    <div id="aside">[側邊欄]</div>
    <div id="article">[正文內容]</div>
    <div id="footer">[頁腳欄]</div>

圖1.2　簡單的網頁布局

示例效果

盡管上述代碼不存在任何語法錯誤，也可以在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元素定義頁腳注釋內容。這樣極大地提高了開發者的便利性和瀏覽器的解析效率。

1.4.3　設計一個較詳細的HTML5文檔模板

視頻講解

【示例1】下面是一個簡單的HTML5文檔模板代碼。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Hello HTML5</title>
    </head>
    <body>
    </body>
    </html>

HTML5文檔以<!DOCTYPE html>開頭，這是一個文檔類型聲明，并且必須位于HTML5文檔的第一行，它告訴瀏覽器當前文檔的類型。

<html>標簽是HTML5文檔的根標簽，位于<!DOCTYPE html>標簽的下面。<html>標簽支持HTML5全局屬性和manifest屬性。manifest屬性用于創建HTML5離線應用。

<head>標簽是網頁頭部容器。位于<head>內部的元素可以包含腳本、樣式表、元信息等。<head>標簽也支持HTML5全局屬性。

<title>標簽位于<head>標簽內，定義網頁文檔的標題，顯示在瀏覽器標題欄，或當網頁被添加到收藏夾時作為默認標題使用，也方便搜索引擎抓取。因此，當寫HTML5文檔時一定要設置該標簽。

<body>標簽定義網頁正文，文檔的所有內容，如文本、超鏈接、圖像、表格、列表等都包含在該標簽中，并顯示在頁面中。

【示例2】為了幫助讀者更好地對HTML5文檔有一個全局認識，也為了讓讀者初步了解復雜的HTML5文檔代碼，下面給出一個詳細的、符合標準的HTML5文檔模板，并進行詳細注釋。當然，在編寫HTML5文檔時，這些代碼不是必需的，使用時可以根據需要酌情增刪。

具體代碼展示請查看示例源代碼，或者掃碼學習。

線上閱讀

官术网_书友最值得收藏!

HTML5+CSS3從入門到精通（微課精編版）

1.4 案例實戰

1.4.1 編寫第一個HTML5文檔

1.4.2 比較HTML4與HTML5文檔結構

1.4.3 設計一個較詳細的HTML5文檔模板

1.4　案例實戰

1.4.1　編寫第一個HTML5文檔

1.4.2　比較HTML4與HTML5文檔結構

1.4.3　設計一個較詳細的HTML5文檔模板