學習前端技術,我們通常是從認識 HTML 文件開始。
HTML文件經過瀏覽器解譯內容之後,轉換成為網頁,其內容由三種純文字格式的內容組成,分別是 HTML、CSS 與 JavaScript。
在文字檔存成 .html
格式之後,以瀏覽器開啟就可以看到網頁的執行結果,其中文字檔輸入的內容是構成網頁內容的
HTML 架構,由各種標籤元素組成,以下來看標籤的構成。
對於構成 HTML 文件內容的標籤有所認識之後,現在進一步來看HTML檔案的結構。
構成 HTML
文件的標籤,還可以一步設定其專屬的屬性項目,瞭解相關的設定非常重要,以下進行說明。
HTML文件經過瀏覽器解譯內容之後,轉換成為網頁,其內容由三種純文字格式的內容組成,分別是 HTML、CSS 與 JavaScript。
- HTML:定義任何構成網頁的元素,包含文字、圖片、動畫甚至視訊影片等等。
- CSS:定義網頁要呈現的外觀,例如文字大小、頁面顏色,甚至版型的配置,所有與網頁呈現有關的操作均由CSS定義。
- JavaScript:建構應用邏輯的程式語言。
- 建立 HTML 文件
- 初探標籤
- HTML 架構
- 設定標籤屬性
完成這四個部份的討論,能夠初步認識 HTML 與網頁。
建立第一個HTML文件,並且利用瀏覽器開啟
網頁是一種純文字格式的檔案,最簡單的方式是建立一個文字格式檔案,並且將其副檔名從
txt 改成 html 即可成為網頁檔案。
初探標籤 - 標籤的組成與意義
HTML 架構說明 - 整體網頁的內容組成與架構形成
標籤屬性 - 標籤特性與內容調整設定
以上完成基本的入門說明,接下來準備開發工具,開始動手練習學習。
支援前端開發的工具很多,此系列教學均採用 Visual Studio Code ,請至下載頁「Download Visual Studio Code」下載安裝,接下來參考這一篇「Visual Studio Code 基本設定」完成設定,以方便後續的實作教學。
沒有留言:
張貼留言