豬腦爸 D NOW BA

永久停更

2020-02-05T06:45:00.003-08:00

我在搞大事業了，有興趣的話，歡迎前往：

https://sites.google.com/view/fliped-edu-by-translated

把WordPress和網站目錄分開

2013-01-29T10:26:00.001-08:00

這是我由衷的建議，如果一開始在佈署WP時就全所有的文件放在根目錄下。日後若要以網頁根目錄設置其他的東西，資料會摻雜在一起很難管理。

打個比方來說好了，如果你想要在www資料夾下，同時安裝除了WordPress以外的多種站台。那麼每個站台都給他用一個資料夾裝起來(一個蘿蔔一個坑)，以後進WEB後台管理，從路徑上也比較好辨識，備份的時候也可以各自分開。
(PS 當然，如果你是租用的主機若是只給你一個MySQL，你想玩二種站台也有難度，這個時候就不用管分不分開的問題了，不過一個MySQL多個WP是OK的 )

這篇就來談談WordPress和網站目錄分開的設定步驟，不管是新架設WP或是舊WP要把目錄分開，我都會提供一些技巧。

新架設WordPress，目錄分開後的注意事項

新架設WordPress的，在WordPress程式下載後，在www根目錄下先建一個資料夾，名稱隨你取，例如 DNOWBA-WP，然後把所有的下載的程式都放到 DNOWBA-WP目錄下。如下圖，注意存放的目錄不是www。

接著就是STEP BY STEP的安裝步驟了。
安裝完畢以後，你可以發現，你部落格的網址會是

http://www.allincycle.com/DNOWBA-WP/

當然啦，如果你目的就是要架設一個部落格網站，怎麼可以把自已付費買的一級網域給浪費掉，別人連到你的網站還要多打一小串的文字呢？

所以如果你希望瀏覽者透過輸入網域名稱就可以連到WordPress的話，那麼方法就是用轉址。在WordPress上有個設定轉址的方式，步驟如下：

1、登入你的WordPress管理介面，設定選項→一般設定，找到網誌位址(Site URL)，把DNOWBA-WP拿掉。這樣子瀏覽者連到網域名稱就會帶入網誌的位置。

2、再來，把在 DNOWBA-WP資料夾裡的的index.php與.htaccess這兩個檔案移到根目錄去，並修改index.php，以下為修改內容。
在文件裡找到  require('./wp-blog-header.php');
把內容修改成  require('./DNOWBA-WP/wp-blog-header.php')

設定完成後，瀏覽者以後只要輸入簡潔的短網域名稱，就可以進入你所安裝的部落格位置。

注意：上述的情況是在根目錄下只有一個唯一的index.php才會成功，若是有其他的index檔名，如index.htm、default.aspx之類的，那麼還需要多加設定，不過換句話說，一個網站哪需要設計這麼多的首頁，那肯定是你不曉得為什麼我不把WP安裝在根目錄的原因，別不明究理就直接修改，以免造成頁面連結失效等錯誤問題。

舊架設WordPress，把安裝目錄分開後的注意事項

已經架設好的WordPress，若是把WP核心文件都曝露在www根目錄下，要怎麼把WordPress的資料放到不同的目錄，這個簡單，就是在www根目錄下建立一個資料夾，命名隨意，例如 DNOWBA-WP，然後把WP核心文件都往該目錄移動就好了，不過有些小細節，還是步驟說明一下。

1、登入你的WordPress管理介面，設定選項→一般設定，找到WordPress網址(WordPress URL)，在網域名稱後面加上DNOWBA-WP。

2、再把根目錄中是WP核心文件移到到 DNOWBA-WP裡頭，注意index.php與.htaccess這兩個檔案不要移動。

3、再來修改根目錄下的index.php，修改內容為
在文件裡找到 require('./wp-blog-header.php');把內容修改成 require('./DNOWBA-WP/wp-blog-header.php')

這個部分在WP官網也有說明文件
Giving WordPress Its Own Directory

若還是不懂可以看看以下影片教學

好了，寫完我才發現，不管是新舊，其實步驟是差不多的，不過若是舊配置的WP(已經做過發文或貼圖)，可能會遇到問題，以下提供解決方法：
(1) 連結失效：
舊文章或是圖片連結失效的問題，只要到後台的設定頁籤，選擇固定網址功能，重新按一次儲存變更，WP應該就會重新生成新的.htaccess了。

(2) 使用 Windows Live Writer 上傳發佈文章時報錯：
這個只需要更新一下wlw中該WordPress帳號的配置，不用改網址，只要按一下更新，wlw會自動識別後台的位址和文章發布地址(xmlrpc.php)

Wordpress 網址(URL)設定錯誤的解決方法

2013-01-29T00:55:00.001-08:00

現在的Wordpress，你知道的，儼然就是CMS了。所以有時候會分不清楚WordPress 網址和網誌位址。一不小心就設定錯誤。我是想要把WordPress的首頁弄成入口網，所以理論上來說，網誌應該就是指向申請的網域名稱下。WordPress 網址再另外以下一層目錄的方式處理。結果如下圖。但是這裡會碰到問題。

這會有什麼問題呢，請往下看？

你可能出現的錯誤畫面

好啦，一進主頁面，連結是在，問題是所有的CSS全跑掉了。

不過Login登入頁面是看的到的，關鍵就在於登入後的重新導向，一定會導錯

果不其然，出現了404錯誤訊息。這個時候想進後台，是天方夜譚。

解決方式

登入phpMyAdmin，選擇自己的WordPress 資料庫。

瀏覽wp_options資料表，編輯siteurl欄位的值value，改回來原設定就好了

重新再瀏覽一次首頁，還好沒出大事。這個時候很慶幸網頁系統參數設計已經到了資料庫時代而非傳統的純文字參數，修改變得比較簡單操作。

後記

除非你架完站以後還有其他的需求，不然我建議你不要去改Site URL和WordPress URL。直接照著上面的方式改回來就好了，不要再去想其他的問題。

而前面的設定其實理論上是沒錯的，我這麼希望能設定成這樣，是希望方便管理，比方說，我的www資料夾裡頭還有可能日後會存放其他的HTML文本或其他資料，甚至是要在一個站台下架設多個WordPress，一股腦兒把所有的文件放在根目錄下，如下圖是所有安裝完WordPress的所有核心資料文件，那麼就容易和站台裡的目前有的WordPress管理相關資料混在一起。

若是你和我一樣，希望能善加管理這些元件的話，最好就是徹底的處理。把WP下的程序文件移到別的地方，以便管理。

Dynamic Template Plugin for Windows Live Writer

2013-01-25T00:20:00.001-08:00

寫部落格的離線編輯器（Desktop Blog Editor）裡，個人還是衷愛Windows Live Writer，之前我寫部落格主因是想把我學的程式給紀錄下來，所以曾經發過一篇寫程式設計教學範例的三個好幫手歌頌Blogger和WLW的合作無間。

時至今日，WLW雖然好久好久沒有再更新軟體內容。但是也沒見市面上再有什麼新的部落格編輯器。我們還是冷飯熱炒一下，談談能再加快寫作速度的工具-wlw的插件。

記得以前曾經在codeplex.com 瘋狂的找好用的插件，不過你知道的，事實上真的用得到的、用得上手的Plugin很少，目前留在我的WLW Plugin裡只剩下三種，一是Windows Live Writer中插入高亮顯示程式碼的插件，一是用Windows Live Writer寫部落格-Picasa相簿外掛，這篇要為您介紹的是最後一種：Dynamic Template ，碩果僅存的幾個插件，真心的推薦給您。

上圖為插件的模樣，很不華麗，但是卻很實用，透過它，你可以自已DIY一些插件，堪稱插件中的插件啊，若是你不明白我在說什麼？繼續往下看一下實例你就會明白了。

先下載安裝

下載：Dynamic Template Plugin for Windows Live Writer
安裝方式就不多說了，安裝後，我們先來學習建立模板的步驟，再給幾個範例來學習學習。

DIY 自已的模板(範本)的方式

1、在WLW點選「插入」頁籤，在外掛程式區選擇「Dynamic Template」

2、在跳出的Insert Template視窗上，選擇「Edit Templates」

3、選擇「New」即可新增模板

4、在跳出的New Template訊息視窗上，為模板命名以便以後辨識，打好名稱按「OK」

5、跳出的Edit Template視窗即為編輯畫面，整個就是簡潔，分為上下二個區塊，上方設定「Template Variables」，可以新增變數，讓增加的模板多了彈性。下方區塊設定「Template Body」，是撰寫模板的位置。

以上為撰寫模板的基本方式，看完了後面的範例以後你會更明白。

範例 1：Plain HTML

這種是最簡單的，基本的方式，在寫部落格時，如果你有些文字是固定要在每篇文章中出現的，那麼可以建立一個模板，每次寫完文章就插入該模板就可以了。設定的方式簡述如下：

Name：Plower by Dnowba
Template Variables：不用設定
Template Body：輸入以下內容

<p>Powered by <a href="http://dnowba.blogspot.tw">DNOWBA</a></p>

以後每次要使用的時候，點插入就會生出來了(如下圖)

範例 2 ：HTML + Code

範例示範插入時間標記(timestamp)，你可以想像一下你是個記者，在參加某個演講活動，然後你要把演講內容的心得寫成報告，同時希望能鉅細靡遺的把活動段落的時間點也記下。設定的方式簡述如下：

Name：TimeStamp
Template Variables：不用設定
Template Body：輸入以下內容，整個就是C#的語言寫法

<%= DateTime.Now.ToString(“hh:mmtt”) %>

這個範例，說明你可以調用 C# 的程式碼，讓你的Template更靈活。

範例3：Using Selection

將某段文字反白，然後按下wlw上的上標按鈕，wlw會自動幫你把選取的文字嵌在HTML的元素裡，這是一般HTML編輯器將文本套用HTML格式的方式。現在透過Dynamic Template Plugin也可以製作類似的功能。

我舉個例子，在wlw裡有將文字加上刪除線的按鈕，沒錯吧！你可以試試後看HTML程式碼，套用的標籤應該是<strike>，問題是在HTML5裡，建議改用<del>，wlw軟體太久沒更新了，當然沒有這個語法。那麼我們就利用Dynamic Template Plugin自製一個吧。設定的方式簡述如下：

Name：Tag del
Template Variables：不用設定
Template Body：輸入以下內容，其中_selection，指的就是被選取文字內容

<del><%= _selection %></del>

下圖是使用結果，好吧，看起來<del>和<strike>的樣式是一樣的，我是龜毛點沒有錯啦，wlw不更新，還停在HTML4的時代，我們也只能這樣子自已搞才能追上HTML5。

範例4：Using Variable

上頭提到的方法都是比較死的，如果加上Variable變數的話就會靈活很多
我們就拿WLW裡現成的文字醒目色彩來舉例，自已也可以弄一個類似的插件。

Name：Highlight
Template Variables：
設定name為color、datatype為text、label為Input Highlight color name

Template Body：輸入以下內容，語法為<%= 變數名稱%>

<span style="background-color:<%= color %>"><%= _selection 
%></span>

下圖是實作後的結果，之前在設定時，label值就是對話視窗的提示文字，在文字方塊輸入值後，就會帶入變數中。

結語

Dynamic Template是一款強大的Windows Live Writer插件，你可以用模板的方式，建立常用的經常使用的文字甚至是HTML碼。在以後撰寫的時候就不用大費周章再重新打一次，只要一顆按鈕就可以叫出模版加以利用。

這個插件的作者是Joe Cheng (code@joecheng.com)，上頭的示範舉例部分也是來自於作者，有興趣的話可以去看看原作者介紹文件。後面我再放上幾個自已額外設計的範例供參考。

Download 其他的 Template

1、SyntaxHighlight：點選下載
自已寫的，這個是搭配Google的google-code-prettify作的，可以美化你的程式碼，不過前提是你要會在blogger上寫入相關的JavaScript和CSS

2、Abbreviation：點選下載
官網的，這個是指定一個縮寫文字，當滑鼠移過會出現縮寫全銜

3、HTMLize：點選下載
官網的，將選取文字編譯成HTML

4、Repeat：點選下載
官網的，重複某串文字n次

下載安裝說明：
請先確定你已經安裝過Dynamic Template Plugin for Windows Live Writer，下載後執行檔案會跳出以下視窗，可以修改Template名稱後再按下「Install」按鈕，這個Template就可以使用了。

為Blog加上Scroll To Top按鈕

2013-01-24T18:57:00.001-08:00

以前曾經利用浮動式廣告/工具列的功能，在部落格上作過類似的Back To Top (Scroll To Top)的按鈕，那時候是用CSS來製作，後來因為覺得不需要就拿掉了…那是2010年的事囉…不需要的原因很簡單，一來我的文章沒有這麼長到要用到回到上方的按鈕，滑鼠滾輪給他滾一滾還算可以，長一點的文章，其實也只要按鍵盤上的HOME就可以回到頁面的最頂端。Back To Top的Button是英雄無用武之地。

2013年的現在，我寫的文章愈來愈長，而平板電腦用戶愈來愈多，沒有滑鼠給他滾、沒有鍵盤給他HOME，總是要提供個按鈕給瀏覽者按，所以又重新做了一次。

這次當然還是用到超連結(不然哩)，CSS美化了一下，再利用JQUERY提供的現成的一些功能，製作了動態的回到上方按鈕(Dynamic Scroll To Top Button)，如下圖，右下角的「▲回到上方▲Scroll to Top」就是了。

重點在於「動態」：
如果瀏覽畫面一開始就在最上方，按鈕是不會出現的。
當瀏覽畫面到往下移動，按鈕會「浮現出來」而不是彈出來
再來是當按下按鈕時，畫面是「慢慢移動」到上方，而不是猛的跳到上面

怎麼完成呢？有興趣的話再往下看

CSS部分-按鈕的美化

<style type='text/css'>
#Dnow-ScrolltoTop {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px; 
   width:100px;
   background-color: #EEEEEE;
   background-color: rgba(238, 238, 238, 0.6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);
   text-align:center;
   padding:5px;
   position:fixed;
   bottom:10px;right:10px;
   cursor:pointer;
   color:#444;
   text-decoration:none;
   border:1px solid #C9C9C9;
}
</style>

JQUERY部分-讓按鈕變動態

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr(&quot;href&quot;);
    if ($(window).scrollTop() != &quot;0&quot;) {
        $(this).fadeIn(&quot;slow&quot;)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
$(function() {
    $(&quot;#Dnow-ScrolltoTop&quot;).scrollToTop();
});
</script>

HTML部分-在頁面上加上hyperlink

<a href='#' id='Dnow-ScrolltoTop' style='display:none;'>&#9650;回到上方&#9650;<br />Scroll to Top </a>

最後，佈置到Blogger上

為了顧及佈置到Blogger上的便利性，這次索性所有的功能都不用LINK的方式另外連結資源文件，全部都寫在一起。(如果是要把同樣樣式的Scroll To Top大量佈置到很多網頁的話，那麼用LINK的方式比較好處理)。至於Blogger上哪裡可以同時又放HTML、JavaScript、CSS呢？當然是在<body>裡啦。

編輯HTML的功能在Blogger的設計頁面中，二點要注意的：
1、編輯前勾選「展開小裝置範本」，以免寫在不該寫的地方
2、注意要放在</body>以前，避免網頁Render時因這支小咖程式碼卡住。

Excel VBA 標準體重計算

2012-12-23T23:24:00.000-08:00

d006d1 標準體重計算
在介紹程式內容前，我們要先理解一下這些和體重有關的公式(註：以下的體重單位為 kg、身高單位為 m)

身體質量指數(Body Mass Index，縮寫為BMI)：
BMI = 體重 ÷ (身高 × 身高)
標準體重算法1：
男性標準體重 = (身高 - 0.8) × 70
女性標準體重 = (身高 - 0.7) × 60
標準體重算法2：
男生標準體重 = (身高 × 身高) × 22 × ( 1 + 0.1 )
女生標準體重 = (身高 × 身高) × 22 × ( 1 + 0.05 )

像範例這類的簡易的公式套用，使用excel內建的函數是可以解決的。
早期我也是直接在儲存格上打一函數來計算。
像範例中有提到的BMI身體質量指數，直接在儲存格上使用函數就可以計算的出來。
不過如果講到便利性的話，還是用巨集的方式處理會比較好。
程式說明

列4：Public Function 身體質量指數(身高, 體重)
自訂一個名稱為「身體質量指數」的新函數，引數內容的名稱也是自訂
列5：身體質量指數 = 體重 / ((身高) ^ 2 / (100) ^ 2)
係依照BMI的計算公式而寫的，只要把引數套入公式就可以算出答案
列6：身體質量指數 = Round(身體質量指數, 2)
把已經算好的BMI再四捨五入，Round(身體質量指數, 2)即表示把答案四捨五入取概數到小數第2位。
列8~列15：
設計的內容是「標準體重」的計算，係依照上述的標準體重算法1來列出公式，最後取概數到小數第2位。
列16~列23：
設計的內容是「標準體重」的計算，係依照上述的標準體重算法2來列出公式，最後取概數到小數第2位。
列24~列26的函式：
設計的內容是「體重建議值」的計算，標準體重算法有二種，第1個算法來自於世界衛生組織，第2個算法來自本國，有鑑國人的飲食較好普遍較重，所以計算方式沒有WHO的這麼嚴苛，所以這裡就把這二個公式算出的標準體重做為參考建議值。
列25：標準體重建議值 = 標準體重1(身高, 性別) & "kg~" & 標準體重2(身高, 性別) & "kg"
這裡就用字串連接的方式把二個公式算出的標準體重合在一起。
因為函數是Public，所以可以互相調用。只要裡面的引數再拿出來用就可以了。

其他應用範例：評語及資料檢查

d006d2評語及資料檢查
上面的程式範例還只是個雛型，可以依照公式來做的程式其實就是依樣畫葫蘆，難度較小。但像本例，要自製評語及資料檢查就比較難了，尤其是資料驗證檢查的部分，檢查使用者的資料有沒有輸入齊全，這個是最煩人的步驟了。

程式說明

列31~列52：整個 if 判別式流程是：
先判斷有沒有輸入資料→如果有再判斷是不是大於0→如果有再去做級別的判斷並下評語。這個邏輯沒有錯，不過中間其實少一個驗證，就是判斷是不是數字。所以使用者輸入中文或英語的話，並不會看到錯誤評語。
整個流程非常的多，其實可以進一步的寫一個可以驗證的程序做為以後使用，當需要驗證的使用就調用這個驗證函式。
列37~列50：
整個select判斷句是很典型的分數級別的寫法。我記得好像數字是要由小寫到大，由大寫到小是判斷不出來的，不信你可以試試看。

Excel VBA 自製全誼成績系統之成績輸入表

2012-12-16T20:48:00.001-08:00

成績輸入流程

在使用全誼成績系統時，成績輸入不管是系統設定還是成績輸入，步驟都很繁瑣，這裡提供一個替代方案供解決：使用自製的excel表格來簡化老師使用的困難

1-1開始使用

開啟附件名為「成績表單」的excel檔案
本excel是用巨集寫成，所以開啟後請設定巨集安全性，
如何開啟請看(註1)
第一次使用，請先選取名稱為「設」的工作表，並按下「輸入身份證字號以產生成績輸入表單」按鈕
輸入身份證字號並按下確定後，系統會自動列出您授課的科目
若出現「找不到相應的授課資料」，請洽管理員
若資料正確，則系統會開始自動產生授課相關資訊，並產生各授課科目的成績工作表單，請老師務必檢查任課班級、節數是否正確

(這些資料是由全誼系統中篩選出來的，如果工作表上所列的節數與你目前上課的節數不符，會影響後續成績依節數加權試算的錯誤，請務必聯絡管理員以修改)
各班的成績工作表單係依據本校的成績相關評量要點處理，程式只會新增列出需納入學期成績的工作表單
各成績輸入表單概覽如下，系統也會自動列出學生名單，請老師也檢查學生名單是否正確
有關每位老師的授課科目、考試設定、平時成績、期中評量成績配重比例都由管理人員設定完成，若有設定上的疑問請再洽詢。

1-2 成績輸入工作表使用說明

成績輸入工作表大概可以分為五個區塊，各區塊說明如下：
黃色區塊：為學生的座號、姓名欄位，由系統直接登入，不需手動繕打
藍色區塊：為平時成績輸入區塊，使用者鍵入平時成績，程式會自動平均
紅色區塊：定期評量成績輸入區塊，使用者鍵入定期成績，程式自動計算
紫色區塊：為學期總成績，系統自動依比例計算
黑色區塊：顯示學生的名次、學習等第、努力程度

老師主要輸入的欄位只有平時成績、定期評量成績，其他的程式會算，以下簡單介紹輸入方式
平時成績輸入方式：
(1)本表是是橫式的紀錄表，欄紀錄單一學生每項成績，列紀錄每位學生的各項成績。

(2)平時成績依期程，分「第一次」及「第二次」，請依期程輸入平時成績

(3)評分項目，可自訂名稱

(4)每個評分項目都可以看到該項目的平均以為參考

(5)學生各項成績另可加權比重，比方說以下設定「習作的比重=1、考卷的比重=2、作文的比重=3」，以下圖為例，則該生的該平時成績平均則為：
(80×1+90×2+70×3)÷6=470÷6=78.3

加權比重可以讓老師評分更有彈性。
定期評量輸入方式
定期評量輸入方式大致和平時成績相仿，一樣可以設定加權數，定期評量的欄位這裡設計成每次二欄，若有多樣化評量方式也可利用。
輸入時注意，
學期分數說明
學期分數係依照學校相關成績評量要點處理，以本校來說，就是平時成績平均×60%+定期評量平均×40%。
學生的名次、學習等第、努力程度的參考
如下圖，系統會依總成績判定相關參數
你也可以手動更改努力程度

1-3 匯出成績至全誼系統

選取「設」工作表，按下「匯出成績表」按鈕
接著系統就會在目錄中新增一個名為「xx_xx成績匯出.xls」的檔案，這個系統自動生成的檔案就是要匯入全誼系統的檔案

注意：該excel表單內的工作表，即為您授課的全部科目，請務必在上傳前確定所有的工作表都已輸入完成
進入全誼系統，選擇教務處→成績管理
隨便選一個「學期成績」
在進入「學期成績」繕打畫面後，選擇「上傳」按鈕
此時出現對話視窗，請依指示匯入檔案
瀏覽剛剛匯出的檔案「xx_xx成績匯出.xls」後按確定即開始上傳
上傳後會呈現「上傳訊息」，若有上傳完不正確的問題，可以把這些訊息複製留存。

Excel VBA 基礎：宣告變數

2012-12-11T23:42:00.001-08:00

變數是執行程式時存放值的地方。變數可以在程式碼中自由使用，不過通常我們會在程式開頭就對程式內的變數先行「宣告」。如下範例

Dim myName
Dim myNickName As String
Dim myDate As Date
Dim myAge As Integer
Dim myHeight As Single, myWeight As Single

myName = "豬腦爸"
myNickName = "D NOW BA"
myDate = #11/19/1981#
myAge = 70
myHeight = 162.55
myWeight = 61.3

列1~列5 就是在宣告變數，列7~列12就是將變數賦值。完整宣告變數方式是：

Dim 變數名稱 As 資料型態

變數名稱可以自訂，沒有太大的限制，不過儘量不要和內建的函數、物件名稱重複，而變數名稱的命名也有人有制定參考標準，可參考
微軟建議的Visual Basic編碼慣例、Visual Basic命名慣例
http://dnowba.blogspot.tw/2011/10/visual-basicvisual-basic.html

資料型態，和微軟的SQL資料庫的定義方式大致上是相仿的，可以參考
資料型別
http://dnowba.blogspot.tw/2011/10/blog-post_18.html

如果像程式碼列1省略資料型態，那麼變數就是自由型態 (Variant) ，不過建議對於變數的值有明確的認知的話，最好還是指定資料型態。指定資料型態比較可以有效的利用記憶體空間。例如列4和列5，年齡、身高都是數字，不過年齡一般來說是整數，所以用只佔記憶2個位元組的integer；而身高、體重一般表示方式可能會有小數，就用佔8bytes的單精度浮點數Single。

要在1行內宣告2個以上的變數時
範例中，因為myHeight和myWeight 都要宣告資料型態為Single，所以可以寫成 Dim myHeight As Single, myWeight As Single，注意不可寫成
Dim myHeight , myWeight As Single，否則 myHeight 會被當成Variant

Excel VBA 基礎：程序

2012-12-11T22:34:00.001-08:00

程序 (procedure) 是 VBA 執行程式的單位。程序主要有 Sub 程序和 Function 程序和事件程序，以下分別簡述之

Sub 程序

在 Excel VBA 當中，通常是使用 Sub 程序來撰寫程式。如下，利用訊息方塊顯示目前的日期時間。

程序名稱的命名規則
範例中，我們可以使用中文名稱以辨識程序別，關於程序名稱的命名規則如下：(1) 第一個字不能使用數字 (2)不能使用空白字元 (3)不能使用如「!、@、$」等其他符號 (3)字元數不能超過255個半形字。

Function 程序

Function 程序是執行後，會傳回值的程序。常用在使用者定義的函數上。如下，根據出生年月日，計算年齡傳回結果。

事件程序

事件程序是指由某個動作引發而執行的程序，例如「按下按鈕」、「打開活頁簿」等動作，可以引發程式自動執行。除了工作表或活頁簿的事件程序以下，使用者定有表單(user form)也可以撰寫事件程序。如下，打開活頁簿時會出現訊息

事件名稱的命名規則
事件程序的名稱是以「物件_事件」方式命名，如上例 Workbook_Open 就是指當「活頁簿_打開」時引發的程序。名稱是不可以自已更改的，而大部分的事件預設名稱也都還算可以清楚辨識。

Excel VBA 基礎：物件階層、集合及成員

2012-12-11T01:00:00.001-08:00

Excel 的物件階層構造

zZnfk5owEMf/Gmd6D+cQQIRHsWf70plO7+F6j1GiMkZiY+zp/fUNkPAjAY9isPXh5rIkS/jsd3eJjpz5/vyFwsP2G4kQHtlWdB45n0e27VsW/5saLophQ+MoNwFhOMUROtZMjBDM4kPduCJJglasZlsTXHd2gBukGZ5XEOvWlzhiW7E52yvtX1G82crbAC/IrxzZRfqI0BqeMHvMTHZ++WyJBWL6RRkfYFLbwDsh+5qBomP8Xt/kOq4/7JLQCNHcJGDiONlVKTlPI2dOCWH5f/vzHOE0LBJ5vmzRcrWAQ1HCuiwQD/8b4pPY+uxwwPEKspgkGjdKTkmE0qVg5ITrGOM5wSR/IGeRfVI7SdhzjgL4fLyhMIr5fmpzPf4R90aUoXPr/ksqXKiI7BGjlzRcYv8Co9AokBp9K6UB5JxtRRaesEHBflN4LmHxfwSvZnaOxu6F0N2SkN1H4EpAttsGKHSMAAIqIf+OhFyNkEYGJdGMUvLGRwlJuDFE55j95ENrPBGjV8ENRbwSiKWEsi3ZkATip9IaIrzMXKXIuIhxakr4pjN/cvAqnGdbSX1eR8u3S050hWoJwyDdIFbRQWsAHkGLRJvACi/fScy3ULhwFQ+B4iHfn1hUTXbFj6oFe6I4yp9Kc5SFuXiyTpGf6LkRJxGPzc2ZEWbFw0TpULC67h0zw9P4dMmMj/VvVuyOLvZJM1PBcGoAzbSxrB63CLH/WD1FLt1DPX4f9XSXQDXe097xbqlBvsLN71bMetQgWXgrmOZbSA2oaD5fLIJgABU50zuqCOhFWpdRpeTIKqTXpdurTlVyedxamU0VZE2JZzUg69F4VbG6qovOnbdt0+Y7L9Bbyw+Y8AjcrPogSHVvQPUFRkkD3FP1en+5qvq2Rtv1tbVX4502ZIXXqRKbzIKLIt6/Vr0SZ9WPQdE3dUR+N0ueyI6fRrb365Qeq0MIx2d8LMcP4+IFozptuaxOyXKocnXGk2Y2sx9Ki6Yi9RycjivpZGUfmXpiWZqKR0bJDsmZmbwMdBql7epymQyVcdLvtYxr/2ZBpFcdSnZC9i2pr5vIOGpp1hPJbyDjmCADhiDjW4uFETKqaJrQTIZCYw+BxvNC20gLc/x/iEb/4ulqBxMwqmXG6tqW2gEE7lie8tVX+QHexNwAjKf126mlqWtXcgMldGCwttTpC7ChI2W7d42U4xqLVPGWLLftDhepfmchs5Hy7bEap4ayMtDZxpv0C5LqB6gH+t5B4sPyh5B8evlDlfP0Bw==

在Excel的VBA中，我們使用程式碼控制Workbook(活頁簿)、Worksheet(工作表)、Chart(圖表)，這些對象都是物件。在Excel裡，物件以Application為最上層，以下的物件都是階層性的設計，例如上圖中的程式：

Workbooks(“aa.xls”).Worksheets(“bb”).Range(“A1:A2”)
表示在「aa活頁簿」的「bb工作表」的「A1:A2儲存格」，透過階層性的設計物件就會非常清楚。

此外，在每個物件當中包含的成員(member)，有執行動作的方法(method)、取得或設定狀態的屬性(property)。

省略母物件
參照物件的上一層物件稱為母物件，
如果參照的工作表位在作用中的活頁簿，則程式只需輸入：
Worksheets(“bb”).Range(“A1:A2”)

如果參照的儲存格位在作用中的工作表，那麼程式又可以更簡化：
Range(“A1:A2”)

撰寫時依著參照位置的不同而可以有所省略以節省撰寫程式的時間，像最上層的Application通常情況下都是不用寫的。(excel內建所有的VBA都源自於Application)

集合和成員

相同稱類的聚集，稱為集合(Collection)。多個Worksheet的集合就是Worksheets，意即除了作用中的Worksheet，透過Worksheets集合還可以參照到其他的成員，如在一個Workbooks有多個Worksheet，要指定某個Worksheet，就可以透過像「Worksheets(“bb”)」的方式。

zZffb5swEMf/GkvbQ6MYBwKPDUu2l0mT+tD1kcYOsWrszDEt6V8/E5ufhjZak6yKFOGv4bj73PlsAIqz4rtMdtufAhMGvCkuAPoGPC+cTvV/KRx6QiopNhK0Qk4x2XckJQRTdNcV14JzslYdbSNY19guSYkj3K0T5qr3FKutdc4LGv0Hoem2eg0MIjOzV4fKBiabJGfq5ih5ZrqYmrmZvf1gx2H9Qt5x4FWIrCNIsqevXSc31HphyT0KiYnsSIzypzYltAQolkIoc5UVMWFlWirk5rHVyGztqyRcnfKADf45Ybl13YElRc4xKe+31p+JVKQYfWEThq4sIjKi5KHka2Z9G7ctKlhxeGlyiap7tq08etCKiaWV1qab8PSFjXA4WuREey/k035LiNo7cW8EV3cmo94MoEUqE0x1lLFgwuQQRVEcr1ZnoFKXg8USuVRgMEAlOAOUmVsCywhECxAGYOkD7UoYgnJ5oSLRGNaCMb2IqeD/ldj8fWDoQsD8N6roiyb1Jy9X7wI2l18dVANo4jiKzoKmrpRqjc1dOHXBteHMzgBnfhoc77PA8QYa0MXghKfBQZ8GzjUrJxroQ0HZe/TaLvsQArew1Ycykj3qvfSaeAK/Vzq+Q2d+ITjV7vfWRk04vpVSvOgRF1yLCx2XPPzW42k1eCgHE+s3wc5Rq4dC2xe5XJNOhlQiU6JavXAU2E2vS98gfxyFtfJLUO3CKPP+McD4Zx9qH3R6diAKJzBsftW2V/fInmcmSMfuMU91oKelDv5T6gqqjpmbaM/M8OF4BLtGVsPhrH6ogE84aY5TgC0E5wx0/uFA9bA5rZvqaL6m0PIv

Excel VBA 四捨六入五成雙的設計

2012-12-08T04:30:00.001-08:00

Excel VBA d005d1四捨六入

現在被廣泛使用的取概數規則，除了四捨五入以外，還有四捨六入五成雙規則。

四捨五入簡化規則中，因逢五就進，會造成結果的系統偏高，誤差偏大。因為它進位的「機率」高於捨棄，在統計學上會產生偏差，解釋如下：

取位位值是：1、2、3、4 →機率 4/9
取位位值是：5、6、7、8 、9→機率 5/9

如上面舉例，一個數字在四捨五入中，捨去的機率比進位還低，這樣子不大公平，所以後來有了四捨五入六成雙規則。所以我們如果要使用四捨六入五成雙的設計，就得自已設計一個，在設計之前，必須先了解這個數值規則，可以參考：http://zh.wikipedia.org/wiki/數值修約規則，我自已理解後，認為規則應該是：

一個數字，取概數到n位的話，那麼一樣是看(n-1)位的數字

1.如果數字是4以下則捨去，6以上則進位

2.如果是5，那麼：
   (1)如果5後面的有效數字中，有非0的數字，進位
   (2)如果5後面的有效數字中，都是0：
        a.如果5的前面是奇數，進位
        b.如果5的前面是偶數或是0，捨去

整個過程還是在對「進位」和「捨去」，不過規則上修改的比較複雜就是了，以下就把過程寫下來

程式碼如下

Public Function 四捨六入(數值1, 位值)
    Dim n, myroundup, myrounddown
    
    n = Right(Fix((數值1 * (10) ^ (位值 + 1))), 1)
    myroundup = Fix((數值1 * (10) ^ 位值) + 1) / (10) ^ 位值
    myrounddown = Fix((數值1 * (10) ^ 位值)) / (10) ^ 位值
    
   
    If n <= 4 Then
        四捨六入 = myrounddown
    End If
    If n >= 6 Then
        四捨六入 = myroundup
    End If
    If n = 5 Then
        If Int(數值1) = 數值1 Then
            四捨六入 = myroundup
        Else
            If Right(Fix((數值1 * (10) ^ 位值)), 1) = 0 Then
                四捨六入 = myrounddown
            Else
                If Right(Fix((數值1 * (10) ^ 位值)), 1) Mod 2 = 0 Then
                    四捨六入 = myrounddown
                Else
                    四捨六入 = myroundup
                End If
            End If
        End If
    End If
End Function

列1：Public Function 四捨六入(數值1, 位值)
我們是要使用「自訂函數」，方便在excel的儲存格上能套用，所以程序的型態是Function，函數的名稱和後面的引數都可以是中文
列4： n = Right(Fix((數值1 * (10) ^ (位值 + 1))), 1)
這列的功能是要取最後一位，判斷該位值的數值是多少。這裡我們就實際舉例來說明：
數值1是 3.1415926，取到小數第3位的位值
數值1 * (10) ^ (位值 + 1) = 3.1415926 * 10的4次方 = 31415.926。
Fix(31415.926) 就是把值去掉小數，所以等於31415
Right(31415,1)就是找出最右邊1位的值，所以等於5
列5：myroundup = Fix((數值1 * (10) ^ 位值) + 1) / (10) ^ 位值
列5的作用是自定義一個無條件進位的方法，這是一個蠻古老的方法了，這邊就不多說
列6：myrounddown = Fix((數值1 * (10) ^ 位值)) / (10) ^ 位值
列6的作用是自定義一個無條件捨去的方法
列9~列29：
這些巢狀的判別式，就是依照「四捨六入」的規則寫成，照著上面我提到的規則，邏輯上還算是蠻好推的。比較難的是要了解規則，建議要自已先舉一些例子，用「人腦」判斷四捨六入的結果，再去歸納一下，我這裡寫的就是我自已整理出來的邏輯，這裡的方法有點「笨」，每個人的邏輯力不同，所以這大段判別式也因人而異。

其他說明

函數的使用除了直接在儲存格上打以外，也可以在功能表中的「插入函數」中找到自已定義的函數。如下圖
這裡只是做「小數取概數」的示範，如果是要「整數以四捨六入取概數」，那麼還要另行設計喔，怎麼設計呢？如果你知道在fx中作四捨五入的round函式裡，如果是要某數取概數到百位，是要寫成 round (某數,-2)的話(如下圖)，那麼我們只要在目前的程式裡加些條件判斷就可以達到這個目的了。
這裡有一個地方要特別提一下，在自訂function函數時，我們使用了像right之類的函數，嚴格說起來，這個函數不是我們在excel應用程式上調用的那種fx，它是vbscript中的函數。如果可以調用的是fx，那麼我在上面要取無條件進入就可以使用roundup()、無條件捨去就可以直接拿rounddown來做了。(roundup、rounddown是可以在fx裡找的到的喔)
另外，四捨六入在VB6裡，其實已經有函數了，這個函數大家也不陌生，就是round，如下圖是我自已拿.NET測試的，這個round在excel裡還是四捨五入法吧。這也說明了excel為了顧及單機版本間的互通性，一些舊有的script都不敢亂動。所以此round非彼round

Excel VBA 自動流水號

2012-12-01T01:58:00.001-08:00

Excel VBA d001d1自動流水號

流水號的設計可以幫使用者解決一堆工作的資料排序問題，例如：通訊錄資料、學生成績名次、會議座次編號。如本例的採購表單，使用者使用巨集可以快速在所需要的欄位上自動填加流水號。

從錄製巨集開始

操作步驟如影片

我們的重點在要錄製參數輸入的視窗，得到呼叫該功能的指令及可使用的參數值。並利用錄製到的程式碼加以修改。

錄製後的程式碼如下

Sub r001r1自動流水號()
'
' r001r1自動流水號 巨集
'

'
    Selection.DataSeries Rowcol:=xlColumns, Type:=xlLinear, Date:=xlDay, _
        Step:=1, Stop:=14, Trend:=False
End Sub

列1：Sub 為宣告程式的開始，d001d1自動流水號()是程式的名稱。

列2：單引號( ' )之後的內容為註解，通常說明某一行指令的用途。

列7： Selection.DataSeries Rowcol:=xlColumns 中，Selection.DataSeries是使用「填滿數列」功能的指令， Rowcol是屬性，表示使用者可以填滿的方向，其值可以是xlColumns(欄)或是xlRows(列)。

其他的屬性及屬性值其實比對一下就知道了。這裡不贅述。

開始修改程式碼

Sub d001d1自動流水號()
'
' d001d1自動流水號 巨集
'

'
ActiveCell.Value = 1
    Selection.DataSeries Rowcol:=xlColumns, Type:=xlLinear, Date:=xlDay, _
        Step:=1, Stop:=InputBox("請輸入流水號的終止值"), Trend:=False
End Sub

列16：ActiveCell.Value = 1表示把目前選定的儲存格填入數值1

列18：InputBox("請輸入流水號的終止值") 表示顯示一個對話視窗，等待使用者輸入訊息內容。
有關 InputBox的函數引數說明，請參考
InputBox Method [Excel 2007 Developer Reference]‎

其他應用範例：班級座位表

Excel VBA d001d2奇偶數流水號

學校班級的座號編碼，想要以奇數或是偶數來安排，就可以設計奇、偶數數列的流水號巨集。

程式碼如下

Sub d001d2自動編號奇數()
    ActiveCell.Value = 1
        Selection.DataSeries Rowcol:=xlColumns, Type:=xlLinear, Date:=xlDay, _
        Step:=2, Stop:=InputBox("請輸入尾數(奇數)"), Trend:=False
End Sub
Sub d001d2自動編號偶數()
    ActiveCell.Value = 2
        Selection.DataSeries Rowcol:=xlColumns, Type:=xlLinear, Date:=xlDay, _
        Step:=2, Stop:=InputBox("請輸入尾數(偶數)"), Trend:=False
End Sub

模組中以二個程序「自動編號奇數」和「自動編號偶數」組合而成。注意列24、列29的地方是用step:=2，意即每次累加2的方式來自動編號

其他應用範例：接續編號

Excel VBA d001d3接續編號

範例中的財產報廢表號，要讓流水號接續上一個序號，巨集是以第一個儲存格當起始值，數列接續編號到指定的數量

程式碼如下

Sub d001d3接續編號()
        Selection.DataSeries Rowcol:=xlColumns, Type:=xlLinear, Date:=xlDay, _
        Step:=1, Stop:=InputBox("請輸入接續編號量") + ActiveCell.Value, Trend:=False
End Sub

列33中是和上面範例較為不同之處

HTML Tag

2012-10-01T19:45:00.000-07:00

定義及用法 Definition and Usage

當文本內容中有需要特別標記的文字時，特別是文體上的區別，使用標籤，例如拼寫錯誤的單詞(misspelled words)，或是可以代表中文標點符號的專名號(或稱私名號)。

使用技巧及注意事項 Tips and Notes

在HTML5以前，代表的是 underlined text ，需要畫底線的文字，就可以使用。不過HTML5重視語義甚於格式，所以建議使用者，不是想畫底線的文字都要用，在HTML5代表的不只是格式，只有像上面定義的情況，才使用。

另外，在預設樣式上，加了底線的文字很容易和 hyperlinks 標記混在一起，造成識讀上的阻礙。所以底線要慎用。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

牛郎星在銀河之東，織女星在銀河之西。<br /> 
神話中<u>牛郎</u>、<u>織女</u>因勤奮工作被天帝許配為夫妻，<br /> 
但<u>織女</u>嫁給<u>牛郎</u>後，就荒廢紡織工作，天帝大怒，<br /> 
令他們分居在銀河兩岸，每年七夕才能渡河一會。  <br /> 
以上資料來自：<a href="#">神話故事網</a>

Demo結果如下

牛郎星在銀河之東，織女星在銀河之西。
神話中牛郎、織女因勤奮工作被天帝許配為夫妻，
但織女嫁給牛郎後，就荒廢了紡織工作，天帝大怒，
令他們分居在銀河兩岸，每年七夕才能渡河一會。
以上資料來自：神話故事網

上面範例特別用了中文標點符號的專名號來說明，定義中的底線和超連結的底線是不是容易搞混就自由心證了。

HTML <var> Tag

2012-10-01T19:08:00.000-07:00

定義及用法 Definition and Usage

當文字是屬於variable，則可使用<var>，瀏覽器會呈現其預設的樣式。像是寫一些數學表達式(mathematical expression)、程式(programming context)，在網頁上要清楚呈現哪些是變數的話，就可以加上<var>。另外像常數的ID、功能參數…等也可以使用，讓瀏覽者更容易識別。

技巧及備註 Tips and Notes

像這類著重在以文字樣式區別字義的HTML標籤，叫 phrase tags ，除了<var>以外，還有<dfn><code><samp><kbd>。HTML的瀏覽器為這些標籤都預先設定了簡單的樣式，當然如果要更有效果的話，還是透過CSS再加以設定。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

<p> 
若假設5元硬幣為 X 枚，1元為 甲 枚，則：<br /> 
有5元與1元的硬幣共18枚，可列得二元一次方程式： <var>X</var> ＋ <var>甲</var> ＝18。 
</p>

Demo結果如下

若假設5元硬幣為 X 枚，1元為甲枚，則：
有5元與1元的硬幣共18枚，可列得二元一次方程式： X ＋ 甲 ＝18。

範例 1 ，X和甲是變數，所以在列式時，加上了<var>，加上後的樣式其實就是在CSS裡用Tag Selection把有<var>標籤的字體給設定成斜體 (font-style: italic)，在辨識上是有一些些的效果。

不過，若是我們在網頁上是要呈現大量的程式碼，要針對一個個的變數來設定<var>標籤太不明智了，通常使用量大的話，我們會使用高亮程式碼(SyntaxHighlighter)，數學方程式也是一樣的，若是要在HTML上顯示大量的數學方程式，那麼最好的做法還是使用數學置標語言（Mathematical Markup Language，MathML），以下舉例說明。

範例 2 example：

<figure> 
  <math>
     <mi>a</mi>
     <mo>=</mo>
 	<msqrt>
       <msup>
         <mi>b</mi>
         <mn>2</mn>
       </msup>
         <mi>+</mi>
       <msup>
         <mi>c</mi>
         <mn>2</mn>
       </msup>
      </msqrt>
   </math>
   <figcaption>
     Using Pythagoras' theorem to solve for the hypotenuse _
     <var>a</var> of a triangle with sides <var>b</var> _
     and <var>c</var> 
   </figcaption>
</figure>

Demo結果如下

a = \sqrt{b^{2} + c^{2}}

Using Pythagoras' theorem to solve for the hypotenuse a of a triangle with sides b and c

範例中，畢式定理的方程式，裡頭雖然用了變數，但是並沒有加上<var>，若是刻意加上，那麼程式碼上面反而更加紊亂的。而在方程式說明的地方(<figcaption>標籤內)，才加上了<var>來突顯變數的地位。

HTML Tag

2012-10-01T15:30:00.001-07:00

定義及用法 Definition and Usage

在字體樣式上，定義的就是文本中需呈現較小文體的文字 (smaller text)。
在文義上，定義的則是文本中一些偏離主題的文字敘述 ( side comments )。
在用法上，常使用在一些免責聲明 ( disclaimers )、注意事項 ( caveats )、法律限制 ( legal restrictions )、版權宣告 ( copyrights )等。

使用技巧及注意事項 Tips and Notes

small 元素的相對元素是 <big>，不過 big 元素在HTML5裡已經不支援了，原因很簡單，因為 big 真的只是為「樣式」設計的標籤（font-style tags），這類的標籤現在都建議改用CSS設計。small 在HTML5 沒有被刪掉，主因在它還有文義上的功能 (如上面定義)，可能是制定規範者不知道要怎麼為這個種類的標籤命名，所以暫切不更動，但使用者一定要注意的是，small 元素不只是把字體 small 而已。

small 元素常常被拿來和定義重要文字的 或是定義強調文字的做比較。因此容易讓人搞混，認為small就是定義一些不重要的、可以被忽視的文字。所以使用時一定要注意，在語言層級上，和主題一般敘述文字的程度是一樣的。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

<p>DNOWBA 豬腦爸-力行豬腦哲學的資訊部落格</p>
<p><small>Copyright 1999-2050 by d.now.ba</small></p>

Demo結果如下

DNOWBA 豬腦爸-力行豬腦哲學的資訊部落格

上面是很典型的版權宣告，通常就是用來處理。字體雖然變小了，但二個段落的文字敘述的重要程度是一樣的。

範例 2 example：

<dl>
 <dt>單人房
 <dd>1999NT$ <small>含早餐，已含5%營業稅</small>
 <dt>雙人房
 <dd>2999NT$ <small>含早餐，已含5%營業稅</small> 
</dl>

Demo結果如下

單人房: 1999NT$ 含早餐，已含5%營業稅
雙人房: 2999NT$ 含早餐，已含5%營業稅

範例中，主題是說明飯店的房價，其他附加服務、是否含稅等不算是主題，但是也蠻重要的 (這種文字稱之為 short runs of text，不知道怎麼翻譯比較適合 )，就可以用<samll>來標記。

範例 3 example：

「Google Drive」服務（中文為 Google 雲端硬碟）。 
Google Drive 本質上與其他雲端儲存服務（如 Dropbox）類似，
不過挾帶著Google各項服務，影片、照片、網誌、文件，
包山包海的情形讓Google Drive勢如破竹。 
<small>不過google的強大也是靠我們這些社群用戶，
沒有人用的facebook網頁畫面真是殘不忍睹</small>

Demo結果如下

「Google Drive」服務（中文為 Google 雲端硬碟）。 Google Drive 本質上與其他雲端儲存服務（如 Dropbox）類似，不過挾帶著Google各項服務，影片、照片、網誌、文件，包山包海的情形讓Google Drive勢如破竹。不過google的強大也是靠我們這些社群用戶，沒有人用的facebook網頁畫面真是殘不忍睹

範例中，主題是介紹「Google Drive」服務的特點。當中挾帶著自已的感想，有點像是murmur碎碎念。所以這類離題的內容(side comments)，可以用來標記，此外，範例中的有括號的文字「中文為 Google 雲端硬碟、如 Dropbox」都算是附註說明，和主題內容是有關係的，並不算是一種碎碎念，而括號本身在符號意義上就有附帶一提的意味。從這個範例你可以比較能分辨「附註說明」和「碎碎念」的差別。

範例 4 example：

以下為安裝JAVA教學 
<small><strong>安裝時請關閉防火牆</strong>，以免安裝程序失敗</small>

Demo結果如下

以下為安裝JAVA教學 安裝時請關閉防火牆，以免安裝程序失敗

這個範例說明，標記的文本內容，不代表他不重要，甚至於你覺得很重要的，還可以加上標籤

範例 5 example：

<aside>
 <h4>Example Corp</h4>
 <p>This company mostly creates small software and Web sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a href="../about.html">example.com</a>
 home page.</small></p> 
</aside>

Demo結果如下

這個範例中，Example Corp的介紹並不是這份網頁文件的主軸，所以用<aside>來標記，不過相對的，Example Corp的介紹內容是這個<aside>下的主要內容。範例中我們可以學習到，<aside>不等同於，<aside>區塊中的內容本身就有一個主題，而當主題下有比較離題的、和主題無關的，就可以用來標記。當一篇文章的一段，甚至於二段以上的段落內容都偏離主題的時候，其實它本身就是一個主體了，所以並不適合寫成......的形式，這個範例下，也不適合寫成<aside>......</aside>的形式。

HTML <strike> Tag

2012-10-01T15:30:00.000-07:00

定義及用法 Definition and Usage

注意：HTML5不再支援<strike>標籤

樣式上，需要加刪除線的文字可用<strike>，HTML5建議改用<del>元素

範例 Examples

範例 1 example：

<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

Demo結果如下

Version 2.0 is ~~not yet available!~~ now available!

範例中的文章，敘述了某軟體版本的更新「歷程」，為刪除的字加上刪除線是很適當的。HTML5中廢棄了<stike>這個元素，改用<del>來取代，因為 strike 代表的是樣式、視覺上的名稱，改名為 del 更可以讓語義上更健全。以下是改用成<del>的範例。

範例 2 example：

<p>Version 2.0 is <del>not yet available!</del> 
<ins datetime="2012-10-01">now available!<ins></p>

Demo結果如下

Version 2.0 is ~~not yet available!~~ now available!

HTML <ins> Tag

2012-10-01T15:10:00.000-07:00

定義及用法 Definition and Usage

當文本中的部份文字因為「更新」或「修改」，要從文件中插入一些新的內容，但又希望保留原先的篇幅，就可以用 ins 元素。

使用技巧及注意事項 Tips and Notes

使用時可搭配 <del> 元素，<del>用來刪除過時的文字，而<ins>則用來標記新加入的內容。

可使用的屬性 Attributes

屬性 Attribute	值 Value	描述 Description
cite	URL	新增內容的原因是什麼？可以用用cite屬性來指定一個網路文件作為原因說明。 Specifies a URL to a document that explains the reason why the text was inserted/changed
datetime	YYYY-MM-DDThh:mm:ssTZD	文字被新增的日期甚至是時間，可以用datetime屬性來附帶說明。 Specifies the date and time when the text was inserted/changed

以上為<ins>專有的屬性，點選該屬性會連結到該範例。除了特有屬性外，<ins>還
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Demo結果如下

My favorite color is ~~blue~~ red!

範例 1 說明 <ins>常和<ins>元素合用，通常在各瀏覽器的樣式設定，ins 元素是在文字中間用橫線，一般稱之為刪除線，而 ins 元素則是以底線表示。

HTML <ins> 的 cite 屬性使用方式

語法 Syntax：

 <ins cite="URL">

屬性值 Value	屬性值描述 Description
URL	指定一網路文件以解釋被標記文字被新增的原因。URL可以是絕對路徑(absolute URL)或是相對路徑(relative URL)

cite 屬性使用範例A example：

<p>This is a text. 
<ins cite="why_inserted.htm">This is an inserted text.</ins></p>

Demo結果如下

This is a text. This is an inserted text.

範例結果可以看到，HTML文件並不會顯示 cite屬性所指定的連結，文章讀者是連結不到這個訊息的，只有文章作者自已可以透過後台查到，cite屬性的意義就是這樣，並非提供訊息給讀者，而是讓作者方便自已註釋。

HTML <ins> 的 datetime 屬性使用方式

語法 Syntax：

<ins datetime="YYYY-MM-DDThh:mm:ssTZD">

屬性值 Value	屬性值描述 Description
YYYY-MM-DDThh:mm:ssTZD	格式詳見Date and Time Formats (ISO 8601)

datetime 屬性使用範例A example：

<p>我喜歡吃水果。</p>
<aside> 蘋果酸酸甜甜的滋味是我的最愛。 
  <ins datetime="2007-12-19 00:00Z">葡萄柚也是。</ins> 
</aside>

Demo結果如下

我喜歡吃水果。

範例A除了說明datetime的使用時機外，另外再提個重點，<aside>和<ins>都算是文章上附加的內容，<aside>的附加是為了補充文章上的不足，<ins>的附加是因為文章因某種緣故的修改更新，二個是不大一樣的性質。

HTML <del> Tag

2012-10-01T15:00:00.000-07:00

定義及用法 Definition and Usage

當文本中的部份文字因為「更新」或「修改」，要從文件內容中剔除，但又有其文字保留之價值時，就可以用 del 元素。

使用技巧及注意事項 Tips and Notes

使用時可搭配 <ins> 元素，<del>用來刪除過時的文字，而<ins>則用來標記新加入的內容。

可使用的屬性 Attributes

屬性 Attribute	值 Value	描述 Description
cite	URL	文字被刪除的原因是什麼？可以用用cite屬性來指定一個網路文件作為原因說明。 Specifies a URL to a document that explains the reason why the text was deleted
datetime	YYYY-MM-DDThh:mm:ssTZD	文字被刪除的時間日期，可以用datetime屬性來附帶說明。 Specifies the date and time of when the text was deleted

以上為<del>專有的屬性，點選該屬性會連結到該範例。除了特有屬性外，<del>還
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

球類有羽毛球、桌球、躲避球等……種類<del>成千上萬</del><ins>五花八門</ins>

Demo結果如下

球類有羽毛球、桌球、躲避球等……種類~~成千上萬~~五花八門

範例 1 我舉了一個修改文章修辭的例子，比方說老師透過網路批閱學生文章，建議修改的地方不需直接刪掉，而保留作者原來的文字才會很好作比較，這個時候用<del>元素而不是用按鍵的delete是再合適不過的了。此外範例中也可以看到，<del>常和<ins>元素合用，通常在各瀏覽器的樣式設定，del 元素是在文字中間用橫線，一般稱之為刪除線，而 ins 元素則是以底線表示。

HTML <del> 的 cite 屬性使用方式

語法 Syntax：

 <del cite="URL">

屬性值 Value	屬性值描述 Description
URL	指定一網路文件以解釋被標記文字被刪除的原因。URL可以是絕對路徑(absolute URL)或是相對路徑(relative URL)

cite 屬性使用範例A example：

目前比較棒的免費空間有：Dropbox、MediaFire、GoogleDrive、 <br />
<del cite:"SOPA法案與Mega關站事件.htm">MegaUpload</del>

Demo結果如下

目前比較棒的免費空間有：Dropbox、MediaFire、GoogleDrive、
~~MegaUpload~~

範例中，我舉出一些網站免空freespace，但你知道的，這些網站服務總是會突如其然的關閉，我們可以先加上 del 元素不要直接刪除了，說不定哪天他又復活了，到時候再加上 ins 元素更新資料，整個就會很完整。

HTML <del> 的 datetime 屬性使用方式

語法 Syntax：

<del datetime="YYYY-MM-DDThh:mm:ssTZD">

屬性值 Value	屬性值描述 Description
YYYY-MM-DDThh:mm:ssTZD	格式詳見Date and Time Formats (ISO 8601)

datetime 屬性使用範例A example：

要做的事<br />
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2012-10-11T01:25-07:00">Watch lectures</del></li>
 <li><del datetime="2012-10-10T23:38-07:00">Download tracks</del></li>
 <li>Buy a printer</li> </ul>

Demo結果如下

要做的事

Empty the dishwasher
~~Watch lectures~~
~~Download tracks~~
Buy a printer

範例A是以一個工作清單為例，清單中列出要做的事有哪些，已經完成就刪掉，當然文字還是留著以備忘是最好的，所以用<del>元素，加datetime屬性，則可註記上完成的時間。

HTML <samp> Tag

2012-10-01T14:00:00.000-07:00

定義及用法 Definition and Usage

samp 元素可以用來展示程式 ( program ) 或計算機 ( computing system ) 輸出的結果 ( sample)。

使用技巧及注意事項 Tips and Notes

和 samp元素相關的有 <pre> 以及 <kbd> ，<pre>用來表示程式碼、<kdb>表示使用者輸入的內容、<samp>表示程式運算後的結果。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

使用Windows命令列工具Ipconfig控制網路連線
<pre><samp><span class="prompt">C:\Users\dnow></span> <kbd>ipconfig /all</kbd>
Windows IP 設定

   主機名稱 . . . . . . . . . . . . .: dnowba-PC
   主要 DNS 尾碼  . . . . . . . . . .:
   節點類型 . . . . . . . . . . . . .: 混合式
   IP 路由啟用 . . . . . . . . . . . : 否
   WINS Proxy 啟用 . . . . . . . . . : 否

乙太網路卡 Local Area Connection:

   連線特定 DNS 尾碼 . . . . . . . . :
   描述 . . . . . . . . . . . . . . .: D-Link Gigabit Ethernet Adapter
   實體位址 . . . . . . . . . . . . .: 14-F6-4D-1D-4B-A9
   DHCP 已啟用 . . . . . . . . . . . : 是
   DNS 伺服器 . . . . . . . . . . . .: 192.168.0.1
   NetBIOS over Tcpip . . . . . . . .: 啟用
<span class="prompt">C:\Users\dnow></span> <span class="cursor">_</span></samp></pre>

Demo結果如下

使用Windows命令列工具Ipconfig控制網路連線

C:\Users\dnow> ipconfig /all
Windows IP 設定

   主機名稱 . . . . . . . . . . . . .: dnowba-PC
   主要 DNS 尾碼  . . . . . . . . . .:
   節點類型 . . . . . . . . . . . . .: 混合式
   IP 路由啟用 . . . . . . . . . . . : 否
   WINS Proxy 啟用 . . . . . . . . . : 否

乙太網路卡 Local Area Connection:

   連線特定 DNS 尾碼 . . . . . . . . :
   描述 . . . . . . . . . . . . . . .: D-Link Gigabit Ethernet Adapter
   實體位址 . . . . . . . . . . . . .: 14-F6-4D-1D-4B-A9
   DHCP 已啟用 . . . . . . . . . . . : 是
   DNS 伺服器 . . . . . . . . . . . .: 192.168.0.1
   NetBIOS over Tcpip . . . . . . . .: 啟用

C:\Users\dnow> _

範例中用windows的命令提示工具(Command Prompt)作示例，表示當使用者輸入了 ipconfig /all 後，windows會依指令 print 出結果，輸出的結果部分，就用<samp>來標記。

範例 2 example：

<p>我在瀏覽Dnow網站介紹HTML的網頁時，傳回
<samp>We are sorry, the page you requested cannot be found.</samp>
的訊息，不知道新的網頁名稱是什麼？該不會移除頁面了吧</p>

Demo結果如下

我在瀏覽Dnow網站介紹HTML的網頁時，傳回 We are sorry, the page you requested cannot be found. 的訊息，不知道新的網頁名稱是什麼？該不會移除頁面了吧

範例 2 則是把瀏覽網頁的錯誤訊息，片段的摘錄寫在文章中。

HTML Tag

2012-10-01T13:30:00.000-07:00

定義及用法 Definition and Usage

當文本中需要使用下標文字 ( suberscript text ) 時使用標籤，被標記的內容會在文字基線下方建立小型的字母，例如化學式的表示。

使用技巧及注意事項 Tips and Notes

標籤在使用時還是要注意，不能只是單純的為了格式上的樣式使用(當然像LaTeX這種排版、文字美工軟體，就可以為所欲為的調整文字的基準線)，HTML5裡還是強調一個重點，所有格式類的標記目的不是樣式，而是要區別文義。

另外可參考和標籤有同樣意義的標籤。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

澄清石灰水加入二氧化碳產生碳酸鈣和水，化學式為<br /> 
Ca(OH)<sub>2</sub>+CO<sub>2</sub>=CaCO<sub>3</sub>+H<sub>2</sub>O

Demo結果如下

澄清石灰水加入二氧化碳產生碳酸鈣和水，化學式為
Ca(OH)₂+CO₂=CaCO₃+H₂O

範例 1 中，化學式元素的原子數就是以下標做為標記符號

範例 2 example：

<p>The coordinate of the <var>i</var>th point is 
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>). 
For example, the 10th point has coordinate 
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

Demo結果如下

The coordinate of the ith point is (x_i, y_i). For example, the 10th point has coordinate (x₁₀, y₁₀).

範例 2 中，數範例 2 中，數學式定義變數的部分也可使用標籤。在數學式中，樣式上會有許多上標、下標的文字樣式，比較建議的用法是使用MathML 來紀錄。

HTML Tag

2012-10-01T13:00:00.000-07:00

定義及用法 Definition and Usage

當文本中需要使用上標文字 ( superscript text ) 時使用標籤，被標記的內容會在文字基線上方建立小型的字母，例如對某文字的註釋。

使用技巧及注意事項 Tips and Notes

標籤在使用時還是要注意，不能只是單純的為了格式上的樣式使用(當然像LaTeX這種排版、文字美工軟體，就可以為所欲為的調整文字的基準線)，HTML5裡還是強調一個重點，所有格式類的標記目的不是樣式，而是要區別文義。

另外可參考和標籤有同樣意義的標籤。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

<p>The most beautiful women are 
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and 
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

Demo結果如下

The most beautiful women are M^lle Gwendoline and M^me Denise.

範例 1 中，說明了在某些語言體例(typographical conventions)中，縮寫是上標樣式。

範例 2 example：

透過點數，以分計費，每分鐘新台幣2.5元<sup>[1]</sup>，用多少算多少。<br /> 
無須額外申請帳號密碼，更無須支付任何日租或月租費用。<br /> 
註1：您可隨時透過紀錄視窗，看到您已使用的時數，以及已被扣取的點數。

Demo結果如下

透過點數，以分計費，每分鐘新台幣2.5元^[1]，用多少算多少。
無須額外申請帳號密碼，更無須支付任何日租或月租費用。
註1：您可隨時透過紀錄視窗，看到您已使用的時數，以及已被扣取的點數。

範例 2 中，說明上標的使用時機可以用在註腳 ( footnotes )上。

HTML <time> Tag

2012-10-01T11:00:00.000-07:00

定義及用法 Definition and Usage

當文本內容是時間或是日期的時候，加上<time>標籤，雖然樣式上沒有什麼變化，但透過制定的時間日期格式，有助於搜尋引擎或其他的程式資源解譯並加以有效利用。

使用技巧及注意事項 Tips and Notes

可以是時間(24小時制)，或是日期(西元曆)的格式。

可使用的屬性 Attributes

屬性 Attribute	值 Value	描述 Description
datetime	datetime	Gives the date/time being specified. Otherwise, the date/time is given by the element's contents

以上為<time>專有屬性，點選該屬性會連結到範例。除了特有屬性外，<time>還
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

<p>We open at <time>10:00</time> every morning.</p> 
<p>We close at <time>19:00</time> every night.</p>

Demo結果如下

We open at 10:00 every morning.

We close at 19:00 every night.

範例 1將時間加上了<time>標籤，注意格式上的要求，time中規定只能用24小時制而不能用am、pm。這是簡單的範例，有興趣的話，以下範例2列出更多格式的表示方法

範例 2 example：

表示某月份的方式 <time>2011-11</time>
表示某日期的方式 <time>2011-11-12</time> 
每年的某日的方式 <time>11-12</time> 
表示 時 分的方式 <time>14:54</time>
表示時分秒的方式 <time>14:54:39</time>
表示時分秒的方式 <time>14:54:39.929</time>
表示 時區 的方式 <time>-0800</time>
表示 時區 的方式 <time>-08:00</time>
表示 週   的方式 <time>2011-W46</time>
表示連續時間方式 <time>4h 18m 3s</time>

HTML <time> 的 datetime 屬性使用方式

語法 Syntax：

<time datetime="YYYY-MM-DDThh:mm:ssTZD">

屬性值 Value	屬性值描述 Description
YYYY-MM-DDThh:mm:ssTZD	以下是每個屬性值中，每個組件的說明： YYYY - year (e.g. 2011) MM - month (e.g. 01 for January) DD - day of the month (e.g. 08) T - a required separator if time is also specified hh - hour (e.g. 22 for 10.00pm) mm - minutes (e.g. 55) ss - seconds (e.g. 03) TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)

datetime 屬性使用範例A example：

<p>
I have a date on <time datetime="2012-02-14">Valentines day</time>.
</p> 
<p>我在 <time datetime="02-14">情人節</time>有個約會。</p>

Demo結果如下

I have a date on Valentines day.

我在情人節有個約會。

範例的結果裡，不會把時間給render出來，底下舉出的例子也是一樣，寫出datetime屬性值的目的只是為了方便機器識讀。另外，範例A中第一句的datetime值(2012-02-14)和第二句datetime值(02-14)，在意義上也不同，第一句單指某一年的情人節，而第二句則是每年的情人節。

datetime 屬性使用範例B example：

<span class="summary">豬腦學HTML研討會</span>: 
<time class="dtstart" datetime="2012-10-18">October 18</time> - 
<time class="dtend" datetime="2012-10-21">21</time>

Demo結果如下

豬腦學HTML研討會: October 18 - 21

範例B的結果裡，不會把時間給render出來，這類的用途大多是拿來做行事曆等互動網頁設計，才會用到這個屬性。下面的範例C也是同樣的意思。

datetime 屬性使用範例C example：

Today is <time datetime="2011-11-12">Tuesday</time>. 
Next meeting is at <time datetime="2011-11-12 15:00-08:00">3pm</time>.

Demo結果如下

Today is Tuesday. Next meeting is at 3pm.

HTML <tt> Tag

2012-10-01T05:00:00.000-07:00

定義及用法 Definition and Usage

注意：HTML5不再支援<tt>標籤

當要輸出像 teletype text 那樣的「等字距」文字時，使用<tt>標籤

使用技巧及注意事項 Tips and Notes

HTML5裡廢棄了<tt>標籤，建議使用CSS的方法去設定就可以了。範例裡頭我再詳細說明

範例 Examples

範例 1 example：

<p><tt>This text is teletype text.</tt></p>
<p>This text is not teletype text.</p>

Demo結果如下

This text is teletype text. 這是電傳文字樣式,有差別嗎?

This text is not teletype text. 這不是電傳文字樣式,有差別嗎?

範例 1 中，第一行文字用了<tt>，和第二行比較起來，第一行文字中的每個符號都是等距寬 (monospaced )的，尤其是標點符號、空格這二個很明顯。這種需求多半是針對為了輸出列印，很講究排版的人所制定的。

HTML5中，棄置了這種單純調整樣式的標籤，樣式統一交給CSS來設定。所以若是習慣使用<tt>的人，要改成以下的方式來處理。

範例 2 example：

<style type="text/css">
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
p.monospace{font-family:"Courier New","Lucida Console",Monospace}
</style>
<p class="serif">Text shown in the TimesNewRoman font.</p>
<p class="sansserif">Text shown in the Arial font.</p>
<p class="monospace">Text shown in the Courier New font.</p>

Demo結果如下

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

This is a paragraph, shown in the Courier New font.

範例二就是CSS設定font-family的方式

HTML Tag

2012-10-01T04:30:00.000-07:00

定義及用法 Definition and Usage

標籤定義了字元自動換行( line-break )的時機。

技巧及備註 Tips and Notes

當一個字太長的時候，瀏覽器會因解析寬度的不同，在不同的字句中斷行，若是你擔心這樣會影響排版，或是讓文字顯示不正常，那麼就可以適時的加入來控制換行時機。目前除了IE不支援，其他的瀏覽器都可以使用元素。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

<p> 
To learn Asynchronous JavaScript And XML, you have to _
be familiar with the XML<wbr>Http<wbr>Request Object. </p>
<p> 
To learn Asynchronous JavaScript And XML, you have to _
be familiar with the XMLHttpRequest Object. </p>

Demo結果如下

To learn Asynchronous JavaScript And XML, you have to be familiar with the XMLHttpRequest Object.

上面範例中的二個句子，在瀏覽器中文字是一樣的，但第一句中加入了，所以即便「XMLHttpRequest」是一個word，在自動換行時也會依標籤位置去切割。

範例 2 example：

<p> 錦瑟無端五十弦，一弦一柱思華年。_
    莊生曉夢迷蝴蝶，望帝春心托杜鵑。_
    滄海月明珠有淚，藍田日暖玉生煙。_
    此情可待成追憶，只是當時已惘然。_<br /> 
    I want to demo the old question about word-wrap,_
   "Imthefirstwordthatisntexistintheworld _
    Iamthesecondwordthatisntexistintheworld _
    Imthelastwordthatisntexistintheworld"
 </p>

Demo結果如下

錦瑟無端五十弦，一弦一柱思華年。莊生曉夢迷蝴蝶，望帝春心托杜鵑。滄海月明珠有淚，藍田日暖玉生煙。此情可待成追憶，只是當時已惘然。
I want to demo the old question about word-wrap, "ImthefirstwordthatisntexistintheworldIamthesecondwordthatisntexistintheworldImthelastwordthatisntexistintheworld"

在上面這個例子中，英文字的部分超出了我設計的框架外，並沒有自動換行，我只是要試圖說明，這個標籤其實應該要和 CSS3 中制定的 word-wrap 一起討論會更讓人了解 (當然，如果你還沒有研究 CSS 的話，這裡就跳過吧。純屬個人意見)

文字自動換行，是一個老生常談的問題了。這是瀏覽器會面對的問題，所以設計了相應的能力，把超出頁面的文字自動傳到下一行，這個就是「word wrap」。

不過，這種設計只限於拼音文字，像中文這樣單體成字的語言系統是沒有這種準則的，範例中，我貼了一首中文詩，理論上我當然希望詩以「句」的方式呈現，不要在句中斷行，但對應的處理程式並沒有針對這樣的設計，當然除非你給他剛剛好的寬度(一行8個全形字)，它自然可以自動切得整齊。

像這樣單體成字的系統，還有日本、韓國，這三個文字被統稱為 CJK(Chinese, Japanese, and Korean)，CJK 在文字呈現的規則上，和非 CJK 有些差別，舉例來說，非 CJK 的通則為(1)單詞不能在中間不合法斷開(除非在斷開處加連接符(2)標點符號不能成為行首；而 CJK 的通則為(1)雙字長的標點符號不能斷開，像破折號、省略號 (2)標點符號不能為行首。

所以對於中文來說是不必要的存在。其實對我而言，對英語也是不必要的存在。
範例 2，我還特地寫了一個很長的英文字，可以很清楚的看到，這串英文單字已經超出我用CSS畫的框架中，瀏覽器在預設中設定了規則，為了保證完整的呈現字義，程式上寧可破壞美觀，不因換行自動拆字。就我的觀點來說，這個設計很合理。不過CSS裡頭也可以允許使用者去破壞這個規則，就是設定 word-break 或是 word-wrap 來強行斷開單詞，版面就不會因為文字跑掉。但是用過這類 CSS 的就知道，這是很不必要的舉止。現在 HTML5 裡也新增了類似用途的元素，就是。

當然英文單字裡應該不會有像範例 1 中這麼變態長的英文單字，但倘若存在這種單字呢？也許我們要想的，應該不是多設計一個元素來把不合理的事情給合理化(如範例 1 ，我覺得不妥)，相反的我們應該想的是，如果有這麼長的單字，你怎麼可以設計一個窄的容器來放他呢？

所以，我猜想IE瀏覽器沒有接納這個標籤的原因，應該是在於這個問題。這個標籤對我來說也是非必要的存在。

HTML Tag

2012-10-01T01:30:00.000-07:00

定義及用法 Definition and Usage

當文本中部分內容有強烈的重要性，就用。

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

範例 Examples

範例 1 example：

<p><strong>Warning.</strong> This dungeon is dangerous. 
<strong>Avoid the ducks.</strong> Take any gold you find. 
<strong><strong>Do not take any of the diamonds</strong>, 
they are explosive and <strong>will destroy anything within 
ten meters.</strong></strong> You have been warned.</p>

Demo結果如下

Warning. This dungeon is dangerous. Avoid the ducks. Take any gold you find. Do not take any of the diamonds, they are explosive and will destroy anything within ten meters. You have been warned.

的意義就是把文本中重要的內容給標記，所以一則敘述中，若是元素愈多，代表著這則敘述佔文章的地位愈重。範例 1 是一個遊戲的警告訊息，這個範例有趣之處在於，其中在描述「Do not take any of the diamonds」這個地方嵌進了 2 個，代表這段文字是「重要中的重要」，不過在視覺上是沒有什麼差別的啦。

豬腦爸 D NOW BA

永久停更

把WordPress和網站目錄分開

新架設WordPress，目錄分開後的注意事項

舊架設WordPress，把安裝目錄分開後的注意事項

Wordpress 網址(URL)設定錯誤的解決方法

你可能出現的錯誤畫面

解決方式

後記

Dynamic Template Plugin for Windows Live Writer

先下載安裝

DIY 自已的模板(範本)的方式

範例 1：Plain HTML

範例 2 ：HTML + Code

範例3：Using Selection

範例4：Using Variable

結語

Download 其他的 Template

為Blog加上Scroll To Top按鈕

CSS部分-按鈕的美化

JQUERY部分-讓按鈕變動態

HTML部分-在頁面上加上hyperlink

最後，佈置到Blogger上

Excel VBA 標準體重計算

Excel VBA 自製全誼成績系統之成績輸入表

成績輸入流程

1-1開始使用

1-2 成績輸入工作表使用說明

1-3 匯出成績至全誼系統

Excel VBA 基礎：宣告變數

Excel VBA 基礎：程序

Sub 程序

Function 程序

事件程序

Excel VBA 基礎：物件階層、集合及成員

Excel 的物件階層構造

集合和成員

Excel VBA 四捨六入五成雙的設計

程式碼如下

其他說明

Excel VBA 自動流水號

從錄製巨集開始

操作步驟如影片

錄製後的程式碼如下

開始修改程式碼

其他應用範例：班級座位表

程式碼如下

其他應用範例：接續編號

程式碼如下

HTML <u> Tag

定義及用法 Definition and Usage

使用技巧及注意事項 Tips and Notes

可使用的屬性 Attributes

範例 Examples

範例 1 example：

HTML <var> Tag

定義及用法 Definition and Usage

技巧及備註 Tips and Notes

可使用的屬性 Attributes

範例 Examples

範例 1 example：

範例 2 example：

HTML <small> Tag

定義及用法 Definition and Usage

使用技巧及注意事項 Tips and Notes

可使用的屬性 Attributes

範例 Examples

範例 1 example：

範例 2 example：

範例 3 example：

範例 4 example：

範例 5 example：

HTML <strike> Tag

定義及用法 Definition and Usage

範例 Examples

範例 1 example：

範例 2 example：

HTML <ins> Tag

定義及用法 Definition and Usage

使用技巧及注意事項 Tips and Notes

HTML <ins> 的 cite 屬性使用方式

HTML <ins> 的 datetime 屬性使用方式

HTML <del> 的 cite 屬性使用方式

HTML <del> 的 datetime 屬性使用方式

HTML <time> 的 datetime 屬性使用方式