2019年8月14日 星期三

網頁技術速學筆記 (一) : HTML 基礎

此份速學筆記是二哥上大學前暑期先修課程網頁設計的第一部份 : HTML 基礎. HTML 網頁可以放在本機電腦用瀏覽器載入檢視效果, 但最好能上傳到雲端伺服器中, 這樣在全世界任何有 Internet 的地方都能瀏覽.

架設網站伺服器非常簡單, 不須申請線路與頻寬, 也不用安裝伺服器軟體, 網路上有許多提供免費網站 (含網址) 的虛擬主機業者, 只要透過網頁就可以線上架設與管理網站, 參考 :

# 申請免費 PHP 虛擬主機 000a.biz 與 000webhost.com

為何要學 HTML? 因為瀏覽器是最方便好用的 GUI 人機介面, 不論手機或電腦都已內建, 不須安裝馬上可用, 是呈現專案成果的最佳介面, 而 HTML 就是瀏覽器背後最主要的技術.

網頁技術分為前端與後端, 前端即控制瀏覽器呈現內容的技術, 後端則是處理前端請求與資料庫存取, 最後目的是輸出結果給前端網頁瀏覽器來呈現. 網頁前端技術建立在三個基礎上 :


 網頁技術 用途 說明
 HTML 定義網頁內容 呈現文字, 圖片, 影音內容
 CSS 定義網頁外觀 網頁版面佈置與排版, 網頁元素外觀設定
 Javascript 定義網頁行為 動態控制網頁元素行為


使用原始的 CSS 來排版與撰寫原始的 Javascript 來設計動態網頁比較低階與瑣碎, 快速建置專案雛形大都使用較高階之 Javascript 框架 (framework, 即架構完整之函式庫), 例如 jQuery, jQuery Mobile 與 Bootstrap :


 Javascript 框架 說明
 jQuery 可方便操控網頁中的元素
 jQuery Mobile 用於行動裝置的 jQuery
 Bootstrap 可快速排版與設計響應式網頁 (responsive web page)


後端技術即運作於伺服器上的網頁應用程式, 主要有 PHP, JSP, Ruby, Python 等等. 由於 Python 應用範圍為全方位, 可用來設計桌面應用程式, 嵌入式控制, 以及網頁應用程式, 因此學習 Python 的投資報酬率較高, 不必再學習其他程式語言. 但目前許多免費或便宜的後端虛擬主機大都是跑 PHP, 其語法與 Javascript 類似

Python 後端網頁技術有發展極為成熟之框架可套用, 使用框架可加速開發速度, 目前最受歡迎的有兩個, 建議先學習 Flask, 行有餘力再學 Django :


 Python 網頁框架 說明
 Flask 易學之輕量級框架, 可搭配技術之選擇性與彈性高
 Django 一站解決之全功能框架, 可快速佈署中大型專案


網頁技術學習地圖建議如下 :




基本上只要學過基本的 HTML + Bootstrap 就可以架設靜態網站, 學過基本的 PHP 或 Python + Flask 就可以架設動態網站.


一. HTML 結構 :

HTML 最新的標準為 HTML5, 其結構由文件類型, 網頁標頭, 以及網頁本體構成 :




只要將下列 HTML5 範本複製貼到記事本或 Notepad+ 等文字編輯器即可進行 HTML5 網頁設計, 將編輯好的檔案以 utf-8 編碼存成 .htm 或 .html 檔後用瀏覽器開啟即可看到網頁內容 :


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <style></style>
    <script></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>


考量要在 PC 與行動裝置上都能適切地顯示網頁內容, 必須在標頭中添加一個名稱為 viewport 的 meta 標籤 :


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">   
    <style></style>
    <script></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>


如果要模仿 App 那樣不能縮放視窗, 只能上下滑動的效果, 可在 viewport 的 content 中添加 user-scalable=no (預設為 yes).

HTML 語法說明如下 :
  1. 網頁檔案的副檔名是 .htm 或 .html 兩種. 
  2. 網頁結構可分成文件類型 (DOCTYPE), 網頁標頭 (head), 以及網頁本體 (body) 三大部分, 均由可巢狀嵌套的網頁元素組成. 標頭用來描述整份網頁相關的資訊, 例如標題 (title), 以及中介資料 (meta) 內的關鍵字 (keywords) 與編碼 (charset) 等, 這些資訊除標題外都不會顯示於網頁中, 而本體 (body) 內的元素都會顯示在瀏覽器上. 本體中不想顯示的內容可用下列語法註解掉 :
    <!--   這是註解   --> 
    瀏覽器遇到註解內容會跳過, 不會呈現在網頁中.
  3. 網頁元素 (element) 是由標籤 (tag) 與其屬性 (attributes) 構成 :
    角括號 < 與 > 包圍起來的稱為標籤, 標籤中有屬性 (attributes) 可設定內容的呈現方式, 例如 <h1 color='red'>Hello World</h1> 會以紅色的一號標題顯示 Hello World. 其中前者 <h1> 為起始標籤, 後者有斜線的 </h1> 為結束標籤, 而整個 <h1>Hello World</h1> 稱為一個網頁元素.
    大部分元素都有起始與結束標籤 (稱為容器標籤 container tag), 但有些元素沒有結束標籤 (稱為單一標籤 single tag), 稱為空元素, 例如 :
    <meta> <hr> <br> <img> <input> <area> <link> <col>
  4. 網頁標籤不分大小寫, <br> 與 <BR> 是一樣的. 
  5. 標籤通常有一個以上屬性, 各屬性都放在起始標籤內以空格隔開 :
    <起始標籤 屬性1="值1" 屬性2="值2">
  6. <script></script> 元素用來嵌入控制網頁元素互動的 Javascript 程式碼, script 可放在 head 內, 也可以放在 body 內, 其差別是在網頁被完全載入之前 (放在 head 內) 或之後 (放在 body 內) 作用. Javascript 程式也可以放在外部 .js 檔中, 用 src 屬性指定檔案位置 :
    <script src="js/abc.js"></script> 
  7. <style></style> 元素用來嵌入樣式定義, 連結外部 .css 樣式檔要用 link 標籤並以 href 屬性指定檔案位置 :
    <link href="css/style.css">
關於 HTML 元素可參考 :

# https://www.htmlquick.com/reference/tags.html

HTML 元素的排版效果有兩種層級 :
  1. 行內 (inline level) 層級 : 結束後不會換行
  2. 段落 (paragraph level) 層級 : 結束後會換行加一個空行  
行內層級的元素在結束時須要借助 <br> 元素來換行, 否則會與下一個元素連在一起; 而段落層級的元素則本身就有換行效果, 而且換行後與下一個元素之間有一個空行.

每一個標籤都有其特定可用之屬性, 但全域屬性 (global attributes) 則是每一個標籤都可以用的屬性, 常用的全域屬性如下 :


 全域屬性 說明
 id 元素在網頁中的唯一識別名稱
 class 套用的樣式類別名稱
 style 只套用於此元素的樣式內容
 title 元素的提示資訊 (滑鼠滑過時顯示)
 dir  容器元素中的文字走向 (預設左至右 ltr, 可設 rtl/auto)
 lang 元素優先套用之語系 (繁體中文為 zh-tw)
 accesskey 設定元素之鍵盤快速鍵 (ALT 組合鍵)
 tabindex 駐點索引


另外, 有些稱為 Boolean 屬性者用來啟用或關閉特定功能, 常用如下表 :


 常用 Boolean 屬性 說明
 disabled 元素被禁止 (有顯示但灰色無功能)
 hidden 元素被隱藏 (無顯示無功能)
 checked 已被核取 (input-checkbox)
 selected 已被選取 (option/input-radio)
 multiple 允許多選 (select)
 readonly 唯讀, 無法輸入資料 (input-text/textarea)
 autocomplete 自動完成 (input-text)
 scrolling 啟用卷軸 (textarea)
 nowrap 禁止換行
 noresize 禁止縮放
 border 有邊框
 autofocus 自動取得頁面焦點
 autoplay 自動播放
 sortable 可排序
 reversed 反序排列
 required 必填欄位


但 HTML5 揚棄了 "true" 或 "false" 的設定方式, 而是使用如下三種方式 :

1. disabled  (建議)
2  disabled=""
3. disabled="disabled"

例如要讓一個按鈕無法使用, 最簡單的用法是 :

<button disabled>OK</button>


二. 網頁中的特殊符號 : 

在網頁中顯示下列特殊字元不能直接由鍵盤輸入, 須用如下稱為 HTML Character Entities 的特定字串取代 (不分大小寫, 但通常用小寫) :


 特殊符號 說明 HTML 代號
 < 小於 &lt;
 > 大於 &gt;
 & 且 &amp;
 " 雙引號 &quot;
 ' 單引號 &apos;
 半形空白 &nbsp;
 ¢ 美元一分 &cent;
 £ 英鎊符號 &pound;
 ¥ 日元符號 &yen;
 € 歐元符號 &euro;
 © 版權符號 &copy;
 ® 註冊商標 &reg;


瀏覽器會忽略網頁內容中多於一個的空白, 如果要顯示多個空白必須使用多個連續串接的 "&nbsp;".


範例 1 : 特殊符號測試

<!DOCTYPE html>
<html>
<head>
  <title>特殊符號</title>
  <meta charset="utf-8">
</head>
<body>
  <小於<br>
  >大於<br>
  &且<br>
  "雙引號<br>
  '單引號<br>
      半形空白<br>
  ¢美元一分<br>
  £英鎊符號<br>
  €歐元符號<br>
  ©版權符號<br>
  ®註冊商標<br>
</body>
</html>



三. 文字效果 :   

HTML5 廢棄了部分 HTML4 時代的文字效果標籤 (例如 font, center, strike, big, basefont 等), 全面改用 CSS 來設定網頁樣式, 但還是保留了部分好用的文字效果標籤, 同時也新增了一些新的標籤, 以下是較常用者 :


 文字效果標籤 說明
 <b></b> 粗體字, 同 HTML5 的 <strong></strong>
 <i></i> 斜體字, 同 HTML5 的 <em></em>
 <small></small> 較小字, 用於註解
 <strong></strong> 以粗體強調
 <u></u> 為文字加上底線
 <s></s> 刪除字
 <q></q> 引用語 (會自動加引號)
 <sup></sup> 上標字
 <sub></sub> 下標字
 <mark></mark> 螢光筆
 <kbd></kbd> 標示鍵盤按鍵如 Ctrl+D
 <ruby>字<rt>注音</rt></ruby> 在字的上方添加注音


注意, 這些文字效果元素都是 inline 層級的元素, 亦即套用這些效果後不會換行.


範例 2 : 文字效果測試 

<!DOCTYPE html>
<html>
<head>
  <title>文字效果</title>
  <meta charset="utf-8">
</head>
<body>
  <b>Hello World</b> (b)<br>
  <i>Hello World</i> (i)<br>
  <u>Hello World</u> (u)<br>
  Hello World (無)<br>
  <small>Hello World</small> (small)<br>
  <strong>Hello World</strong> (strong)<br>
  <s>Hello World</s> (s)<br>
  <q>Hello World</q> (q)<br>
  x<sub>1</sub><sup>2</sup>+x<sub>2</sub><sup>4</sup> (sub, sup)<br>
  <mark>Hello World</mark> (mark)<br>
  <kbd>Ctrl+D</kbd> (kbd)<br>
  <ruby>哈<rt>ㄏㄚ</rt>囉<rt>ㄌㄨㄛ</rt></ruby> (ruby, rt)<br>
</body>
</html>



四. 段落效果 :

具有段落排版效果的 HTML 元素如下表, 它們都是段落層級 (paragraph level) 元素, 呈現完會換行 :


 段落標籤 說明
 <h1></h1> 1 號 (最大) 段落標題
 <h2></h2> 2 號 (次大) 段落標題
 <h3></h3> 3 號段落標題
 <h4></h4> 4 號段落標題
 <h5></h5> 5 號段落標題
 <h6></h6> 6 號 (最小) 段落標題
 <p></p> 顯示一個段落, 顯示完跳下行
 <br> 強制跳行
 <hr> 水平線
 <pre></pre> 預先格式化資料 (保留空白, 但 HTML 碼仍會繪製)
 <blockquote></blockquote> 引用文字段落 (此段落會左右皆縮排)


hr 標籤除了以水平線分隔效果外, 在 HTML5 還表示一個語意上的斷點. pre 標籤用來顯示內容之原始格式, 所以其中的空格都會如實呈現, 不像其他標籤內容只保留一個空格, 但裡面的 HTML 碼還是照常繪製, 而非呈現 HTML 碼. br 標籤通常用來為行內層級標籤 (不會自動換行者, 例如上面的文字效果標籤) 強制換行以利排版.


範例 3 : 段落效果測試

<!DOCTYPE html>
<html>
<head>
  <title>段落效果</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello World <h1></h1>
  <h2>Hello World <h2></h2>
  <h3>Hello World <h3></h3>
  <h4>Hello World <h4></h4>
  <h5>Hello World <h5></h5>
  <h6>Hello World <h6></h6>
  <hr>
  Hello World<br>
  <div>Hello World</div>
  <blockquote>
人生得意須盡歡，莫使金樽空對月。<br>
天生我材必有用，千金散盡還復來。
  </blockquote>
  <pre>
if (scorea >= 60) {
  alert("pass");
  }
  </pre>
</body>
</html>




注意, pre 保存格式的範圍是從 <pre> 結束起算直到 </pre> 開頭之間的內容.


五. 群組元素 span 與 div :

群組標籤 span 與 div 本身並沒有意義, 在網頁外觀上也不會有任何改變, 僅用來將一群元素嵌套在裡面形成一個群組, 以便利用 id 或 class 屬性來套用特定樣式或用程式進行互動操作, 或者用 lang 屬性來指定此範圍內內容之語系. 很多框架例如 Bootstrap 就大量使用 div 來套用網頁樣式.


 群組範圍元素 說明
 <span></span> 將嵌套在內的元素組成一個 inline 範圍
 <div></div> 將嵌套在內的元素組成一個 paragraph 範圍


這兩個元素的差別是 span 為 inline 元素不會換行, 而 div 是 paragraph 層級元素會換行, 且與下一個元素間有一空行.


範例 4 : 群組元素 span 與 div 測試

<!DOCTYPE html>
<html>
<head>
  <title>段落效果</title>
  <meta charset="utf-8">
</head>
<body>
  Hello World
  <span>Hello (span) </span>
  <span>World (span) </span>
  <div>Hello World (div) </div>
  <div style="color:blue">Hello World (div)</div>
</body>
</html>




可見除非用 style 屬性套上樣式, 否則 span 與 div 對網頁外觀無影響.


六. 內嵌頁框 iframe :

內嵌頁框 iframe 用來在瀏覽器視窗中的建立一個可以嵌入其他網頁的特定區域, 其屬性如下表 :


 iframe 元素 說明
 src 指定要內嵌至頁框中的網頁 URL
 name 頁框名稱, 用來給超連結 a 標籤的 target 屬性參照
 width 頁框寬度 (px)
 height 頁框高度 (px)
 frameborder 頁框框線寬度 (px)


注意, 屬性 src 嵌入網站本身的網頁並無問題, 但若是網路上其他網站的頁面則不一定能載入, 例如將 src 設為 Google 或 Yahoo 等網站首頁都會被拒絕.


範例 5 : 內嵌網頁測試

<!DOCTYPE html>
<html>
<head>
  <title>內嵌頁框測試</title>
  <meta charset="utf-8">
</head>
<body>
  <iframe src="html_test_hello_world.htm" width=300 height=150 frameborder=1>不支援 iframe</iframe>
  </figure>
</body>
</html>




iframe 可以用來在網頁中嵌入 Youtube 影片, 先將網址 watch?v= 後面的影片 id 記下來, 例如下面這個 id=lM108D-og5o 的影片 :




然後將影片 id 放到 iframe 的 src 屬性中, 網址格式如下 :

https://www.youtube.com/embed/lM108D-og5o 

注意, 不可以直接將影片網址 https://www.youtube.com/watch?v=lM108D-og5o 設為 src, 那樣會被 Youtube 拒絕顯示.


範例 6 : 內嵌 Youtube 影片測試

<!DOCTYPE html>
<html>
<head>
  <title>內嵌頁框測試</title>
  <meta charset="utf-8">
</head>
<body>
  <figure>
    <iframe src="https://www.youtube.com/embed/lM108D-og5o" width=400 height=300 frameborder="0" allowfullscreen>不支援 iframe</iframe>
    <figcaption>nRF24L01 無線模組測試</figcaption>
  </figure>
</body>
</html>
七. 超連結 :

超連結 (Hyperlink) 是 HTML 之所以被稱為超文件 (Hypertext) 的最關鍵特性, 亦即在文件之間建立互聯關係. 不論是文字, 圖片, 或影像, 任何網頁元素都可以在外面嵌套一個 a 元素而建立與其他文件之超連結.

標籤 a 具有兩個最重要屬性 href 與 target, 其中 href 用來指向另一個文件的 URL 位置, 而 target 則用來指定新文件的開啟方式, 有下列四種方式 :


 target 屬性 說明
 _self 在目前的頁籤中開啟, 即取代目前網頁內容 (預設)
 _parent 在父視窗 (上一層視窗) 中開啟文件
 _top 在瀏覽器最上層視窗中開啟文件, 該視窗若有 iframe 會被移除
 _blank 在新頁籤中開啟文件


範例 7 : 文字超連結測試

<!--  html_test_hyperlink_1.htm  -->
<!DOCTYPE html>
<html>
<head>
  <title>超連結</title>
  <meta charset="utf-8">
</head>
<body>
  <a href="html_test_hello_world.htm" target="_self">在目前視窗中開啟</a> _self<br>
  <a href="html_test_hello_world.htm" target="_parentf">在父視窗中開啟</a> _parent<br>
  <a href="html_test_hello_world.htm" target="_top">在最上層視窗中開啟</a> _top<br>
  <a href="html_test_hello_world.htm" target="_blank">在新視窗中開啟</a> _blank<br>
</body>
</html>




可見在瀏覽器的頁籤中, _self 與 _top 事實上都會在目前的頁籤中開啟文件, 取代原先的網頁; 而 _parent 與 _blank 則會在新開啟的頁籤中顯示文件.

若將上面的網頁 html_test_hyperlink_1.htm 放在 iframe 中更能了解 _top 父視窗的意思 :


 範例 8 : 內嵌頁框超連結測試


<!DOCTYPE html>
<html>
<head>
  <title>超連結</title>
  <meta charset="utf-8">
</head>
<body>
  <p><a href="html_test_hello_world.htm" target="iframe1">在內嵌頁框中開啟</a><p>
  <iframe name="iframe1" src="html_test_hyperlink_1.htm" width=300 height=150></iframe>
</body>
</html>




可見在內嵌頁框中的 html_test_hyperlink_1.htm 網頁, 其 _self, _parent, 與 _blank 效果與不在內嵌頁框中一樣; 不同的是 _top, 它會在目前的頁籤中開啟文件而取代掉整個網頁.

除了文字超連結外, a 元素內可籤套其他多媒體元素形成多媒體超連結, 例如下面範例中的圖片超連結 :


範例 9 : 圖片超連結測試

<!DOCTYPE html>
<html>
<head>
  <title>超連結</title>
  <meta charset="utf-8">
</head>
<body>
  <a href="index.htm">
    <img src="img/html_test_hyperlink_home.jpg">
  </a>
</body>
</html>




a 元素還可用來製作頁內超連結 (又稱錨點 anchor), 亦即連結目標為目前網頁內之錨點, 這對於來回閱讀很長的網頁非常好用. 每一個錨點元素必須有一個 id 屬性, 而超連結的 href 屬性只要指定為 "#anchorID" 即可連接到 id 屬性為 "anchorID" 之元素, 例如 :


範例 10 : 頁內超連結 (錨點) 測試

<!DOCTYPE html>
<html>
<head>
  <title>超連結</title>
  <meta charset="utf-8">
</head>
<body>
  <p id="#top">TOP</p>
  <p><a href="#theme1">主題1</a></p>
  <p><a href="#theme2">主題2</a></p>
  <p><a href="#theme3">主題3</a></p>
  <div id="theme1" style="height:300px;">
    主題1:<a href="#top">TOP</a>
  </div>
  <div id="theme2" style="height:300px;">
    主題2:<a href="#top">TOP</a>
  </div>
  <div id="theme3" style="height:300px;">
    主題3:<a href="#top">TOP</a>
  </div>
</body>
</html>

此例使用 height 樣式來模擬超長網頁情況, 此處三個主題開頭被指定了 id 屬性 theme1, theme2, theme3 作為錨點, 並在網頁上方放置一個 id="top" 頂部錨點供返回網頁最上面.


八. 清單 :

HTML 的清單有三種, 相關標籤如下表 :


 清單 (List) 元素結構
 符號清單 (unordered list) <ul><li></li></ul>
 編號清單 (Ordered list) <ol><li></li></ol>
 定義清單 (Definition list) <dl><dt><dd></dd></dt></dl>


符號清單與編號清單可以多層巢狀嵌套, 但定義清單通常只有兩層結構, dt 是標題, 而 dd 則是定義.

ul 與 dl 元素沒有自己特定屬性, 僅有全域屬性. 在 HTML5 中 ul 不再使用 type 屬性, 改用 list-style-type 樣式來設定, 有下列四種樣式 :


 ul 符號樣式 (list-style-type) 說明
 disc 黑圓點
 circle 圓圈
 square 黑方點
 none 無符號


ol 則有下列三個屬性 :


 ol 屬性 說明
 type 編號類型 : 1=數字, A=大寫英文, a=小寫英文, I=大寫羅馬數字, i=小寫羅馬數字
 start 設定起始值 (預設從 1,A,a,I,i 開始)
 reversed 反向排序 (boolean)


範例 11 : 符號清單測試

<!DOCTYPE html>
<html>
<head>
  <title>符號清單</title>
  <meta charset="utf-8">
</head>
<body>
  <ul>
    <li>德魯納酒店</li>
    <li>Voice 3</li>
    <li>七日的王妃</li>
  </ul>
  <ul style="list-style-type:circle">
    <li>IU</li>
    <li>呂珍九</li>
    <li>朴敏英</li>
  </ul>
  <ul style="list-style-type:square">
    <li>李荷娜</li>
    <li>李東健</li>
    <li>李陣郁</li>
  </ul>
</body>
</html>




範例 12 : 編號清單測試

<!DOCTYPE html>
<html>
<head>
  <title>編號清單</title>
  <meta charset="utf-8">
</head>
<body>
  <ol type="1" start="2">
    <li>德魯納酒店</li>
    <li>Voice 3</li>
    <li>七日的王妃</li>
  </ol>
  <ol type="A">
    <li>IU</li>
    <li>呂珍九</li>
    <li>朴敏英</li>
  </ol>
  <ol type="i" reversed>
    <li>李荷娜</li>
    <li>李東健</li>
    <li>李陣郁</li>
  </ol>
</body>
</html>




範例 13 : 定義清單測試

 <!DOCTYPE html>
<html>
<head>
  <title>定義清單</title>
  <meta charset="utf-8">
</head>
<body>
  <dl>
    <dt>德魯納酒店</li>
      <dd>IU</dd>
      <dd>呂珍九</dd>
    </dt>
  </dl>
  <dl>
    <dt>Voice3</li>
      <dd>李荷娜</dd>
      <dd>李陣郁</dd>
    </dt>
  </dl>
  <dl>
    <dt>七日的王妃</li>
      <dd>朴敏英</dd>
      <dd>李東健</dd>
    </dt>
  </dl>
</body>
</html>



九. 表格 :

HTML 的表格主要由 table (表格本身), tr (列), th (標題欄), td (內容欄), caption (表格標題) 等元素組成, 結構如下 :

  <table>
    <caption>表格標題</caption>
    <tr>
      <th>標頭欄</th>
      <th>標頭欄</th>
    </tr>
    <tr>
      <td>內容欄</td>
      <td>內容欄</td>
    </tr>
    <tr>
      <td colspan="2">表格尾</td>
    </tr>
  </table>

另外也可以加上三個結構元素 thead (表格標頭), tbody (表格主體), 以及 tfoot (表格結尾), 但不是必要 :

  <table>
    <caption>表格標題</caption>
    <thead>
      <tr>
        <th>標頭欄</th>
        <th>標頭欄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>內容欄</td>
        <td>內容欄</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">表格尾</td>
      </tr>
    </tfoot>
  </table>

table 元素的屬性 :


 table 屬性 說明
 border 表格外框寬度 (px)
 width 表格寬度 (px 或 %)
 cellpadding 儲存格上下左右留白 (px)
 cellspacing 相鄰儲存格之間距 (px)
 frame 表格外框的顯示模式 
 rules 表格內框的顯示模式

 table 的 frame 屬性 說明
 void 不顯示外框
 box 只顯示四邊框線
 above 只顯示上框線
 below 只顯示下框線
 hsides 只顯示上下框線
 lhs 只顯示左框線
 rhs 只顯示右框線
 vsides 只顯示左右框線

 table 的 rules 屬性 說明
 none 不顯示內框線
 all 顯示全部內框線
 rows 只顯示各列之間的內框線
 cols 只顯示各欄之間的內框線
 groups 顯示 thead, tbody, tfoot 之間的內框線


tr 元素的屬性 :


 tr 屬性 說明
 align 設定整列之水平對齊 (left/center/right/justify/char)
 valign 設定整列之垂直對齊 (top/middle/bottom/baseline)


td 與 th 的屬性 :


 td/th 屬性 說明
 colspan 合併儲存格的欄數
 rowspan 合併儲存格的列數
 align 設定儲存格之水平對齊 (left/center/right/justify/char)
 valign 設定儲存格之垂直對齊 (top/middle/bottom/baseline)
 width 儲存格寬度 (px 或佔表格寬度 %)
 height 儲存格高度 (px 或佔表格高度 %)


範例 14 : 原始表格測試

<!DOCTYPE html>
<html>
<head>
  <title>表格</title>
  <meta charset="utf-8">
</head>
<body>
  <table border="1">
    <caption>表格標題</caption>
    <tr>
      <th>第1欄</th>
      <th>第2欄</th>
      <th>第3欄</th>
    </tr>
    <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>
    <tr>
      <td colspan="3">合併儲存格</td>
    </tr>
  </table>
</body>
</html>



可見原始的表格外觀不是很好看, 可以將 border 設為 0, cellspacing 設為 1, 並將 table 與 th/td 的背景利用樣式表設為不同色套疊得到細邊框的表格, 例如 :


範例 15 : 細邊框表格測試

<!DOCTYPE html>
<html>
<head>
  <title>表格</title>
  <meta charset="utf-8">
  <style>
  table {background-color:blue;} 
  td, th {background-color:white;} 
  </style>
</head>
<body>
  <table border="0" cellspacing="1" cellpadding="5">
    <caption>表格標題</caption>
    <tr>
      <th>第1欄</th>
      <th>第2欄</th>
      <th>第3欄</th>
    </tr>
    <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>
    <tr>
      <td colspan="3">合併儲存格</td>
    </tr>
  </table>
</body>
</html>




此例使用 style 樣式表元素將 table 元素之底色設為藍色, td 與 th 底色設為白色, 而 cellspacing 設為 1 (表示相鄰儲存格間隙寬度為 1px), 套疊結果就顯示邊框為 1px 的藍色細邊框.


十. 多媒體 :

多媒體包括圖片 (img), 音訊 (audio), 以及視訊 (video).

1. 圖片 : 

HTML 支援 jpg, gif, 以及 png 等圖檔格式, 其中 jpg 與 png 為全彩, gif 則僅 256 色, 但只有 gif 具有動畫功能, 在透明色方面, jpg 不支援透明度.

HTML5 中呈現圖片的標籤為 img, 其屬性如下表 :


 img 屬性 說明
 src 圖片來源, 可為檔案路徑或 URL
 width 圖框寬度, 單位為 px (例如 400) 或 % (例如 30%)
 height 圖框高度度, 單位為 px (例如 400) 或 % (例如 30%)
 alt 圖片無法顯示時的替代文字 (滑鼠滑過也會顯示)


img 是單一標籤 (沒有結束標籤), 語法如下 :

<img src="img/cat.jpg" width="200" height="100" alt="missing">

如果沒有用 width 與 height 屬性設定圖框大小, 則以圖片尺寸為圖框大小.

另外還可以用 figcaption 標籤來標註圖片資訊 (圖片), 這會在圖片左上角或左下角加上標註文字, 視 figcaption 是放在 img 之前 (左上角) 還是之後 (左下角) 而定, 但應將 img 與 figcaption 嵌套在 figure 元素裡面, 語法如下 :

<!-- 圖片註解在左上角 -->
<figure>
  <figcaption>abc</figcaption>
  <img src="img/cat.jpg" width="200" height="100" alt="missing">
</figure>

<!-- 圖片註解在左下角 -->
<figure>
  <img src="img/cat.jpg" width="200" height="100" alt="missing">
  <figcaption>abc</figcaption>
</figure>


範例 16 : 圖片測試-貓

<!DOCTYPE html>
<html>
<head>
  <title>圖片測試</title>
  <meta charset="utf-8">
</head>
<body>
  <figure>
    <img src="img/20190510-cat.jpg"  width="400" height="225"  alt="Missing">
    <figcaption>可愛的小咪</figcaption>
  </figure>
</body>
</html>




圖片來源可以是網路來源 (但要注意不可侵權), 只要將圖片網址放在 src 屬性裡即可. 在 Pixabay 等網站上上可找到許多免費授權的圖片, 例如 :


範例 17 : 圖片測試-變色龍

<!DOCTYPE html>
<html>
<head>
  <title>圖片測試</title>
  <meta charset="utf-8">
</head>
<body>
  <figure>
    <figcaption>變色龍</figcaption>
    <img src="https://cdn.pixabay.com/photo/2016/12/01/05/57/chameleon-1874514_1280.jpg" width="300" height="427">
  </figure>
</body>
</html>



參考 :

# 免費下載高解析度圖片的 15 個最佳圖庫網站


2. 視訊與音訊 : 

HTML 的音訊與視訊標籤分別為 audio 與 video, 其可用屬性相同如下表 :


 audio/video 屬性 說明
 src 音訊/視訊來源, 可為檔案路徑或 URL
 width 訊框寬度, 單位為 px (例如 400)
 height 訊框高度, 單位為 px (例如 300)
 poster 影片下載完畢前或播放前所顯示畫格之 URL
 preload 設定是否要在網頁載入同時將影片下載至緩衝區 : none/auto/metadata
 autoplay 是否要在網頁載入後自動播放影片 (boolean)
 controls 是否要顯示瀏覽器內建之控制面板 (boolean)
 muted 是否要預設為靜音 (boolean)
 loop 是否要重複播放 (boolean)


其中 autoplay, controls, muted, 與 loop 四個為布林屬性.

audio/video 元素語法如下 :

<audio src="a.mp3" controls autoplay>不支援 audio</audio>
<video src="a.mp4" controls autoplay>不支援 video</video>

HTML5 支援的視訊格式有 mp4, webm, 以及 ogg 三種; 音訊則有 mp3, wav, 與 ogg 三種.


範例 18 : 影片測試-mp4

<!DOCTYPE html>
<html>
<head>
  <title>視訊測試</title>
  <meta charset="utf-8">
</head>
<body>
  <figure>
    <video src="video/jinjin-2007-xmas.mp4"  poster="img/video_poster.jpg" controls autoplay>不支援 video</video>
    <figcaption>菁菁 2007 聖誕晚會</figcaption>
  </figure>
</body>
</html>




於

沒有留言:

張貼留言