HTML語法介紹

多媒體與超連結

• 圖片
  <img src="圖檔的位置" height="圖高" width="圖寬" alt="圖片的描述"/>
  其中img為標籤，src、alt為此標籤的屬性。src所指的是圖片的路徑，可放相對路徑(網頁本身所在位置為參考點之圖片檔案相對位置)、絕對路徑(圖檔在網路上的位置)。當找不到src所指之圖檔時，會顯示其alt之文字。且alt在搜尋引擎裡也是相當重要的依據。在img標籤裡面可以不設定圖高、圖寬，不過指明圖片尺寸對瀏覽器的處理效率是有幫助的，如果不設定圖高圖寬，則瀏覽器必須一直等到整個圖檔載入完畢，才能得知其佔用版面的空間，接著才能調整後面的版面，當我們遇到還未載入全部圖片時，版面、文字一直跳來跳去即是此緣故造成。
  範例：
  https://jsfiddle.net/smallone1/ecntfmjs/4/

寫網頁時，常常會遇到要放圖片的地方還沒有圖片可以放，或是要先做一個prototype demo，此時可以用以下兩個網站，來製造固定長、寬的圖片。
http://placehold.it/
http://lorempixel.com/

• 音訊
  <audio src="音訊檔路徑" controls></audio>
  其除了controls屬性(在網頁中顯示操控面板，讓訪客可自由播放/停止及調整大小聲)，還有autoplay(會自動播放)、loop(設定讓音訊循環播放)
• 影片

<video src="影片路徑" height="影片高" width="影片寬"></video>
<embeded src="媒體路徑" type="video/mp4" width="媒體寬" height="媒體高">

type列表：
video/avi
video/mpeg
video/mp4
video/ogg
video/quicktime
video/webm

• 超連結
  <a href="要連結的URL" target="_blank">網站的名稱或說明文字</a>
  a元素中可用下列屬性指定瀏覽器對超連結的處理方式：

1. target
   target="_blank" 時代表會新開視窗(分頁)
   target="_self" 時代表在目前視窗顯示(預設)
2. download
   只是瀏覽器下載所指的網頁或其他資源

範例：
https://jsfiddle.net/smallone1/ecntfmjs/4/

• 結合img元素

<a href="要連結的URL">
    <img src="圖檔的位置" height="圖高" width="圖寬" alt="圖片的描述"/>
    顯示文字
</a>

範例：
https://jsfiddle.net/smallone1/ecntfmjs/4/

• 文件中的超連結
  <a href="#id">id處說明文字</a>
  範例：
  https://jsfiddle.net/smallone1/ecntfmjs/4/

清單與表格

• 建立清單
  • 無序號清單
    ul(unordered list)

<ul>
    <li>項目1</li>
    <li>項目2</li>
</ul>

• 有序號清單

ol(ordered list)

<ol type="1">
    <li>項目1</li>
    <li>項目2</li>
</ol>

type屬性樣式：

改變有序號清單項目編號：
reversed：此屬性會讓項目的序號反過來
start：此屬性可指定ol清單的起始編號

範例：https://jsfiddle.net/smallone1/1cbfy0yd/

• 建立表格
  -普通表格

<table>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>
  </tr>
</table>

範例：https://jsfiddle.net/smallone1/0uearztt/1/

thead、tbody、tfoot不寫，也是可以正常運行，寫了只是可以一眼看出表頭、內容、表尾，亦也可以輕鬆使用CSS來做顏色的區別(如上面範例)。

• 跨欄位儲存格

  • colspan
    此屬性表示儲存格要橫向跨多個欄位。

  • rowspan
    此屬性表示儲存格要縱向跨多個欄位。

<table>
    <tr>
        <td>(1,1)</td>
        <td>(1,2)</td>
        <td>(1,3)</td>
    </tr>
    <tr>
        <td>(2,1)</td>
        <td colspan="2">(2,2)</td>
    </tr>
    <tr>
        <td rowspan="2">(3,1)</td>
        <td>(3,2)</td>
        <td>(3,3)</td>
    </tr>
    <tr>
        <td>(4,2)</td>
    </tr>
</table>