原來學習的HTML5&CSS3只是知道了一些Html5獨有的標籤和CSS3新添加的特性，我以爲這就是HTML5了。後來當我和教研主任聊天中發現原來我所學習的方法——利用表格佈局原來是幾年前的老套路了。後來在我不斷學習的時候發現，表格佈局並不適用於移動端，而且還有很多弊端，所以思考一下，我應該重新認識一下HTML5了。
術語HTML5，指一組共同構成了未來開放式網絡平臺的技術，也指HTML5規範。
HTML5規範是一個獨特的單元，它涵蓋了有限的功能集合，其中包括諸如新的HTML標籤(<video>、<audio>、<canvas>)，HTML是用於互聯網上創建頁面的標準語言，HTML5是最新的版本。
一個基本的HTML頁面分成幾個部分，通常有<head>、<body>，新的HTML5規範增加了一些新的部分，例如<nav>、<article>、<header>、<footer>……。給我留下深刻印象的是，HTML4滿篇幅的div標記讓人難以捉摸，HTML5儘量不使用無語義的容器，讓每個標記都有其獨特的含義和功能。
<!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <title>用於瀏覽器的標籤頁的標題</title> </head> <body> </body> </html>
用於聲明頁面爲HTML5文檔。<html>這是標記，meta元素用於說明字符編碼。每個HTML頁面都需要頭部（<head>）和身體（<body>）這是最基礎的HTML5的頁面，一般在<head>標籤中，通常提供給搜索引擎的信息和樣式表，也就是互相搭配的CSS3，還有可能加載JavaScript，不過一般這些都放在</body>標籤結束之前了，因爲你有時不能確保你的頁面一定會加載完成。
接着我們來仔細說一下各個標籤。
<title>標籤，一般放在<head>標籤中meta元素後，每個HTML頁面都必須有一個標題。標題都要做到簡短、描述性、唯一。標題不能有任何格式。標題的使用對於搜索引擎的索引起到了很大的作用，我們應該去足夠重視title元素。搜索引擎會根據60個字符爲基準進行截取，標題的話，建議把核心內容放到前60個，爲了用戶更好地體驗。
HTML支持分級標題h1-h6，數字越大，級別越低。最大的標題h1，文字顯示最大，而且會自動換一行，h2位子標題，以此類推，爲了方便不同文章的不同標題。HTML5新的標記有<hgroup></hgroup>用來標記連續的幾層標題，用來對瀏覽器說明文章結構的排列。
表示一個段落使用標記<p>、</p>。在標記中放入你的段落，段落會獨立出來，也就是段落前後會換一行。
<br>就是來用作換行，有時候你會見到<br />它沒有結束的標記，所以表示它是自閉的，它本身就代表換行所以不存在用一個結束的標記來表示這是一個換行，在HTML5中，你可以直接<br>這樣使用。
使用header元素來爲頁面的一塊包含一組介紹性或導向性內容的區域創建頁眉。頁眉中可以使用鏈接，也可以使用多個header元素在頁面中。
HTML 的早期版本沒有明確表示主導航鏈接的區域的元素，而 HTML5 則有這樣一個元素，即nav。nav的鏈接可以只想頁面中的其他內容，也可以指向其他頁面和資源。用nav元素來包含頁面中的一些鏈接羣。
main元素是HTML5新添加的一個元素，顧名思義，它代表一個頁面的主要部分，該元素在頁面中只能使用一次。
article元素，另一個HTML5添加的新元素，用來添加文章，在HTML5中定義的不侷限於文章、帖子等，是一種容器。在<article></article>中你可以添加你需要的內容項，這個標籤可以支持嵌套操作。
section元素代表文檔或應用的一個一般的區塊。section標記頁面的“通用”的區塊，包含相似主題的一組內容。Section與artic在本質上有區別，做一下對比。section 在組織性和結構性更強，而 article 代表的是自包含的容器。
aside元素，頁面中與主體部分相關聯並不強的一部分，是附註欄，雖然經常被看做成側欄，但是根據具體情況我們具體分析它的位置，還要依據上下文。
footer元素，與header元素一樣可以作用在你需要的地方，但是一般作爲頁面的底部的頁腳，這裏通常就放置版權聲明、指向隱私政策頁面的鏈接等等。footer元素可以嵌套在它的最近的 article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素，只有它相距最近的，纔是整個頁面的頁腳。
small元素標記頁面的版權信息，包含在標記中的字體小一號。
strong元素表示內容的重要性，字體會加粗。
em元素表示內容的着重點，字體同樣會加粗。在HTML5中,em表示強調的唯一元素，而strong表示的是重要程度。
figure元素用來創建圖，figcaption是其標題，通常用來表示頁面中需要表示的圖表。
cite元素指明引用或者參考，cite只用於參考源本身，而不是從中引述的內容，默認格式會使用斜體。根據它的語義，來源的話使用cite，其他情況比如言論之類的引用，則使用下面兩種元素。
blockquote元素表示單獨存在的引述。瀏覽器默認對blockquote文本進行縮進。
q元素用於短的引述。比如說在一個句子中引述別人的言論。使用的話瀏覽器會自動爲你加上引號。
time元素標記時間、日期或時間段。time元素會按照你在標記中的文本來顯示時間，這是在使用datetime屬性的時候，反之忽略屬性，那麼你就必須按照格式來表述你需要的時間。
abbr元素來解釋縮寫詞，使用title屬性來把你需要解釋的含義寫出來，當用戶把鼠標停留在使用abbr元素標記過的詞語時，瀏覽器就會把title屬性顯示在一個提示框中。
dfn元素用來定義術語。後續再次使用術語的時候就不再出現，也就是說dfn元素的使用至多一次，用法和abbr元素相同，也可以使用title屬性。
sub/sup元素創建下標/上標。
addresss元素用於添加作者聯繫信息。address元素不只可以表示地址，也可以表示電子郵箱、聯繫信息等等。具體表示的信息，取決於它出現的位置。
del元素標記不再準確、不再相關的文本，瀏覽器上的樣式一般是文本加一條刪除線。
ins元素對頁面內容的編輯標出來，瀏覽器上的樣式一般是文本下面加入一條下劃線，。以上兩個元素既可以包括短語內容，又可以包括塊級內容元素。
code元素表示其中的是代碼或文件名，默認的字體爲等寬字體。
pre元素用來和code元素搭配，可以使用預格式化的文本，就是說把你在HTML文檔中的格式保留下來，非常適合展示計算機代碼的元素。
mark元素，HTML5新的元素，用來突出顯示文本，標記我們想突出文本的關鍵詞，默認的樣式想黃色熒光筆劃過一樣，引起用戶的注意。
u元素，HTML5重新定義了該元素，富裕新的語義，一塊文字添加明顯的非文本註解，就是標記專有名詞或者拼寫有誤的詞語，瀏覽器默認會把文本下添加下劃線。
wbr元素，HTML5爲br元素引入了一個相近的元素，代表一個可換行處，它同樣是自閉的，使用的時候英文居多，如果瀏覽器顯示文本到可換行的元素時，則換行。
meter元素表示分數的值或已知範圍的結果，瀏覽器在顯示meter時，顯示一個表示測量值得顏色條。
progress元素表示某項任務的完成進度。根據不同的屬性，使progress顯示不同的進度條。
img元素在頁面中插入圖像，自閉的標記，<img src="image.url" />其中引號中的是你需要的圖片的位置。使用alt屬性，爲圖像添加一段描述性的文本，如果讓你的圖像因爲某些原因不能顯示在頁面上的時候，這段文本變回代替圖像來呈現給用戶。在img標籤中，src 屬性的後面，輸入width=”x” height=”y”默認的單位是像素，x代表寬度，y代表高度，制定圖像尺寸的屬性是不改變原來圖像，只改變的是圖像展示在頁面上的效果。
a元素用來創建鏈接，鏈接來把網頁聯繫到一起，其實這也是當時互聯網的想法。輸入<a href=”page.html”>，page.html 是目標網頁的URL，點擊就會轉到另一個頁面，停留在a標籤上瀏覽器就會在左下角標出鏈接到的URL。a元素還可以應用塊級鏈接，可以在a標籤中嵌套其他大部分元素，讓這些塊級元素一同指向目標。a標記還有一個作用是——錨。顧名思義也能猜到它的用途，把與一對元素關聯起來，a元素使用“#”加目標id的屬性值，另一個標籤爲錨id賦一個有意義的名稱。這樣就能實現跳轉。a元素可以創建指向其他類型的各種URL的鏈接，也可以是任何文件。
接觸了這麼多的標籤，相信你已經對HTML5標記有了印象，個別標記雖然有些樣式，那是古老的遺留問題，並不推薦這樣。HTML5標記表示結構，想要不同的展示方式和佈局，那就需要CSS（層疊樣式表）。CSS3是目前最新的版本，雖然沒有成爲規範，但是它的很多特性還是可以滿足我們的需要的。
CSS有三種方式添加的到HTML5的頁面中，第一種是做一個外部的CSS文件，然後鏈接到HTML5頁面，第二種是在頁面頭部（head標記中）加入一對style標記，定義一系列CSS規則，第三種是在單個標記中加入style屬性，加入CSS樣式來規定顯示樣式。