[Java] Jsoup 筆記

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class TestJsoup {

    public static void main(String[] args) throws Exception {

        String url = "http://epg.dishstar.net/calendar.php?s=DISC&d=1";

        // Document doc = Jsoup.parse(new URL(url), 5000);
        Document doc = Jsoup.connect(url)
                            .userAgent("Mozilla/5.0")
                            .timeout(5000).get();

        Elements trs = doc.select("table tr");
        for (Element tr : trs) {
            String time = tr.select("td:eq(0)").text();
            String title = tr.select("td:eq(1)").text();

            System.out.println(time + " <=> " + title);
        }
    }
}

[AngularJS] 製作 jQuery UI Sortable directive

Html

<div jq-sortable="selectedList">
    <div ng-repeat="item in selectedList">
        <img ng-src="{{item.src}}" />
    </div>
</div>

JavaScript

app.directive('jqSortable', ['$parse', function($parse) {
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqSortable']);
        var $oldChildren;

        element.sortable({
            opacity: 0.7,
            scroll: false,
            tolerance: "pointer",
            start: function() {
                /*紀錄移動前的 children 順序*/
                $oldChildren = element.children('[ng-repeat]');
            },
            update: function(){
                var newList = [];
                var oldList = expr(scope);
                var $children = element.children('[ng-repeat]');

                /*產生新順序的陣列*/
                $oldChildren.each(function(i){
                    var index = $children.index(this);
                    if(index == -1){ return; }

                    newList[index] = oldList[i];
                });

                /*將新順序的陣列寫回 scope 變數*/
                expr.assign(scope, newList);

                /*通知 scope 有異動發生*/
                scope.$digest();
            }
        });

        /*在 destroy 時解除 Sortable*/
        scope.$on('$destroy', function(){
            element.sortable('destroy');
        });
    };
}]);

[AngularJS] 製作 Mouse Drag Event directive

Html

<div ng-style="{'top': itemTop, 'left': itemLeft}"
    my-mousedrag="itemTop = itemTop - $deltaY; itemLeft = itemLeft - $deltaX"
></div>

JavaScript

app.directive('myMousedrag', function() {
    return function(scope, element, attrs) {
        var prevEvent;
        element.mousedown(function(event){
            prevEvent = event;

        }).mouseup(function(event){
            prevEvent = null;

        }).mousemove(function(event){
            if(!prevEvent){ return; }

            /*將 element 拖移事件傳遞到 scope 上*/
            scope.$eval(attrs['myMousedrag'], {
                $event: event,
                $deltaX: event.clientX - prevEvent.clientX,
                $deltaY: event.clientY - prevEvent.clientY
            });

            /*通知 scope 有異動發生*/
            scope.$digest();

            prevEvent = event;
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('mousedown mouseup mousemove');
        });
    };
});

[AngularJS] 製作 jQuery MouseWheel directive

相依套件：jquery-mousewheel

Html

<div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div>

JavaScript

app.directive('jqMousewheel', function(){
    return function(scope, element, attrs) {

        /*將 element 滾輪事件傳遞到 scope 上*/
        element.on('mousewheel', function (event) {
            scope.$eval(attrs['jqMousewheel'], {
                $event: event,
                $delta: event.delta,
                $deltaX: event.deltaX,
                $deltaY: event.deltaY
            });

            /*通知 scope 有異動發生*/
            scope.$digest();
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('mousewheel');
        });
    };
});

[AngularJS] 製作 jQuery scrollTop scrollLeft directive

Html

<div jq-scroll-top="viewerScrollTop" 
      jq-scroll-left="viewerScrollLeft"
></div>

JavaScript

app.directive('jqScrollTop', ['$parse', function($parse){
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqScrollTop']);

        /*監聽變數異動，並更新到 element 上*/
        scope.$watch(attrs['jqScrollTop'], function(value) {
            element.scrollTop(value);
        });

        /*當 element 捲動時更新到變數上*/
        element.on('scroll', function() {
            expr.assign(scope, element.scrollTop());
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('scroll');
        });
    };
}]);

app.directive('jqScrollLeft', ['$parse', function($parse){
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqScrollLeft']);

        /*監聽變數異動，並更新到 element 上*/
        scope.$watch(attrs['jqScrollLeft'], function(value) {
            element.scrollLeft(value);
        });

        /*當 element 捲動時更新到變數上*/
        element.on('scroll', function() {
            expr.assign(scope, element.scrollLeft());
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('scroll');
        });
    };
}]);

[轉載] (X)HTML Strict 下的嵌套规则

轉載自：(X)HTML Strict 下的嵌套规则

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。

说明：

• 为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 <html> 而不应是 <HTML>）
• 小写的单词表明一组或一系列 HTML 标签
• 每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于 flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。
• #PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 ä 和 ä）
• CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
• excluding ... 意即不得直接或者间接的包含所列的元素

注1. 以上内容基于 [HTML 4.01 Specification] 的 Strict DTD。JunChen 翻译自 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)

注2. 对于 XHTML 1.0，基本上一致，不同点如下：

• 对于 <script> 和 <style> 的内容，在 HTML 4 里是 CDATA 而在 XHTML 里是 #PCDATA
• 在 XHTML 中，<table> 标签后可以紧跟一个 <tr>，而在 HTML 4.01 里，不允许这样，不过 <tbody> 标签又是可以省略的。意思就是说，如果代码中的 <table> 后紧跟 <tr>，对于 HTML 4.01，会隐性的生成一个 <tbody> 标签，而在 XHTML 里面就没有。这会影响到样式表使用 tbody 作为选择器。

[轉載] Default style sheet for HTML 4

轉載自：W3C Appendix D. Default style sheet for HTML 4

This appendix is informative, not normative.

This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.

The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.

For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed.

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed; }

li              { display: list-item; }

head            { display: none; }

table           { display: table; }

tr              { display: table-row; }

thead           { display: table-header-group; }

tbody           { display: table-row-group; }

tfoot           { display: table-footer-group; }

col             { display: table-column; }

colgroup        { display: table-column-group; }

td, th          { display: table-cell; }

caption         { display: table-caption; }

th              { font-weight: bolder; text-align: center; }

caption         { text-align: center; }

body            { margin: 8px; }

h1              { font-size: 2em; margin: .67em 0; }

h2              { font-size: 1.5em; margin: .75em 0; }

h3              { font-size: 1.17em; margin: .83em 0; }

h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0; }

h5              { font-size: .83em; margin: 1.5em 0; }

h6              { font-size: .75em; margin: 1.67em 0; }

h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder; }

blockquote      { margin-left: 40px; margin-right: 40px; }

i, cite, em,
var, address    { font-style: italic; }

pre, tt, code,
kbd, samp       { font-family: monospace; }

pre             { white-space: pre; }

button, textarea,
input, select   { display: inline-block; }

big             { font-size: 1.17em; }

small, sub, sup { font-size: .83em; }

sub             { vertical-align: sub; }

sup             { vertical-align: super; }

table           { border-spacing: 2px; }

thead, tbody,
tfoot           { vertical-align: middle; }

td, th, tr      { vertical-align: inherit; }

s, strike, del  { text-decoration: line-through; }

hr              { border: 1px inset; }

ol, ul, dir,
menu, dd        { margin-left: 40px; }

ol              { list-style-type: decimal; }

ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0; }

u, ins          { text-decoration: underline; }

br:before       { content: "\A"; white-space: pre-line; }

center          { text-align: center; }

:link, :visited { text-decoration: underline; }

:focus          { outline: thin dotted invert; }


/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override; }

BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override; }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed; }

*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed; }

@media print {
    h1            { page-break-before: always; }

    h1, h2, h3,
    h4, h5, h6    { page-break-after: avoid; }

    ul, ol, dl    { page-break-before: avoid; }
}

[轉載] 自適應網頁設計

轉載自：自适应网页设计（Responsive Web Design） 阮一峰

随着 3G 的普及，越来越多的人使用手机上网。

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？



手机的屏幕比较小，宽度通常在 600 像素以下，PC 的屏幕宽度，一般都在 1000 像素以上（目前主流宽度是1366×768），有的还达到了 2000 像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个 mobile 版本，或者 iPhone / iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个 portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？




一、"自适应网页设计"的概念

2010 年，Ethan Marcotte 提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于 1300 像素，则 6 张图片并排在一行。



如果屏幕宽度在 600 像素到 1300 像素之间，则 6 张图片分成两行。



如果屏幕宽度在 400 像素到 600 像素之间，则导航栏移到网页头部。



如果屏幕宽度在 400 像素以下，则 6 张图片分成三行。



mediaqueri.es 上面有更多这样的例子。

这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。


二、允许网页宽度自动调整

"自适应网页设计"到底是怎么做到的？其实并不难。

首先，在网页代码的头部，加入一行 viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport 是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为 1.0，即网页初始大小占屏幕面积的 100%。

所有主流浏览器都支持这个设置，包括 IE9。对于那些老式浏览器（主要是 IE6、7、8），需要使用 css3-mediaqueries.js。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

三、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width: xxx px;

只能指定百分比宽度：

width: xx%;

或者

width: auto;

四、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {
    font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代码指定，字体大小是页面默认大小的 100%，即 16 像素。

h1 {
    font-size: 1.5em; 
}

然后，h1 的大小是默认大小的 1.5 倍，即 24 像素（24/16=1.5）。

small {
    font-size: 0.875em;
}

small 元素的大小是默认大小的 0.875 倍，即 14 像素（14/16=0.875）。


五、流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {
    float: right;
    width: 70%; 
}

.leftBar {
    float: left;
    width: 25%;
}

float 的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向 overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。


六、选择加载CSS

"自适应网页设计"的核心，就是 CSS3 引入的 Media Query 模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的 CSS 文件。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于 400 像素（max-device-width: 400px），就加载 tinyScreen.css 文件。

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

如果屏幕宽度在 400 像素到 600 像素之间，则加载 smallScreen.css 文件。

除了用 html 标签加载 CSS 文件，还可以在现有 CSS 文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

七、CSS 的 @media 规则

同一个 CSS 文件中，也可以根据不同的屏幕分辨率，选择应用不同的 CSS 规则。

@media screen and (max-device-width: 400px) {
    .column {
        float: none;
        width: auto;
    }
    #sidebar {
        display: none;
    }
}

上面的代码意思是，如果屏幕宽度小于 400 像素，则 column 块取消浮动（float:none）、宽度自动调节（width:auto），sidebar 块不显示（display:none）。


八、图片的自适应（fluid image）

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行 CSS 代码：

img { max-width: 100%; }

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%; }

老版本的 IE 不支持 max-width，所以只好写成：

img { width: 100%; }

此外，windows 平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用 IE 的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte 的 imgSizer.js。

addLoadEvent(function() {
    var imgs = document.getElementById("content").getElementsByTagName("img");
    imgSizer.collate(imgs);
});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

（完）

HTML 標籤一覽

之前在做員工教育時整理的 HTML 標籤一覽，順便分享出來。

檔案連結：HTML 標籤一覽

HTML meta 彙整

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--網頁文件的編碼格式-->

<meta http-equiv="Content-Language" content="zh-TW" />
<!--網頁內容的語言-->

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1" />
<!--指定 IE 頁面呈現所使用的渲染引擎-->

<meta http-equiv="X-Frame-Options" content="deny" />
<!--限制頁面中Frame的使用方式-->
<!--   sameorigin – 只允許來自同一個網域的頁面嵌入-->
<!--   deny – 防止任何頁面的嵌入-->

<meta http-equiv="Date" content="Wed, 16 Feb 2011 22:34:13 GMT" />
<!--網頁內容的建立日期-->

<meta http-equiv="Last-Modified" content="Mon, 03 Jan 2011 17:45:57 GMT" />
<!--網頁內容的修改日期-->

<meta http-equiv="Location" content="URL=http://www.w3schools.com" />
<!--宣告此網頁的絕對制式資源位址-->

<meta http-equiv="Set-Cookie" content="w3scookie=myContent;expires=Fri, 30 Dec 2011 12:00:00 GMT; path=http://www.w3schools.com" />
<!--設定cookie，如果網頁過期，存盤的cookie將被刪除，需要注意的也是必須使用GMT時間格式-->

<meta http-equiv="Windows-Target" content="_top" />
<!--強制頁面在目前的視窗中以獨立頁面顯示，可以防止網頁被別人當作一個frame頁嵌入-->

<meta http-equiv="Refresh" content="300" />
<meta http-equiv="Refresh" content="10;URL=http://www.w3schools.com" />
<!--定時讓網頁在指定的時間內重新整理，或是跳轉到指定頁面-->

<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT" />
<!--設定網頁內容暫存的到期時間-->

<meta http-equiv="Pragma" content="no-cache" />
<!--禁止瀏覽器從近端機的緩存中調閱頁面內容(僅 IE 適用)-->

<meta http-equiv="cache-control" content="no-cache" />
<!--瀏覽器的緩存控制-->
<!--   public - 可放在公用的緩存區-->
<!--   private - 只能放在私人的緩存區-->
<!--   no-cache - 不許存放在緩存區-->
<!--   no-store - 可以暫時存放緩存區，但是不許長存--> 




<meta name="KeyWords" lang="EN" content="key1,key2,key3" />
<meta name="KeyWords" lang="zh-TW" content="關鍵字1,關鍵字2,關鍵字3" />
<!--網頁內容的關鍵字-->

<meta name="Abstract" content="內容摘要" />
<!--網頁內容的摘要-->

<meta name="Description" content="內容描述" />
<!--網頁內容的描述-->

<meta name="Generator" content="Aptana 2" />
<!--製作網頁的工具名稱-->

<meta name="Author" content="作者名稱" />
<!--網頁製作者的名稱-->

<meta name="Reply-To" content="abc@mail.com" />
<!--聯繫人的 Email-->

<meta name="Website" content="http://www.website.com/" />
<!--網頁製作者的網站-->

<meta name="owner" content="http://www.website.com/" />
<!--定義所有者的網頁或網站-->

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--viewport的作用是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準-->
<!--   width - viewport的寬度(Number或 device-width)-->
<!--   height - viewport的高度(Number或 device-height)-->
<!--   initial-scale - 初始的縮放比例(0.25~5)-->
<!--   minimum-scale - 允許用戶縮放到的最小比例(0.25~5)-->
<!--   maximum-scale - 允許用戶縮放到的最大比例(0.25~5)-->
<!--   user-scalable - 用戶是否可以手動縮放(1/0或yes/no)-->

<meta name="Robots" content="noodp,noydir" />
<!--搜尋引擎檢索設定-->
<!--   all - 內容將被檢索，且頁面上的連結可以被查詢-->
<!--   none - 內容將不被檢索，且頁面上的連結不可以被查詢-->
<!--   index - 內容將被檢索-->
<!--   follow - 頁面上的連結可以被查詢-->
<!--   noindex - 內容將不被檢索，但頁面上的連結可以被查詢-->
<!--   nofollow - 內容將不被檢索，頁面上的連結可以被查詢-->

<meta name="Googlebot" content="nofollow" />
<!--針對 Google bot 的robots-->

<meta name="baiduspider" content="nofollow" />
<!--針對百度 bot 的robots-->

<meta name="classification" content="Computer" />
<!--告知搜索引擎網站(頁)應被列到哪個目錄下-->

<meta name="copyright" content="2011© W3Schools.com" />
<meta name="doc-rights" content="2011© W3Schools.com" />
<!--網頁的版權聲明-->

<meta name="Distribution" content="Taiwan" />
<!--描述網站(頁)的發佈地-->
<!--   web - 為全面互聯網-->
<!--   intranet - 只為內部網路-->
<!--   global - 全球性網頁-->
<!--   local - 本地端網頁-->
<!--   Intern use - 測試網頁-->

<meta name="doc-class" content="Completed" />
<!--指定文件的完成狀態-->
<!--   Completed - 已完成-->
<!--   Draft - 草稿-->
<!--   Living Document - 動態文件-->
<!--   Published - 發佈-->

<meta name="DownloadOptions" content="noopen" />
<!--控制下載對話匡上的按鈕顯示-->
<!--   noopen - 隱藏[開啟]的按鈕-->
<!--   nosave - 隱藏[儲存]的按鈕-->

<meta name="name" content="My document" />
<!--指定文件名稱-->

<meta name="rating" content="" />
<!--網頁內容分級-->
<!--   14 years - 14歲以上-->
<!--   general - 普通-->
<!--   mature - 成年人-->
<!--   restricted - 限制-->
<!--   safe for kids - 孩童-->

<meta name="resource-type" content="document" />
<!--告知這個網頁的形式是文件-->

<meta name="revisit-after" content="7 days">
<!--搜尋引擎檢索器多久之後來造訪一次-->

<meta name="其他" content="" />
<!--你可以定義自己 meta 名稱與描述-->




<!--[針對 IE 的設定]-->

<meta name="MSSmartTagsPreventParsing" content="yes"/>
<!--防止微軟頁面編輯軟體在頁面上自動添加標籤-->

<meta http-equiv="imagetoolbar"  content="no"/>
<!--關閉IE的圖片管理工具列-->

<meta http-equiv="MSThemeCompatible" content="no" />
<!--關閉XP的藍色立體按鈕系統顯示樣式-->

<meta http-equiv="Pics-label" content="">
<!--網頁等級升等職稱，在IE的internet選項中有一項內容設定，可以防止瀏覽一些受限制的網站，而網站的限制層級就是通過meta內容來設定的-->

<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transtion=50)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=20，transtion=6)">
<!--設定IE進入和離開頁面時的特殊效果-->

[轉載] 屬性(Attribute)與特性(Property)

之前看到jQuery 1.6.1上場救援，不用改寫attr()囉這篇文章時，讓我很疑惑 Attribute 與 Property 到底是有什麼不同，在字典上查出來的結果都是屬性，爬了一些文章後找到一篇不錯的解釋文。

---

轉載自：屬性與特性

在進入瀏覽器作為客戶端之後，屬性（Attribute）與特性（Property）這兩個名詞就不斷交相出現，到目前還沒正式解釋它們的意義。

其實在正式進入瀏覽器作為客戶端前，對於JavaScript物件本身帶有的名稱，這邊的文件都用特性這個名詞，代表以某個JavaScript物件作為名稱空間的名稱。例如：

var obj = {
    x : 10,
    y : 20
};

以上文件都稱，物件obj擁有特性x與y，特性x的值為10，特性y的值為20。

HTML本身可以擁有屬性。例如：

<input name="user" value="guest">

文件中會稱，<input>標籤擁有屬性name與value，屬性值各為user與guest。

瀏覽器會剖析HTML，為每個標籤建立對應的DOM物件，完成剖析後，對於HTML的所有屬性（無論標籤上是否有撰寫），DOM物件上會建立對應的特性，通常屬性名稱是什麼，特性名稱也會是什麼，如果標籤上有設定某個屬性，則屬性值為何，特性值也就為何，如果標籤上沒有設置屬性，則DOM物件上的特性會有預設值。

例如上例中，<input>對應的DOM元素上，name特性與value特性值分別是user與guest。你可以如下分別取得（假設是頁面中第一個<input>標籤）：

var input = document.getElementsByName('user')[0];
var name = input.name;
var value = input.value;

像這時，DOM元素上的name、value特性，也可以稱之為name與value屬性。也就是說，屬性這個詞，可用來表示HTML中的屬性，也可用來表示DOM中相對應的特性。對於HTML中沒有設定的標籤屬性，DOM上也會有對應的特性（屬性），不過都是預設值，例如，上面的<input>標籤並沒有設置type屬性，但DOM物件上對應的特性（屬性），其值為"text"。

不過，HTML的屬性名稱未必與DOM物件的特性（屬性）名稱相對應。例如class就是一個例子，因為class在JavaScript中是關鍵字，在DOM上要取得HTML的class屬性對應名稱必須使用className，<label>的for屬性，因為for是關鍵字，而必須使用htmlFor特性來取得。例如：

<img id="logo" src="images/caterpillar.jpg" class="logo" title="Caterpillar's Logo"/>

若要以JavaScript取得HTML的class屬性值，則必須：

var className = document.getElementById('logo').className;

透過JavaScript特性存取方式取得HTML屬性的對應值，也未必是HTML屬性中真正設定的值。例如，透過JavaScript取得<img>的src，結果是絕對URL，即使屬性中設定的是相對URL。

瀏覽器在剖析完HTML後，對於HTML中有設置的屬性，其實會在DOM物件上建立attributes特性。你可以如下顯示attributes的元素值，每個元素的型態是Attr：

var attributes = document.getElementById('logo').attributes;
for(var i = 0; i < attributes.length; i++) {
    var attrName = attributes[i].nodeName;
    var attrValue = attributes[i].nodeValue;
    ...
}

以物件結構來表示的話：

{
    attributes : {
        '0' : {nodeName : 'id', nodeValue : 'logo', ...},
        '1' : {nodeName : 'src', nodeValue : 'images/src', ...},
        '2' : {nodeName : 'class', nodeValue : 'logo', ...},
        '3' : {nodeName : 'title', nodeValue : 'Caterpillar\’s logo', ...},
        length : 4
        ...
    },
    id : 'logo',
    src : 'http://caterpillar.onlyfun.net/images/caterpillar.jpg',
    className : 'logo',
    title : 'Caterpillar\'s logo',
    …
}

attributes上的特性值，是HTML上真正設定的屬性與值。在文件剖析完畢後，DOM物件上的屬性（特性）與attributes上的特性是對應的。

注意，上面是以物件結構來示意，並不是指真正的型態就是上面所表示的。attributes的型態會是 NamedNodeMap ，而每個索引元素的型態會是 Attr（如果你手邊有個JavaScript Debugger的話，可以很方便地觀察這些東西）。

你可以使用DOM物件的getAttribute()來取得attributes中的屬性，使用setAttribute()設定attributes中的屬性（同時亦會改變DOM對應的特性），使用removeAttribute()來移除attributes屬性。

移除屬性是指移除attributes上對應的特性值，而非移除DOM物件上對應的特性（屬性）值，DOM物件上對應的特性（屬性）值在使用removeAttribute()後，只是回到預設值，而不是直接將特性移除，沒有任何操作可以將DOM上對應屬性的特性移除。如果HTML上沒有設置該屬性，則使用getAttribute()指定該屬性會取得null，但並不表示DOM上沒有對應屬性的特性，而是該特性值會是預設值。使用setAttribute()可以在attributes中設定屬性，相對應的DOM特性值也會改變。

例如，以下的程式，只會將attributes的中src對應的特性移除，不會移除DOM上src特性（屬性），DOM上src只是回到''的預設值。

var img = document.getElementById('logo');
img.removeAttribute('src');
// img.src 的值是 ''，不是undefined
// img.attributes['src'] 是 undefined

如果你直接改變DOM上的特性（屬性），attributes中對應的屬性並不會有變化。例如：

<input id="user" value="guest">

使用以上的程式：

document.getElementById('user').value = 'Justin';
var user1 = document.getElementById('user').value; // 值是'Justin'
var user2 = document.getElementById('user').getAttribute('value'); // 值是'guest'

如果你要同時改變attribues上的屬性與DOM上的特性（屬性），則要使用setAttribute()。例如：

document.getElementById('user').setAttribute('value', 'Justin');
var user1 = document.getElementById('user').value; // 值'Justin'
var user2 = document.getElementById('user').getAttribute('value'); // 值'Justin'

其他參考資訊：
property和attribute的区别
JavaScript property 、 DOM property 、 HTML attribute
翻譯名詞：attribute、property

HTML 與 CSS 觀念上的區別

HTML：在定義網頁的 結構 跟 語意

• h1：第一標題
  
• h2：第二標題
  
• p：段落
  
• li：清單條目
  
• em：強調
  
• strong：更強調
  
• blockquote：引言
  

CSS：在定義網頁的呈現 樣式

• color：文字顏色
  
• text：文字
  
• font：字體
  
• margin：邊界距離
  
• padding：內緣距離
  
• background：背景底色
  

[HTML] 規劃延生屬性

之前在玩 Firefox 的外掛時，在 XUL 的定義中學到其他屬性設定，當中有些定義還蠻常用到的
如：empty, emptytext, max, min...等

這裡我只是要說明一個簡化開發的 solution，並沒有完整的應用規劃，為了瞭解這個 solution 可以先看看一個簡單的範例 html_extension.zip。

其實最近看到 HTML5 已經將很多常見的介面應用加入定義中，但還是可以將系統架構中常用的功能做成延伸屬性，在 HTML5 普及之前這是一個很好的 solution。


在之前的專案中，我做了一下的規劃：

element [延伸屬性]{所有元素共用}

removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}
pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}

input,textarea [延伸屬性]

emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}

form > tr [延伸樣式]

class="NotNull" {檢查區塊內的元素是否有選項值}

form > input [延伸屬性]

format="" {表單送出前的格式檢查,但不會檢查是否為空}

• 'tel':電話
• 'mobile':行動電話
• 'email':電子信箱
• 'url':網路連結
  

jtype="" {資料輸入時的輔助}
(基本格式輸入)

• 'uint':無符號整數
• 'int':整數
• 'float':浮點數
• 'id':帳號格式
• 'alnum':保留字母和数字及底線
  

(輔助日期輸入)

• 'date':選擇日期
• 'start_date':選擇起始日期
• 'end_date':選擇結束日期
  

(輔助時間輸入)

• 'time':選擇時間
• 'start_time':選擇起始時間
• 'end_time':選擇結束時間
  

在下面的 HTML 中可以看到程式碼都便得很簡單

<!--動態效果-->
<div pulsate="4">4秒閃爍</div>
<div removeDelay="10">10秒後消失</div>
<div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div>


<!--表單-->
<form class="FormWidget" method="post" action="">
<table class="FormList" border="0">
  <caption>輸入限制</caption>

  <tr class="NotNull">
    <th><label for="data_1">無符號整數 :</label></th>
    <td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_2">整數 :</label></th>
    <td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_3">浮點數 :</label></th>
    <td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td>
  </tr>
   
  <tr>
    <th><label for="data_4">帳號格式 :</label></th>
    <td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_5">英數及底線 :</label></th>
    <td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td>
  </tr>
</table>


<table class="FormList" border="0">
  <caption>時間 & 日期</caption>

  <tr>
    <th><label for="data_6">日期 :</label></th>
    <td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td>
  </tr>

  <tr>
    <th><label>日期區間 :</label></th>
    <td>
      <div class="OptionBar">
        <label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label>
        -
        <label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label>
      </div>
    </td>
  </tr>
    
  <tr>
    <th><label for="data_7">時間 :</label></th>
    <td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td>
  </tr>
    
  <tr>
    <th><label>時間區間 :</label></th>
    <td>
      <div class="OptionBar">
        <label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label>
        -
        <label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label>
      </div>
    </td>
  </tr>
</table>


<table class="FormList" border="0">
  <caption>格式檢查</caption>

  <tr>
    <th><label for="data_8">電話格式 :</label></th>
    <td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td>
  </tr>
        
  <tr class="NotNull">
    <th><label for="data_9">行動電話格式 :</label></th>
    <td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td>
  </tr>
            
  <tr class="NotNull">
    <th><label for="data_10">E-mail 格式 :</label></th>
    <td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td>
  </tr>
                                
  <tr>
    <th><label for="data_11">連結格式 :</label></th>
    <td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td>
  </tr>
</table>

<div class="Buttons">
  <input type="submit" class="Button" value="儲存"/>
</div>
</form>

Web 文件類型壓縮及註解清除器

大部分的 Web 文件壓縮，都是將不要的空白文字或不必要的註解清除，以換取檔案的大小。

之前找尋不到合適的工具，索性就自己寫一個工具，這次將之前的HTML & Smarty、JavaScript、CSS 及 PHP 註解清除器做一個整合，並且做一些使用上的教學。

修改特點：

• 整合之前的文件類型至一個工具上
• 只針對 html , htm , css , js 及 php 副檔名的文件做處理
• 增加參數選擇

web_clear 參數說明

web_clear [-hvc] (filename)
[-h | -?] : 顯示參數說明
[-v] : 顯示被執行的檔案列表
[-c] : 單純只清除註解
(filename) : 檔案路徑或目錄路徑

Windows 下的操作

可以透過拖移文件或資料夾的方式執行此工具。

也可以透過命令列或批次檔去執行

@ECHO off

web_clear.exe -v "Z:\Web" Z:\WebServer\1.html Z:\WebServer\1.css 

PAUSE 

Linux 下的操作

透過命令列或 Shell 去執行

#!/bin/bash

PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin
export PATH

./web_clear -v /home/test/index.php

# 也可以配合 find 去執行
#./web_clear -v `find /home/test -name '*.css' -or -name '*.js'`

exit 0

檔案下載：

web_clear.tar.gz

web_clear
|-- linux
|   |-- source
|   |   |-- web_clear.c
|   |   `-- web_clear.l
|   |
|   |-- clear_file.sh
|   `-- web_clear
|
`-- windows
    |-- source
    |   |-- web_clear.c
    |   `-- web_clear.l
    |
    |-- clear_file.bat
    `-- web_clear.exe

4 directories, 8 files

HTML 中 Flash 遮蓋問題的解決方法

flash 在頁面中會顯示在最上層
想要用其他元素覆蓋在上面時
必須做以一下參數設定
但不管有沒有元素覆蓋
最好還是加入這個參數
避免意料之外的版面問題

<object ... >
    <param name="wmode" value="transparent"/>
    <!-- ... -->
    <embed wmode="transparent" ... />
</object>

wmode 的參數值：

• Window
• Opaque
• Transparent

參考來源：
【求助】关于下拉菜单被FLASH遮盖，怎样解决
wmode 三選一

CSS 與 HTML 規劃心得檢討

由於所開發的系統愈來愈大，免不了開始出現一些排版上的問題，對於目前的狀況做了一些整理：

每加入一個新功能就建立一個新樣式，造成過多獨立應用的樣式。

再新功能規劃時，可多考慮使用舊有的樣式。

HTML 在的設計上過於精簡缺乏彈性及流通性。

在結構上的規劃時多考慮多變應用以增加日後應用上的彈性。

類似的樣式過多沒有統一的規劃。

再設計多預想未來的應用，增加樣式重複利用的可能性。

過度使用已 Tag 為主的選擇器，造成過度的樣式覆寫。

在較複雜的樣式區塊中，先做分割規劃出許多小區塊，簡化樣式選擇器的深度。

ID 與 Class 命名沒有規範清楚，造成樣式與功能上的混淆。

排版與樣式沒有分離，造成管理不易。

對於排版的寬度定義不明確，造成異常 overflow 跑版。

主要的問題還是出在一致性的樣式共用與命名規則的問題上，在開發的過程中沒有謹慎規劃，對於未來可能的應用也許要考慮進去，避免重複定義相似的樣式。

HTML & Smarty、JavaScript、CSS 及 PHP 註解清除器

之前為了上線前去除不要的註解及多餘的空白符號，一直在找合適的工具，可是找到大部分都是 windows 的軟體，想找 Linux 的卻沒找到，於是就自己用 Lex 寫了一些，幾本上我分成四個語言的清除器，設計上是直接覆寫原始的檔案，所以在應用前請先自行複製備份，由於清除器沒有做語法驗證，再撰寫時需要特別嚴謹 ( PS: 程式碼中常被忽略的結束符號 ";" )。

清除規則：

• HTML & Smarty
• 清除 < 及 > 前後的空白及換行(\n)符號
• 清除 HTML 註解 (<!-- 註解 -->)
• 清除 Smarty 註解 ({* 註解 *})
• 清除 JavaScript 單行及多行註解 (/* 註解 */ , //註解)
• 清除 JavaScript 多餘的空白及換行(\n)符號
• 完整保留單引號及雙引號內的字串
• JavaScript
• 清除多餘的空白及換行(\n)符號
• 清除單行及多行註解 (/* 註解 */ , //註解)
• 完整保留單引號及雙引號內的字串
• CSS
• 清除多餘的空白及換行(\n)符號
• 清除多行註解 (/* 註解 */)
• 完整保留單引號及雙引號內的字串
• PHP
• 清除行首及行尾的空白符號
• 清除無用的空白行
• 清除單行及多行註解 (/* 註解 */ , //註解)
• 完整保留單引號及雙引號內的字串

這已經經過很多次的測試跟修改了，目前還沒有出現特別的狀況，有需要的人可以用用看，在 linux 上必許要安裝 flex 及 gcc 才可以編譯，當然 windows 也有的flex 及 gcc 的編譯器。

檔案連結