網頁程式設計入門網頁設計程式語言網頁開發工具網頁程式碼自學寫網頁

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

文章推薦指數： 80 %
投票人數：10人

如果想用其他工具的讀者，可參考國外網友整理了一份快速建立開發用網頁伺服器的工具清單。

檢查HTML 代碼. 雖然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)分為有序的
    和無序的
    清單，前者會有清單項目編號，後者則無。

    以下是有序的清單(看效果)：
  1. Item1
  2. Item2
  3. 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等。

分享本文追蹤本站

請為這篇文章評分？

延伸文章資訊