開源技術教學網[網頁設計] 教學：HTML 入門教學

2024-11-19

文章推薦指數： 80 %

投票人數：10人

現在不會有網站只用HTML 來寫網頁，都會搭配一些CSS 樣式表來美化網頁。

由於HTML 本身是用來呈現靜態頁面的標籤，沒有程式邏輯的部分，會比真正的程式語言來得簡單得 ... Togglenavigation開源教學精選項目C語言Golang資料結構網頁程式電子書籍現代C語言程式設計C語言應用程式設計多平台Objective-C程式設計跨平台CommonLisp程式設計社群媒體臉書粉絲團臉書社團推特GitHubGumroad本站資訊關於著作權免責聲明隱私權開源教學網頁設計HTML入門教學最後修改日期為MAY19,2019前言我們在本文中介紹一下什麼是HTML。

當然，HTML無法在短短一篇文章內介紹完，這裡僅做一些概念上的介紹。

HTML文件的組成基本上，HTML文件是由標籤(tag)和內容交織而成的文字文件。

許多HTML標籤是成對的，像

這是一段文字

(表示段落)，但也有一些HTML標籤是單獨存在的，像(表示嵌入圖片)。

由此可知，HTML標籤是一種將內容(content)和版面(layout)混合在一起的文件形式。

我們學習HTML就是在熟悉這些標籤怎麼使用。

原本HTML呈現出來的樣式很樸素，許多網站漂亮的頁面是藉由調整CSS而成。

現在不會有網站只用HTML來寫網頁，都會搭配一些CSS樣式表來美化網頁。

由於HTML本身是用來呈現靜態頁面的標籤，沒有程式邏輯的部分，會比真正的程式語言來得簡單得多。

HTML頁面的程式邏輯就是用JavaScript來撰寫；要注意JavaScript是後來才加到瀏覽器中的技術，原本設計HTML時沒有包含程式邏輯的部分。

以下是一個HTML版的HelloWorld文件： MyAwesomeSite

WelcometoMySite

每份HTML文件都要先宣告其版本：網頁宣告會依據HTML文件版本的不同而有所不同，這裡是用HTML5的宣告。

HTML在長年發展中，經歷了數個版本的更迭，目前的版本來到HTML5。

網頁技術的發展是漸進的，網頁技術相關的委員會(W3C)會定期開會以制定出一套標準，之後各個瀏覽器供應商(browservendor)才去實作，所以標準建立後到實際支援會有一段落差期。

其實每個瀏覽器供應商都有派代表到W3C，而且在會議中掌握主導權。

目前瀏覽器實際的支援度可參考CanIUse網站；基本的HTML標籤通常都能使用，而比較新的標籤就要實際查一下。

每份HTML文件固定的版面如下：扣除宣告區後，最外圍會以一對標籤包住整份文件。

在每份HTML文件內，固定會有一個區塊和一個區塊，前者是HTML文件的元資料(metadata)，後者則是實際的網頁內容和版面。

HTML文件是版面和內容交織的文件檔案，標籤的部分不會顯示在最後的頁面上，瀏覽器會將HTML標籤結合相關的CSS設定後呈現出來，而標籤所包住的文字則是實際呈現在頁面上的文字。

基礎HTML標籤我們在本節中展示一些基礎的HTML標籤。

標頭(Heading)標頭用於文章標題或子標題，從

到共分為六級，範例如下(看效果)：Title Subtitle Subsubtitle 段落(Paragraph)在文章中可使用

來區分段落，範例如下(看效果)：

Loremipsumdolorsitamet,consecteturadipiscing...

Namutodiodolor.Praesenteunibhimperdiet,imperdietexvel,semper...

Maecenasintelluslacus.Doneciaculis,lectusnonviverraconvallis,...

註：本段文字為loremipsum，即用來檢視排版的無意義文字。

清單(List)分為有序的

和無序的

Item1
Item2
Item3

以下是無序的清單(看效果)：

Apple
Banana
Citrus

連結(Link)用來連結其他網頁或網站，以下是實例(看效果)：Google台灣 href用來指定連結目標，target="_black"設置在新視窗開啟頁面，這些都是HTML標籤的屬性(attributes)。

影像(Images)用來載入圖片，以下是實例(看效果)： src用來指定圖片來源，alt用於圖片無法載入時的替代性文字，width="64"是指將寬度縮小到64像素，而高度會隨之等比例縮放。

開發用網頁伺服器有些讀者會用開啟檔案的方式來打開HTML文件，但有些網頁的行為要透過和網頁伺服器互動才比較好呈現。

所以還是建議讀者在本地端建置一個開發用網頁伺服器。

在本地端設置一個真正的網頁伺服器，像Apache或Nginx等，設置上比較麻煩；比較簡單的方式是使用開發用的網頁伺服器，這類伺服器不需設定，可立即使用；但這類伺服器效能不彰，不會用在實際上線的網站上。

如果讀者有按照我們前文的建議安裝Node.js的話，可以安裝http-server套件：$npminstall-ghttp-server 使用方式如下：$cdpath/to/project $http-server 這時候，http-server會在工作目錄所在的位置開一個臨時的網頁伺服器，可用來模擬上網時拜訪網頁的情境。

如果使用PHP寫網頁程式，5.4版之後的PHP有內建的網頁伺服器：$cdpath/to/project $php-Slocalhost:8080 如果想用其他工具的讀者，可參考國外網友整理了一份快速建立開發用網頁伺服器的工具清單。

檢查HTML代碼雖然HTML只能算是一種靜態代碼而非程式碼，也有一些軟體可以檢查HTML代碼是否有錯，像是HTML標籤是否成對或是是否寫錯標籤等。

HTMLTidy是一個HTML頁面重排(formatting)的工具；不過，也可以做為檢查HTML代碼的工具。

搭配-errors就變成HTML的靜態代碼檢查器：$tidy-errorspath/to/page.html 如果有使用模板語言的話，這個工具就不是那麼方便。

我們採取的策略是用HTTPie或其他HTTPclient將頁面抓下來後重導給tidy：$httpgethttp://localhost:8080/|tidy-errors 這個指令的想法是檢查經模板引擎轉換後的頁面(webpages)，再回推當初寫的模板是否有錯。

當然這樣比不上直接檢查模板，不過，模板代碼不容易直接檢查，這裡的做法也是可以接受的。

HTML縮小器理論上，HTML頁面可藉著移除多餘空白、去除註解等手法將頁面瘦身，更有利於網路傳輸。

不過，HTML縮小器並不普遍；這是因為我們現在很少撰寫純靜態網頁，多由網頁程式動態生成頁面，較難直接用第三方工具對網頁進行後處理(postprocessing)。

如果自己使用的網頁框架可加入這類工具，不妨在網頁中使用這些工具替網頁瘦身，像是Rails可在網頁的middleware中指定HtmlCompressor::Rack來替網頁瘦身(參考這裡)。

如果讀者使用其他的網頁框架，則要查閱一下該框架的手冊，查詢如何在輸出頁面時縮小HTML代碼。

繼續深入一開始只有HTML時相對枯燥無聊，在加入CSS和JavaScript後才能漸漸建立一些比較有趣的網頁。

網頁的書通常會把HTML和CSS寫在一起，讀者可自行到書店翻閱，版面看起來順眼的即可。

有些網頁的書還會將JavaScript寫在一起，但筆者建議JavaScript部分的教材分開購買，一本書講太多技術往往深度不足。

除了實體書籍外，也可以透過一些線上教程來學習，像是w3schools、MDN等。

分享本文追蹤本站