前端開發入門從認識 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 基本設定」完成設定,以方便後續的實作教學。








沒有留言: