雖然平時發文章用撰寫就可以了，但Blogger撰寫的預設功能不是很多...
可能沒有你想要的功能，或是跟你預期所呈現的樣子有落差...
這時你就可以切換到HTML，把你想要的功能寫進去。 ;-)
但大部分的人可能不是很懂HTML...
所以本篇文章為此向大家簡單地介紹什麼是HTML。 :D
想自學網頁設計的人也可以看，因為是一樣的東西~ ;-)
何謂HTML？
HTML是HyperText Markup Language(超文件標記語言)的縮寫，是一種建立網頁標準的標記語言。目前HTML使用的版本是HTML5，雖然HTML6已經開發一陣子了，但不知何時才會全面變動？本篇文章以介紹HTML5的標記為主。
所有HTML的標記都有固定的格式，由「<」符號和「>」符號包在一起。HTML的標記有圍堵標記(Container Tags)和單一標記(Single Tag)兩種。
圍堵標記：用起始標記(Start Tag)和終止標記(End Tag)包在一起，例如：<html></html>。
單一標記：只有起始標記沒有終止標記，例如：<hr/>(分隔線)。
單一標記在HTML網頁裡不用加「/」在<>裡也會執行，但在XHTML就必須要加「/」才行！
XHTML是什麼，這裡不多介紹。你只要知道Blogger會自動幫你把單一標記加「/」在<>裡，但你還是自己養成習慣比較好。未來，如果HTML6把單一標記變成嚴謹的，強制要加「/」在<>裡，你也不會不適應。
<!--這是註解的標記-->
每種程式語言都有註解的功能，這是方便日後整理程式碼用，註解裡面的內容不會執行。
底下是一份簡單的網頁標記，Blogger的文章內容就是在<body>和</body>這中間。在Blogger編輯文章(HTML模式)不用打這些標記，會用到的標記在後面會介紹。這些標記只有你在主題那邊編輯HTML(改Blogger的版面設定)時，才會看到。
<!DOCTYPE html> <!--這行是宣告標記是用HTML5-->
<html>
<head>
<title>這裡是網頁標題</title>
</head>
<body>
這裡是網頁內容
</body>
</html>
DOCTYPE是document type的縮寫，不同版本的HTML，宣告方式也不一樣！
<html lang="zh-Hant-TW">
<meta charset="big5">
<meta name="keywords" content="HTML">
上面這3個標記，說明這份網頁的內容是用台灣繁體中文，編碼是用big5，關鍵字是HTML。加在<head>和</head>裡面。
HTML標記常用到「<」、「>」、「"」等符號，如果想在文章中顯示出來，在HTML編輯時，都是用相對應的表示法顯示出來。
| 特殊符號 | HTML表示法 |
©
|
©
|
<
|
<
|
>
|
>
|
"
|
"
|
&
|
&
|
半形空白
|
|
Blogger會用到的HTML的標記，底下會以文字、表格、圖片、聲音、影片和超連結做分類，一一為大家做介紹。 :D
文字
文字的標記有很多，底下依文字的處理效果和排版兩個類別向大家做介紹。 :D
文字的處理效果介紹：
<b>這是粗體字的標記</b>
<i>這是斜體字的標記</i>
<u>這是加底線的標記</u>
<s>這是刪除線的標記</s>
<sup>這是文字的上標標記</sup>
<sub>這是文字的下標標記</sub>
文字的顏色、字型和大小，因為和CSS語法有關，所以這裡打算簡單說明一下就好...
<span style="color:red;">這是紅色的字</span>
color的值可以打英文單字或是打#+6個16進位的數字，例如：color:#009100。(顏色查詢按這)
<span style="background-color:red;">文字背景顏色是紅色</span>
<span style="font-family:DFKai-SB;">這是標楷體</span>(字型查詢按這)
<span style="font-size:large;">這是大號的字</span>(font-size的查詢表按這)
文字的排版標記介紹：
<div style="text-align:left;">文字靠左對齊</div>
<div style="text-align:right;">文字靠右對齊</div>
<div style="text-align:center;">文字置中對齊</div>
<div style="text-align:justify;">左右對齊本文</div>
上面這4種文字對齊方式是大家比較常用的。
它們也和CSS語法有關，本來想跳過不講，不過還是打出來給你們看比較好。 ;-)
<br>換行功能。
<p>分段功能</p>(在段落結尾，用單一<p>也有分段功能。)
<pre>可以讓標記在這的文字，依原始碼的排列方式呈現出來</pre>
<blockquote>是用來表示引用文字，會將標記的文字自動縮排和換行</blockquote>
<hr>分隔線。(這個標記的屬性，HTML5後不再支援！)
<h1>設定段落標題的大小，數字越大，字越小</h1>(這個標記的屬性，HTML5後不再支援！)
除了上述的排版方式，有時候為了讓讀者更容易瞭解文章內容，也會使用條列式作法來整理文章內容。一般常見的條列式作法有符號清單和編號清單兩種方式，定義清單則比較少人在使用。
符號清單
符號清單又稱為「無序清單」(Unordered List)，必須同時使用<ul></ul>和<li></li>標記！
使用方式如下：
<ul>
<li>三上悠亞</li>
<li>波多野結衣</li>
<li>小島南</li>
</ul>
編號清單
編號清單又稱為「有序清單」(Ordered List)，必須同時使用<ol></ol>和<li></li>標記！
使用方式如下：
<ol>
<li>希志愛野</li>
<li>愛澤花梨</li>
<li>並木優</li>
</ol>
<ol reversed="reversed"> <!--reversed是反向排序屬性，IE不支援-->
<li>美雪艾莉絲</li>
<li>希崎潔西卡</li>
<li>桃谷繪里香</li>
</ol>
<ol type="1" start="4"></ol> <!--從4開始排序，start屬性只對type="1"有用-->
| type設定值 | 項目編號樣式 | 說明 |
1
|
1,2,3,... | 阿拉伯數字 |
A
|
A,B,C,... | 大寫英文字母 |
a
|
a,b,c,... | 小寫英文字母 |
I
|
I,II,III,... | 大寫羅馬數字 |
i
|
i,ii,iii,... | 小寫羅馬數字 |
定義清單
定義清單(Definition List)適用在有主題與內容的兩段式文字，通常第1段用<dt>定義主題，第2段用<dd>來定義內容(第2段會自動縮排)。
使用方式如下：
<dl>
<dt>
彩美旬果
<dd>
生日：西元1993年8月15日；血型：O型；身高：154公分；體重：42公斤；
三圍：85、58、83。
</dl>
<dl>
<dt>
吉澤明步
<dd>
生日：西元1984年3月3日；血型：A型；身高：161公分；體重：無資料；
三圍：86、58、86。
</dl>
<dl>
<dt>
松島楓
<dd>
生日：西元1982年11月7日；血型：O型；身高：162公分；體重：無資料；
三圍：85、58、84。
</dl>
表格
在網頁插入表格，有3個重要的步驟：
設定表格(<table border="1"></table>) → 設定橫列數(<tr></tr>) → 設定直欄數(<td></td>)
<table border="1"></table> <!--border="0"是沒有邊框的表格-->(border的進階使用)
<caption>設定表格標題</caption>
<tr></tr>
<td></td>
<td colspan="2">合併右邊儲存格</td>
<td rowspan="3">合併下面2格儲存格</td>
<th>設定欄的標題</th>(和<td></td>的功能一樣，差別在字會變粗體！)
下面是表格的範例：
<table border="1">
<caption>設定表格標題</caption> <!--表格標題看你要不要打-->
<tr>
<td>第1列第1欄</td>
<td>第1列第2欄</td>
<td rowspan="3">合併下面2格儲存格</td>
</tr>
<tr>
<td>第2列第1欄</td>
<td>第2列第2欄</td>
</tr>
<tr>
<td colspan="2">合併右邊儲存格</td>
</tr>
</table>
圖片
插入圖片的標記是<img>，<img>是單一標記，其路徑表示法如下：
<img src="來源/圖片檔名.jpg"/>(依圖片的檔案類型，jpg那邊可以打gif或png等等)
| 屬性 |
說明
|
| src | 指定圖片的路徑及檔名。 |
| alt | 當圖片不能看時，所顯示的文字。 |
| title | 當滑鼠移到圖片上時，所顯示的文字。 |
| height | 圖片的高度，以像素(pixels)為單位。 |
| width | 圖片的寬度，以像素(pixels)為單位。 |
<img src="images/photo.jpg" alt="圖片不見了" title="這是圖片" height="100" width="120"/>
圖片不存在的範例：
補充：
在Blogger插入圖片很簡單，但如果是自己架設網站，路徑的指定就要考慮圖片的來源位置。
依網頁所在的位置，當圖片位在上層、同層和下層資料夾的用法：
上層：<img src="../上層資料夾檔名/圖片檔名.jpg"/>(上上層就../../上上層資料夾/圖片)
同層：<img src="圖片檔名.jpg"/>(同層就直接用)
下層：<img src="下層資料夾檔名/圖片檔名.jpg"/>(下下層就下層資料夾/下下層資料夾/圖片)
聲音和影片的資料夾引用方式和圖片是一樣的，只要記得把<img>換成聲音標記<audio>和影片標記<video>就好了。(下面聲音和影片的介紹就不再講解這一部分了。)
聲音 and 影片
聲音和影片的標記，你們可能用不太到，不過還是介紹一下...
因為現在免費的網路空間，很少有支援外連的功能...
所以聲音和影片的標記，只剩自己架設網站的時候才有機會用到。
如果網友有找到好用的網路空間，歡迎底下留言告訴我~ ^^
聲音
<audio src="來源/音樂檔名.mp3" type="audio/mpeg" controls="controls"></audio>
影片
<video src="來源/影片檔名.mp4" controls="controls"></video>
屬性
|
說明
|
| src | 檔案來源。 |
| autoplay | 自動播放。 |
| controls | 播放面板。 |
| loop | 循環播放。 |
| preload | 預先載入。
|
| width | 指定播放面板的寬度。(單位：pixels) |
| height | 指定播放面板的高度。(單位：pixels) |
| type="audio/mpeg" type="video/mp4" |
指定播放類型，可以讓瀏覽器不用再去偵測檔案類型。 聲音用type="audio/mpeg"、影片用type="video/mp4"。 |
每一種瀏覽器支援的檔案類型並不相同，<source>標記可以同時指定多種檔案類型，直到瀏覽器找到可以播放的檔案。
範例：當瀏覽器兩種影片類型都不能播放時，就會跳出“你的瀏覽器不支援此影片類型。”
<video controls="controls" preload="auto">
<source src="movie.ogg" type="video/ogg"/>
<source src="movie.mp4" type="video/mp4"/>
你的瀏覽器不支援此影片類型。
</video>
如果你想讓你的Blogger可以播放聲音 and 影片，可以使用Google的雲端硬碟 and YouTube的嵌入功能。嵌入功能會編輯好所需要的程式碼，只要將<iframe></iframe>那段程式碼貼到你的Blogger裡面就可以了。
Google雲端硬碟的嵌入碼長這樣：
<iframe height="100" src="https://drive.google.com/file/d/英數亂碼/preview" width="500"></iframe>
YouTube的嵌入碼長這樣：
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/英數亂碼" width="560"></iframe>
除了聲音和影片，還有一種多媒體可能有些人會用到，就是Flash。使用<embed>標記。
Flash
<embed src="movie.swf" width="100" height="100"/>
※提醒大家，任何你在網路上使用的圖片、影音等等檔案，請確認你有權使用，以免觸犯法律！
超連結
超連結(hyperlink)是指在文件上的文字和圖片加上連結，當點取該文字和圖片時，會被引導到另一個位置(網頁、檔案等等)去。
<a href="">這是超連結的標記</a>
<a href="https://smallminer.blogspot.com" target="_blank">小閔小礦工</a>
超連結的範例：小閔小礦工
href屬性
主要是設定連結的網址或檔案路徑
站外網頁連結：<a href="網址"></a>
站內網頁連結：<a href="連結目標相對路徑"></a>
連結E-mail信箱：<a href="mailto:E-mail帳號"></a>
target屬性
設定超連結的開啟方式
target="_blank"：連結的目標會在新的視窗中開啟。
target="_self"：連結的目標會在目前執行的視窗中開啟，這是預設值。
target="_parent"：連結的目標會在目前的視窗中開啟。在有框架的網頁，會在上一層網頁開啟。
target="_top"：連結的目標會在瀏覽器的視窗中開啟。網頁如果有框架，所有的頁框將被移除。
target="視窗名稱"：連結的目標會在指定名稱的視窗或框架中開啟。
target="_blank"和target="_self"這兩種用法大家比較常用。剩下3種，在Blogger很少看到有人用。我簡單教一下target="視窗名稱"給大家看~ :D
target="視窗名稱"的範例：這兩個影片超連結，會在叫“love”的iframe框架中開啟。
<a href="https://www.youtube.com/embed/5M69TE1yzt4" target="love">T-ara</a>
<a href="https://www.youtube.com/embed/HQzu7NYlZNQ" target="love">少女時代</a>
<iframe name="love" width="560" height="315" src="https://www.youtube.com/embed/5M69TE1yzt4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen seamless></iframe>
執行範例效果：
T-ara and 少女時代 (請試著點T-ara 和 少女時代的超連結並且觀察變化？)
rel="nofollow"屬性
跟搜尋引擎說：我不背書這個網址的安全性，有事別找我！ ;-)
<a href="http://www.dudu-sex.com" rel="nofollow" target="_blank">嘟嘟成人網</a>
rel="nofollow"的範例：嘟嘟成人網
<!--HTML標記就介紹到這-->
HTML的標記其實還有很多，這篇文章只有介紹一些。未來有機會再向大家一一介紹，不然這篇文章打不完... 呵呵呵
另外，Blogger想要吸引人觀看，除了內容豐富外，還要有精美的外觀才能吸引到人。像前面提到的CSS語法，主要就是在美化網頁的外觀。
如果想要讓你的Blogger看起來比較生動一點，可以使用JavaScript。它會根據不同事件的發生，產生相對應的動作。
請試著點下面這隻小蟲~ ;-)
我在這隻小蟲裡面，寫入對應滑鼠事件的JavaScript。 :D
沒有留言:
張貼留言