- HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通
- 新視角文化行
- 810字
- 2019-10-23 16:45:14
3.1 認識HTML5文檔結構
為了幫助讀者更好地理解與認識HTML5文檔,也為了讓讀者能夠順利讀懂HTML5網頁代碼的準確意思,下面給出一個詳細的、符合標準的HTML5文檔結構代碼,并在代碼中進行了注釋。
<!doctype html> <!--聲明文檔結構類型--> <html> <!--聲明文檔區域--> <head> <!--文檔的頭部區域--> <meta charset="utf-8"> <!--文檔的頭部區域中元數據區的字符集定義,utf-8表示國際通用的字符集編碼格式--> <title>網頁標題</title> <!--文檔的頭部區域的標題--> </head> <body> <!--文檔的主體內容區域--> <header>HTML5文檔的頭部區域</header> <nav>HTML5文檔的導航區域</nav> <section>HTML5文檔的主要內容區域 <aside>HTML5文檔的主要內容區域的側邊導航或菜單區</aside> <article>HTML5文檔的主要內容區域的內容區 <section>以下是一個section和article的嵌套 <aside></aside> <article> <header>嵌套內容的標題</header> HTML5+CSS3+jQuery移動網站開發從入門到精通HTML5文檔的嵌套區域,可以對某個article區域進行頭部和腳部的定義。這樣做,可以有非常清晰和嚴謹的文檔目錄結構關系。 <footer>嵌套內容的頁腳</footer> </article> </section> </article> </section> <footer>HTML5文檔的頁腳區域</footer> </body> </html>
當然,并不是每個HTML5文檔都需要包含以上代碼中的所有部分,一個最簡單的HTML5文檔需要的內容如下。
<!DOCTYPE html>
該代碼聲明了HTML文檔的類型,除了字母的大小寫可以任意變化外,其他的內容都不能變動。
HTML5文檔擴展名為.html或.htm。現在主流瀏覽器都能夠正確解析HTML5文檔,如Chrome、Firefox、IE9+和Safari等。下面是一個最基礎的HTML5文檔代碼。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5</title> </head> <body> </body> </html>
HTML5文檔以<!doctype html>開頭,這是一個文檔類型聲明,必須位于HTML5文檔的第一行,該行代碼用來告訴瀏覽器或其他分析程序它們所查看的文檔類型。
<html>標簽是HTML5文檔的根標簽,緊跟在<!doctype html>之后,<html>標簽支持HTML5全局屬性和manifest屬性,manifest屬性主要在創建HTML5離線應用時使用。
<head>標簽是所有頭部元素的容器,位于<head>與</head>標簽之間的元素可以包含元信息、JavaScript腳本和CSS樣式表等。<head>標簽支持HTML5全局屬性。
<meta>標簽位于文檔的頭部,不包含任何內容。標簽的屬性定義了與文檔相關聯的名稱/值對,該標簽提供頁面的元信息,如針對搜索引擎的描述和關鍵詞。
<meta charset="utf-8">定義了HTML5文檔的字符編碼是utf-8。這里charset是<meta>標簽的屬性,而utf-8是該屬性的值。HTML5中的很多標簽都有屬性,從而擴展了標簽的功能。
<title>標簽位于<head>與</head>標簽之間,定義了HTML文檔的標題。該標簽定義了瀏覽器工具欄中的標題,設置頁面被添加到收藏夾時的標題和顯示在搜索引擎結果中的頁面標題。該標簽非常重要,在編寫HTML5文檔的時候一定要添加該標簽。<title>標簽支持HTML5全局屬性。
<body>標簽定義文檔的主體和所有內容,如文本、超鏈接、圖像、列表和多媒體等都包含在該標簽中。
- TypeScript Essentials
- Deploying Node.js
- SoapUI Cookbook
- Android Studio Essentials
- 算法基礎:打開程序設計之門
- PostgreSQL技術內幕:事務處理深度探索
- Mastering Apache Maven 3
- Android底層接口與驅動開發技術詳解
- C# 8.0核心技術指南(原書第8版)
- HTML5 APP開發從入門到精通(微課精編版)
- Learning PHP 7
- 計算機應用基礎教程(Windows 7+Office 2010)
- 深入淺出Go語言編程
- Beginning C++ Game Programming
- JavaScript動態網頁編程