之前也有說過吧，html就是網頁的基本架構。不過html，究竟有什麼基本規則，html的基本結構，又是長什麼樣子呢？這篇文章將會為您一一分析。雖說這篇文章是說html，但為了希望大家之後更能學以致用，我們主要會集中提及一些與製作或改寫wordpress主題關聯較大的知識點作介紹。
好，廢話少說，我們立即開始吧
我們可以把html的世界，想像成是自己家 ，我們要回到自己家，理所當然， 要經過自己家門吧，而在html的世界，越上代表越外，所以瀏覽器在讀取時，永遠是又上至下的
為了避免家中的財物被盜取，當你出門時，當然就要把門關上、鎖上。在html，每當你開了一段編碼時，你也必需要鎖上的。不過，鎖門是需要一條鑰匙與鑰匙孔匹配的鑰匙，才能鎖上的，那麼htm的鑰匙又是怎樣?
每一個在html裏的鑰匙孔，都是像這樣子的: <p>
那麼鑰匙當然也是很像， 他就只是在內裡加了個／: </p>
所以一個完整的編碼就是這樣啦<p>……………… </p>
當然內裡不一定是p，可以是其他，當內裡不同，裡面代表的內容也就不同
更多例子：
<h1> ……</h1>
<head>……<head>
假設你外出時，是需要先經過一道木門，接著經過一道閘門，才能出到街外。好了，你現在需要在離開前，把所有門鎖上，那麼你會怎樣做，當然是先鎖內面的再鎖外邊的，對吧？不然根本鎖不到呀
在html也是一樣，一定要先把內面的鎖好，再來才把外邊的鎖上：
正確的
<div>
<h1> </h1>
</div>
錯誤的
<div>
<h1> </div>
</h1>
上面這張圖是html的基本架構。看不懂？不用擔心，某程度上你可以把html的基本結構，想像成一個速遞包裹。一個速遞包裹，通常都會具有這些：
很有趣的是，html也是包括上述這四項:
<!DOCTYPE html>看起來好像很複雜，其實可以把它看成貨品名稱:html，簡單而言，他其實就是要來告訴瀏覽器: 「這裡是html來的喔 」
<html></html>可以把它看成是速遞包裹的包裝，要來把內裡的html編碼包裹著裡面的內容
不過，你可能又會問? 我通常看到都會像這個樣子的：<html lang=" en-us">，那麼後面那串lang=" en-us"，又代表著什麼？
不錯啊，找到這個例子的一個bug呢！
其實是這樣子的，在html的世界裡，<html></html>除了充當著包裝箱的功能，其實他還有個很重要的職責，也就是告訴搜尋系統，這個網站，究竟是用什麼語言寫的，幫助搜尋器，用正確的語言，去解讀你的網站，這對於提升網站在搜尋器的排名，也就是我們俗稱的seo，是有幫助的。
我們把lang=" en-us這串字翻譯成人看得懂的文字，就會變成這樣：語言:英文，地方：美國
是不是立即看懂呢？其實就只是這麼簡單
<head></head>可以把它看成是速遞包裹上的條碼，和條碼一樣<head></head>主要並不是給用家看，而是協助瀏覽器、搜尋系統分類的，不過我們還是可以在一些地方看到他們的蹤影，最常見就是網頁搜尋器了
不過，問題來了，我們都知道條碼一般會提供貨物資訊、郵遞地址、收件者等資料html的<head></head>，通常又提供什麼資料？
它的功能，可多呢！
可以在這裡加入網頁標題</title>。這樣搜尋器才能在用家搜尋網站時，根據你的網站標題,介紹給用家。這個我們通常都可以在搜尋器搜尋網站時看到，另外在分頁欄位也會看到的網頁名稱喔
搜尋器
分頁欄位
在html裏的寫法會是怎樣？通常是：<title>你的網頁名稱</title>
前後的<title>< /title>，就是這段碼的主要核心，他能夠告訴到搜尋系統，『這是網頁標題啊』
可以在這裡加入一個給搜尋引擎系統看的網站指引，告訴搜尋系統，希望你的網站，在搜尋結果裏，是怎樣出現。常見而又還是有用的，大概有這三個:
標題，在編碼裏又稱為meta title tags ，相比起前面提及的title，meta title tags 並不是必要的，通常搜尋系統都會使用title ， 而較少使用meta title
通常在html裏的寫法是這樣的：<meta name="title" content ="我是標題^^"> meta name="title"這部分是在告訴系統,這是標題來的。content ="我是標題^^" 部分就是要來放你要的標題
文字簡述，在編碼裏又稱為meta description，通常我們會在搜尋結果裡見到。雖然不會直接影響到搜尋排名，不過，因為一個好的meta discription ，它的存在，就好像書的內容簡介，能夠幫助您瞭解處的內容，是否合適你看，並能夠吸引到用家打開網站。
meta description tags在html裏的寫法和title分別不大，就只是把title改成 discription：<meta name="discription" content ="我是描述Zzzz">
好，到最後那點了。在編碼裏，稱為meta robots tags。，透過meta robots tags，就能夠讓那個版面，在搜尋結果裏，不會出現，也能夠讓你的網站頁面，不會連去。
通常是長這樣子的：<meta name=”robots” content=”noindex , follow“>
當中：nonindex，能令系統不把你網頁頁面放到搜尋結果裏，若改成index，則變成允許。
Follow，允許反向鏈結。您可以把反向鏈結理解成推薦信，當你的網站有越多其他網站引用，或者被一些知名度高的網站引用，這代表網站有很多人推薦，可信度高。若改成unfollow，則不允許你的網站推薦其他人和被任何人推薦。通常這個設定只有一些大型討論網、社交網絡平台才會這樣做，例如facebook，twitter，付費連結、留言區也可加入。
在現在這個隨時隨地都用手機的世界，網頁能夠隨著裝置的螢幕大小，而適當去調適，網頁版面，即我們說的響應版設計，已經變得不可或缺
不過要注意響應版設計（RWD）和手機版設計(AWD)，其實不盡相同，因為手機版設計通常是會另開一個網址，給手機用的，也因為這樣，每次需要更新時，都需要兩邊同時更新，極不方便。而響應式設計，則只需要一個網址就能夠做到。
具體編碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" >width=device-width：螢幕寬度設置為裝置寬度initial-scale=1 讓用家進入網頁時，讓縮放比例在100%
當然並不是只需要這個編碼就能夠做到響應式設計，還需要其他編碼的配合，不過這個還是重要的一步。如果沒有任可指示，哪怕你之後把所有事情設定好，瀏覽器還是會按照自己的想法，去調整你網站，在不同裝置的大小。這樣就會導致一個問題，也就是最終出來的結果，會和你原先設計的，有很大出入。
你們應該還記得吧，html只是網頁的基本架構，我們要為html，變得多樣化，就需要把css，javascript等檔案連接入去了。不過當然，除了css和javascript，還有不少檔案，外部連結，或者資源的伺服器(cdn)都可以連進去，常見的例如有google font ， 一個常用的字體網站，fontawesome，一個常用的icon網站等
<link rel="stylesheet" href="styles.css">
Link－告訴電腦這是連結rel："stylesheet " － 告訴電腦這是什麼類型的連結，""中間就是在說他屬於的類型，不過因為種類蠻多，這裡就不詳細列出了，只列出比較常見的吧：
Pingback ： 在網誌裡頗常見到，當你的網站被其他網站使用時，就會收到通知，這樣你的網站連結，被人家連結時，您可以先查看那個網站，對於您網站的搜尋結果排名，有沒有幫助，在決定是否允許他去連接
Stylesheet： 只要需要連接任何的css、javascript檔案，就會用到
Icon: 就是連接icon
Profile: 雖然我們一般不會用到，但當你查看wordpress自家製作的主題時，就會看到，而通常都是連接去XHTML Friends Network 。雖然這個系統的原意，是希望你的能夠標籤到和其他人的關係，特別是有高地位的人，透過這樣，提升你網站的地位，藉此去影響您seo的排名，不過暫時這個技術並不純熟，用途不大
Href－告訴瀏覽器需要去什麼連結找檔案，””裏就是那個連結，連結可以是需要找的檔案位置、外連結或者資源的伺服器(CDN)
雖說你打了一堆html，但電腦還是需要選擇合適的解碼方法，才能夠把你打的html，解讀出來，最後把網頁呈現給您。一般現在的html，都是用UTF-8解讀的。
編碼如下：<meta charset="UTF-8">
假如沒設定，亂碼就會出現了。
好，今天就到這裡了。很多謝大家這麼耐心地看完。至於body的部分，我將會在明天為你解釋。
iThome鐵人賽
看影片追技術