昨天我們大致上地說了<!DOCTYPE html>，<html></html>，<head></head>三者的功用，以及內裡常見的內容。今天，我們來討論最後一個項目，< body></body>。它的角色，就等同於速遞包裹裡的貨物，是整個包裹裏最重要的一部分，是html的主要內容，關於網頁基本結構的編碼，大多數都是在這裡。不過html的編碼數量蠻多，不可能盡錄於文章內，所以在這裡，我們將會輯錄一些在製作wordpress，編寫wordpress主題時，最常見到，使用率亦最高的編碼，讓你之後能夠更容易掌握。
在開始之前，我們要先理解一件事，就是網站，其實是又一個個長方格所組成的
我們利用google開發者工具來實證看看吧，這樣大家印象會更深刻點。打開google chorme，去隨便一個網站，然後按滑鼠右鍵，點選檢查，點選指標的圖案，這時候你的指標指向網頁的畫面，就會見到，每個項目都像一樣下圖一樣，是被一個長方格所包圍著的。
div和span，是兩個我們平時最常見到的編碼。剛才不是說整個網站都是又方格所組成嗎？而div就可以要來組成那些方格的，看看下面這個例子。
我們進入維基百科，然後打開之前的開發者工具，我們指向文章空白的地方，就會留意到整篇文章都是給div所包裹著
不過為什麼會這樣？假如你打開報章，你就會看到，他們每篇文章，都會在一個方格內分隔著彼此。
而div做工作的就是類似了，不過這裡有點特別的地方，是div必須要和css合作，才能夠生成，並隨意調整方格，做到像報章般的切版一樣
<div>……</div>
至於span呢？我們在用word檔打報告的時候，假若有文中有部分字眼，需要粗體的時候，我們會先用滑鼠把需要粗體的字highlight，然後再把它調整成粗體，對吧？
span就是在做著highlight的工作，它不會像div那樣，會佔著一整行的空間，它就只是標註著特定位置，然後默默地給予修飾。
<p>xxxx<span>……</span>xxxx</p>
p代表文章,我們下方會提及
只要有文句，這兩個就會出現。p 就是文章 ，最理想的情況，是每一段都用一個p 內包著，這樣就能夠用css做到更細微的調整。情況就好像word檔案裡面一樣，雖說您可以透過空格鍵，（html的編碼為）來分隔段與段之間，但這樣固定了需要間隔最少一行，若透過設定段落間距來，則能夠設定到小數點值，做到更細微的調整
<p>……………….</p>
至於h1至h6，則是標題，數字越大代表字體越大。看下圖：
<h1> 你好 </h1>
<h2> 你好 </h2>
<h3> 你好 </h3>
<h4> 你好 </h4>
<h5> 你好 </h5>
<h6> 你好 </h6>
它們兩個可要來加入列表，前者是點列，而後者則是數字列表。
點列
<ul>
<li>
</li>
</ul>
數字列表
<ol>
<li>
</li>
</ol>
不過<ul>, <li>還有個意想不到的功用，就是我們可以用它來製作選單。雖說樣子看起來很不像，但對於html來說，選單也是層層遞進，是有連結的列表來的，而, 正好能做到這工作。以往，html是有menu這編碼可用的，但隨著版本的更替，menu已不再可用，取而代之，官方建議使用,
這樣做也有另一個好處，就是能夠讓對於要使用閱讀器的視障人士，更為友善。因為當閱讀器讀到那裏時，可以告訴到用家，這裡是列表，不是一定需要看，讓用家自行判斷。是否需要讀下去。同時因為為列表格式，這樣閱讀器也能夠簡單地數出並說出有多少項，讓用家選擇，要看哪項，提升用戶體驗。
我們來看看wordpress官網，當你用google開發者工具點點看他們的選單，你就會看到，他們也是用ul li
至於如何讓列表向橫，以及讓那些點不顯示？這些就要依靠css
這三項，和div相近，同樣需要和css合作，才能發揮到作用，做到切版的工作。而他們和div的分別有兩點:
告訴用家或開發者，這部分是頁首。較常見的用法，是用他來包裹著網頁選單，logo等部份。
上圖為bbc新聞網頁，透過google開發者工具，您可以留意到，他的選單和logo，是由header包裹著。
不過除似之外，他還有另一個用法，您可以用它包裹著頁面的標題、作者名稱等。
上圖為wordpress官網，透過google開發者工具，您可以留意到，他中間的標題，是由header包裹著。
、
告訴用家或開發者，這部分是選單，不過這不一定要在頁首的選單才能用，只要該選單能夠讓用家瀏覽網站各個頁面，均可以使用
上圖為wikipedia官網在頁首部分的nav
上圖為apple官網在頁底部分的nav
告訴用家或開發者，這部分是頁尾。一般而言會包括版權、免責聲明等
上圖為wikipedia官網footer的部分
假如你需要連接圖片，就會需要用到這個編碼。
<img src="111.jpg" alt="" width="50" height="50">
img 比較特別，並不需要</img>來關閉的。
img src= 代表圖片的位置，可以是網頁連結，也可以是檔案位置
alt為圖片替代文字，可給予使用閱讀器的視障人士，經替代文字，了解圖片內容。同時，由於goolge搜尋器不能分析圖片內容，所以也是依靠著alt來了解圖片。
width和height並不一定需要，加入後可要來調整圖片大小，不過建議先調整照片後再放上去，因為若透過這裡調整，那麼將會先上載一張過大的照片，接著再調整照片大小，這將會延長了載入時間。
當需要建立超連結，就會用到。這個超連結除了連接去其他網站外，亦可連接到其他html檔案，同一頁面內的其他位置(這個會在class、id裏再說明)等。
<a href="https://example.com">Website</a>
a href=：這裡可放需要連結的地方。</a>前：想連結的文字，亦可透過 img src ，讓圖片成為超連結
<a href="https://example.com"><img src="xxx.jpg" alt="" ></a>
就好像每個人都有名字和身份證明文件，來識別你的身份一樣。在html也有，相同的機制，他們就是class和id。Class就好像名字，可以和其他人重複，所以編碼和編碼之間，用的class，是可以相同的。
Id則好像身份證明文件，它是獨一無二的，絕不會出現重複出現，所以在同一個html檔案裏，每個id絕對只能夠使用一次。
不過他們實際有何用途？雖說我們可以透過去指令div，h1等html編碼，來讓css修飾他們。不過問題是，假如你希望不同地方的html編碼，樣式上有著不同的時候，例如希望文章內每個h1都用不同顏色時，單純只是指令那些編碼，就會做不到這效果。這也就是class 和 id 會出現的原因啦。
在選擇時，主要可以考慮以下兩點
1 您希望你的修飾僅出現在這個位置，還是希望在其他地方也可以使用？
2 是否需要設定內連結? id可以用來設定，通常網頁是不是會有一個回到頂部的按鈕，或者在文章內，是不是有一個目錄，直接連接到想看的地方，這些通常都是設定一個連結，然後連接到所屬的id，以做到這效果
例子:
wikipedia裏的內連結，#代表著需要前往的id，所以這裡它要連的id為行政區域。
然後這裡可以看到在文章內的行政區域標題，id設定為行政區域。
所以當在上面目錄按行政區域時，就會直接鏈接到在寫行政區域的地方
假如需要用到按鈕，那麼就需要用到button
<button type="button" value="login"> login </button>
button type: 告訴瀏覽器該按鈕的功能，button代表他只是一個按鈕，暫時沒任何特別功能。除button外，亦可轉換為submit和reset。Submit代表遞交，而rest則代表重設表格內容。
value： 設定按完按鈕後，將會用分類這個遞交的資料，是什麼資料，這有助你之後查閱。
上圖是維基百科登入畫面，這裡可以看到他把value設定為登入，所以當你登入時，系統就會知道，你現在在登入，然後看看有沒有這個用戶，假如正確就會把你傳送到會員畫面。
<!-- -->能夠作為一個文字描述用，它正常是不會被電腦讀取的，主要是要來幫你去解釋那些編碼是做什麼而用。
例如這樣子：
<!--heading -->
大家之後，也不妨可以加入一些文字描述，這樣能夠防止你之後再回來的時候，忘了自己在幹啥，也能讓之後的開發者，花費更少時間去看你的程式碼（當然，還是要你寫得清晰），也可以作為你的筆記來使用。在之後會介紹的visual studio code，只需要按crtl／or command／就能夠生成了，這功能在css也是有呀，雖然樣子有點不同就是了，是這樣子的／**/。
當然html內裡還有非常多的內容，我們並沒有提及，不過在這兩天文章所提及的知識，已經基本足夠你之後再作wordpress主題了，假如希望詳細了解，可以到mdn web docs，個人認為這網站，比w3chool來得較容易理解。此外，亦可多查閱其他著名網站的程式碼，從中學習。
好了，今天我們就說到這裏了，明天將會帶你去認識一個結合了css、html、javascript的框架：bootstrap，讓不會css的你，也能快速掌握，並更為熟習html。
iThome鐵人賽
看影片追技術