HTML5大前端學習過程第一週（Day01）

2020年2月11日
第一次寫博客，以前也聽說過，但沒有看過，也沒有寫過，今天老師說這是一個非常好的複習方法，所以從今天開始就嘗試每天把所學的記錄下來，方便自己複習查看，希望可以堅持下來。

一. 本節課學習目標。

1. 瞭解互聯網行業的發展。
2. 瞭解HTML5的發展史。
3. 瞭解HTML5的應用場景以及市場前景。
4. 掌握HTML5的概念。 ★重點
5. 掌握HbuilderX開發工具的使用。 ★重點
6. 掌握網頁開發基本結構。 ★重點

二. HTML5發展史。
1993年：HTML1.0發佈，1993IETF發佈草案。
1994年：Tim Berners-Lee創建了非盈利性的W3C組織，致力於定製更加標準化的協議。
1995年：HTML2.0發佈。
1996年：HTML3.2發佈。
1997年：HTML4.0發佈， W3C推薦標準。
1999年：HTML4.01發佈，同年，W3C對未來做了展望，認爲HTML存在一些缺陷，前途不是很光明，於是W3C轉向語言更加規範的XML，爲了更好的實現HTML到XML的過渡，推出了XHTML。
2000年：XHTML1.0發佈。 規定了所有元素，屬性必須使用小寫字母，屬性值必須加引號，規定每個標籤都必須有與之對應的結束標籤。
2001年：XHTML1.1發佈。
2002年：XHTML2.0發佈。 同年開發人員，瀏覽器廠商也漸漸的放棄了XML。
2004年：各大瀏覽器廠商脫離了W3C，成立了WHATWG，開始對HTML進行修繕，走向HTML5之路。
2007年：W3C工作組重建，在WHATWG的基礎上繼續研究，規範也交由WHATWG來制定。
2009年：W3C宣佈停止XHTML2的研究工作。
2014年10月29日，HTML5的標準規範最終定稿。
2015年，H5的春天來了，微信，微信公衆號。

三. HTML5簡介。

1. H5是什麼？
   狹義上的解釋：HTML5就是HTML的第5個版本。
   廣義上的解釋：HTML5 = HTML + CSS + JavaScript + API + 框架。
   HTML：決定的是網頁的結構。 （內容）
   CSS：決定的是網頁的樣式。 （美觀）
   JavaScript（JS）：決定的是網頁的行爲。 （功能）
   JavaScript和Java有什麼關係？
   就像雷鋒和雷峯塔的關係是一樣。 沒有半毛錢關係的。
2. 什麼是HTML？
   HTML（Hyper Text Markup Language）: 超文本標記語言。
   超文本：超出文字的範疇，網頁中可以顯示多樣化內容，比如：文字，圖片，音頻，視頻，gif等等。
   標記： 用來標記內容，給瀏覽器識別的。
   HTML標記： 通過一對標籤的形式來標記內容。 格式：<開始標籤> 內容 <結束標籤>
   例子： <dog_name> 志遠 </dog_name>
   語言：
3. 編譯語言： 邏輯性，Java，C，C++等等。
4. 腳本語言： 邏輯性，JS，php，python等等。
5. 標記語言：HTML， 沒有邏輯性，只是一堆標籤，只需要知道每一個標籤標識什麼內容即可。

四. HTML5應用場景。

1. 網頁開發： PC端網站開發，移動端網站開發。
2. 微信：微信小程序，微信公衆號，微信小遊戲，朋友圈H5的頁面。
3. App： 天貓，淘寶（混合式開發）
4. 快應用：操作系統（手機廠商一塊定製的標準）。
5. 小程序：支付寶小程序，百度小程序，今日頭條小程序等等。
6. 後臺：NodeJS。
   小程序：微信，支付寶。 單獨的崗位。
   網站開發：單獨崗位。
   App：單獨崗位。

五. HbuilderX工具使用。

1. 工具結構。
   
2. 如何創建一個項目。
   2.1 點擊創建項目按鈕。
   a. 左邊的項目管理器，右擊，然後選擇項目。
   b. 工具欄最左側的創建按鈕，點擊，然後選擇項目。
   c. 左邊的項目管理器，快捷鍵ctrl+N, 然後選擇項目。
   2.2 填寫創建項目內容。
   
   項目名稱：駝峯命名法，名稱由多個英文單詞組成，每個單詞的首字母大寫，比如：HelloWorld。
   HTML模板：選擇基本HTML項目模板，生成基本的HTML項目工程目錄。
3. 工程目錄結構。
   
   HelloWorld: 項目名稱，管理項目中所有的內容。
   Css文件夾：用來存放當前項目中所有的css文件。
   Js文件夾：用來存放當前項目中所有的js文件。
   Img文件夾：用來存放當前項目中所有的圖片素材。
   Index.html: 網站首頁文件，.html結尾的都是網頁，一個.html文件就對應一個網頁。

六. 網頁的基本結構。

1. 網頁的瀏覽器結構。
   
   如何運行一個網頁：點擊工具欄的運行按鈕，選擇對應的瀏覽器，即可使用瀏覽器打開當前網頁。
   
   注意點：
   a. Chrome谷歌瀏覽器電腦上一定要安裝。
   b. 網頁運行之前，當前網頁一定要保存 ！！！。 保存快捷鍵：ctrl + S。

2. Html網頁的文檔結構。
   

3. 註釋。
   格式： <!— 註釋內容 --> 前面是兩個-
   作用： 對代碼進行解釋說明，但是不屬於代碼的一部分，不會顯示在網頁中。

七. 基本概念。

1. 什麼是標籤？
   用一對尖括號括起來的就叫標籤。 <內容>
   2.什麼是元素？什麼是節點？
   由一對標籤（或者單標籤）組成的就叫一個元素。
   Html元素，head元素，body元素，title元素，meta元素。
   Html節點，head節點，body節點，title節點，meta節點。
   3.元素嵌套。
   Html元素中嵌套head元素和body元素，所以html元素叫做head元素和body元素的父元素，head元素和body元素叫做html元素的子元素。 父子關係。
   Head元素和body元素是平級關係，兄弟元素。