第1章 HTML5基礎
關於HTML5基礎這一部分的內容沒有明顯邊界。各種HTML5教材關於HTML5基礎知識的介紹大同小異，這里不做過多贅述。
1. 我們要把HTML5簡單用起來，首先要學會新建HTML5文檔。每個網頁都包含doctype、html、head和body元素，以下是一個簡單的HTML5文檔示例（用到了a、article、em、h1、img和p這6種常見的元素）：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>網頁標題</title> 6 </head> 7 <body> 8 <article> 9 <h1>前端小白心語</h1> 10 <img src="images/xiaobai.jpg" width="60" alt="前端小白自拍" /> 11 <p>我是<em>前端小白</em>，推薦學習：<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5參考手冊">HTML5</a></p> 12 </article> 13 </body> 14 </html>
2.然后了解文檔的頭部信息。以上述代碼為例，頭部信息中<meta>標簽用於定義網頁元信息，包括文檔的字符編碼等，這時候HTML5不區分大小寫，不需要標記結束符，不介意屬性值是否添加引號，但考慮到代碼的可維護性，在編寫代碼的時候，應該盡量增加這些基本結構標簽。<title>標簽用於定義網頁標題。一般網站都必須設置下面兩條元信息：
1 <!--HTML5文檔頭部信息--> 2 <head> 3 <meta charset="utf-8"> 4 <title>網頁標題</title> 5 </head>
<!--定義網頁的描述信息--> <meta name="descripution" content="標准網頁設計專業技術咨詢" /> <!--定義頁面的關鍵詞--> <meta name="keywords" content="HTML,DHTML,CSS,XML,XHTML,JavaScript" />
3.其次是定義文檔結構，附代碼，一圖幫你了解簡單的網頁文檔結構，其他的話不多說，請看代碼和圖片上的介紹。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>一個簡單的文檔包含內容</title> 6 </head> 7 <body> 8 <h1>我的第一個網頁文檔</h1> 9 <p>HTML文檔必須包含三個部分：</p> 10 <ul> 11 <li>html——網頁包含框</li> 12 <li>head——頭部區域</li> 13 <li>body——主體內容</li> 14 </ul> 15 </body> 16 </html>
希望通過看了這張圖之后，能幫助你了解網頁的一些結構特點。
今天暫時介紹這些，最后附上一個項目實戰文檔，以供參考：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" > 5 <title>前端：HTML5學習之路（一）</title> 6 </head> 7 <body> 8 <header> 9 <h1>聽風亭話前端</h1> 10 <h2>去一分浮躁，守一分寧靜，真誠面對生活，熱衷學習一事，做個簡單的程序員。。。</h2> 11 <h4>前端小白的HTML5、CSS3、JavaScript學習之路，從此處開始。</h4> 12 </header> 13 <main> 14 <nav> 15 <h3>導航</h3> 16 <a href="#">博客園</a> <a href="#">首頁</a> <a href="#">新隨筆</a> <a href="#">聯系</a> <a href="#">管理</a> 17 </nav> 18 <section> 19 <h2>文章</h2> 20 <article> 21 <header> 22 <h1>戲說HTML5</h1> 23 </header> 24 <p>場景：</p> 25 <p>Q: HTML5是什么？</p> 26 <p>A: 新的HTML規范：</p> 27 <p> 給瀏覽器提供了牛逼能力，干以前不能干的事。確切地說應該是給瀏覽器規定了許多新的接口標准，要求瀏覽器實現牛逼的功能。</p> 28 <p> 給瀏覽器暴露了許多新的接口。。。</p> 29 <p> 添加了很多新的效果。。。</p> 30 <p>點評：</p> 31 <p> 問的人其實並不明白他想問的真正問題，回答的人貌似明白，但又好像少了點什么。牛逼的能力、新的接口、炫酷的效果，到底有哪些？什么是HTML？什么是CSS？什么是DOM？什么是JavaScript？大部分的前端開發每天都在用這些，但很少會有人去思考一下他們之間的關系。</p> 32 <p>。。。。。。</p> 33 <p>當交互性不能在滿足人們需求時，web迎來了新的需求：webapp。要迎合新的需求，首先要改變的就是HTML規范，這個時候已有的HTML4.0，已經無法滿足人們日益增長的需求，所以HTML5迎着歷史的需求，經過八年的艱苦努力，終於在2014年正式定稿！HTML5肯定是要加入新標簽，然對於傳統HTML而言，HTML5算是一個叛逆。所有之前的版本對於JavaScript接口的描述都不過三言兩語，主要篇幅都用於定義標記，與JavaScript相關內容一概交由DOM規范去定義。而HTML5規范，則圍繞着如何使用新增標記定義了大量JavaScript API（所以其中有一些API是與DOM重疊，定義了瀏覽器應該支持的DOM擴展，由此可以看到HTML5也必定不是HTML的最終版。 </p> 34 <footer> 35 <h2>標簽</h2> 36 <p><a href="#">生活感悟</a></p> 37 </footer> 38 </article> 39 </section> 40 <aside> 41 <h3>常用鏈接</h3> 42 <ul> 43 <li><a href="#">我的隨筆</a></li> 44 <li><a href="#">我的評論</a></li> 45 <li><a href="#">我的參與</a></li> 46 <li><a href="#">最新評論</a></li> 47 <li><a href="#">我的標簽</a></li> 48 </ul> 49 <h3>最新隨筆</h3> 50 <ol> 51 <li><a href="#">Three.js使用局部紋理更新</a></li> 52 <li><a href="#">webgl自學筆記——矩陣變換</a></li> 53 <li><a href="#">webgl自學筆記——光照</a></li> 54 <li><a href="#">webgl自學筆記——幾何圖形</a></li> 55 </ol> 56 <h3>我的標簽</h3> 57 <ul> 58 <li><a href="#">javascript(61)</a></li> 59 <li><a href="#">css(10)</a></li> 60 <li><a href="#">webgl(6)</a></li> 61 <li><a href="#">ajax(3)</a></li> 62 <li><a href="#">更多</a></li> 63 </ul> 64 <h3>隨筆檔案(114)</h3> 65 <ul> 66 <li><a href="#">2019年8月 (2)</a></li> 67 <li><a href="#">2019年7月 (3)</a></li> 68 <li><a href="#">2019年5月 (2)</a></li> 69 <li><a href="#">2019年1月 (1)</a></li> 70 </ul> 71 <h3>積分與排名</h3> 72 <ul> 73 <li>積分 - 108823</li> 74 <li>排名 - 1133 </li> 75 </ul> 76 </aside> 77 <footer> 78 <h2>版權信息</h2> 79 <p><a href="#">關於博客園</a> <a href="#">聯系我們</a></p> 80 <p>©2004-2019博客園保留所有權利，滬ICP備XXXXXXXX號</p> 81 </footer> 82 </main> 83 </body> 84 </html>
效果圖：
未完待續。。。。。。。。
聲明：由於是首次發博，部分原因在於時間有限，故存在很多要改進的地方，比如后面項目實戰代碼的效果圖，沒有截長圖，影響閱讀效果等這類問題，后續會進行糾正，請大家多多包涵。