前端開發入門從認識 HTML 文件開始

學習前端技術，我們通常是從認識 HTML 文件開始。

HTML文件經過瀏覽器解譯內容之後，轉換成為網頁，其內容由三種純文字格式的內容組成，分別是 HTML、CSS 與 JavaScript。

1. HTML：定義任何構成網頁的元素，包含文字、圖片、動畫甚至視訊影片等等。
2. CSS：定義網頁要呈現的外觀，例如文字大小、頁面顏色，甚至版型的配置，所有與網頁呈現有關的操作均由CSS定義。
3. JavaScript：建構應用邏輯的程式語言。

 HTML 是構成網頁架構的主體元素，以下的課程內容，針對 HTML 文件分成幾個部份進行說明。

• 建立 HTML 文件
• 初探標籤
• HTML 架構
• 設定標籤屬性

完成這四個部份的討論，能夠初步認識 HTML 與網頁。

建立第一個HTML文件，並且利用瀏覽器開啟

網頁是一種純文字格式的檔案，最簡單的方式是建立一個文字格式檔案，並且將其副檔名從 txt 改成 html 即可成為網頁檔案。

初探標籤 - 標籤的組成與意義

在文字檔存成 .html 格式之後，以瀏覽器開啟就可以看到網頁的執行結果，其中文字檔輸入的內容是構成網頁內容的 HTML 架構，由各種標籤元素組成，以下來看標籤的構成。

HTML 架構說明 - 整體網頁的內容組成與架構形成

對於構成 HTML 文件內容的標籤有所認識之後，現在進一步來看HTML檔案的結構。

標籤屬性 - 標籤特性與內容調整設定

構成 HTML 文件的標籤，還可以一步設定其專屬的屬性項目，瞭解相關的設定非常重要，以下進行說明。

以上完成基本的入門說明，接下來準備開發工具，開始動手練習學習。

支援前端開發的工具很多，此系列教學均採用 Visual Studio Code ，請至下載頁「Download Visual Studio Code」下載安裝，接下來參考這一篇「Visual Studio Code 基本設定」完成設定，以方便後續的實作教學。