iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
0
Modern Web

網頁程式設計so easy系列 第 4

Day4 [HTML語法介紹-1]

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/


清單與表格

  • 建立清單
    • 無序號清單
      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屬性樣式:

屬性設定 效果
type="1"(預設值) 使用數字編號1,2,3...
type="A" 以大寫英文字母a,b,c...
type="I" 以大寫羅馬數字II,II,III...
type="i" 以小寫羅馬數字i,ii,iii...

改變有序號清單項目編號:
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>

http://ithelp.ithome.com.tw/upload/images/20161206/20103385XcvAavAlQ8.png

範例: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>

http://ithelp.ithome.com.tw/upload/images/20161206/201033856ygK7kk8Sv.png


上一篇
Day3 [開發網頁的測試環境與工具-2]
下一篇
Day1 [網頁程式設計簡介]
系列文
網頁程式設計so easy30

尚未有邦友留言

立即登入留言