html頁面基本結構
什麼是HTML？
超文字標記語言(Hypertext Markup Language)"超文字"指的就是頁面內可以包含圖片，連結，甚至音樂，程式等非文字元素。
HTML發展歷史
超文字標記語言（第一版）–在1993年6月作文網際網路工程工作小組（IETF）工作草案發布（並非標準）。
HTML2.0 --1995年11月作為RFC 1866釋出，在RFC2854於2000年6月釋出之後被宣佈已經過時。
HTML3.0 --1997年1月14日，W3C推薦標準。
HTML4.0 --1997年12月18日，W3C推薦標準。
HTML4.01（微小改進） --1999年12月24日，W3C推薦標準。
HTML5.0 --2014年10月28日，W3C推薦標準。
本文簡要介紹HTML中的各種元素及其相關屬性，讀者需要有一個概念: HTML頁面都是由基本元素及屬性組成的。HTML頁面的結構如下。
<!DOCTYPE html> //瀏覽器得知自己需要處理的內容是html <html lang="en"> //文件中html開始的部分，lang ="en“ 表示內容為英文， 可以省略寫為 <html> <head> //提供有關內檔內容和標註資訊的內容 </head> <body> //內部的內容即為網頁中顯示的內容</body> </html>
HTML 文件主要分為Head部分 和Body部分 兩個部分
doctype 宣告
HTML 原始檔中, 首先出現的是doctype宣告。 該宣告告訴瀏覽器, 本頁面使用何種標記語言編寫, 這會影響到瀏覽器渲染內容的方式。雖然看起來有點複雜，但大部分所見即所得(WYSIWYG)的web編輯器都能自動建立 doctype。如果不使用視覺化編輯工具，那也可以從其他網頁中拷貝 doctype, 或者參考下面的 doctype 列表。
doctype 是HTML檔案中最頂部的那一行, 說明文件是什麼型別。在HTML檔案中，指的是HTML版本號以及展示風格。以前版本的 doctype 宣告看起來很醜,並且也不好記。
例如 XHTML 1.0 Strict 宣告:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
再看HTML4過渡式的寫法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
程式碼編輯器的HTML模板中自動包含了doctype，一般也提供了自動插入的方式。
儘管文件頂部的這一串長長的文字也不礙什麼事, 但 HTML5 去除了這些可讀性差的寫法, 統一使用下面的宣告:
<!doctype html>
簡單、而且直接。可以看到，宣告中並沒有出現版本號 “5”。雖然當前版本被稱為 HTML5, 但實際上它只是對HTML之前標準的一個演進。因為瀏覽器必須支援Web上各種現有的內容, 所以實際上並不需要 doctype 來說明依賴哪些特性。
在HTML 4.01頁面中, doctype 看起來是這樣的:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Page title</title></head><body></body></html>
在這個示例中，doctype與HTML 4.01 Strict相關。在下文中，您將看到 HTML 4.01 以及 XHTfML 1.0 , XHTfML 1.1 的示例。雖然很多元素和屬性具有相同的名稱，但在不同版本的HTML和xhtml中還是存在一些明顯的語法差異。詳情請參考HTML Versus XHTML以及HTML and XHTML Syntax.
Document 樹結構
web頁面可以看成是包含任意數量枝幹的文件樹。每個枝幹可以包含哪些元素，有一定的規則(這些內容在每個元素的參考手冊中, “Contains”和““Contained by”部分詳細的說明)。要理解文件樹的概念，可以參考一個簡單的web頁面，看看其中包含的內容特性, 以及對應的樹檢視，如圖1所示:
圖1. 一個簡單頁面的 Document 樹結構
可以看到,html元素實際上包含兩個元素:head和body。head有兩個子元素:meta和title。body元素可以包含多個 標題(headings)、段落(paragraphs)和block quote。
注意，標籤的開啟和關閉有對稱性。例如，“It has lots of lovely content …”這一段包含三個文字節點，第二個節點被包在em元素中(em，強調元素)。 內容結束後段落被關閉，在下一個元素開始之前(本例中是一個blockquote); 如果將</p>標籤寫在blockquote之後, 則會破壞樹結構。
html元素
doctype 之後緊接著出現了 [html] ()元素，這是文件的根元素，接下來的所有內容都是根元素的後代。
如果文件型別為XHTML，那麼根元素(root element)html需要指定 xmlns屬性(XML名稱空間, html則不需要):
<html xmlns="http://www.w3.org/1999/xhtml">
下面是一個XHTML過渡式頁面的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Page title</title></head> <body></body> </html>
head元素
head元素包含描述文件本身的 metadata 資訊，以及相關的資源，比如 JS 指令碼和 CSS樣式。
下面的簡單示例包含了title元素, 它表示文件的標題或名稱，標識該文件是什麼。title的內容在瀏覽器的標題欄上展示，或者是收藏夾中的名稱。對於搜尋引擎來說, 這也是一個非常重要的資訊項，因為這是一段有意義的摘要，下面是示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Page title</title></head> <body></body> </html>
除了title元素之外,head還可以包含:
-
base定義了頁面上的連結或資源的 baseURL, 開啟連結內容所對應的基地址。 -
link指向某種型別的資源, 通常是CSS樣式表, 提供瞭如何展示網頁上各種元素的說明。 -
meta提供了額外的資訊; 例如, 字元編碼, 頁面的內容摘要, 指示搜尋引擎是否應該索引內容, 等等。 -
object代表一個通用的、多功能的媒體物件容器 -
script用於嵌入指令碼, 或者引入外部指令碼. -
style用於嵌入樣式(頁面內).
這些元素都是可選的, 可以是任意順序。注意, 這裡的元素不會展示在頁面內, 但他們可以影響頁面上展示的內容, 這些內容都在body元素內定義。
body元素
頁面中的大部分內容都在 body 內。在瀏覽器視窗(或viewport)中, 可以看到這個元素中包含的所有內容，包括 paragraphs, lists, links, images, tables 等等。body元素有一些獨有的屬性，但現在這些屬性都被廢棄了，除此之外，這個元素幾乎沒有什麼可說的。 頁面的外觀將完全取決於填充的內容; 參考HTML元素列表，以確定可以包含哪些內容。
原文連結:https://www.sitepoint.com/web-foundations/basic-structure-of-a-web-page/