1.關閉按鈕
采用CSS!提供的behavior實現窗口關閉功能，不需要在C++代碼中處理關閉事件
div
{
behavior: sys-ctl;
-sys-ctl-pos: close;
}
2.文字點擊展開和折疊功能
點擊某個文字，下面的子項展開，再次點擊子項隱藏。使用click!來控制點擊事件，需要將behavior定義為button
如果div canExpand的show為”true”，則設置div list隱藏，反之則設置list顯示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
[hidden]
{
display:none;
}
.canExpand
{
behavior:button;
click!:(self.show=="true")?(self.parent().$(.list).hidden = null,self.show=null) # (self.parent().$(.list).hidden = true, self.show="true");
}
</style>
</head>
<body>
<div>
<div class="canExpand" show=true>點擊</div>
<div .list hidden>
<div .item>子項1</div>
<div .item>子項2</div>
<div .item>子項3</div>
<div .item>子項4</div>
</div>
</div>
</body>
</html>
3.輸入框提示文字
focus-on! 獲取焦點時判斷輸入框文字是否為“請輸入文字”，是則清除文字
focus-off!: 光標焦點離開輸入框時，判斷輸入框是否為空，是則設置文字為“請輸入文字”。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
[hidden]
{
display:none;
}
.TextPrompt
{
color:#C9C9C9;
focus-on!:(self:value=="請輸入文字") ? (self:value="") # ();
focus-off!:(self:value=="") ? (self:value="請輸入文字") # ();
}
</style>
</head>
<body>
<div>
<input class="TextPrompt" value="請輸入文字"></input>
</div>
</body>
</html>
4.多個同一行顯示
將父div的style設置為"display:inline”確實可以讓幾個子div在一行顯示，但是子div內不能再嵌套div
但是如果將父div設置為flow:horizontal 就可以了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.oneLine
{
flow:horizontal;
width:50px;
}
</style>
</head>
<body>
<div class="oneLine">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
5.find_first 查找元素
// Find first child element matching the selector
// :root is the element itself
template<class char_t> HELEMENT find_first( const char_t* selector, ... ) const
為htmlaout::dom::element的成員函數，將會在當前dom對象的子元素里查找。
6.dom::element 屬性、狀態標識、樣式訪問
element.屬性 用來訪問元素的DOM屬性
element:狀態標識 用來訪問dom元素，鼠標滑過、鼠標點擊、獲取焦點等狀態變化的標識
element::樣式屬性 訪問dom元素的樣式屬性
$(selector) 返回選中的元素集
$1(selector) 返回符合條件的第一個元素
7.dom::element 的釋放
需要先調用detach()，進而調用HTMLayoutDetachElement() 從父節點及Dom樹上移除該節點，如果該節點的引用計數為0，則該元素將被銷毀，再調用destroy()銷毀元素。
8.HTMLLayout最小化按鈕復位
最小化按鈕定義通常類似如下：
.min
{
right:30;
background-image:url(1.png);
behavior: sys-ctl;
-sys-ctl-pos: min;
}
.min:hover
{
background-image:url(2.png);
}
.min:active
{
background-image:url(3.png);
}
通常使用3張圖片描述一個Button給用戶，展示 鼠標不在按鈕上|划過按鈕|點擊按鈕 三種狀態
behavior描述該按鈕為一個最小化按鈕，也就是主窗體最小化是由HTMLLayout來實現，而不是在C++中實現，由於主窗體最小化時，DIV是無法得知鼠標已經離開，所以最小化再恢復之后，最小化按鈕安裝為Active，和鼠標點擊最小化按鈕是一樣。
在MFC中如果使用圖片拼接展示按鈕時也會遇到類似的問題，但是可以用定時器判斷鼠標是否離開按鈕來復位按鈕狀態。
在HTMLLayout中，該問題解決辦法為：
在CSS中重新定義div min為 behavior:button，然后在C++工程中進行按鈕Click事件中進行處理：
先ShowWindow(SW_MINIMIZE) 讓主窗體最小化，然后將min div的active狀態清除
HLDOM_RESULT r = HTMLayoutSetElementState(minBtn, 0, STATE_ACTIVE, TRUE);