學習筆記2：基本的HTML標籤

• 標題樣式標籤<h1>~<h6>

        標題樣式標籤從<h1>~<h6>共有六組，用來標示單行的標題文字。每一組標題樣式標籤所包含的文字會有獨立的一行。

        <h1>標題樣式H1</h1>
        <h2>標題樣式H2</h2>
        <h3>標題樣式H3</h3>
        <h4>標題樣式H4</h4>
        <h5>標題樣式H5</h5>
        <h6>標題樣式H6</h6>

• 段落標籤<p></p>

        <p></p>標籤用來標示一個段落，在這個段落裡的內容會隨著網頁寬度自動折行。而每一段落中間會有比較大的間隔。

        <p>巽方砲臺</p>
        <p>當初為尋找巽方砲臺吃足苦頭，找了好幾次都找不到，後來是為了拍「原臺南州立農事試驗場宿舍群」照片時，經過該地，無意間看到告示牌，才知道巽方砲臺是藏在修禪院裡面。一開始還不太敢確認，後來看到巽方砲臺正面的「巽方靖鎮」門匾才確定是這裡。</p>

• 斷行標籤<br/>

        <br/>標籤通常用於強制將某個位置的文句斷行。在文章(尤其是詩詞)的排版上十分好用。每一行的行距比段落的行距要小很多。

        <p>巽方砲臺</p>
        當初為尋找巽方砲臺吃足苦頭，找了好幾次都找不到，<br/>後來是為了拍「原臺南州立農事試驗場宿舍群」照片時，<br/>經過該地，無意間看到告示牌，才知道巽方砲臺是藏在修禪院裡面。<br/>一開始還不太敢確認，後來看到巽方砲臺正面的「巽方靖鎮」門匾才確定是這裡。<br/>

• 字體樣式標籤

        <b></b>標籤：粗體字
        <i></i>標籤：斜體字
        <u></u>標籤：加底線
        標籤：上標字
        標籤：下標字

        <b>原台南公會堂．吳園</b><br/>
        <i>二鯤鯓砲臺(億載金城)</i><br/>
        <u>原臺南運河海關</u>
        ^{臺南三山國王廟}
        _{原日軍步兵第二聯隊官舍群}

• 清單標籤<ul></ul>和<ol></ol>

        <ul></ul>和<ol></ol>清單標籤通常會與清單內容標籤<li></li>合併使用。
        <ul>標籤預設是以實心圓點符號表示，可以透過type屬性來更改符號。
            type屬性值：disc為實心圓點、circle為空心圓點、square為方塊。
        <ol>標籤 則會以數字呈現清單內容，同樣可以透過type屬性來更改符號。
            type屬性值：A為大寫英文字母、a為小寫英文字母、I為大寫羅馬數字、i為小寫羅馬數字、
                                    1為阿拉伯數字。

        <p>直轄市定古蹟_台南市</p>
        <ul type="circle">
            <li>原台南公會堂．吳園</li>
            <li>原臺南運河海關</li>
            <li>原日軍步兵第二聯隊官舍群</li>
        </ul>
        <p>國定古蹟</p>
        <ol type="A">
            <li>二鯤鯓砲臺(億載金城)</li>
            <li>臺南三山國王廟</li>
            <li>原台南測候所</li>
        </ol>

• 表格標籤<table></table>

        <table>標籤包含<tr></tr>、<td></td>及<th></th>三組標籤。
        <tr></tr>是標示表格的列
        <td></td>是標示表格的欄
        <th></th>是標示表格的標題列
        另外<table>有一個border的屬性，當border="1"時，表示表格外框線的寬度為1像素。

        <table border="1">
        <tr>
            <th>直轄市定古蹟_台南市</th>
            <th>國定古蹟</th>
        <tr>
            <td>原台南公會堂．吳園</td>
            <td>二鯤鯓砲臺(億載金城)</td>
        </tr>
        <tr>
            <td>原臺南運河海關</td>
            <td>臺南三山國王廟</td>
        </tr>
        <tr>
            <td>原日軍步兵第二聯隊官舍群</td>
            <td>原台南測候所</td>
        </tr>
        </table>

學習筆記01：HTML網頁的基本結構

　　這個學期學校資訊組胡政文老師組了一個PHP的讀書會，指導學校資訊老師程式設計的能力，我也很榮幸的加入這個讀書會，希望利用機會將之前沒學好的html &php重新學習起來。因此決定將相關學習的內容整理於此，做為一個初學者的學習紀錄。
------------------------------------------------------------
HTML是Hyper Text Makup Languge的縮寫。

HTML網頁文件是由HTML標籤所組成的，每一組HTML標籤包含開始標籤< >和結束標籤</ >。

基本的HTML網頁文件的結構如下：

<!DOCTYPE html> <html lang="zh-tw">   <head>     <meta charset="UTF-8">     <title>網頁的標題</title>     <meta name="description" content="網頁內容描述">     <meta name="keywords" content="關鍵字1,關鍵字2">                             <meta name="author" content="網頁作者">   </head>   <body>     網頁內容   </body> </html>

• <!DOCTYPE html>

宣告本文件是HTML5的網頁文件，一定要放在第一行，前面不可以有空行，也不可以省略。

• <html></html>

表示接下來的的內容是html文件，是網頁的根節點。
可在此標籤內設定lang屬性，用來表示網頁的語系。en表示英語語系；zh-tw表示繁體中文語系。

• <head></head>

表示HTML標頭的宣告，可在這組標籤內設定網頁標題及meta元素資訊。在<head>標籤內的內容並不會顯示在網頁中，但可供瀏覽器判讀及設計者閱讀之用。
meta元素中的charset屬性可以指定網頁所使用的文字編碼，UTF-8是指萬國碼。
meta元素中的name屬性表示網頁的特性項目，而content屬性表示項目的內容。

• <title></title>

是指定網頁的標題，會顯示在網頁瀏覽器上面。

• <body></body>

表示HTML文件的主體，所有網頁內容都會在此區塊中撰寫。