Redirection外掛安裝及設定 | WordPress站長日常

WordPress網站建站後，管理員平日在後台進行各種操作維護，有可能會：刪除某個網頁，或是把文章、頁面的網址改掉，這樣的操作會造成網頁網址的變更；更具體來說，那些被刪掉或被改掉的網址都不復存在，也就是失效了。如果試圖用瀏覽器開啟這樣的網址，會被導向「404 Not Found找不到網頁」的頁面。

本文介紹入門級的Redirection外掛基本設定，能夠使那些被刪掉和被改掉的網址，自動被重新導向（redirect）到有效的網址。

網址失效了，你卻不知道？

試想，當網站訪客用瀏覽器試圖開啟你的某個網頁，看到的卻是「404 Not Found找不到網頁」的通知，是否會覺得觀感不佳？給訪客這樣的體驗，顯然是有缺陷的。我們當然希望訪客能夠順利開啟他們想要造訪的網頁，我們希望自己網站上的網頁盡可能都能打得開。

讓我們再想一下，為什麼已經刪掉的網址還會有人去開啟？以下試舉幾種可能的情況。

例如一，在你網站的某個或某些網頁中，你曾經設定這個已失效網址的超鏈接，也就是內部鏈接（internal link）。這個鏈接在你後來改掉網址或刪掉網頁後，並沒有同步更新，於是每當有人點擊這個鏈接，就會找不到網頁，而導向404頁面。

例如二，這個原本存在的網頁已經被搜索引擎收錄了。當某位訪客在Google搜索結果中搜到這個網頁，並點擊開啟時，由於網頁已經不存在或是網址已經變更，瀏覽器找不到它，便導向404頁面。

例如三，這個原本存在的網址，曾經被分享到外部網站，例如你自己將網址發布在Facebook粉絲團，或是陌生人將這個網址引用在他們自己的部落格（一般稱外部鏈接）。在你刪除網頁或更改網址時，這些外部鏈接不可能被同步移除或更改，因此，瀏覽器只能導向404頁面。

我們可以想像，在不加任何處置安排的情況下，網站管理維護的過程中遲早會「製造」出一堆導向404頁面的網址。當然，如果是那種剛生成沒多久就被刪掉或改掉的網址，由於還沒有人知道它們的存在（意思是，搜索引擎還沒有收錄它們，而你也還沒有把網址鏈接分享出去），就算不加任何處置也沒什麼問題。但如果你要刪掉、改掉的，是已存在一段時日的網頁，那麼在刪改網址的時候就得三思了。

太多的404 Not Found，將導致訪客被阻擋在沒有意義的網頁不存在頁面，當然會造成訪客的體驗不佳，也讓網站失去了本該擁有的流量，甚至是流失了潛在的商業機會。再者，過多的404頁面會導致搜索引擎對網站降低評等，不利於SEO。

但既然刪改網址是遲早會發生的正常操作，就建議最好能安裝具有「重導向」功能的外掛。重導向redirection，也稱作轉址，顧名思義就是把來造訪「舊網址」（通常是失效網址，但也可以是有效網址）的訪客，重新導向到「新網址」（有效網址）。

幸運的是，WordPress網站站長可以利用外掛來完成重新導向的設定。本文要介紹的外掛，名稱就叫做Redirection，它可以實現的基本功能有：

1. 每當你修改網頁的網址，Redirection外掛會自動生成一個重導向的指令，把舊的網址導向到新的網址。這樣能確保，造訪那個被你改掉的網址不會導向404頁面，而是去到新的網址。

2. 當你將某個網頁完全刪除，此外掛可以讓舊網址自動重新導向到首頁（你也可以手動設定導向到別的網頁）。

3. 有些站長或網路行銷人員會利用這樣的重新導向功能，把來造訪某個網頁的訪客直接引流到另一個網頁。最後到達的網頁，可以是在同一個網站，也可以是在不同域名的另一個網站，例如把https://thisdomain.com/contact-me，導向到https://thatdomain.com/。

Redirection這個外掛是免費的，而且使用的人很多。一般情況下我會推薦使用用戶較多的外掛，這不只是西瓜偎大邊，也是因為用戶多的外掛通常較穩定、更新較頻繁，並且不容易發生被開發者「棄養」的情況（我說的棄養就是開發者不再更新外掛。由於WordPress核心程式不斷在更新，如果某個外掛被棄養，它遲早會變得過時，終致與核心程式不相容，到那時候就迫使用戶必須解除安裝，另找外掛來替代，比較麻煩！）

如何設定Redirection外掛

1. 進入WordPress網站後台，在左邊清單列找到「外掛」，點擊「安裝外掛」按鈕，在搜尋框內輸入「redirection」，就能找到它。點擊「立即安裝」，再點擊「啟用」。

Redirection 外掛的使用人數眾多，且更新頻繁

2. 回到「已安裝的外掛」頁面，找到Redirection外掛。點擊settings（設定）。這個外掛的設定頁面包含若干個標籤頁，在頁面上緣可以找到它們。其中「重新導向」是用來設定舊網址和新網址組合，「選項」則包含一般設定。

3-1. 在標籤頁「選項」的第一部分「記錄」，可讓我們設定重新導向記錄以及404記錄的保留時間。我們可以根據這些記錄得知失效的網址還有多少點擊。

記錄保留的時間可依自己的需要設定

3-2. 在標籤頁「選項」的第二部分「網址」，URL Monitor指的是你要監控的網址包括哪些。例如我希望「文章」、「頁面」的網址，只要有變更都要自動重新導向到更新後的網址。另外，如果我有刪除網頁，其網址會自動導向至首頁（如果日後希望能導向其他頁面，可以到「重新導向」標籤頁去手動更改設定）。

檢查網址重新導向的設定，是否符合你的需要

3-3. 同樣在第二部分「網址」，Default URL settings有兩個選項我建議勾選：case insensitive matches指的是輸入的網址不分大小寫，ignore trailing slashes指的是網址結尾有沒有斜槓都一樣。勾選之後，代表不管訪客輸入的網址有沒有大小寫正確、結尾有沒有包含斜槓，只要網址本身寫得正確，都能順利開啟網頁。

4. 設定完畢記得在頁面最下方點擊「更新」。這樣就完成了最基本的設定。

除了上述的自動重新導向設定，我們還可以自行設定某個網址重導向到另一個網址。

如何手動設定重導向

1. 進入Redirection外掛的settings頁面，點選「重新導向」標籤頁。

2. 在「重新導向」標籤頁下方的「新增重新導向」，填入正確的「來源網址」和「目標網址」，填寫完畢後，記得點擊下方的「新增重新導向」按鈕。每一組的重導向設定完成後，都會出現在上方的列表中，可以隨時查看，編輯、刪除或停用。

填寫來源網址和目標網址時，可以用完整網址，也可以簡化表示，例如https://mydomain.com/contact/這個網址，只要寫成/contact/就可以了（也就是從前端的https一直到域名本身都不用寫出，從斜槓開始即可）。但如果你的目標網址是屬於另一個不同域名的網站，就必須寫出完整的網址才行。

將contact這個網頁重導向到首頁

新增成功之後，可以在上方列表中查看、修改

如果想要導向到不同域名的網址，則目標網址應該寫完整

同樣的，新增成功之後，可在列表中查看

以上就是Redirection外掛的基本設定與使用方法，希望對您有幫助！

WordPress網站小保養和大保養 | WordPress站長日常

身為需要管理8個WordPress網站的管理者，系統化的管理模式對我來說至關重要。經過幾年的摸索，有關WordPress建站的知識慢慢增加，我也開始建立起所謂的管理流程。

首先釐清一點，有些網站內容多、流量大，可能已經建置了一整個Team在維護，人多就有分工，甚至根本就有專人在負責IT。如果你或你公司的網站是屬於這種類型，那麼很幸運地你其實不需要閱讀本文。

本文所討論的WordPress網站維護，基本上是由一人打理，從文字文案撰寫、圖片收集及基本處理、基於範本的版面設計，以及網站本身的建置（買域名、選主機、設定DNS、安裝WordPress、下載各種外掛並安裝、抓bug）。然後，別忘了做完以上工作累得像條狗之後還有念茲在茲同樣重要的SEO搜索引擎優化等著進行。寫完這一串項目，突然覺得自己的工作不太人道～不過因為是幫家人的公司做，而且也都是小網站，所以就不嫌棄別人也不嫌棄自己，邊做邊學慢慢前進了。

這裡所介紹的WordPress網站維護基本流程，當然是基於我個人需要而規劃的，但我想對於某些同樣身為網站管理者的尤其新手來說，或許也有參考價值。那麼，我們就進入正題了。

風險意識，一定要有

每次進行網站維護之前，建議先做一次網站備份。最好主機備份和異地備份都做，這是個防範的動作，有做有保庇。萬一發生萬一的萬一，你會感謝有先做備份的自己。

我把網站管理維護工作簡單分成三大部分：

1. 平日工作

平日的工作主要是生成內容並上傳到網站，這又可細分為以下：

－撰寫文章並編輯、備置圖片並剪裁、拍攝影片並剪輯。

－將圖文內容上傳到網站後台，製作成新頁面（page）、新文章（post）。上傳並發布的流程，我會列出一個檢查清單（checklist），上面會有關於網址名稱命名、文字格式、圖片尺寸、設定鏈接等提醒，以保持發布內容格式的一致性，避免必要元素的遺漏。

－網站架構維護，包括WordPress核心程式、佈景主題以及外掛的日常更新（可參考我另一篇有關外掛更新的管理）。

- 網站安全性檢查。每次進後台都查看警示報告，看看有無值得特別關注的異常狀況。

2. 小保養

由於平日工作主要是專注在內容的製備及上傳，時間和注意力有限的情況下難免會忽略一些細節，因此就排定每一至三個月做小保養，所需花費的時間依網站複雜度而不同。主要項目包括：

－檢查文章與頁面的SEO設定有無遺漏：

a. 圖片有沒有都設定ALT
b. 文章與頁面有沒有設定關鍵詞（keyword）和描述（description）
c. 文章與頁面有沒有設置精選圖片（featured image）
d. 文章網址、頁面網址、圖片網址是不是用英文數字的格式（我個人偏好不使用含中文字的網址，但有時上傳會誤用）。提醒：想要修改網址的朋友，請記得要先安裝有網頁301轉址功能的外掛，以避免被改掉的網址變成404無法開啟。
e. 檢查文章與頁面是否都已有適當設置內鏈（internal links）

－首頁讀取速度是否正常：使用Google Page Speed、GTmetrix或Pingdom跑跑看，是否下載速度有異常，例如不小心上傳了1MB的圖片原始檔，發現之後可以趕緊改善。

－可以特別檢查一下每個頁面的手機版和ipad版是否都能正常顯示。其實這個在頁面製作完成的時候就應該都調整好，但人是肉做的，有時就是會忘記/沒空啊~

我覺得應該是因為我手邊有8個網站要維護，這意味著每一輪維護都要依序打開8個網站，同一項檢查（例如圖片的alt補充）要做8次，做完一項就已經快思考半癱，所以才有必要將維護工作分成小保養和大保養。如果你的手上只有一個或兩個網站，那麼我覺得大可以將小保養和大保養結合在一起完成。

在顯示項目設定處，勾選關鍵詞、Meta描述，以及內鏈和外鏈

設定顯示之後，就可以在頁面和文章列表中，看到關鍵詞和Meta描述、內鏈外鏈的設定狀況。

3. 大保養

大保養的目的是針對網站的結構進行深度的檢修。我們平日對網站添加內容，只會注意到內容有沒有正確顯示在網頁上，但是有可能在無意之中更動了網站結構。例如，把一個已經發布的網頁網址改掉之後，舊的網址如果沒有設定301轉址，就會變成無法訪問的404網頁。又例如，在無意之間上傳了大尺寸的原始圖片，導致網頁讀取速度被拖慢。這些難以用肉眼察覺的問題，最好能用網路工具來協助檢查，再一一排除。

檢查Google Search Console是否有提示錯誤訊息

這個Google站長工具應該很多人聽過、用過，目前可以免費註冊使用。使用之前須先驗證網站存取權。若是剛驗證通過，可能一時間不會提供什麼優化建議。待Google爬蟲爬取你的網站一段時間之後，就會累積對這個網站的了解，若找到什麼問題，會發郵件通知，建議你改善。

使用Ahrefs Webmaster Tools掃描全站，排查各類錯誤

這是國外的另一個站長工具，介面是英文的，目前可以免費註冊使用。同樣，使用之前須先驗證網站存取權。驗證通過後，可以立刻執行全站診斷。在Site Audit這個頁面查看診斷和除錯建議。比較常出現的重大問題會以紅色圓標表示，次要問題是橙色圓標，沒問題是藍色圓標。常見的重大問題包括4xx網頁（無法訪問的網址）、301網頁（太多網頁轉址）、圖片沒有設定alt、頁面漏了description、同一頁面重複使用兩個以上H1標題、沒有設置內鏈等等。 這個Site Audit你可以設定每星期指定時間執行一次（每月有掃描額度上限，但好像很難用得完），它能幫助網站管理者快速找出網站潛藏的問題。

網站管理本來就是一件需要費心的事情，牽涉繁複的知識和細節。而運作再怎麼流暢的網站，有時也還是有小細節需要調校。所幸有了好用的網路工具，加上自訂的管理流程，可以系統化的執行工作，提高效率和幸福感！

補充說明：

以下這幾個外掛是我認為網站管理必備的。如果你不喜歡這幾個外掛，也可以找同功能的來替代。

Redirection: 設定網址重新導向，也就是轉址
Smush: 把上傳後的圖片壓縮，以加速網頁讀取
Wordfence: 防毒防駭
All-in-One WP migration: 備份

管理Plugin外掛更新通知 | WordPress站長日常

外掛更新（plugin update）是WordPress網站日常管理的一環，它有相當程度的重要性，畢竟讓外掛發揮功能，網站才能正常運作，而由於外掛的程式經常更新（就如同手機的APP），網站管理者有責任經常維護，使外掛程式保持在最新版。除此之外，佈景主題（theme）和WordPress核心程式也會不時發布更新，需要網站管理者留意維護。

當某個外掛程式發布更新、佈景主題發布更新、WordPress核心程式發布更新，WordPress網站會透過電子郵件來通知網站管理者。儘管每個WordPress網站安裝的外掛數量不盡相同，但根據我自己的經驗，架站時間夠長的話，外掛最少也有十幾個。

但是但是但是（因為煩惱所以說三遍），外掛程式開發者並不會約好了都在同一個時間發布更新，也就是說，我們身為網站管理者，幾乎每週都會收到這個外掛、那個外掛需要更新的通知，此起彼落，源源不絕。實務上，我們不太可能一收到郵件通知就馬上打開網站後台操作更新，而一年到頭在接收這種更新通知，會導致感覺麻痺。（也可能是因為我管理的網站比較多，所以才會感覺如此麻痺。）

總而言之，本文就以筆者個人經驗，希望透過設定來簡化外掛（plugin）、佈景主題（theme）、核心程式（WordPress）的更新流程。

首先介紹一個概念，佈景主題程式開發者以及外掛程式開發者在更新程式的時候，除了優化自己的外掛功能、修補漏洞之外，還必須使自己的外掛兼容於最新版的WordPress核心程式。反過來說，每當WordPress核心程式發布更新，實務上佈景主題程式以及外掛程式需要一小段時間差，才能隨後發布與其兼容的更新程式。

這個時間差，有時重要，有時不重要。讓我們假設某外掛現下的版本跟今天最新發布的WordPress核心程式有不相容之處（但我們若不是專家通常不會知道），那麼如果我們在不知情的情況下，立即更新了WordPress核心程式，就有可能造成該外掛的功能不正常，從而導致網頁顯示出現問題。當然，再次強調，並不是每次WordPress核心程式更新都會跟外掛相衝突。

基於這個概念，筆者在管理更新作業的時候，採取的策略如下：

一、除了與佈景主題相關的外掛，以及網頁編輯器外掛（如Elementor）之外，一般的外掛我都設定為自動更新。設定方式是進入網站後台，在左側清單選擇外掛>已安裝的外掛。然後在外掛清單的最右一欄，選擇啟用自動更新（Enable auto-updates）。設定自動更新之後，每當這些外掛的開發者發布更新，不管是在台北時間早上六點還是深夜兩點，我網站上的相應外掛都會自動進行更新，不需要我一一進入後台去操作。（不過，每次有外掛自動更新完畢之後，WordPress會發電子郵件通知我更新已完成。它這樣很乖巧，但是我並不想頻繁被這類郵件打擾，所以我要設法關閉這種通知。方法請見本文後半部。）

二、至於沒有被設定自動更新的佈景主題相關外掛，以及網頁編輯器外掛，我的做法是，在收到電子郵件通知需要更新之後，撥空進入後台去手動更新。會這樣做是因為，佈景主題外掛和網頁編輯器外掛是比較重要的程式，萬一更新後發生異常，會影響到所有頁面。所以我在手動更新這類外掛之前，會先做一次手動網站備份。而更新這些外掛之後，我也會查看前台頁面的顯示有沒有異常。萬一有異常的話，就可以馬上處理。

三、最後是關於WordPress核心程式的更新。前面提過，WordPress核心程式發布更新時，往往許多外掛都還沒跟上更新，因此我會等一段時間（約略一兩星期），再去後台手動更新WordPress核心程式。同樣地，更新WordPress核心程式之前，先做一次網站備份。

還有另一個比較細緻的做法，就是在更新WordPress核心程式之前，先手動檢查每個已安裝外掛（點選外掛的查看詳情），查看該外掛與WordPress核心程式的兼容狀況。如果有任何重要的外掛還沒有跟上最新的WordPress核心程式，就先不要把WordPress核心程式更新。（至於什麼是重要的外掛，並沒有統一標準。我只能說，不重要的外掛就是那些即使停用也不會影響網站基本運作和顯示的外掛。）

最後，談一下如何關閉外掛自動更新的郵件通知（disable the WordPress plugin update notification）

雖然我已經把大多數的外掛都設定為自動更新，但是WordPress很貼心的在每次完成一個外掛的自動更新之後，都會發電子郵件通知我。也許有些人覺得很OK，但對我來說這是滿干擾的，所以我只好再找一個可以關掉自動郵件通知的外掛，希望減少比較不重要的郵件通知，而保留比較重要的郵件通知（例如WordPress核心程式更新、網頁編輯器外掛更新、以及佈景主題相關外掛更新的通知）。

關閉外掛自動更新的郵件通知，步驟如下：

1. 安裝Manage Notification E-mails（這是一個外掛）：按照安裝外掛的標準步驟，下載、安裝並啟動它。

2. 如果需要的話，安裝後可以順便把這個外掛啟用自動更新。

3. 進入Manage Notification E-mails這個外掛的設定（setting）頁面。把以下兩個選項取消勾選。取消勾選後，記得在頁面底部點選儲存設定，才算完成。

Automatic WordPress plugin update e-mail （外掛更新完成後的自動郵件通知）

Sends an e-mail after a successful automatic plugin update to administrators. E-mails about failed plugin updates will always be sent to the administrators

取消勾選的意思就是，外掛完成自動更新之後，不要用郵件通知我。

Automatic WordPress theme update e-mail （佈景主題更新完成後的自動郵件通知）

Sends an e-mail after a successful automatic theme update to administrators. E-mails about failed theme updates will always be sent to the administrators

取消勾選的意思就是，佈景主題完成更新之後，不要用郵件通知我（其實我沒有選擇自動更新佈景主題，而是自己到後台手動更新，所以這項通知也是不必要的）。

以上分享筆者管理外掛更新、佈景主題更新，以及WordPress核心程式更新的方式，僅供參考，不代表正確答案。無論如何，簡化WordPress網站管理的瑣碎環節，是為了節省精力和注意力，用來從事更重要的工作，例如SEO，然後相信某種程度上也是可以提高生活品質才是。

找到幾個還不錯看的Blogger主題範本 ｜ Blogger網站製作

先前為了製作網站，曾經花了不少時間在網上尋找合適的（免費）主題範本（Theme）。當時還不確定要用Blogger或WordPress建站，因此兩類主題範本都找過一輪，真的很花時間。現在把當時找到比較喜歡的Blogger Themes記錄下來，以後若需要再建站，可以從這些範本開始，或是從它們的來源網站作為起點去搜尋。

我個人偏好的網頁是色彩協調、淡雅的風格，方便套用自己的色彩配置和圖片。

KELLY

https://gooyaabitemplates.com/livepreview/kelly/

來源：gooyaabitemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、優雅風格

Grace

https://gooyaabitemplates.com/livepreview/grace-2/

來源：gooyaabitemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、優雅風格

Fabel

https://gooyaabitemplates.com/livepreview/fabel/

來源：gooyaabitemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、優雅風格

invento

http://invento-templateclue.blogspot.com/

來源：templateclue.com

特色：一欄、響應式網頁、有手機版網頁、不規則形狀banner、動態效果

sora times

https://sora-times-soratemplates.blogspot.com/

來源：soratemplates.com

特色：響應式網頁、有手機版網頁、輕文藝風格

Travelty

https://travelty-way2themes.blogspot.com/

來源：way2themes.com

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、俐落簡約風格

Unite White

https://unite-srtemplate.blogspot.com/

來源：soratemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、橙色藍色配色

以下幾個為btemplates.com網站上的主題範本，似乎比較傳統，可能是較早期開發設計的。如有興趣，可以參考。

Confit

https://btemplates.com/2016/blogger-template-confit/

來源：btemplates.com網站

特色：兩欄（左欄為邊欄）、響應式網頁、有手機版網頁、圖片背景

FitnessWP

https://btemplates.com/2016/blogger-template-fitnesswp/

來源：btemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、綠色系配色

MyBiz

https://btemplates.com/2016/blogger-template-mybiz/

來源：btemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁

Aurora

https://btemplates.com/2016/blogger-template-aurora-2/

來源：btemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、簡約風格、白色背景

FinanceNet

https://btemplates.com/2016/blogger-template-financenet/

來源：btemplates.com網站

特色：兩欄（右欄為邊欄）、響應式網頁、有手機版網頁、簡約風格、米白色背景

用System Font Stacks系統字型設定WordPress網站

本文介紹WordPress網站如何使用System Font Stacks系統字型進行設定，而不使用Google Fonts這類網路字型（web fonts）。

需求說明：

在我們製作WordPress網站時，一定會需要設定字型（fonts）。在一般情況下，我們選擇的佈景主題（theme）和網頁編輯器（editor或page builder），會預設某一種字型，而且通常會是Google Fonts。Google Fonts的字型檔案存放在Google的字型網站上，當訪客讀取我們的網頁時，瀏覽器才會去Google網站抓取該字型來使用，以正確顯示字型。可以想見，使用Google Fonts或多或少會延長網頁的讀取時間，而如果我們在製作網頁時缺乏良好規劃，比如同一網頁中設定了多種Google Fonts字型，就會導致網頁的讀取時間更長，而這往往是不必要的。

更進一步地說，如果你希望你的網站（無論內容是中文或外文）能讓中國境內的網友可以順利瀏覽，那麼，不使用Google Fonts可能就變成必要的設定。因為目前為止，從中國境內無法正常開啟與瀏覽Google相關的網站（包括Google搜尋引擎、YouTube、Blogger、Gmail等），WordPress網站若設定為必須到Google網站抓取字型，可能會導致中國網友發現網頁讀取緩慢甚至完全打不開。

其實，要解決以上問題，方法有好幾個。例如我們可以把要使用的Google Fonts檔案，存一份在網站主機中，這樣一來瀏覽器就不必去Google網站抓取，這個稱為self-hosted google fonts。同理，我們也可以選擇非來自Google的網路字型，或許就不會有被擋的問題。如果你是對字型比較講究，也就是要求網頁一定得用某個特定字型來顯示，那就只能朝這類解決方案去執行。

另一方面，如果網站設計者對字型的選擇沒有那麼講究（只希望基本簡潔美觀），也希望盡量避免抓取字型拖慢網頁讀取的速度，那麼不妨考慮用系統字型組合（System Font Stacks）的設定。

什麼是System Font Stacks

先說明System Font，系統字型顧名思義指的是操作系統內定的字型，因為是內定，所以本來就存在於操作系統內（也就是訪客的電腦內、手機內），不需要去別的網站（如Google）抓取字型檔案，也不需要網頁設計者把字型檔案存一份在WordPress網站主機裡。

要注意的是，各家操作系統內定的系統字型不盡相同。舉一個簡單的例子，Windows系統的內定無襯邊英文字型常見的有Arial、Tahoma、Trebuchet MS、Verdana等，這幾種英文字型在Mac OS系統裡剛好也是基本字型，但是像Geneva、Helvetica這兩種字型則是Mac OS系統內定，但微軟基本上不支援的。

更需注意的則是中文字型。以無襯邊字型來說，例如微軟的繁體中文系統字型有微軟正黑體，Mac OS系統的中文系統字型則有蘋方體（PingFang TC）。

目前較普及的操作系統有Mac OS, Windows, Android, Ubuntu, Linux等，出於各家系統字型的差異，就有必要設定一組字型來兼顧各家操作系統的狀況。

系統字型組合（System Font Stacks）就是從各主要操作系統的內定字型中挑選你想要的字型，組成一個套餐，這樣一來，不管訪客使用哪個操作系統來開啟網頁，都有至少一個內定的系統字型可以適用。

有人會問，如果不顧各家操作系統的內定字型，會有什麼結果？

舉例，如果在這個字型組合中只指定了Mac OS有的字型，而沒有納入Windows支援的字型，那麼當訪客是用IE或Edge開啟網頁，顯示的字型就是隨便系統決定。

再者，如果指定了英文字型但未指定中文字型，那麼也是任由操作系統根據其內建的規則（詳細規則為何並不清楚）去顯示中文。

由上可知，指定System Font Stacks的邏輯是對操作系統設定字型建議，以便對網頁顯示字型有一定程度的控制，而且是兼顧多個操作系統的狀況。其缺點則在於，無法百分之百控制到底結果會用哪種字型來顯示。

如何設定System Font Stacks

有關各操作系統的內定字型是什麼，在此就不贅述，有興趣可在網上查到（可以用system font stack去搜尋）。以下直接說明在製作WordPress網站時，如何設定System Font Stacks。

影響WordPress網頁字型設定的因素有好幾個，這幾個因素都要考量並正確設定，才能得到效果。牽涉到字型設定的有以下幾個地方：

1. 佈景主題（Theme）的基礎設定
2. 頁面編輯器（Editor/Page Builder）的基礎設定
3. 頁面內每個文字框的設定
4. Additional CSS （我們要在這裡加入System Font Stacks的指令）

先說明，我使用的佈景主題是Astra，頁面編輯器是Elementor。如果你使用的是不同的主題和編輯器，有可能設定的位置不同，但基本邏輯應該是相通的。

基本的邏輯就是，我們要先把基礎設定、頁面設定都設為default，頁面文字框也不要另外設定，最後再透過Additional CSS指令設定System Font Stacks，使這個設定通用於所有頁面。

1. 佈景主題的基礎設定：
進入WP後台，左邊清單找到Appearance>Customize>Global>Typography>Base Typography，在Family這裡要設為Default System Font
回到上一層，進入Headings，所有的Family都設為inherit

2-1. Elementor編輯器的基礎設定：
WP後台的左邊清單找到Elementor>Settings，Disable Default Fonts的選項打勾，並儲存設定（這裡的Default Fonts指的是Elementor自己內定的字型，而我們並不使用它）。

2-2. Elementor編輯器的通用設定：
開啟某個用Elementor編輯的網頁，進入編輯模式，在功能選單的左上角，漢堡按鈕點進去。
Site Settings > Global Fonts > 點擊每個鉛筆圖案，把字型都設為Default。

3. 頁面內文字框的設定：
如果你曾經在編輯頁面或文章時，針對個別文字框設定過網路字型，就必須回到文字框中取消網路字型，改為Default或inherit或空白。

4. 以上三處的設定完成後，現在要透過Additional CSS指令，設定我們想要的系統字型。
WordPress後台左邊清單，Appearance>Customize>Additional CSS

以下範例中的英文字型部分，我是參考了網路上的建議。然後以此為基礎，加上中文字型。這裡我選用的中文字型都是黑體（無襯邊），如果你想要使用別種字型，請自行搜尋可用的來替換即可。

黑體的簡體中文字型有以下：

Microsoft YaHei, 微软雅黑
Microsoft YaHei Light, 微软雅黑 Light
PingFang SC（苹方字体）
Hiragino Sans GB（冬青黑体）
Source Han Sans CN（思源黑体简体）
Noto Sans CJK SC（思源黑体简体）

CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟雅黑，顯示的字體比較不會太胖）：

body, h5, h6 {font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "微軟正黑體", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

h1,h2,h3,h4 {font-family: "Microsoft YaHei Light", "微软雅黑 Light", "Microsoft JhengHei Light", "微軟正黑體 Light", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

黑體的繁體中文字型：

Microsoft JhengHei, 微軟正黑體
Microsoft JhengHei Light, 微軟正黑體 Light
PingFang TC（蘋方字體）
Hiragino Sans TC（冬青黑體）
Source Han Sans（思源黑體繁體）
Noto Sans CJK TC（思源黑體繁體）

CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟正黑體，顯示的效果比較好，不會太胖）：

body, h5, h6 {font-family: "Microsoft JhengHei", "微軟正黑體", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

h1,h2,h3,h4 {font-family: "Microsoft JhengHei Light", "微軟正黑體 Light", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

以上就是System Font Stacks的設定方式。建議字型設定完成後，使用GTmetrix之類的測速網站檢測一下，從Waterfall chart的讀取紀錄中檢查是否已經沒有Google fonts網路字型的請求。

認識層疊樣式表Cascading Style Sheets (CSS)

層疊樣式表的原文Cascading Style Sheets，簡稱CSS，是用來設置網頁「樣式」的一套規則，所謂的樣式（style），包括字型、字體大小、行高、顏色、邊距、格線等。過去，網頁的樣式是以HTML標記語言來設定，但是後來，樣式的部分被分離出來，改用CSS來設定。CSS有幾個特點：

*簡單的說，HTML是用來標示網頁的「架構」，CSS則是用來設定網頁的「樣式」，兩者各司其職。

*CSS和HTML是兩種完全不同的「語言」，有各自的指令寫法，不能混淆。

*一般標準的做法，是把網頁的架構寫在.html文件中，把網頁的樣式寫在.css文件中。由於.html文件中會註明所搭配的.css文件名稱和存放位置，當瀏覽器在「開啟」某個.html文件時，就會去抓取指定的.css文件來使用，以便呈現該有的樣式。

*通常網站都會包含多個網頁，也就是有多個.html文件。這些網頁文件可以「共用」同一份.css文件，也就是使用同一個樣式表。由此想見，這樣可以確保網站上所有.html文件的樣式是統一的。再者，一旦有需要修改網頁樣式時，只要把那一份.css文件修改好，所有.html文件的樣式就都跟著修改好了。


*************如何在.html文件中指定.css文件
把CSS樣式設定儲存在名為.css的純文本文件中（稱為「樣式表」或「外部樣式文件」），然後在原先的.html文件中，創建一個外部鏈接，連到這個.css文件，這樣就可以讓多個.html文件共用CSS文件。事實上這就是許多網站的設置方式。在<head></head>區塊內，使用<link>標記來指定CSS樣式設定。

如何在.html文件中鏈接到.css文件：
....
<head>
<meta charset="UTF-8">
<title>標題</title>
<link type="text/css" rel="stylesheet" href="xxxx.css">
</head>
....
*************


*其實CSS樣式設定也可以直接寫在.html文件中。有兩種可能的方式：
1）如果網頁製作者沒有權限修改伺服器主機上的.css文件，但是有權限可以修改完整的.html文件（也就是牽涉到<head></head>的區塊），那麼他就可以在<head></head>區域，把CSS的指令直接寫在<style></style>標記之間。
2）如果網頁製作者沒有權限修改原始的.css文件及.html文件，只被允許在網頁的局部添加內容（例如大多數的網誌/部落格），那麼他可以利用HTML標記中的style屬性來指定樣式，例如<div style="padding: 10px; color: gray;">。


CSS樣式的語法

雖然CSS的語法和HTML的語法不相同，但兩者都還算是相當直觀，容易理解，學習起來並不困難。最基本的樣式表示法，就是「樣式名稱+冒號+樣式值+分號」，例如：

background-color: yellow;
font-size: 150%;

是不是一看就能理解？這裡帶出學習CSS的前兩個要點，一是要熟悉常用的樣式名稱，二是要熟悉對應的樣式值寫法。例如，padding（邊距）這個樣式，有好幾種不同的表示方式：

padding: 10px 5px 15px 5px;
四個數值依序代表上邊距、右邊距、下邊距、左邊距（順時針方向）。

padding: 10px 5px;
只寫兩個數值時，第一個代表上下邊距各為10px、第二個代表左右邊距各為5px。

padding: 10px;
只用一個數值時，代表上下左右的邊距都各為10px。

left-padding: 10px;
單獨指定左邊距。

right-padding: 10px;
單獨指定右邊距。

top-padding: 10px;
單獨指定上邊距。

bottom-padding: 10px;
單獨指定下邊距。

請留意，CSS指令中的「冒號」和「分號」都是不可缺的一部分，若是漏寫或寫錯，會導致樣式無法正常顯示。

熟悉了樣式名稱和樣式值寫法之後，第三個要點是了解如何把樣式指定給網頁中的特定段落，例如針對第一級標題<h1>設定樣式。不過，在.css文件中，通常都會先針對「整個網頁」（也就是<body>這個標示）設定基本的網頁樣式，例如字型font-family、字體大小font-size、字體顏色color、背景顏色background-color等。

完整的樣式設定，必須包含HTML標記名稱+一對花括號，然後在花括號內寫出樣式設定。例如：

body {
      background-color:  gray;
      font-family: Verdana, Arial, sans-serif;
      color: black;
      font-size: 12px;
      }

接著，再針對各層級的內容區塊，例如標題<h1>~<h6>或段落<p>進行設定。例如把<h1>標題文字設定成150%大小，把<h2>標題文字設定成120%大小。在下面的範例中，還可看到對<h1>、<h2>同時設定字體顏色為灰色，標示方式為「h1, h2」兩個標記以逗號分隔。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
   body {
         background-color:  gray;
         font-family: Verdana, Arial, sans-serif;
         color: black;
         font-size: 12px;
         }
   h1, h2 {
           color: gray;
           }
   h1 {
       border-bottom: 1px solid black;
       font-size: 150%;
       }
   h2 {
       font-size: 120%;
       }
     </style>
 </head>
<body>
<h1>網頁第一級標題</h1>
<h2>網頁第二級標題</h2>
<h2>網頁第二級標題</h2>
<p>段落內容</p>
</body>
</html>

如前所述，對<body>的樣式設定是最基礎的設定，適用於整個網頁內容（包括<h1>、<h2>）。但是若後面又針對<h1>、<h2>等標記設定了樣式，這些樣式設定值就會覆蓋（也就是取代）<body>的設定值。例如，在<body>中設定了字體顏色是黑色，但是後面又對<h1>、<h2>設定字體顏色是灰色，則灰色的設定會適用於<h1>、<h2>這兩個層級的標題。

延伸問題：如果想把某一個<h2>標題文字單獨設定成藍色，又該怎麼做？邏輯上，必須把那個<h2>「做個記號」，設定一個id名稱或是class分類名稱，這樣就能在style樣式設定時，特別標註那個特定的<h2>，並設定專屬的樣式（範例請見本文的最後一段）。


CSS的常用樣式有哪些？

能夠設定的樣式還滿多的，但如果不是重度使用者（例如網頁設計師），可以先從一些常用的樣式開始熟悉就好。以下列出一些樣式名稱，建議在設計網頁時用用看。如果調試出自己喜歡的樣式組合，不妨存檔備用，供作日後再次使用的範本，這樣就不必每次設計網頁都從零開始了！

font-family 字型   （以逗號分隔，例如：Verdana, Arial, sans-serif）
color 字體顏色
font-weight 字體粗細   （lighter；normal；bold；bolder）
font-size  字體大小   （可用像素或百分比表示，例如：14px或120%）
font-style 斜體文本   （normal；italic；oblique）

background-color 背景顏色
background-image 背景圖像
border-color 邊框顏色

line-height 行高
text-align 水平對齊   （left左對齊；center居中；right右對齊）
text-decoration   (underline；line-through；overline；none)

border 邊框
border-bottom 邊框底部
padding 內邊距
list-style 列表外觀


font-family的設置

*網頁字型可分為5類：sans-serif, serif, monospace, cursive, fantasy，每一類包含多種不同的字型。
*常看到的serif和sans-serif並不是指某款特定字型的名稱，而是代表某類字型。serif是有襯邊的字型，sans-serif是無襯邊的字型。

1. serif: 有襯邊的字型，例如Times, Times New Roman, Georgia，常用於報紙雜誌的印刷體。
2. sans-serif: 無襯邊的字型，例如Verdana, Arial, Arial Black, Trebuchet MS, Geneva，常用於網頁，因為無襯邊的文字比較簡潔，在電腦、手機屏幕上閱讀比較輕鬆。
3. Monospace: 字母的間距相同的字型，例如Courier, Courier New, Andale Mono，它是模擬打字機打字的效果，常用於表示編程代碼。
4. Cursive: 仿手寫效果的字型，例如Comic Sans, Apple Chancery。適合用在活潑、不正式、年輕主題的文字。
5. Fantasy: 具裝飾性的特殊字型，例如Last Ninja, Impact。可做特殊效果用，但不適合用來顯示閱讀用的長段文字。很少用在網頁文字中。

*font-family樣式可以一次設置多種字型，字型的英文要拼寫正確（含大小寫），並以逗號隔開。如果字型的名稱中間有空格，如Courier New，該字型名稱要用引號，如"Courier New"。
*通常每次設置的多個字型會屬於同一個字型類別，例如全都是sans-serif或都是serif。
*即便在font-family設定了某款你喜歡的字型，卻不一定能在瀏覽器顯示，或是你會發現同一個網頁在不同的瀏覽器（例如Chrome、360、SAFARI）畫面中，顯示出來的字型不一樣。網頁設置的字型能否顯示，要看瀏覽器所在的電腦是否支援該字型。不同的電腦操作系統（如Windows、Mac）默認支援的字型不同。
*實際運用上，我們會對font-family設置多個字型，並且把偏好的字型寫在前面。利用這樣的設置把偏好的字型優先列舉出來，以增加對字型的控制。
*瀏覽器讀取網頁時，會按照字型設置的順序來顯示。例如font-family: Verdana, Arial, sans-serif; 如果電腦有支援Verdana字型，就以Verdana顯示文本，沒有的話就用Arial....以此類推。若是標明的字型都不支援，瀏覽器就會在sans-serif字型類別裡找一個默認的字型來使用。
*因此，設置字型時，通常最後一個會寫sans-serif或serif，五類字型中的一類。


CSS標記的分類運用

*雖然CSS可以針對不同標記如<h1>、<h2>、<p>創建樣式，但如果想要對特定一個<h2>設置專屬的樣式，該怎麼辦？可以的，只要先對不同的<h2>作分類（注意：是在.html文件中，將<h2>做標記）。

步驟：
1. 在.html文件中，利用class屬性對<h2>分類，例如：
    <h2 class="general">...........</h2>
    <h2 class="promote">...........</h2>
2. 接著，在.css文件中，指定各自的樣式：
    h2.general { color: blue; }
    h2.promote { color: red; }

*不只是<h2>，其他的標記也可以使用class這個屬性來分類。例如<div>、<blockquote>等。

步驟：
 .html文件里寫： <div class="promote">
 .css文件里寫：  div.promote { color: red; }

*同屬一類的樣式規則可以寫在一起：
 例如可以寫成：h2.promote, div.promote { color: red;}
 還可以簡單寫成： .promote {color: red;}

*一個標記可以設定多個分類名，例如：<p class="premium female">，這裡有兩個分類，一個是premium，一個是female，之後再到.css文件中為不同的分類制定規則。
 例如： p.premium { color: brown;}
           p.female { text-decoration: underline;}

*驗證CSS語法的網站工具：http://jigsaw.w3.org/css-validator/

CSS表格：頁面佈局與定位

CSS（層疊樣式表）提供了表格佈局的功能，讓網頁設計者可以把網頁內容劃分成不同區塊（例如主版面main和側欄sidebar）。透過CSS指令分割之後，就可以將網頁內容佈置在不同區塊中，並且透過CSS的樣式指令來統一設置或變更各區塊的樣式。

本文介紹CSS表格的概念。若有興趣了解HTML表格，可點選HTML表格介紹。


CSS表格的基本概念

*以HTML標記和CSS指令，把各區塊內容（例如#main和#sidebar）放置在不同的單元格設置中，使其形成網頁佈局。
*表格的基本架構：本文中，我以橫列（row）、直行（column）、單元格（cell）來稱呼。
*CSS表格的設置名稱：table、table-row、table-cell。
*每個單元格里的內容，要以HTML「塊元素」的形式存在，例如<p></p>或<div></div>。

以下示範把網頁分成#main和#sidebar兩大區塊，放在一個CSS表格中（也就是一個橫列中包含著兩行）。

*此表格只有一列，當中有兩行/兩單元格，左單元格放#main的內容，右單元格放#sidebar的內容。
*基本做法：
1) 在.html文件的<body></body>區域，使用<div>標記，來設置main和sidebar的結構，並且設定id。
2) 在.html文件的<head></head>區域，以<style></style>指定CSS表格樣式。

*詳細步驟：
1. 在.html文件的<body></body>區域，為整個表格區域設置一個標記<div id="tableContainer"></div>（設定id是為了方便CSS樣式設置）。
2. 為橫列設置一個<div id="tableRow"></div>。
3. 本範例的橫列中含有兩個單元格（也就是兩直行或兩欄的意思），並設置各自的id（即<div id="main"></div>和<div id="sidebar"></div>）。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>

 </head>
 <body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

4. 接下來，在<head></head>區域，以<style></style>指定CSS表格樣式，分別指定CSS表格、橫列和單元格。（本文的後半部會提供另一種標示方式，也就是把CSS樣式指令直接放在HTML標記中。）此處我將main和sidebar兩單元格各自設置了背景顏色，以方便查看網頁呈現效果。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
       div#tableContainer {
                           display: table;
       }
       div#tableRow {
                     display: table-row;
       }
       div#main {
                 display: table-cell;
                 background-color: #dddddd;
       }
       div#sidebar {
                    display: table-cell;
                    background-color: #aaaaaa;
       }
</style>
 </head>
<body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

修改後，重新加載網頁，看看有什麼變化。是否sidebar的內容出現在右邊，而且左右兩個單元格是一樣大的。

5. 對這個CSS表格，我們可以增加各種樣式設定，使版面更美觀。請自行測試各種設定的效果。
border-spacing是單元格虛擬邊框之間的距離。
vertical-align是垂直對齊方式，此處選擇讓單元格內容向上對齊（top）。
Padding單元格內容與單元格邊緣的距離，又稱為內邊距。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
       div#tableContainer {
                           display: table;
                           border-spacing: 10px;
       }
       div#tableRow {
                     display: table-row;
       }
       div#main {
                 display: table-cell;
                 background-color: #dddddd;
                 vertical-align: top;
                 width: 70%;
                 padding: 20px;
       }
       div#sidebar {
                    display: table-cell;
                    background-color: #aaaaaa;
                    vertical-align: top;
                    padding: 20px;
       }
</style>
 </head>
<body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

以上只是最基本的設定。請試著調整瀏覽器視窗的寬度，看頁面的呈現是否理想？CSS表格的設置大致成形了！未來要設置兩欄或三欄的頁面佈局，就可以考慮使用CSS表格。


把CSS樣式指令直接放在HTML標記中

如果因為某些緣故無法或不方便直接修改<head></head>區域、無法或不方便修改.css文件，也可以把相關指令直接寫在HTML標記當中。以下將上面範例改為在HTML文件中設定。（id的設定可以省略，此處保留以便和前面的指令對照。）

<div id="tableContainer" style="display: table; border-spacing: 10px;">
   <div id="tableRow" style="display: table-row;">
     <div id="main" style="display: table-cell; background-color: #dddddd; vertical-align: top; width: 70%; padding: 20px;"><p>Main單元格的內容在此</p></div>
     <div id="sidebar" style="display: table-cell; background-color: #aaaaaa; vertical-align: top; padding: 20px;"><p>Sidebar單元格的內容在此</p></div>
   </div>
</div>

效果如下：

Main單元格的內容在此

Sidebar單元格的內容在此

HTML表格的基本設定

製作網頁時，網頁內容總會有需要用上表格的時候，如何使用HTML語言來設置表格呢？本文介紹的是製作HTML表格的基本標記。

表格的用途是能夠簡潔而有條理地呈現資料性內容（例如數據），使讀者可以快速地掌握資料的脈絡。適當地使用表格來呈現資料，可以提高網頁內容的可讀性，增進讀者的理解。

相對於HTML表格是為了有條理的展現數據或文字內容而存在，CSS（層疊樣式表）作為網頁樣式設計的總領導，提供了另一種表格架構（簡稱CSS表格）。CSS表格的主要用途是，以表格的概念來設置網頁頁面的佈局與框架。現下的網頁樣式，常見兩欄（two column）、三欄（three column）的樣式，像這種多個欄框的樣式，就可以透過CSS表格來實現。可以想見，這樣的「表格」主要用途就不是羅列數據資料了。


HTML表格的基本標記方式

首先說明表格的概念。在日常中文的表述裡，我們常常會把行和列的說法混用，這有時會造成溝通上的誤解。本文為了表意清晰，一律使用橫列（row）、直行/欄(column)、單元格(cell)來說明。

HTML表格的特色在於，每一個直行和橫列，以及每一個單元格，都必須標記清楚，才能井然有序地呈現資料。這導致表格的標記乍看之下會很複雜。嗯，只能說，習慣了就好。


演示步驟3-1：
HTML表格的最外層是<table></table>這一對標記。在<table></table>標記內部，須按照由上往下的順序，填寫橫列標記<tr></tr>。此處的tr是table row的意思。表格有幾個橫列，就填入幾對橫列標記（tr）。

表格製作中：填入橫列標記（tr）  
<table border="1">         #屬性border="1"指定了表格框線的粗細度
<tr>
</tr>
<tr>
</tr>
</table>


演示步驟3-2：
在每對<tr></tr>標記內部，須按照由左而右的順序，填寫單元格標記<td></td>。此處的td是table description的意思。一個橫列裡有幾個單元格，就填入幾對單元格標記。換句話說，填入幾個單元格，就代表表格有幾個「直行」。

表格製作中：在橫列標記（tr）內，填入單元格（td）標記。此範例設定每列有三個單元格。
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


演示步驟3-3：
在單元格標記<td></td>中間，填入表格資料，也就是表格的主體！

表格製作中：在單元格標記（td）內，填入表格內容
<table border="1">
<tr>
<td>北部</td>
<td>中部</td>
<td>南部</td>
</tr>
<tr>
<td>5</td>
<td>9</td>
<td>11</td>
</tr>
</table>

步驟3-3完成後的表格呈現效果：

北部	中部	南部
5	9	11

HTML表格的標記變化

可以為HTML表格加上表格標題<caption></caption>，以及表格標頭<th></th>，也就是table heading。<th></th>的使用方式其實和<tr></tr>相近，作為標頭它適合用在表格的最上橫列，或是最左直行，效果是可以讓單元格內容加粗顯示。

********表格示例：<caption>和<th>用法
<table border="1">
<caption>此處填入表格的標題</caption>
<tr>
<th>此處為標題1</th>
<th>此處為標題2</th>
<th>此處為標題3</th>
</tr>
<tr>
<td>內容1a</td>
<td>內容2a</td>
<td>內容3a</td>
</tr>
<tr>
<td>內容1b</td>
<td>內容2b</td>
<td>內容3b</td>
</tr>
</table>

表格呈現效果：

此處填入表格的標題

此處為標題1	此處為標題2	此處為標題3
內容1a	內容2a	內容3a
內容1b	內容2b	內容3b

基本規則：
*即便某個單元格的內容是空白的，也要寫出<td></td>標記來代表該單元格。
*<th>和<td>的差別在於，前者是默認為標題的加粗字。
*有時候我們會需要把表格中的單元格合併，例如把兩個單元格合併為一個，設置的方式如下。


********表格示例：單元格跨列合併
此處演示的是，將最左側上下相鄰的兩個單元格合併，使用的是<rowspan="2">的標記。

<table border="1">
<tr>
<td rowspan="2">內容1a</td>
<td>內容2a</td>
<td>內容3a</td>
</tr>
<tr>
                            #因第一行已經合併，此處被合併的單元格略過不寫
<td>內容2b</td>
<td>內容3b</td>
</tr>
</table>

表格呈現效果：

內容1a	內容2a	內容3a
	內容2b	內容3b

********表格示例：單元格跨行合併
此處演示的是，將第二橫列的第一和第二個單元格合併，使用的是<colspan="2">的標記。

<table border="1">
<tr>
<td>內容1a</td>
<td>內容2a</td> 
<td>內容3a</td>
</tr>
<tr>
<td colspan="2">內容1b</td>
                                         #因兩個單元格合併，第二個單元格略過不寫
<td>內容3b</td>
</tr>
</table>

表格呈現效果：

內容1a	內容2a	內容3a
內容1b		內容3b

HTML表格加上CSS樣式設置

由上面的範例可看到，最基本的HTML表格看起來並不是太美觀，如果想要調整它的樣式，必須加上CSS指令。加入CSS指令有兩種方式，一種是在.css文件中，針對表格的樣式進行設置，例如框線border、外邊距margin、內邊距padding、字型font-family、標題位置caption-side等。如果沒有辦法直接修改.css文件，則可以在<table>、<tr>、<td>等HTML表格的標記中，以屬性style=""的方式加上CSS指令。

常用指令：
margin: 表格邊框與網頁邊緣的距離，可以用像素（px）或百分比（%）來標示，也可以設為auto
border: 表格邊框的樣式和顏色
caption-side: 表格標題的位置
border-spacing: 單元格邊框之間的距離
border-collapse: 把單元格邊框之間的距離定為0
padding: 內邊距，也就是單元格文字與單元格框線的距離
text-align: 文字水平對齊方式，可以是left或center或right

********在.css文件中設置表格樣式
table {
      margin-left: 20px;
      margin-right: 20px;
      border: thin solid black; 
      caption-side: bottom;
      border-spacing: 10px 30px 10px 30px;
      border-collapse: collapse;         
 }
caption {
      font-style: italic;
      padding-top: 8px;
      padding-bottom: 8px;
 }
td, th {
      border: think dotted gray;
      padding: 5px;
 }


********在HTML表格標記中加入CSS指令
在HTML表格的標記中加入CSS指令是最直觀的做法。不過它的缺點是，必須逐個表格加入設置，比較瑣碎，而且容易造成不統一的樣式。（如果是在.css文件中設置，就可以控制整個網站網頁中的表格，修改起來也比較簡便快速。）

<table border="1" style="margin-left: auto; margin-right: auto; border: thin solid black; caption-side: top; border-collapse: collapse;">
<caption style="padding: 8px; color: brown; font-style: italic;">此處填入表格的標題</caption>
<tr>
<th style="padding: 5px; width: 150px;">此處為標題1</th>
<th style="padding: 5px;">此處為標題2</th>
<th style="padding: 5px;">此處為標題3</th>
</tr>
<tr style="text-align: center;">
<td style="padding: 5px;">內容1a</td>
<td style="padding: 5px;">內容2a</td>
<td style="padding: 5px;">內容3a</td>
</tr>
<tr>
<td style="padding: 5px;">內容1b</td>
<td style="padding: 5px;">內容2b</td>
<td style="padding: 5px;">內容3b</td>
</tr>
</table>

樣式設置效果：

此處填入表格的標題

此處為標題1	此處為標題2	此處為標題3
內容1a	內容2a	內容3a
內容1b	內容2b	內容3b

效果說明：
*在<table>中設置margin-left: auto; 以及margin-right: auto;，可以讓表格置中。
*在<th>或<td>中設置width: 150px;，可以指定單元格的寬度（每一個直行只要設置第一個的寬度就可以了。）
*在<tr>中設置text-align: center;，就可以把整個橫列的單元格設置為文字居中。

HTML文件中的顏色設定

在HTML文件中設定文字、背景、框線等元素的顏色，是網頁設計人員的基本功。學會設定顏色不是很困難的事，本文簡單說明用三種方式來表示顏色。

在我看來比較有難度的是「選色」和「配色」。漂亮好看的顏色，誰都能挑出幾個，但是挑出的幾個顏色是否能協調而且具備美感地搭配在一起，搭配的比例又是怎樣最恰當？恐怕就不是三言兩語說得清楚了。話說回來，也不用太過擔心，在網路上可以找到各種網頁設計範本作為參考，而且也可以直接觀摩設計出色的網站，從中學習。如果有需要，還可以找幾本配色事典來翻閱，相信總能找到幾個符合自己需求的配色方案。


在HTML網頁文件中設置顏色，有3種常見的格式：

1. 用「顏色名」來設置顏色：

*可用「顏色名」設置的基本顏色有16種，延伸顏色有140種。
*基本16個顏色：aqua, blue, gray, lime, navy, purple, silver, white, black, fuchsia, green, maroon, olive, red, teal, yellow.
使用實例：<div style="color: maroon; background-color: silver;">
*在網路上可以找到所有瀏覽器都支援的有「名字」的顏色列表，例如這個「HTML COLOR NAMES」。https://www.w3schools.com/colors/colors_names.asp


2. 用R,G,B紅綠藍三種顏色的相對比例來設置顏色，可用百分比或0-255的數值來表示。
*例如白色是：100% red + 100% green + 100% blue，在HTMl文件中可以寫成rgb(100%, 100%, 100%)
 例如黑色是：0% red + 0% green + 0% blue，可以寫成rgb(0%, 0%, 0%)
*顏色表示例1（CSS語言）：body { background-color: rgb(80%, 40%, 0%);}
 顏色表示例2（CSS語言）：body { background-color: rgb(204, 102, 0);}
*在配色事典上的顏色，通常都會有RGB顏色的數值，可以用這個方法來標示，使網頁文件能顯示你要的顏色。


3. 用十六進制顏色值（hex code）來設置顏色：這是目前網頁文件最普遍的顏色設置方式。
*例如#FF0000代表的就是red紅色。
*如果是以網頁設計為目的的配色事典，或是提供網頁設計資源的網站，通常就會以hex code來標示顏色。
*萬一你在網站或書本上看到的顏色沒有提供hex code數值，就必須在網路上找轉換工具（converter），將RGB色彩轉換成hex code，或是將hex code轉換成RGB色彩（注1）。
 例如：RGB (100,100,100) 轉換成hex code會是#646464
*用hex code設定HTML文件中的字體顏色：<div style="color: #646464;">



注1：手動計算hex code轉換成RGB色彩

#cd690f若要轉換成RGB顏色，該怎麼表示？

Hex code的六個碼，前2碼代表紅色的成分，中間2碼代表綠色的成分，後2碼代表藍色的成分。
六個碼，每個碼只會出現0~9以及A~F，也就是10個數字和6個字母的可能性，共16個可能性。16x16=256，也就是說，用兩個碼就能夠用來表示單一原色的256個值。這也是它成為十六進制的原因。
0,1,2,3,4,5,6,7,8,9,A(代表10),B(代表11),C(代表12),D(代表13),E(代表14),F(代表15)

#cd690f
c=12, d=13, f=15
cd=12x16+13=205
69=6x16+9=105
0f=0x16+15=15

#cd690f = RGB(205,105,15)

從Hex code轉換成RGB色彩，可以手動計算得到答案，但是反過來，有了RGB色彩的數值，要換算成Hex code好像有點困難？看起來還是讓電腦去計算比較快。

在HTML文件中標記圖片

圖片（image）是網頁最常見的內容形式之一，製作網頁的人勢必要了解在HTML文件中置入圖片的方法。本文介紹<img>標記的基本用法。

*<img>標記是少數單一不成對的HTML標記，意思就是不必使用</img>這樣的結尾。（另一個常見的不成對的標記是<br>。）
*想要在網頁中呈現一張圖片，只要使用<img>標記，並且在單箭頭內寫明必要的屬性即可。
*必須注意的是，<img>本身沒有「換行」的作用。如果想要確切限定圖片的位置，在<img>標記的前後，要用<p>或<div>這類標記，再加上CSS的設定來調整。
*.html文件是純文本檔案，並不直接儲存或夾帶圖片，而是以文本記錄「圖片儲存的位置」，讓瀏覽器知道去哪裡抓取，然後在網頁上顯示。
*常見的網頁圖片格式有.jpg, .png, .gif三種。


src屬性：圖片在哪裡？

*src的意思是「來源」（source），在<img>標記中用來說明圖片的「位置」和「名稱」。
*在.html文件中標記圖片的基本方式：<img src="http://www.abcd.com/xxx.jpg">（圖片網址的寫法變化見注1。）


alt屬性：圖片的別稱

*alt的意思是alternative（替代）。當圖片在網頁中因故無法正常顯示時（例如圖片網址寫錯、圖片被移除），有些瀏覽器會在圖片原本的位置，顯示alt設定的文字。
寫法：<img src="rainbow.jpg" alt="Rainbow">
*在最新版的HTML規則（HTML5）中，alt被視為「必備」的屬性。


width和height屬性

*width和height屬性是用來注明圖片「在瀏覽器中顯示的寬度和高度」，單位是像素（pixel，簡寫為px）。
HTML標記法：<img src="http://www.abcd.com/images/drink.jpg" width="400" height="300">
CSS標記法：<img src="http://www.abcd.com/images/drink.jpg" style="width: 400px; height: 300px;">
*這裡的width和height是代表在網頁中顯示的尺寸，不是指圖片原始的尺寸。
*加上寬度和高度屬性的好處是，瀏覽器可以明確「知道」要用多大的規格來顯示圖片。
*width和height可以自己設定，但記得要兩個都寫明。如果指定了具體寬度，高度可以用height="auto"來表示，圖片的比例就會跟原始圖片相同。
*上傳的圖片原始檔案若太大，會拖慢瀏覽器加載的速度，顯示的效果也不好。此時如果只是指定比較小的width和height，加載速度還是一樣慢。若要加快加載速度，必須先把圖片檔案縮小再上傳到網站。


圖片置中或齊左？

在網頁中插入圖片後，必然會考慮理想的擺放位置。以下是最基礎的設定。
如果沒有特別設定，圖片會自動齊左：<div><img src="http://www.abcd.com/cool.jpg"></div>
如果想要讓圖片置中，可以用text-align的CSS樣式設定來達成：<div style="text-align: center;"><img src="http://www.abcd.com/cool.jpg"></div>



注1：圖片網址的表示方式

a. 如果圖片位於某個網站伺服器上，只要寫出圖片所在的網址即可調用。
   例如：<img src="http://www.abcd.com/images/rainbow.jpg">

b. 如果圖片位於本地（電腦），則需寫出正確的相對位置。
例如：<img src="rainbow.jpg">，圖片與本.html文件在同一個文件夾內。
例如：<img src="images/rainbow.jpg">，圖片位於本.html文件同層的images文件夾內。
例如：<img src="../rainbow.jpg">，圖片位於本.html文件上層的文件夾內。
例如：<img src="../images/rainbow.jpg">，圖片位於本.html文件上層的images文件夾內。
*兩個點 ".." 代表向上一層，到父文件夾。
*不同文件夾的層級，要用 / 符號來分隔。

c. 如果圖片位於同一個網站內部，則以上兩種圖片位址的表示法都可以使用。

在HTML文件設置超文本鏈接（hyper text link）

本文簡單介紹在HTML文件中設置超文本鏈接的方法，以及注意事項，也就是<a>標記的使用要點。

在網頁中出現超文本鏈接（以下簡稱超鏈接），意味著瀏覽者可以藉由滑鼠/游標的簡單點擊，開啟另一個網頁，或是快速跳到同一網頁的特定段落。這實現了網際網路「互聯」的概念，對文本來說也實現了「概念」的互聯！

<a>標記的設置是HTML語言的基礎，初學者都不可能錯過它。用多了之後漸漸熟悉，<a>標記除了可以鏈接網址，還可以用來開啟電子郵件程式、（手機）開啟電話撥號功能。


<a>標記的基本功能：建立超文本鏈接

*<a>標記最常用來鏈接不同的網頁，讓瀏覽者能從當前頁面透過「點擊」，開啟另一個網頁（目標頁）。
*用<a>標記不是只能指向另一個.html文件（網頁），也能指向一張圖片的存放網址、指向一個PDF檔案的存放網址。
*<a>標記可以用來指向一個電子郵件地址，而瀏覽者點擊之後，會開啟電子郵件程式，讓人可以寫郵件到該電子郵件地址。
*<a>標記可以用來指向一個電話號碼，而點擊之後，可以進行撥號（限手機）。


<a>標記的寫法

*建立超鏈接，使用的是<a></a>標記，基本寫法為：

<a href="https://www.abcd.com/newlink.html">GO TO NEW LINK</a>

其中，被<a></a>圍住的文本（GO TO NEW LINK），在網頁上會顯示為變色、有下划線，讓人看得出來它是個「超鏈接」，可以點擊。
單箭頭內的文字符號則不會顯示在網頁上，它是用來告訴瀏覽器，該去哪裡抓取目標頁。


href屬性說明

*href是<a>標記的「屬性」，用來指明目標網頁的存放位置和文件名稱。
*href是hyper text reference的縮減寫法，意思就是「超文本引用」。
*href的表示方式，有「絕對路徑」和「相對路徑」兩種（注1）。
絕對路徑：
需寫出完整的網址，例如：<a href="https://www.abcd.com/newlink.html">GO TO NEW LINK</a>
相對路徑：
如果目標網頁就存在同一個網站內部（本範例為www.abcd.com），那麼可以選擇使用相對路徑來表示目標網頁的存放位置，
例如：<a href="../images/newlink.html">GO TO NEW LINK</a>

*<a></a>標記若圍住一段文字，點擊這段文字就能開啟目標網頁。
*<a></a>也可以圍住圖片，點擊圖片可以開啓目標網頁。
*建立電子郵件超鏈接的寫法：<a href="mailto:myname@domain.com">E-mail me!</a>。設置好之後，別忘了測試一下。
*建立電話超鏈接：<a href="tel:+886-2-23456789">+886-2-23456789</a>。設置好之後，別忘了測試一下。


title屬性說明

*title是用來注明「目標網頁」的標題名稱。
 例如：<a href="newworld.html" title="A new world">Go to a new world</a>
*設置title屬性後，當滑鼠/游標移到超鏈接文字的上方時，會浮現title的內容。
*title文字的設置，可以作為盲人識讀的輔助（據說可以用語音讀出內容，但我個人沒有試過）。


target屬性說明

*target是用來設置「目標網頁」的開啟窗口，主要分為「在原有視窗開啟」，以及「新增視窗開啟」兩種。
在原有視窗開啟：
<a href="newpage.html" target="_self">go to new page</a>
target="_self"是在當前視窗開啓目標網頁，這代表會離開（關閉）當前網頁，以目標網頁取代。
新增視窗開啟：
<a href="newpage.html" target="_blank">go to new page</a>
target="_blank"是要新增一個瀏覽器視窗（或標籤頁）來開啓目標網頁。這代表當前網頁會保留著。
*如果不特別設定target屬性，通常點擊超鏈接後，瀏覽器會在原有的視窗開啓目標網頁，也就是會覆蓋原來的網頁頁面。某些SEO（搜索引擎優化）觀點認為，這樣會使網站的「跳出率」提高，不利於網站的優化，因此有些人建議，把超鏈接都設置為新增視窗開啟比較好。
*現在，不同的瀏覽器似乎會自訂網頁開啓規則，例如360瀏覽器會自動以新的標籤頁開啓目標網頁，而Chrome則會讓目標網頁覆蓋原有網頁。


id屬性說明（進階概念）

*注意，id不是<a>標記的屬性，而是HTML其他標記的屬性，但是id屬性的使用，與<a>息息相關。
*id可以說是一個用來「做記號」的屬性。我們先在目標網頁的某處HTML標記中使用id屬性，用id定義一個名稱（例如id="detail"）。另外在當前網頁的某個<a>標記處標註這個id名稱，就可以實現「點擊後跳轉到目標網頁中的特定位置」。
*使用方法（以id="detail"為例）：
1. 假設當前網頁是here.html，目標網頁是there.html。
2. 在目標網頁there.html的某個特定段落，是我們要跳轉到達的位置，在該處的某個標記中加入id="detail"，例如：<h2 id="detail">標題內容</h2>。
3. 在當前網頁here.html文件中，某個<a>標記的網址末尾，加上該id名稱：<a href="there.html#detail">See detail</a>。
4. 如此一來，點擊當前網頁中的超鏈接「See detail」，就會開啟目標網頁，顯示<h2>的所在位置。

*任何標記(如<h3>、<p>、<blockquote>)都可以加上id屬性，給予一個名稱，使其成為超鏈接點擊後的目標位置。
*一個網頁文件中可以設置多個id名稱，但同個網頁中的id名稱不能重複。
*實際運用上，可以利用id="top"，設置「回到頁面頂部」的鏈接。
*id名稱的開頭必須是字母，後面可接字母、數字或符號，但中間不能有空格。



注1：相對路徑和絕對路徑的區別
用途
相對路徑：用來指向網站內部的網頁或文件。
絕對路徑：用來指向外部網站的網頁或文件，但也可以用來指向網站內部的網頁或文件。
優點
相對路徑：只要網站的網頁文件、圖片存放位置不變，相對路徑可保持有效。若是把整個網站的文件夾搬移到新的網址（例如更換域名），相對路徑還是有效，超連結也還是有效，不必修改。
絕對路徑：方便設置。
缺點
相對路徑：必須寫出目標網頁相對於當前網頁的路徑和位置，對不熟悉的人來說容易出錯。
絕對路徑：萬一域名需要變動，所有內部網頁的絕對路徑都會失效，必須重新設置。

HTML5，簡化又進化的超文本標記語言

HTML5是HTML語言的最新版本，它有以下特色：

1. 新版增加了一些以前沒有的標記，例如<article>和<video>，可以用來更明確標記網頁內容，也提供更多樣的標記以滿足新的需求。

2. 舊版的HTML語言主要服務於靜態網頁，新版則提供更順暢的網頁應用（web application）接口，讓網頁可以容納更多具互動性的內容。

3. 新版保留了對舊版的兼容性，能繼續支援舊版的標記，因此即便使用舊版的HTML標記的網頁，仍能正常顯示。

4. 網頁的樣式（style）表現，如字型、字體大小、顏色、邊距、行高、水平對齊等，幾乎都改由CSS語言來設置。

5. HTML5將是一種living standards，也就是其規則不是完全固定了，會持續更新。

6. 遵守新的標記規範，能使.html文件更快被瀏覽器顯示。不同瀏覽器顯示的差異性也會減少。設置的CSS格式也會運作得更好。

7. HTML標準制定機構為World Wide Web Consortium (W3C)，該網站提供了檢測.html文件的功能，能檢測網頁是否符合HTML5規範：http://validator.w3.org


HTML5的必備標記

*在.html文件的最開頭，宣告版本為HTML5，寫法：<!doctype html>。此宣告可幫助各種瀏覽器（IE、Safari、Chrome…）正確顯示.html文件。

*緊接著doctype宣告之後，要以<html>作為最頂層的標記。

*<head>和<body>兩組標記要依先後放在<html>標記內。

*在<head>標記內，第一行要先用<meta>宣告文本字符編碼格式，寫法：<meta charset="UTF-8">。
UTF-8是能兼容多國語言的一種字符編碼。UTF-8也是網頁和電子郵件的首選編碼。也可以用小寫“utf-8”，意思一樣，效果一樣。

*在<head>標記內，必須有<title>（網頁標題）的標記。

*若嵌入圖片，<img>都必須標示alt屬性，才符合HTML5的要求，寫法：<img src="xxx.jpg" alt="TEXT HERE">


總結：標準的HTML5.html文件必備標記

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>網頁標題</title>
</head>
<body>
<img src="xxx.jpg" alt="TEXT HERE">
</body>
</html>

HTML：網頁的標記語言

當網際網路已經成為我們日常生活的一部分，每天打開電腦上網、手機上網，看到的網頁，其實最核心都是以HTML為基礎所構成。憑著這一點，HTML語言應該有資格成為現代人的基本常識。

HTML是Hyper Text Markup Language的首字母構成，意思是「超文本標記語言」。所謂的超文本，也就是超鏈接的意思。簡單的說，HTML語言的兩大特色就是Hyper Text和Markup。

網頁文件和一般電腦文件不同的地方在於，藉由超鏈接的設置，它可以讓使用者很方便地跳轉到同文件的另一個位置，或開啟另一個網頁。超鏈接的概念，實現了整個網際網路的互聯。

Markup這個特色則說明瞭HTML語言的功能，它提供了一套通用型高的標記系統，能夠將五花八門的網頁內容（文字、圖像、影片、表格等）進行井然有序的標記，然後透過瀏覽器顯示成網頁。儲存網頁內容的檔案，就是HTML文件，而許多人不知道，HTML文件其實是純文字格式。

以下是有關HTML基本概念的筆記。


互聯網：我們的日常世界

瀏覽器——網頁文件——服務器

*網頁文件儲存在服務器（主機）上，方便世界各地的瀏覽器透過網路存取。
*網頁需要有通用的格式標準，才能兼容各種瀏覽器，也才能正確顯示所有的網頁內容（各種語言、各種格式）。


HTML的基本概念

*HTML語言是所有網頁的基礎，用來標記網頁文件的架構。
*.html文檔是純文字檔案，卻能承載豐富的多媒體信息。
*HTML5新版的規則是，以HTML標記網頁架構（如標題、段落、鏈接），以CSS設置網頁樣式（如字體、顏色、大小）。
*超文本的概念：用超鏈接（hyperlink）與其他網頁（文件、圖片等）互相連接。
*在.html文件中，除了HTML語言，通常還會設置有其他語言的代碼，如CSS（層疊樣式表）, Javascript等。


學會HTML可以做什麼用？

*所有網頁的基礎都是HTML，HTML是網頁製作、網站架構的基礎知識。
*理解HTML，就能瞭解網頁是怎麼構成的。
*學會HTML，在網頁設計時思路能更清晰，可運用的工具也更多。
*學會HTML，可以知道如何：
a. 在.html文件中修改內容，如關鍵詞、超鏈接，或複製代碼到需要的地方。
b. 查看別人網頁源代碼里的信息，如關鍵詞。
c. 修改源代碼，消除網頁錯誤bug。
d. 在沒有軟件支持的情況下，直接用HTML語言修改源代碼。


編輯製作.html文檔的工具

*純文字編輯器：如Windows里的記事本
*所見即所得的軟件：Dreamweaver, Expression Web, Coda, TextMate, CoffeeCup, Aptana Studio


.html文件的基本標記原則

*以純文字格式存在，檔案格式為UTF-8
*檔案名稱為.html或.htm
*用成對的標籤圍繞要被標注的文本，例如<title>互聯網的世界</title>
*常用的標籤，例如：
標示網頁標題<h1></h1>；
標示段落<p></p>；
標示表格<table></table>；
標示段落區塊<div></div>；
標示句子或字段 <span></span>；
加粗<strong></strong>

*絕大多數的標記都是成對的，但有例外
*例外：<img>、<br>的標記單一不成對。
*標記必須是嵌套的，例如：<h2><p>I am a paragraph</p></h2>。
*錯誤的標記示例：<head><title>I am a title</head></title>。

文件中的備注<!-- 注釋文字放這裡 -->：若想將一段文字注明在.html文檔中，但不在網頁中顯示，就用這個備注格式。

*瀏覽器讀取.html文件時，會自動忽略文件中的換段和大部分的空格。撰寫.html文件時換段，是為了方便我們自己編寫和閱讀。（但文本存檔時若標記中斷，可能會造成網頁讀取錯誤）
*標記若錯誤，網頁就不會如預期的顯示。（網頁上不會提示錯誤在哪裡，需自己除錯）

申請域名domain name - 網路資源

本文的主題是申請域名（domain name）的流程，會談到域名服務商的比較。這幾年我個人買過十幾個域名，用過的域名服務商包括GoDaddy、Namecheap、阿里雲和Google Domains。以下就針對註冊域名的流程分享經驗。

對多數人來說，註冊域名可能是為了替企業或組織架設網站之用，或是設置電子郵箱。設電子郵箱或建站則是為了宣傳推廣。在這種情況下，起個「好域名」就顯得很重要，而建站計畫、郵箱的配置需求等，也會成為選擇域名服務商時考量的因素。

申請域名主要會面對兩個問題：1. 選擇域名；2. 選擇域名服務商。

選擇域名

申請域名又稱為「註冊域名」、「買域名」，不過更貼切的說應該是「租域名」。因為域名註冊了之後，只能取得有期限的所有權（以年為單位），換句話說我們必須及時續費，才能繼續持有該域名。這就像申請一個車牌，每年要交牌照稅等費用，一旦停止續費，就不再擁有使用它的權利。域名的命名原則，可以上網查找，這裡就不展開了。

選擇域名服務商

先說結論：其實，域名服務商的基本功能就只是把你擇定的域名提交到ICANN（互聯網名稱與數字地址分配機構），登記你的使用權而已，並沒有什麼技術含量（未來當你要綁定電子郵箱伺服器或網站主機，各家服務商提供的DNS解析和設定方式都差不多）。所以單就域名註冊這件事來說，域名商之間沒什麼差異（註冊年費的價差並不大）。域名商體現其價值的方式，就是提供各種附加的網路服務。

提供域名註冊的服務商許多都在經營相關的網路業務，例如出租郵件伺服器（mail server），讓你可以用自己定的域名設置E-mail，並有空間可以收發郵件；或是出租主機，讓你可以建站（即所謂的hosting）。為了拉攏新客戶，服務商會提供優惠，設法把你留住。琳琅滿目的服務，以及各種優惠方案，很容易激發人類的選擇困難症。

如果你的目的只是單純註冊域名（例如對建站還沒有想法，或是另外有人負責建站規劃），那麼你最主要的考量應該會是域名的註冊價格。

如果你買域名還要同時考慮建站，那麼或許可以參考服務商提供的「域名+主機」優惠方案。如果套餐的內容剛好是你想要的，而且比單點的總價便宜，那當然就考慮買套餐。

不過，如果一定要向同一家服務商買域名和租主機，建議以「主機服務的方案優劣」作為主要的考量。畢竟說白了，域名跟誰買差別不大，但是主機服務和費用就有的講究了。

繞了一圈，我覺得還不如把域名服務商單純化：只跟它買域名，說不定是最佳解。

買域名的幾個建議

1. 挑幾家域名服務商來比較

同樣一個域名，不同域名商的報價真的有出入，可謂不比不知道，一比嚇一跳。雖然前面說過，各域名商的價格差別不大，但如果考量域名要使用多年，或是未來會註冊多個域名，少少的價差積累幾年之後也是可觀的。若一開始審慎挑個價格划算的，那麼每年續費時至少心情會比較舒暢吧！

在各家域名服務商的網站上查詢你想註冊的域名，查找該域名是否已經被註冊。未被註冊的域名會同時顯示註冊第一年的價格。注意這裡有一個「陷阱」，就是某些域名服務商會把第一年的註冊費壓得比較低，作為拉攏你的促銷價。低價固然令人心動，但是你應該同時比較第二年起的正常費率。

2. 選擇域名服務商的check list

如前所述，我個人使用過的域名商有GoDaddy、NameCheap、阿里雲、Google Domains。以這幾家為例，我登入帳號後，查詢域名，呈現各家的價格。（不同的域名以及域名後綴，會有不盡相同的價格哦！）請注意每家服務商的報價方式不同，有的是「一口價」含稅，甚至含隱私保護服務（例如google domains和阿里雲），有的是税外加（Godaddy）、隱私保護服務費外加（Godaddy）。實際的總費用，必須以結帳前的金額為準。

****************************
何謂域名隱私（domain privacy）？
我們在註冊域名的時候，必須向服務商提交註冊者的信息（個人或企業組織），包括姓名、地址、電話、電子郵箱等。在過去，域名的註冊信息是公開的，也就是任何人透過Whois功能搜索域名，就能查找誰是註冊者，看得到註冊者的姓名、電子郵箱等。而所謂的隱私保護服務，是指隱藏域名註冊者的信息；那麼當第三人用Whois功能搜索域名，顯示的註冊者信息將會是域名服務商的信息。如果可以選擇的話，許多人都希望隱藏信息，保留隱私吧？！可是，如果為了保有這個domain privacy，每一年每個域名要支付10美元（相當於台幣300元），你願意嗎？

慶幸的是，近年來隱私保護的觀念興起，域名隱私變得不再是一個選項option，而是一種必要must have。2018年5月25日生效的歐盟《通用數據保護條例（GDPR）》，要求域名服務商不得公開註冊者的信息。不過，歐盟的法令只能規範牽涉歐盟地區的域名業務。為了因應，ICANN於2018年5月17日公布《通用頂級域名註冊數據臨時規範（Temporary Specification for gTLD Registration Data）》，要求註冊局和註冊商對Whois查詢服務的公開信息進行必要調整。

由於這是個臨時的規範，以阿里雲為例，它進行的必要調整是：「为落实ICANN临时规范要求，自2018年5月25日起阿里云WHOIS查询公开信息中将不再显示域名注册人、管理联系人和技术联系人的个人数据，包括姓名、邮箱、电话、街道地址等。」這意味著，註冊者的信息會自動被隱藏，我們不須另外付費購買隱私保護服務。（不過，阿里雲沒有把話說死。它的說法是暫停提供（付費的）隱私保護服務。）

參考資料：《WHOIS信息显示调整FAQ和ICANN临时规范的常见问题》
****************************

每家服務商的價格細目，以及所包含的服務有所出入。以下是我認為可以關注的幾個因素：

域名的費率是否划算？（考量首年年費及後續年費）
「隱私保護服務」是否須支付額外費用？（有些服務商提供免費設定）
如果需要郵件伺服器空間，該服務商提供的方案是否符合我的需求？
如果需要租用主機建站，該服務商的主機服務是否符合我需求？
我是否需要該服務商的網頁操作有中文介面？


NameCheap：
這家的一個好處是，購買域名時會贈送Whois Guard隱私保護服務（號稱永久免費）。對於在意個人資訊保護，但是又不想為此每年多付費的人來說，是個吸引點。

2019年12月，以chachaboy.com域名為例詢價@Namecheap：
首年註冊報價：8.88USD，結帳金額9.06USD
續費報價：10.98USD
隱私保護服務：提供，永遠免費
郵件伺服器服務：有
主機服務：有
中文介面：無

輸入域名查找

若域名尚未被註冊，會同時顯示註冊價格，
第一年的註冊費用通常有優惠

Namecheap提供永久免費的域名隱私保護服務

GoDaddy：
名氣很大的一家服務商，有中文介面。不過目前為止，它提供的隱私保護服務價格還不低，9.99美元一年。

2019年12月，以chachaboy.com域名為例詢價@GoDaddy：
首年註冊報價：8.99USD，結帳金額9.17USD
續費報價：17.99USD
隱私保護服務費用：提供，每年9.99美元
郵件伺服器服務：有
主機服務：有
中文介面：有（示範圖片使用英文介面）

輸入域名查找

第一年的註冊費用，以及後續的年費，都應該列入考量

GoDaddy的域名保護服務（Domain privacy）要另外付費

阿里雲：
根據中國政府規定，在其境內註冊的域名和網站，都需要進行實名備案（須提交身分證明或營業執照）。通常只有打算在中國境內開展業務的人，才會考慮向中國域名服務商註冊吧！不過，阿里雲的好處還是提一下：它目前的費率一年69元人民幣（稅內含），算是比較便宜的。另外，阿里雲提供了「一個域名」享有免費電子郵箱服務，價值相當於每年台幣2,500元，但我不確定是否每個會員帳號都有這個優惠。

2019年12月，以chachaboy.com域名為例詢價@阿里雲：
首年註冊報價：55RMB，結帳金額55RMB
續費報價：69RMB
隱私保護服務：默認保護，暫停提供付費的服務。換句話說就是暫時免費（「鉴于2018年5月25日WHOIS显示信息调整措施上线后，域名的注册信息已得到默认保护，届时阿里云的域名隐私保护服务将同步暂停服务。」）
郵件伺服器服務：有
主機服務：有
中文介面：有

在首頁點選「域名」標籤，然後輸入域名查找

主機服務是阿里雲的主要業務，它的套餐價有一定的吸引力

別忘了確認第二年以後的年費

阿里雲的報價已經含稅

Google Domains：
Google Domains有兩個好處，一是提供隱私保護服務不另外收費，二是免費提供e-mail轉址服務。一般來說，如果你註冊了一個域名，然後想要使用這個域名設置電子郵箱，例如mary@mydomain.com，你就必須花錢租用郵件伺服器空間。Google Domains有提供付費的郵件伺服器空間（G suite），但也有免費的替代方案，郵箱轉址服務(mail forwarding)：你可以設置虛擬的域名郵箱地址，然後設定讓郵件轉寄到你現有的電子郵箱地址。

2019年12月，以chachaboy.com域名為例詢價@Google Domains：
首年註冊報價：12美元
續費報價：12美元
隱私保護服務費用：提供，免費
郵件伺服器服務：有，G suite（此外另有免費郵箱轉址服務）
主機服務：無（但可以用域名綁定Blogger:免費的Google網誌）
中文介面：有

登入Google Domains後，在「取得新網域」的頁面輸入域名

報價是「每年US$12」，不知道是否永遠不會漲價 XD

在結帳頁面可以看到，12美元是含稅總價，而且已經包含隱私保護服務

本文提到的幾家域名商，是我個人實際使用過，分享一些心得。我覺得它們都基本可靠好用，也還在繼續使用，但不見得它們是全網最佳選擇。分享給需要的人參考～