2019年8月31日 星期六

Hymn of Death (死之詠讚)

這幾天看完了六集的迷你劇集 "死之詠讚" (李鍾碩申惠善主演), 這是描寫朝鮮日治時期劇作家金鎮祐與聲樂家尹心悳 (同德) 的淒美殉情故事, 據說李鍾碩為了向所飾演的天才劇作家金鎮祐致敬而無償演出. 我是因為聽了金素香演唱的 OST "只有心知道" 這首歌才去看這部戲的.

https://www.youtube.com/watch?v=sUTzS3eE0T4 (只有心知道)

演唱 : 金素香




下面的視頻字幕有羅馬拼音與韓語對照 :

https://www.youtube.com/watch?v=QN3WLs-Vw5Y (只有心知道)

演唱 : 金素香




下面則是趙冠宇用他那幽靈般的假音演唱的版本, 但那個中文字幕翻得實在不怎麼樣 :

https://www.youtube.com/watch?v=siDLgRTpSPo (只有心知道)

演唱 : 趙冠宇




我很喜歡趙冠宇的唱腔, 他的假音很迷人, 不過據說他近年因為誤信朋友而投資失敗, 破產之後妻離子散, 不過我相信他可以很快爬起來, 參考 :

《我是歌手》趙冠宇:在宣布破產後,決定坦然面對現在的一切

下面這個字幕不僅翻得美, 小楷字體也很美 :

#  https://www.youtube.com/watch?v=OaTCo9RQFMo (只有心知道)

演唱 : 金素香




此劇另外一首 OST "Stay with me" 也很好聽 :

https://www.youtube.com/watch?v=W4NrnrV0FQU (Stay with me)

演唱 : 宋荷藝




目前熱映中的德魯納酒店 OST "Say Goodbye" 也是宋荷藝演唱的.

劇中男主角金祐鎮是全羅南道木浦 (Mokpo) 地區的富家獨子, 熱愛文學與寫作, 在留學日本時因為劇團要籌備回國巡迴展演而與朝鮮第一位留日女公費生尹心恴相戀, 但是他在留學前卻已奉父命娶了自己並不喜歡的對象, 且必須在結束學業後回國接掌家族事業 SangSeong 商社. 在得知金祐鎮已婚之後, 尹心悳無奈地告別了這段不被祝福的戀情.

回國後整日被商社事務所困的金祐鎮逐漸遠離了所愛的文學創作, 但有一天在東珍日報上看到聲樂家尹心悳的演出公告, 想起以前與尹心悳的約定. 演唱會當天站在台上的尹心悳邊唱邊搜尋觀眾席, 終於看到了在二樓角落依約前來聽她演唱的金祐鎮. 重逢後的兩人終於確認無法離開對方.

但現實生活總是殘酷的, 尹心悳的父母幫她安排了一個可以支持其弟妹留學的富有結婚對象, 加上總督府的強制聘書, 讓尹心悳進退兩難. 而一直活在父親安排下的金祐鎮因為尹心悳的鼓勵再次提起寫作之筆, 但與尹心悳的書信往來之事被發現後遭到呵斥與制止, 在與父親攤牌後他放棄了事業再次回到日本, 並與也來到日本灌製唱片籌措弟妹留學費用的心悳重逢. 在不倫戀與困境中無法找到出路的兩人最後在返回朝鮮的船上相偕跳海, 走上了有島武郎與情人波多野秋子的殉情之路.

下面這篇文章, 作者葉秋臣對這個悲劇做了深度分析 :

《死之詠讚》如果他們能這樣選擇,結局也許不必一起殉情

臉書 "花漾姨母韓國篇" 有貼這個真實故事主角的照片.

韓劇【死的讚美】~申惠善二度合作李鐘碩

2019年8月30日 星期五

董思齊關於韓語特性的心得

今天找到下面這篇董思齊先生寫的好文章, 值得記下來作為以後研究韓語的參考. 由於研究所語言學的訓練, 我對一個語言會特別去注意它的語法結構 :

韓語的特性:文字、文法的結構與使用時的特殊之處

此文關於韓語文特徵有三 :
  1. 韓語語序為 SOV
  2. 韓文為拼音文字, 現代韓文有 24 個音標
  3. 韓語不是聲調語言 (not a tone language)
據說古韓語有聲調, 但現代韓語已丟失聲調, 聲調不再是區別性特徵, 僅慶尚道部分方言還保有聲調殘跡. 韓文與日文主要句法結構都是 SOV, 但若要據此說日韓語同源也有破綻, 因為 SOV 語序的語言其實也不少, 且日韓語與其他阿爾泰語系語言都缺乏同源語證據. 總之, 日韓語的歸類目前還是個爭議未決問題, 也有孤立語之說. 我個人是覺得跟南島語可能較接近. 韓文曾被 Discovery 評為世界上最科學的拼寫系統, 參考 :

十年來因為追韓劇的關係, 對於韓國的歷史文化做了一些閱讀研究, 覺得這個受中國明朝影響巨大的國家, 儒家文化紮根之深可能超乎一般華人想像, 甚至於自栩保存中華文化最豐富內涵的台灣人, 如果認真去研究韓文化, 可能會有 "禮失求諸野" 之慨. 

光是看鈔票上的頭像即知一二, 咱們的都是 "偉大的領袖", 韓國人的則全部是對民族文化有巨大貢獻的文學家與儒學思想家 (特別是朱熹學派) :
  • 1000 元 : 李滉 (音同恍, 世稱李退溪)
    提倡朱熹哲學創立退溪學派的朝鮮儒學大師, 有東方朱子之稱. 
  • 5000 元 : 李珥 (李栗谷)
    朝鮮朱子學主氣論學派宗師, 為李滉徒弟, 世稱栗谷先生, 乃名畫家申師任堂 (申仁善) 的第三子.
  • 10000 元 : 世宗大王
    朝鮮第四代國王, 名李祹, 太宗李芳遠第三子, 頒布訓民正音, 創制韓語書寫文字系統 (諺文), 對提升朝鮮平民文化教育水平貢獻卓著. 
  • 50000 元 : 申師任堂
    本名申仁善, 朝鮮詩人, 女畫家, 儒學家, 為李珥 (李栗谷) 之母, 朝鮮賢妻良母典範. 
這四張紙鈔上的人物除了世宗是王之外, 其他全部都是儒學家 (申師任堂與李栗谷為母子, 李退溪與李栗谷為師徒), 韓國人對儒學的推崇可見一斑. 事實上, 我們除了祭孔, 似乎日常與儒學並不相干. 而朝鮮退溪學派主氣論思想至今還影響政府政策與企業發展策略思維, 這就超乎我的認知與想像.

2019年8月28日 星期三

開學了

今天載菁菁去學校參加兩天的新生訓練, 接著就開學了, 她已期待好久了. 我也要開始早起接送的生涯. 二哥則是下周開學, 前天繳註冊費約 27000, 跟姊姊的差不多. 雖然宿舍沒抽到而需要通勤, 但昨天還是照預定帶他去國泰世華開戶, 方便匯零用錢, 因為學校宿舍的超商是全家, 提款機都是國泰世華.

2019年8月25日 星期日

網頁技術速學筆記 (二) : CSS 基礎

HTML5 將網頁技術做了清楚的分工, 即 HTML 專注於內容; Javascript 負責行為或動作; 而網頁外觀樣式則交由 CSS 控制呈現方式, 三者透過 link 元素(或 style 屬性) 以及 script 元素耦合, 如下圖所示 :




因為 HTML5 取消了大部分 HTML4 裡面原本負責樣式的標籤, 將外觀呈現全部交給效果更豐富的 CSS 來完成, 因此要讓網頁看起來美觀, 具有視覺傳達效益, 必須對 CSS 有基礎運用能力.

本系列之前的筆記參考 :

申請免費 PHP 虛擬主機 000a.biz 與 000webhost.com
網頁技術速學筆記 (一) : HTML 基礎


一. 加入 CSS 樣式表的四個方法 : 

在網頁中套用樣式的四種方法如下表 :


 加入 CSS 的四種方法 說明
 1. 在網頁元素的 style 屬性內 (inline 行內) <p style="color:blue; font-wight:bold;"></p>
 2. 在網頁標頭的 <style></style> 內嵌入 <style>
    p {color:blue; font-wight:bold;}
 </style>
 3. 在網頁標頭內以 <link> 連結外部 CSS 檔 <link ref="stylesheet" href="hello.css">
 4. 在網頁標頭的 <style></style> 內
     以 @import url() 匯入外部 CSS 檔
 <style>
    @import url("hello.css")
 </style>


前兩種用法為套用內部樣式, 後兩種為套用外部樣式. 其中第一種行內 (inline) 樣式最優先, 因為它是最後才套用, 其他三種方法則依其載入順序而定, 最後載入的會蓋掉先載入的樣式. 注意, link 元素為空元素 (沒有結束標籤), 只能放在 head 標頭內, 但可以出現一次以上, 它還有一個屬性 type="text/css", 但可以省略.


範例 1 :  行內 (inline) 樣式   

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  <p style="color:blue; font-wight:bold;">Hello World</p>
  <p style="font-size:x-large;font-style:italic;">Hello World</p>
  <p style="font-family:微軟正黑體;">Hello World</p>
</body>
</html>


同樣效果改用標頭內的 style 嵌入如下 (使用樣式類別) :


範例 2 :  網頁標頭內用 style 元素嵌入樣式

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   .p1 {color:blue; font-wight:bold;}
   .p2 {font-size:x-large;font-style:italic;}
   .p3 {font-family:微軟正黑體;}
  </style>
</head>
<body>
  <p class="p1">Hello World</p>
  <p class="p2">Hello World</p>
  <p class="p3">Hello World</p>
</body>
</html>


範例 3 :  在網頁標頭內用 link 元素連結外部樣式檔

先編輯一個純文字檔 p.css 以 utf-8 編碼存放在 css 子目錄下 :

.p1 {color:blue; font-wight:bold;}
.p2 {font-size:x-large;font-style:italic;}
.p3 {font-family:微軟正黑體;}

然後在 head 裡面用 link 連結此樣式檔 :

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/p.css">
</head>
<body>
  <p class="p1">Hello World</p>
  <p class="p2">Hello World</p>
  <p class="p3">Hello World</p>
</body>
</html>


範例 4 :  在網頁標頭的 style 內用 @import 匯入外部樣式檔

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    @import url("css/p.css")   
  </style>
</head>
<body>
  <p class="p1">Hello World</p>
  <p class="p2">Hello World</p>
  <p class="p3">Hello World</p>
</body>
</html>


二. CSS 的語法 : 

CSS 串接樣式表主要是透過選擇器挑選網頁中的元素, 套用指定之樣式.


1. 樣式結構 :

寫在 style 元素內以及外部 .css 樣式檔中的 CSS 樣式結構如下 :

選擇器 {
               屬性1: 值1;      /* 這是註解  */
               屬性2: 值2; 
               屬性3: 值3; 
               ....
              }   

選擇器用來指定樣式要套用的對象, 後面用大括弧 {} 包起來的是樣式內容, 每一個樣式以 "屬性:內容" 格式指定, 可同時指定多個樣式串接, 每一種樣式之間用分號隔開, 這也是 CSS 稱為串接式樣式表的原因.

注意, 屬性值若含有英數字, 小數點, 減號以外字元例如空白時必須加引號, 例如 :

p {font-family:"Times New Roman";}

放在 /* 與 */ 之間的文字會被當做註解不予解析, 但註解文字中不要含有 CSS 的屬性識別字, 例如 :

h1 {
      color:blue;           /* 大標題用藍色凸顯 */
      font-style: italic;
     }

如果是行內 (inline) 樣式, 則只要在 HTML 元素的 style 屬性中直接填入樣式內容即可 (不含大括號 {} 與註解), 例如 :

<h1 style="color:blue; font-style: italic;">Hello World</h1>

樣式內容 (包括屬性與值) 雖然都不分大小寫, 例如 Color: BLUE; 與 color: Blue; 均能被正確解析且呈現效果相同, 但習慣上樣式內容最好都用小寫. 但選擇器就不同了, 選擇器中與 Javascript 有關的 id 與 class 有分大小寫.


2. 常用樣式屬性 :

CSS 最常用的樣式屬性如下表 :


 文字樣式屬性 說明
 font-family  字型 : 標楷體, 微軟正黑體, "New Time Roman" (逗號隔開依序套用)
 font-size  大小 : 可用 px, 百分比 %, 相對 (smaller/larger) 或絕對 (small/large) 
 font-style  風格 : normal (正常)/italic (斜體)/oblique (粗體) 
 font-weight  粗細 : 絕對 normal(=400)/bold(=700) 或相對 lighter/bolder
 font 設定字型/大小/顏色/風格/粗細等, 例如 font: 15px 標楷體 italic bold
 text-shadow  陰影格式: 顏色 右(正)左(負)長度 下(正)上(負)長度 範圍
 text-decoration 添加裝飾 : none/underline/overline/line-through (刪除線)
 text-transform 大小寫轉換 : none/lowercase/uppercase/capitalize
 vertical-align 垂直對齊 : baseline/super(上標)/sub(下標)/top/middle/bottom

 文字樣式屬性 說明
 font-family (字型) 標楷體, 微軟正黑體, "New Time Roman" (逗號隔開依序套用)
 font-size (大小) 可用 px, 百分比 %, 相對 (smaller/larger) 或絕對 (small/large) 大小
 font-style (風格) 有 normal (正常)/italic (斜體)/oblique (粗體) 三個值
 font-weight (粗細) 絕對 normal(=400)/bold(=700) 或相對 lighter/bolder
 font (綜合) 以空格隔開, 例如 font: 15px 標楷體 italic bold

 色彩樣式屬性 說明
 color 設定元素前景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 background-color 設定元素背景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 border-color 設定元素邊框色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 opacity 設定元素透明度, 值範圍 0.0 (完全不透明) ~ 1.0 (完全透明, 預設)

 背景樣式屬性 說明
 background-color 設定元素背景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 background-image 設定元素背景圖片, 可用 url() 設定, 例如 url("img/aaa.png")
 background-position 設定元素背景圖片位置, 可用 top/center/bottom/left/right
 background 設定元素背景顏色, 圖片, 位置等, 例如 background: red center

 尺寸樣式屬性 說明
 width 設定元素寬度, 可用 px, %, 或 auto (自動)
 height 設定元素高度, 可用 px, %, 或 auto (自動)
 min-width 設定元素最小寬度, 可用 px, %, 或 auto (自動)
 max-width 設定元素最大寬度, 可用 px, %, 或 auto (自動)
 min-height 設定元素最小高度, 可用 px, %, 或 auto (自動)
 max-height 設定元素最大高度, 可用 px, %, 或 auto (自動)

 邊界留白樣式屬性 說明
 margin 設定元素的上右下左邊界寬度, 可用px, %, 或 auto
 padding 設定元素內容的上右下左留白寬度, 可用px, %, 或 auto

 邊框樣式屬性 說明
 border-color 設定元素邊框色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 border-top 設定元素的上邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-right 設定元素的右邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-bottom 設定元素的下邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-left 設定元素的左邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-style  設定元素的四邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border 設定元素的邊框框線, 顏色, 寬度樣式, 例如 border: dotted 5px blue


text-shadow 樣式至少需指定兩個數值, 第一個是向右的陰影距離 (負數表示向左), 第二個是向下的陰影距離 (負數表示向上), 第三個數值是陰影範圍 (可有可無). 顏色若不指定預設為黑色陰影.

注意, 樣式中用到外部資源, 例如 background-image 中用到外部圖片當背景, 都使用 url() 來指定資源所在之 URL, 可用本機相對位址例如 url("img/abc.jpg") 或網路位址例如 url("http://www.blabla.com/a.jpg").

更多樣式屬性參考 :

https://www.w3schools.com/css/


3. 選擇器種類 :

選擇器可分為如下 7 類 :


 樣式選擇器 說明
 1. 類型選擇器  套用對象為 HTML 元素 (標籤選擇器), 例如 p, div, table 等 
 2. 後代選擇器 套用到符合指定之父子元素 (空格隔開) 關係的子元素上, 例如 div a 
 3. ID 選擇器  套用到指定該 id 屬性值之元素, 選擇器為 id 屬性值前加點號, 例如 .myID
 4. Class 選擇器 套用到所有該樣式類別之元素, 選擇器為 class 屬性值前加 # 號, 例如 #myClass
 5. 屬性選擇器 套用到具有指定屬性特徵之元素, 例如 [attr], [attr=val], [attr~=val], [attr|=val]
 6. 全域選擇器 套用到全部元素, 選擇器為星號 *
 7. 偽類選擇器 套用到具有指定父子節點關係的多個元素的最後一個元素, 以空格隔開


注意, 選擇器中的 id 與 class 一定要大小寫都符合才會套用, 但選擇器若是 HTML 標籤或屬性時則可不分大小寫, 這是因為 HTML 不分大小寫之故, 屬性名稱與值都不分大小寫. 參考 :

小细节:css中的的大小写区分

多個套用相同樣式的選擇器可用逗號合併, 例如 :

p {color: red;}
div {color: red;}

這兩行樣式可用逗號合併為一行 :

div, p {color: red;}

這表示 p 元素與 div 元素均套用相同樣式.

要注意後代選擇器 (descendant selector) 與合併選擇器的差別, 後代選擇器是以空格隔開父子元素, 而合併選擇器是用逗號隔開多個要共用同一樣式的選擇器.

類型選擇器 (type selector) 就是以 HTML 標籤當作選擇之對象, 因此網頁中所有這種標籤都會被套用此樣式, 例如 :


範例 5 :  類型選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   p {color:red; font-wight:bold;}
   DIV {COLOR:green; FONT-wight:bold;}
   span {text-shadow:navy 3px 3px 3px;}
  </style>
</head>
<body>
  <p>Hello World</p>
  <div>Hello World</div>
  <span>Hello World</span>
</body>
</html>



此例中的樣式表定義了 p, div, 與 span 這三種元素的樣式, 可見它們各自套用到指定的元素類型上, 而且樣式內容不論屬性或值都不分大小寫.

下面的範例測試後代選擇器, 這是選擇 HTML DOM 樹階層結構中具有指定之父子關係的子元素, 注意, 它是套用到最後那一個子元素 :


範例 6 :  後代選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   div p span{color:green; font-wight:bold;}
   div p {color:blue; font-style:italic;}
   p {color:red;}
  </style>
</head>
<body>
  <p>Hello World</p>
  <div><p>Hello World</p></div>
  <div><p><span>Hello World</span></p></div>
</body>
</html>



此例定義了三個樣式, 選擇器 div p span 只會套用在 span 元素的內容 Hello World 3; 而 div p 則會套用到 div 的子元素 p 的內容, 因此 Hello World 2 與 Hello World 3 都會套用, 兩個都是斜體字, 顏色部分會先套用 div p 的藍色, 然後馬上又被較嚴格的 div p spam 的綠色覆蓋掉. 總之, 後代較多的會最後套用.

ID 與 Class 選擇器是最常用的選擇器, 尤其是 Class 選擇器, 因為它會套用到有相同 class 屬性值的所有元素; 而 ID 則只能套用到唯一的元素, 因為網頁中的 ID 屬性值必須唯一.


範例 7 :  ID 選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   #p1 {color:green; font-weight:bold;}
   #p2 {color:blue; font-style:italic;}
   #p3 {color:red; font-size:24px;}
  </style>
</head>
<body>
  <p id="p1">Hello World 1</p>
  <p id="p2">Hello World 2</p>
  <p id="p3">Hello World 3</p>
  <p id="P3">Hello World 3</p>
</body>
</html>



此例樣式表定義了 #p1, #p2, #p3 三個 ID 樣式 (注意, ID 樣式的選擇器是在 id 屬性值前面加上 #), 它們會分別套用到網頁元素中 id 屬性值分別是 p1, p2,p3 的元素. 可見第四個 p 元素因為 id 屬性為大寫的 "P3", 因此不會套用 #p3 的樣式.

類別選擇器是在元素的 class 屬性值前面加個點號, 它會套用到全部具有該樣式類別之元素上, 其使用頻率最廣, 許多前端框架大量使用類別來控制網頁之呈現方式.


範例 8 :  Class 選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   .header {background:violet;}
   .odd {background:lightgray;}
   .even {background:orange;}
  </style>
</head>
<body>
  <table>
    <tr class="header">
      <th>代號</th>
      <th>公司</th>
      <th>股價</th>
      <th>現金股利</th>
    </tr>
    <tr class="even">
      <td>2330</td>
      <td>台積電</td>
      <td>254</td>
      <td>2.5</td>
    </tr>
    <tr class="odd">
      <td>2412</td>
      <td>中華電</td>
      <td>107.5</td>
      <td>4.48</td>
    </tr>
    <tr class="even">
      <td>2308</td>
      <td>台達電</td>
      <td>148.5</td>
      <td>5</td>
    </tr>
    <tr class="odd">
      <td>1301</td>
      <td>台塑</td>
      <td>93.4</td>
      <td>5.08</td>
    </tr>
  </table>
</body>
</html>




此例定義了三個樣式 header, odd, 與 even, 分別給表格的標題, 奇數列, 偶數列套上底色樣式. 關於顏色名稱參考 :

參考 :

https://www.w3schools.com/html/html_colors.asp
https://www.w3schools.com/colors/colors_names.asp
# 常用 CSS 屬性列表


屬性選擇器挑選含有指定屬性之元素作為套用樣式之對象, 選擇器形式為將屬性名稱與屬性值篩選條件放入中括號內, 常用的屬性值篩選條件如下 :


 屬性選擇器 說明
 [attr] 套用到具有 attr 屬性之元素
 [attr="val"] 套用到具有 attr 屬性且其值為 val 之元素
 [attr~="val"] 套用到具有 attr 屬性且其值含有 val 之元素
 [attr|="val"] 套用到具有 attr 屬性且其值含有 val- 之元素
 [attr^="val"] 套用到具有 attr 屬性且其值以 val 開頭之元素
 [attr$="val"] 套用到具有 attr 屬性且其值以 val 結尾之元素


其中 [attr|="val"] 常用在全域屬性 lang, 例如中文有 zh-Hans (簡體中文), zh-Hant (繁體中文), 篩選條件 [lang|="zh"] 就會套用到所有具有 lang 屬性且值為中文語言的元素上. [attr^="val"] 則可用來篩選網址中的 URL 協定 (以 http 開頭) 等, 例如 [href^="http://"]; 而 [attr$="val"] 則常用在篩選副檔名, 例如 [href$=".jpg"].


範例 9 :  屬性選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   [class] {color:blue;}
   [class="p2"] {font-weight:bold;}
   [lang|="zh"] {font-style:italic;}
   [href^="html"] {background:yellow;}
   [src$=".jpg"] {border: inset 5px violet}
  </style>
</head>
<body>
  <p class="p1">Hello World 1</p>
  <p class="p2">Hello World 2</p>
  <p lang="zh-Hant">Hello World 3</p>
  <p><a href="html_test_hello_world.htm" target="_blank">開啟 Hello World</a><p>
  <img src="img/20190510-cat.jpg"  width="400" height="225"  alt="Missing">
</body>
</html>




 此例定義了五個屬性選擇器, 第一個 [class] 會套用於所有包含 class 屬性之元素, 因此前兩個 p 元素文字顏色都是藍色. 第二個 [class="p2"] 只套用於 class 屬性值為 p2 者, 因此只有第二個 p 元素變粗體. 第三個 [lang|="zh"] 只套用於 class 屬性值為 "zh-" 開頭者, 因此只有第三個 p 元素變斜體. 第四個 [href^="html"] 只套用於 href 屬性值以 "html" 開頭者, 因此只有超連結 a 元素背景色變黃色. 第五個 [src$=".jpg"] 只套用於 src 屬性值以 ".jpg" 結尾者, 因此只有圖片 img 元素套用邊框樣式.

最後來測試偽類選擇器, 偽類選擇器 (pseudo-class selector) 用來選擇具有特定狀態或資訊之元素, 而這無法透過 DOM 樹來選擇, 例如滑鼠滑過 (hover) 之元素等, 最常用在控制超連結或表單元件因狀態而變之外觀, 常用的偽類選擇器如下表 :


 偽類選擇器 說明
 :link 套用尚未瀏覽過之超連結
 :visited 套用已瀏覽過之超連結
 :hover 套用游標在其上方之元素
 :focus 套用取得焦點之元素
 :active 套用所點選之元素
 :enabled 套用表單中可用之元件
 :disabled 套用表單中不可用之元件
 :checked 套用表單中被選取之 radio 或 checkbox 元件
 :not() 套用非指定之選擇器的元素
 :valid() 套用表單中已驗證成功之欄位
 :required 套用表單中之必填欄位


偽類選擇器前面可加上元素名稱限定, 例如 a:link 或 input:checked 等.

更多偽類選擇器參考 :

https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
Day24:小事之 CSS 偽類 與 偽元素
CSS 虛擬 (偽) 類別選擇器 (Selector) 教學範例


範例 10 :  偽類選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    a:link {color:blue;}
    a:visited {color:violet;}
    a:hover {background-color:yellow;}
    div.hello:hover {background:violet;}
    :checked {height:20px; width:20px;}
    :disabled {background-color:lightgray;}
    :focus {background-color:yellow;}
    :required {border:dotted 2px blue;}
  </style>
</head>
<body>
  <p><a href="http://www.google.com">Google</a><p>
  <p><a href="http://tw.yahoo.com">Yahoo</a><p>
  <div class="hello">Hello World</div><br>
  <form>
    <input type="text" required>
    <input type="text" disabled><br><br>
    <input name="language" type="checkbox" value="Python"> Python
    <input name="language" type="checkbox" value="R"> R
    <input name="language" type="checkbox" value="C#"> C#
  </form>
</body>
</html>




此例樣式表中的 :link 與 :visited 均只套用到超連結, 因此前面不加 a 亦可, 而 hover 則可套用到所有元素 (此例為 div). 第一個 text 輸入欄位因為是必填欄位 (required), 因此會套用虛線邊框樣式. 最後面的 checkbox 元件被核取時會套用 :checked 樣式, 即尺寸會變大.

OK, 大功告成, 以上便是網頁專案中最常用的樣式用法.

參考 :

https://www.w3schools.com/css/
網頁樣式表-CSS的提示與竅門

2019 年第 34 周記事

周末白鹿颱風來襲, 為避免風勢大道路積水, 我週六提早回鄉下, 但一路其實都只下著小雨, 風也不大. 回來看到兩棵木瓜樹已出現黃葉, 爸說這兩株應該沒指望了, 我種木瓜都沒成功過, 殘念!

二哥大學宿舍抽籤沒抽中, 因為一棟在整修中, 宿舍是遠道優先, 我們住市區自然順序排較後面, 原本還在討論要去 IKEA 買床墊與檯燈的說. 二哥上網查了附近租屋費都要 6, 7 千以上, 所以只好通勤, 要坐捷運到加工區站再坐一趟公車, 時間大約要 1.5 小時, 跟高中差不多. 不過往好處想是能繼續一起學習討論.

姊姊週二晚上回到高雄, 週三大家去海港吃飯 (父親節), 週四中午與高中同學去日本自由行 8 天, 旅費是這學期打工所得. 我中午請假回去載她到小港機場, 發現從家裡出發到機場大該要抓 40 分鐘以上, 因為中山路大車多常塞車. 我也快 30 年沒去京都一遊了, 那時是出差有工作壓力, 賞景並非很自在, 明年也來規劃個自由行吧! (那日文現在就要開始複習).

2019年8月24日 星期六

明儀買書兩本 : Line Bot 與技術指標組合

昨天去逛明儀時, 看到下面這本 Line bot 的書, 覺得很有趣就買下了 :

# Python 與 Line Bot 機器人全面實戰特訓班 (碁峰, 文淵閣)


Source : 博客來


Line 已經變成現在智慧型手機不可缺少的 App, 不論公私機構公務聯繫還是個人與群組即時通訊都不可少, Line Bot 可以幫我們在 Line 上完成許多自動化工作. 文淵閣出的書品質不錯又接地氣, 我手上已有好幾本了.

另外有一本日本人寫的技術分析書我前幾個禮拜已經斷斷續續翻閱過, 覺得很有參考價值 :

最強技術指標組合:日本人氣分析師親授1+1>2的賺錢術


Source : 博客來

鐵肺歌手 Ben (李恩英)

今天在找太妍的 OST 時看到下面這篇 :

實力派OST歌手除了有GUMMY、太妍還有她啊~

文中這個 "她" 是指個子嬌小 (147cm) 的南韓實力歌手 Ben (李恩英), 她生就一副鐵肺好歌喉, 曾在歌唱競賽中演唱難度頗高的李善姬 (李仙姬) 名曲 "姻緣" 獲得 100 分滿分佳績 :

https://www.youtube.com/watch?v=Nx0tjVecagY




其實她前面還有一位歌手演唱同曲得到 98 分 :

https://www.youtube.com/watch?v=cdpgf6lLVUQ




雖然也唱得不錯, 但比起來我覺得還是 Ben 唱得好.

聽看看原唱者李善姬的唱功 :

https://www.youtube.com/watch?v=IdUHj33n9YA




這首 "姻緣" 是以朝鮮暴君燕山君為題材的韓劇 "王的男人" 主題曲 :

https://www.youtube.com/watch?v=2_DR9y3vfjk




把這首歌配上 "孤單又燦爛的神-鬼怪" 片段, 好像也很配 :

https://www.youtube.com/watch?v=PABQyMXRV4A




我覺得韓劇的神鬼怪戲劇很有創意, 作家說故事能力很強. 這視頻中飾演高麗年少君王的演員是不是很像呂珍九呢? 其實他是目前首爾中央大學戲劇系的金旻載, 實在太像了. 演高麗王后的是在擁抱太陽的月亮中演出尹寶鏡的金所泫. 這些童星長大後還是很帥很漂亮.


2019-08-26 補充 :

還有一個是素人歌手權美熙以韓式唱腔 (稱為國樂) 演唱的視頻 :

https://www.youtube.com/watch?v=jxBxfP9r14Y




這種唱法中氣要夠才行, 也很好聽, 對吧?

德魯納酒店 OST

最近愛奇藝熱播的 tvN "德魯納酒店" 我已追至第 12 集, 劇中幾首單曲 (OST) 非常好聽, 例如 Gummy 演唱 "Remember me", Heize 唱的 "Can you see my heart", 以及太妍的 "名為你的詩" 我覺得最好聽.

https://www.youtube.com/watch?v=RM33KOMNsaI (Remember me)

演唱 : Gummy (朴志妍)




https://www.youtube.com/watch?v=nA3yfLs7jis (Can you see my heart)

演唱 : Heize (張多蕙)




https://www.youtube.com/watch?v=kwOAhCY_H3c (名為你的詩)

演唱 : 太妍 (金泰耎)




https://www.youtube.com/watch?v=5-SBT9AnVdk (Another day)

演唱 : Monday Kiz & Punch




女歌手 Punch 還有一首 "Done for me" 也別有味道 :

https://www.youtube.com/watch?v=JYtKGX22cXI




正如其名 Punch, 那節奏似乎會給人重擊. 她的中文名字是甚麼都找不到.

金請夏這首 "在那盡頭的你" 旋律也很美, 但歌聲中卻透著一些悲傷的感覺 :

https://www.youtube.com/watch?v=dDHLPjN9kpw

演唱 : 金請夏




# 關於這女孩:她叫金請夏Kim Chungha 청하

宋荷藝這首 "Say Good Bye" 這首聽起來真有一種說再見時的不捨呢 :

https://www.youtube.com/watch?v=Sf8eWALfiZ8

演唱 : 宋荷藝




這些歌適合一邊工作一邊聽, 特別是辦公室又在談政治時, 我就會戴上耳機.

我很好奇, 張滿月千年的歲月是在等待那個隊長嗎? 那個人就是具燦星嗎? 快到結尾了, 謎底應該就要揭曉了.

2019-08-26 補充 :

今天看了 13, 14 集, 具燦星不是隊長高青明, 哈, 他是滿月客棧的第一個客人-螢火蟲, 與張滿月一同被綁在月靈樹, 守護著張滿月. 那具燦星總該有個因緣吧?

2019年8月21日 星期三

我的大叔 OST

今天在 Youtube 上找到 IU 主演的 "我的大叔" 片中 OST 組曲視頻, 總長 34 分鐘 :

https://www.youtube.com/watch?v=l2-WmIaYf0o




IU 是我的韓劇新偶像, 最近在看她的新劇 "德魯納酒店", 已到 12 集, 月靈樹開花了, 當花瓣掉落時, 她演的張滿月社長就要消失了嗎? 期待周末.

買 USB 充電可攜式迷你電動榨汁杯

今天在公司福利社看到這個可攜式隨手杯果汁機, 市價也要 989 元, 但福利社賣 799, 於是就買了一個 (也只能買一個) :

USB 充電可攜式迷你電動榨汁杯 SBL-1901C1




最近岳父的酪梨正在出貨, 一些賣相差的就留下來家人享用, 加牛奶布丁一起打, 小狐狸們都很愛喝. 酪梨跟芒果一樣一年一獲, 價格很俏, 每斤大約都在 70 元以上, 在同事慫恿之下有在想將來退休後來種酪梨, 他說要早中晚品種都有栽種的話, 採收期約有半年.

買日幣

姊姊昨天晚上回到高雄, 明天要跟她高中同學去日本自助旅行, 預計遊歷大阪, 京都, 與奈良共 8 天, 費用是暑假打工所得. 雖然她說不用, 但我今天還是去台銀 ATM 領兩萬日幣, 說詞是當作預備金, 沒用到回來再還我, 因日圓一直漲, 等明年東奧前再賣回去也許就把手續費沖掉了.

今天台銀牌價是 0.2981, 但我用 ATM 提款匯率是 0.2975 :




今年年初時本想在外匯帳戶買些日圓 (那時才 0.28), 因奧運舉辦國幣值通常會升值, 但也只是想想而已. 真的, 有想法沒作法到頭來都只是夢想罷了.

2019年8月18日 星期日

好書 : 英語自學王

此書借自鄉下的市圖分館, 已看了一半, 因有人預約, 所以在此做個摘要筆記先還了.


Source : 博客來


此書作者鄭錫懋經歷很特殊, 他是大學聯考英文 20 分, 大一英文重修三次的魯蛇, 直到大六才開始發憤讀英文, 後來成為補教名師, 還開了兩家補習班. 其實作者數學也是魯蛇, 他說 : 我不只是英文魯蛇, 我是魯一整組的, 大一微積分硬是修了六次, 為了微積分延畢, 大學念了六年.

作者在延畢的兩年為了減輕家計跑去補習班打工, 竟獲得試教數學的機會. 但是他很快就發現要成為好的數學補教老師太難, 想在這職場繼續待下去一定得轉換科目, 他國文很強, 但是沒市場, 只好選了同樣是文科的英文, 他說 : 別人學英文是為了求職, 我學英文是為了求生. 這個巨大的學習動機就是推動他英文脫魯的動力. 他花了一年時間完全沉浸在英文世界中, 做對了幾件事讓他成功習得第二語言.

他英文脫魯是怎麼辦到的? 摘要如下 :
  1. 英文不是另一種語言 (language), 而是另一種聲音 (voice). 因為如果是語言, 想到單字, 句型, 文法, 時態 ... 就腿軟了. 如果只是一種聲音, 你想到的是聆聽, 模仿, 與唱和.
  2. 沒有甚麼快樂學習, 想變厲害得承受許多痛苦, 但這些痛苦是值得的.
  3. 學好英文的 16 字箴言 : 縮小範圍, 重複聽讀, 了然於胸, 練到精通. 
  4. 你一定要開始才能變得厲害, 魯蛇是何時開始脫魯的呢? 從他踏上旅程那天, 他就變成魯夫了. 
  5. 為什麼要做, 永遠比該如何做還重要 100 倍. 因為環境可以創造, 技巧可以學習, 但動機無法外求. 成功者往往不是方法比較好的人, 而是動機比較強的人. 所以在學英文之前請先自問 : 我為什麼要學英文?
  6. Krashen 博士的 narrow listening 理論 : 在語言自學初期, 應專注在特定少量的素材, 重複大量的聽. 簡單說就是以少為多. 要能夠說, 必先重複大量地聽難度適中的素材; 要能夠寫, 先重複大量地讀你喜歡的作者其中一部作品. 作者認為書林出版的 "說一口道地生活美語 (Speak English Like an American)" 便是一個適合 narrow listening 的教材. 
  7. 要好好地利用 VoiceTube 的單句重複功能.
  8. 經典電影獨幕對白
  9. 一年學四種語言的 Scott Young : (1) 學習任何語言 (2) 學中文
  10. English sentence with audio
  11. 朗文 3000 交際詞彙 (搜尋 Longman communication vocabulary 3000)
  12. 朗文 2000 釋義詞彙 (搜尋 Longman defining vocabulary 2000)
值得一提的是, 作者曾在火車上遇到一位國中退休生物老師游汝謙, 這位老師開了一家翻譯社, 可翻八種語言, 他說學好外文的心訣是 :
  1. 每天學一點
  2. 不要停, 不要停
  3. 現在就開始
最重要的是 : 現在就開始.

2019 年第 33 周記事

本周幾乎下了整周的雨, 出入都不方便. 但地球越來越熱, 與其被熱浪襲擊, 還不如下雨得好, 只是住山區低窪處的人家就麻煩了. 下午小舅趁雨勢稍歇開車載來番茄苗在靠菜園東邊處種下兩排, 雖說照顧兩個雙胞胎外孫根本忙不過來, 但小舅媽說就種一些來自家吃, 無暇顧及就順其自然.

這兩天間歇大雨, 今早爸說豬舍屋簷的集水槽似乎被塞住了, 水從豬舍門口噴洩而下, 我早上拿了鋁梯上去看, 並無阻塞現象, 而是集水槽本身以前工人用釘子鎖在豬舍木樑的延伸小木片上, 幾十年過去那木片已經腐朽, 使得集水槽往下墜, 水就傾瀉而下. 下午找了短鐵條將集水槽撐起來, 但隨之而來的大雨卻證明不行, 於是爸鋸了兩個短木樁去撐, 果然奏效.

本周在整理給二哥的 HTML 教材, 但進度甚慢, 原因是跟著水某看政論節目, 一整個晚上閒暇時間都浪費在這上面真是可惜. 政治人言言殊, 立場不同令人血脈賁張, 不適合中年大叔. 其實, 鬥來鬥去最後彼此才發現 : 夭壽喔! 原來你是長江一號! 我是二號啦!

總之, 下周起要戒三件事 :
  1. Line
  2. 電視
  3. Yahoo 新聞
省下的時間不如來看每期都沒看完的 :
  1. 今周刊
  2. 財訊
要做出點成績就要從百忙中擠出時間, 但是, 不要把努力擠出的時間大把大把地浪費在無益的事情上. 把握黃金五小時 (18:00~23:00), 不是時間不夠, 而是浪費的太多!

市圖還書 2 本

下面兩本書有人預約, 先還了 :
  1. 英語自學王 :史上最強英語自學指南
  2. 完整學會Git,GitHub,Git Server的24堂課 :第二版
Git 一直想學卻抽不出時間, 殘念 ...

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;b>&rt;/b></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)


注意, 屬性 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)
 with 表格寬度 (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 與 tr 的屬性 :


 td 屬性 說明
 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>