HTML5的發(fā)展
在HTML5之前，如果要表達一個文檔結(jié)構(gòu)，可能只能通過<div.../>元素來實現(xiàn)，例如
<div id="header"> </div>
<div id="nav"> </div>
<div id="article">
<div id="section"> </div>
</div>
<div id="aside"> </div>
<div id="footer"> </div>
在上面的頁面結(jié)構(gòu)中，所有的頁面元素都采用<div.../>元素來實現(xiàn)，不同id的<div.../>元素代表不同含義，但這種采用<div...>布局的方式導(dǎo)致缺乏明確的語義--因為所有的內(nèi)容都是<div.../>元素。有點視覺疲勞。。。
HTML5后為上面頁面布局提供了更明確的語義元素，此時可以將上面的頁面片段改為如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
可以看到語義清晰多了，很方便的知道我們的代碼要寫在<html></html>之間，整個頁面文件的說明要寫在<head> </head>之間，而我們的頁面正文需要寫在<body></body>之間。
HTML5頁面基本元素
HTML5頁面基本元素有如下幾個：
- <!...> 定義了HTML注釋，位于<! 與>之間的內(nèi)容不會被瀏覽器顯示出來。
- <html>是HTML 5文檔的根元素，告訴程序員應(yīng)當(dāng)在<html>與</html>之間編寫代碼
- <head>用于定義HTML5文檔的頁面部分，可以在元素之間定義文檔的各種屬性，告訴瀏覽器該文檔的屬性，讓瀏覽器知道如何解析該文檔。
- <title> 用于定義H5文檔的頁面標(biāo)題。
- <body> H5文檔的頁面主題部分，頁面的正文內(nèi)容在此元素之間編寫。
- <style>該元素用于引入樣式定義，主要用于設(shè)置CSS樣式。
- <h1...>到<h6...>定義標(biāo)題字段。
- <p...>定義段落。
- <div>定義文檔中的節(jié)，是最常用的一個標(biāo)簽。類似于iOS 中的UIView，本身就是一個白板，可以通過指定id, class, style, background-color等核心屬性，讓該元素呈現(xiàn)出不同的外觀。
- <span> 與div基本一樣，區(qū)別在于span不會自動換行，類似于iOS中的UITextField 和 UITextView，一個會自動換行，一個不會自動換行。
HTML5 頭部和元信息
使用<head.../>元素可以定義HTML5文檔頭，該元素可以包含如下子元素：
- <script>: 用于包含JavaScript腳本。
- <style>: 用于定義內(nèi)部CSS樣式。
- <link>: 用于鏈接外部CSS樣式資源。
- <title>: 用于定義文檔標(biāo)題，通常只用于說明該頁面的標(biāo)題。
- <base>: 用于指定該頁面中所有鏈接的基本鏈接。
- <meta>: 用于定義HTML頁面的元數(shù)據(jù)。
- href: 指定鏈接的鏈接地址，類似于iOS中的URL.
<!DOCTYPE html>
<html lang="en">
<head>
<! meta 是元數(shù)據(jù)說明,類似于iOS中的請求頭信息>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<title>在這里寫頁面標(biāo)題</title>
<base target="_blank" />
<! HTML5 這個是注釋,瀏覽器不會顯示出來的>
</head>
<body>
<! HTML5 文件的正文部分>
<a href="index.php">瘋狂Java聯(lián)盟</a>
</body>
</html>
運行效果如下：
點擊瘋狂Java聯(lián)盟后，頁面跳轉(zhuǎn)到其論壇
上面代碼中<base.../>指定了基準(zhǔn)路徑為http://www.crazyit.org, _blank指定了在新窗口中打開鏈接，href超鏈接的地址為indx.php，所以實際Url為http://www.crazyit.org/index.php. 類似與iOS使用網(wǎng)絡(luò)請求時，我們把Url放在path里面，后面的請求參數(shù)放在parameters里面一樣。
<meta.../>元素里面的內(nèi)容，指定網(wǎng)頁的屬性（類型于iOS網(wǎng)絡(luò)請求中的請求頭信息樣，告訴服務(wù)器我發(fā)送過去的內(nèi)容是什么格式，希望接收什么格式的返回信息樣), 幫助瀏覽器正確處理頁面內(nèi)容。主要可以設(shè)置以下三種熟悉：
- http-equiv: 指定元信息名稱，是固定值，具有特殊意義。
http-equiv="Content-Type" content="text/html";
http-equiv還可以設(shè)置Expires、Pragma、Refresh、Set-cookie等值。
- name： 指定元信息名稱，值可以任意。
name="author" content="Hardy_Hu";
- content: 指定元信息的值。
http-equiv 和 content 就類似于iOS中的鍵值對，瀏覽器先去通過識別http-equiv里面的內(nèi)容為Content-Type，再識別content中的內(nèi)容為text/html，就知道了原來我接收的是一個HTML文件啊，那么我就開始按照html格式的文件開始解析這個文件。
HTML5 開始標(biāo)簽和結(jié)束標(biāo)簽
從前面的介紹可以看出H5的標(biāo)簽基本上都是成對出來的，如果以<div>標(biāo)簽 開頭，那么就一定有</div>標(biāo)簽結(jié)尾。但是H5是一個不嚴(yán)格的規(guī)范，它允許部分元素可以不能寫結(jié)束標(biāo)簽，如<img.../>元素必須寫成
這類寫法的元素叫空元素語法，類似的元素還有area, base, mata, link等。
