參考手冊:

設定 CSS, 總會要查一下手冊, 下面列的是個人經常參考的 CSS 手冊及標準文件

• W3Scholl 教學網站的 CSS 參考
• mozilla 的 CSS 參考手冊
• IE 的 CSS 參考手冊 (微軟放棄它了, 已經轉向 mozilla)
• W3C CSS Level 1 標準文件
• W3C CSS Level 2.1 標準文件
• W3C CSS Selectors 標準文件(Level 3, 20181106)
• W3C CSS Selectors 草案文件 (Level 4)
• W3C CSS Colors Level 3 標準文件

HTML CSS 的語法結構:

網頁作者的設定是 CSS style 中最重要的部份, 網頁作者可以運用的 CSS 設定有多種來源:

型號

電路版的型號依時間序有

• Pi rev.1 (2012/02/29)
• Pi rev.2 (2012/09/05)
• Pi+ (2014/07/14)
• Pi2 (2015/02/02)
• Pi3 (2016/02/28)
• Pi3+ (2018/03/14)
• Pi4 (2019/06/24)
• Pi400 (2020/11/04)

Pi rev.2 和 Pi+ 有分 Model A 和 Model B. 二者的差異是電子零件用料不同 (Model A 用料縮減, 主要為減少 RAM, 網路接口, 及部份 USB 接口)

Pi3+ 相對於 P3 只是 CPU 的執行速度加快 1400 MHz (雙核 ARM Cortex-A53), Ethernet 網路接口改為 10/100/1000 Mbit/s, WiFi 改為 802.11ac Dual band, Bluetooth 改為 4.2 BLE, 以及可以經 PoE 取電 (需另購 PoE HAT 擴充板). (還有總耗電量變大)

Part 3: C 語言例子 (thread-safe function)

接下來, 我們來看一些 thread-safe 的例子: 首先是在 wiki 網站上的一個 Thread-safe 但不是 reentrant 的例子.

#include <pthread.h>

int increment_counter() {
    static int counter = 0;
    static pthread_mutex_t mutex = PTHREAD_MUTEX_INITIALIZER;

    pthread_mutex_lock(&mutex);

    // only allow one thread to increment at a time
    ++counter;
    // store value before any other threads increment it further
    int result = counter;

    pthread_mutex_unlock(&mutex);

    return result;
}

這個例子中的 increment_counter() 可以被多個執行緒呼叫而不會產生任何問題, 因為它用了一個 mutex 來保護 (同步) 所有對共用的靜態變數 counter 的存取. 但是如果中斷服務程式 ISR 也呼叫了 increment_counter(), 就會很容易使系統當掉. 原因是如果中斷發生在執行緒正呼叫 increment_counter() 時 (尤其是 mutex lock 和 unlock 之間), 那 ISR 將永遠等不到 mutex 被 unlock. 因為 CPU 接受中斷進入 ISR 後, 只有 ISR 完成, 才會回到執行緒. 記住: 中斷永遠比正常執行優先, 所以 ISR 要比執行緒或者是 OS 核心優先執行.

Part 2: C 語言例子 (reentrant function)

先來看 reentrant 的例子: 最常見到用來說明 reentrant 的例子大概就屬 swap() 了

int t;

void swap(int *x, int *y) {
    t = *x;
    *x = *y;
    *y = t;
}

void isr(void) {
    int x = 1, y = 2;
    swap(&x, &y);
    ...
    return;
}

void main(void) {
    int x = 3, y = 4;
    ...
    swap(&x, &y);
    ...
}

這個例子中的 swap() 函數是 non-reentrant function (而且也不是 thread-save). 原因是第4行及第6行用到共用的變數 t. 即便是我們用的是 32bit CPU, 甚至也有技援 mem. to mem. 移轉資料不被中斷, 也還是有二個時間點(在第5行執行前或執行後) 發生中斷會產生錯誤的執行結果. 如下表的 NG Example 1 和 NG Example 2 所示 (在這裡為了讓這一張表格不致於太長, 我只把動作拆解到高階語言的單一指令階段, 實際上像 *x=*y 這樣的指令可能就要二個以上的低階組合語言指令.)

Reentrant vs Thread-safe

Reentrancy 和 thread-safty 是兩個容易被搞混了的觀念. 其中最嚴重的是誤以為 reentrant function 必定是 thread-safe 或者相反以為 thread-safe function 必為 reentrant, stackoverflow 網站上的答覆甚至同時出現二種答案的現象.

Reentrancy 和 Thread-safty 二者的差異

首先來看 reentrancy: 字面上的意思是可重入. Reentrancy 原先是討論單一執行緒環境下 (即沒有使用多工作業系統時) 的主程式和中斷服務程式 (ISR) 之間共用函數的問題. 當然現在多核心的 CPU 盛行, 討論範圍也必需擴充至多執行緒的情況. 重點是它討論的主體是: 在 ISR 中使用的函數 (不論是自己寫的或者是函數庫提供的) 是否會引發錯誤結果. 主要的達成條件是二者 (ISR 和非 ISR) 的共用函數中不使用靜態變數或全域變數 (意即只用區域變數). 一般是撰寫驅動程式 (device driver) 或者是寫 embedded system 的人會遇到這個問題.

Keil C51 和標準 C 主要的差異

Keil 的 C51 是以 ANSI C90 為其設計基礎, 即便是如此, 它和標準 C 語言 (ANSI C90) 之間還是有幾個滿大的差異:

• Keil C51 因應 8051 的特性多了 bit, sbit, sfr, sfr16 等四種資料型態. 一般我們只會用到 bit, 其他三個是定義 CPU 的特殊功能暫存器用的.
• Keil C51 在定義變數時多了儲存空間修飾字, 用來修改變數使用記憶體空間. 詳細可參考這一篇
• 多了定義中斷服務常式 ISR 的方法及進入 ISR 時切換暫存器區段 (register bank) 的語法, 例如: static void UART0_ISR(void) interrupt 4 using 2
• 標準函數庫沒有依標準來實作, 如: printf()
• 在 Keil C51 中, 函數預設是 non-reentrant, 這點是最嚴重的差異. 我們在使用時要有所警覺才好, 才不致於掉到陷阱裡而不自知.

什麼是 reentrant

在此先來了解一下 reentrant 的定義, Wiki 網站上給 reentrancy 下的定義是

我的用 NB 在用 IE11 瀏覽一些網站上經常出現像這樣的怪現象. (只有 IE 會這樣)

在網路上查了好久都沒有答案, 今天在測試 VM 時順便也試了一下, 結果很令人傻眼...

有幾個 HTML 屬性用途相當特別, 特別記下以茲備忘:

1. title:

title 屬性可以附加在任何的 tag 上, 它的功用是產生類似 Tooltip Text 的提示效果: 當滑鼠停留在某個元素上面時, 就會出現提示文字. 例如:

<p title='簡介'>落落長的文章本文, 落落長的文章本文, 落落長的文章本文...</p>

自己寫的網頁掛在別的網頁框架上的時候 (如部落格網站...), 或者是自己用的 CSS 設定的列表一長, 偶而會有樣式跑掉了的狀況發生, 但常常不是很容易找出到底是被哪一條 (或者是哪幾條) css rule 蓋掉.

下面是如何用最簡單的工具: browser 內建的除錯工具來找出問題所在: 不必特別設定什麼或安裝什麼外掛, 只要按 F12 就對了:

IE 11 按下 F12 之後, 跳出來的除錯畫面如下, 它可能併在和原本的頁面的下方, 你可以按下黑色 Menu Bar 右手邊倒數第二個的 取消釘選 (Ctrl+P) 把它和原始的 IE 頁面分離開來:

特性:

• 所有的 HTML tag 都可以附帶指定 ID 的屬性. 例如:

  <div id="div1" ...>
  <p id="paraX"...>This is a sample paragraph. ...</p>
  <table id="time_zone"><tr>...
  

• ID 值 (原則上) 必需唯一. (參看 注意事項1)
• ID 值的合法字元為: 第一個字元為英文字母 [A-Za-z], 加上任何長度組合的 英文字母, 數字 [0-9], 減號 ('-'), 底線 ('_'), 冒號 (':'), 小數點 ('.') (參看 注意事項2)

用途:

• 用於 CSS selector, 指定需要套用的元素. 例如:

  <style type="text/css">
  #div1 {color:red; margin: 5px;}
  </style>
  ...
  <div id="div1">
  <p>....</p>
  </div>