<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>《論盡蛋》 &#187; HTML</title>
	<atom:link href="http://main.peterwongpp.com/category/program/html/feed" rel="self" type="application/rss+xml" />
	<link>http://main.peterwongpp.com</link>
	<description>心で書く</description>
	<lastBuildDate>Fri, 09 Jul 2010 12:58:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>IE678笑話</title>
		<link>http://main.peterwongpp.com/post/2630</link>
		<comments>http://main.peterwongpp.com/post/2630#comments</comments>
		<pubDate>Thu, 28 Jan 2010 10:33:39 +0000</pubDate>
		<dc:creator>皮蛋黃</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://main.peterwongpp.com/?p=2630</guid>
		<description><![CDATA[原本打算開工寫theme, 怎料開了IETester v0.4.2內的IE6, IE7, IE8來一看, 笑了出來~ 昨天裝了plugin以便在post內顯示codes (WP-SynHighlight), 但在IE6, 7, 8中, 竟然是三個不同的樣子@@&#8221;哈哈~ IE6 同一行而過長的code會自動斷行, 高度不固定, 隨行數而變高 (不定高度, 不可能出現scroll bar) IE7 過長的code也懂得自動斷行, 但固定了最大高度, 內容太多的話會出現scroll bar (不定高度, 但有最大高度, 只可能出現垂直的scroll bar) IE8 過長的code不會自動斷行, 會出現橫向scroll bar, 高度則是固定的, 無視內視多少. 太多則出現scroll bar (固定高度, 橫向垂直scroll bar都有可能出現) 話說, 其他browser又有少許不同XD&#8221;不過就不再截圖了&#8230;應該大概能想像到XD&#8221; Chrome 3, Firefox 3.5, Opera 10 最神秘的, 就是這三者的顯示是一樣的, 但更IE6, 7, 8都不同XD&#8221; 究竟誰對誰錯, 我就不知道了=v=&#8221; 但其實大致跟IE7和IE8差不多~ [...]]]></description>
			<content:encoded><![CDATA[<p>原本打算開工寫theme, 怎料開了IETester v0.4.2內的IE6, IE7, IE8來一看, 笑了出來~</p>
<p>昨天裝了plugin以便在post內顯示codes (WP-SynHighlight), 但在IE6, 7, 8中, 竟然是三個不同的樣子@@&#8221;哈哈~</p>

<a href='http://main.peterwongpp.com/post/2630/ie6' title='ie6'><img width="150" height="150" src="http://main.peterwongpp.com/wp-content/uploads/2010/01/ie6-150x150.jpg" class="attachment-thumbnail" alt="IE6下的" title="ie6" /></a>
<a href='http://main.peterwongpp.com/post/2630/ie7' title='IE7的WP-SynHighlight'><img width="150" height="150" src="http://main.peterwongpp.com/wp-content/uploads/2010/01/ie7-150x150.jpg" class="attachment-thumbnail" alt="IE7的WP-SynHighlight" title="IE7的WP-SynHighlight" /></a>
<a href='http://main.peterwongpp.com/post/2630/ie8' title='IE7的WP-SynHighlight'><img width="150" height="150" src="http://main.peterwongpp.com/wp-content/uploads/2010/01/ie8-150x150.jpg" class="attachment-thumbnail" alt="IE7的WP-SynHighlight" title="IE7的WP-SynHighlight" /></a>

<h4>IE6</h4>
<p>同一行而過長的code會自動斷行,<br />
高度不固定, 隨行數而變高</p>
<p>(不定高度, 不可能出現scroll bar)</p>
<h4>IE7</h4>
<p>過長的code也懂得自動斷行,<br />
但固定了最大高度, 內容太多的話會出現scroll bar</p>
<p>(不定高度, 但有最大高度, 只可能出現垂直的scroll bar)</p>
<h4>IE8</h4>
<p>過長的code不會自動斷行, 會出現橫向scroll bar,<br />
高度則是固定的, 無視內視多少. 太多則出現scroll bar</p>
<p>(固定高度, 橫向垂直scroll bar都有可能出現)</p>
<p>話說, 其他browser又有少許不同XD&#8221;不過就不再截圖了&#8230;應該大概能想像到XD&#8221;</p>
<h4>Chrome 3, Firefox 3.5, Opera 10</h4>
<p>最神秘的, 就是這三者的顯示是一樣的, 但更IE6, 7, 8都不同XD&#8221;<br />
究竟誰對誰錯, 我就不知道了=v=&#8221;</p>
<p>但其實大致跟IE7和IE8差不多~<br />
跟IE7相比的話, IE7不會出現橫向scroll bar, 但這三者會~(即前者會自動斷行, 但後三者不會)<br />
跟IE8相比的話, IE8固定了高度, 但Chrome &amp; Firefox &amp; Opera則類似IE7般只有最大高度.</p>
<p>我到真正開工時會不會真的用齊IE6, IE7, IE8, Chrome 3, Firefox 3.5, Opera 10來作測試? 不會XD&#8221;<br />
話說如果我的Ubuntu如果是用virtual box裝在Win 7內的話, 還會再多些測試呢~哈哈~<br />
不過大多數時間我只會用IE8, Chrome (自己常用中XD&#8221;)<br />
間唔中才會用IE7, Firefox之類的看看~(有問題時怎算? trade off是沒辦法的了XD&#8221;)</p>
<p>話說這次theme的主體是HTML 5 (主體不是設計上的東西嗎=o=||?)<br />
所以可能會用多些Opera~^^</p>
]]></content:encoded>
			<wfw:commentRss>http://main.peterwongpp.com/post/2630/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>中標準毒&#8230;rel</title>
		<link>http://main.peterwongpp.com/post/2044</link>
		<comments>http://main.peterwongpp.com/post/2044#comments</comments>
		<pubDate>Fri, 08 Jan 2010 10:57:23 +0000</pubDate>
		<dc:creator>皮蛋黃</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://main.peterwongpp.com/?p=2044</guid>
		<description><![CDATA[又在著眼於細微之處了~ 話說面對《論盡蛋》這個完成不了的CMS, 總喜愛在細微的地方打轉. 這次是a tag的rel attribute. 嗯, 它是跟rev一對的, 但由於不在我打算討論的範圍, 所以請大家無視它XD&#8221; 這次想說的是GreyBox, Lightbox之類的Javascript library用了rel attribute來指明那些圖片要附加特效, 那些不用. 然而, 總覺得這是不合語意的做法. rel用的場合是, 說明href指向的url跟本頁的關係, 這段關係可能是friend, home, start, next, &#8230;&#8230;但gb_pageset[group1]會是一段合適的關係嗎? 但這也不要緊了, 我也不一樣用了&#60;ruby&#62;&#60;/ruby&#62;之類的XHTML 1.0 Transitional內不包含的tags嗎? 然而, 中毒的我, 卻仍想保留greybox的同時, 使用正確的rel~於是, 一輪翻查, 發現rel可以使用多個值的, 只要以空格分開即可~ 但故事還未完結, 我把原本的rel="gb_pageset[g1]"改成了rel="home gb_pageset[g1]"後, greybox果然運作不能!!然後, 靈機一動, 改成rel="gb_pageset[g1] home", 就沒問題了~ 所以, 總結一下廢話: rel attribute是可以同時有多個值的 (eg. 同時用home me start), 只要以空格隔開各值即可. 要greybox正確運作, 必需先寫greybox的rel, 然後是其他的(eg. [...]]]></description>
			<content:encoded><![CDATA[<p>又在著眼於細微之處了~</p>
<p>話說面對《<a title="論盡蛋" rel="home me" href="http://main.peterwongpp.com">論盡蛋</a>》這個完成不了的<abbr title="Content Management System">CMS</abbr>, 總喜愛在細微的地方打轉. 這次是<code class="syntax escaped html">a</code> tag的<a title="W3School's description of the rel attribute" rel="external" href="http://www.w3schools.com/tags/att_a_rel.asp">rel</a> attribute.</p>
<p>嗯, 它是跟<code class="syntax escaped html">rev</code>一對的, 但由於不在我打算討論的範圍, 所以請大家無視它XD&#8221;</p>
<p>這次想說的是<a title="GreyBox" rel="external" href="http://orangoo.com/labs/GreyBox/">GreyBox</a>, <a title="Lightbox 2" rel="external" href="http://www.huddletogether.com/projects/lightbox2/">Lightbox</a>之類的Javascript library用了<code class="syntax escaped html">rel</code> attribute來指明那些圖片要附加特效, 那些不用. 然而, 總覺得這是不合語意的做法. <code class="syntax escaped html">rel</code>用的場合是, 說明<code class="syntax escaped html">href</code>指向的<code class="syntax escaped html">url</code>跟本頁的關係, 這段關係可能是<code class="syntax escaped html">friend</code>, <code class="syntax escaped html">home</code>, <code class="syntax escaped html">start</code>, <code class="syntax escaped html">next</code>, &#8230;&#8230;但<code class="syntax escaped html">gb_pageset[group1]</code>會是一段合適的關係嗎?</p>
<p>但這也不要緊了, 我也不一樣用了&lt;ruby&gt;&lt;/ruby&gt;之類的XHTML 1.0 Transitional內不包含的tags嗎?</p>
<p>然而, 中毒的我, 卻仍想保留greybox的同時, 使用正確的<code class="syntax escaped html">rel</code>~於是, 一輪翻查, 發現<code class="syntax escaped html">rel</code>可以使用多個值的, 只要以空格分開即可~</p>
<p>但故事還未完結, 我把原本的<code class="syntax escaped html">rel="gb_pageset[g1]"</code>改成了<code class="syntax escaped html">rel="home gb_pageset[g1]"</code>後, greybox果然運作不能!!然後, 靈機一動, 改成<code class="syntax escaped html">rel="gb_pageset[g1] home"</code>, 就沒問題了~</p>
<p>所以, 總結一下廢話:</p>
<ol>
<li><code class="syntax escaped html">rel</code> attribute是可以同時有多個值的 (eg. 同時用<code class="syntax escaped html">home</code> <code class="syntax escaped html">me</code> <code class="syntax escaped html">start</code>), 只要以空格隔開各值即可.</li>
<li>要greybox正確運作, 必需先寫greybox的<code class="syntax escaped html">rel</code>, 然後是其他的(eg.<code class="syntax escaped html"> rel="gb_pageset[group] home me start"</code>).</li>
</ol>
<p>ps. 我所測試的greybox是Wordpress plugin &#8220;<a title="GreyBox Integrator" rel="external" href="http://ajaydsouza.com/wordpress/plugins/greybox-integrator/">GreyBox Integrator</a>&#8221; version 1.0.</p>
]]></content:encoded>
			<wfw:commentRss>http://main.peterwongpp.com/post/2044/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML Doctype</title>
		<link>http://main.peterwongpp.com/post/1261</link>
		<comments>http://main.peterwongpp.com/post/1261#comments</comments>
		<pubDate>Wed, 29 Jul 2009 08:59:07 +0000</pubDate>
		<dc:creator>皮蛋黃</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://main.peterwongpp.com/?p=1261</guid>
		<description><![CDATA[HTML 4.01 Strict &#60;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&#62; &#60;html lang="zh"&#62; HTML 4.01 Transitional &#60;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&#62; &#60;html lang="zh"&#62; XHTML 1.0 Strict &#60;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&#62; &#60;html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"&#62; XHTML 1.0 Transitional &#60;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&#62; &#60;html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"&#62; [...]]]></description>
			<content:encoded><![CDATA[<h4>HTML 4.01 Strict</h4>
<pre class="syntax escaped html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="zh"&gt;</pre>
<h4>HTML 4.01 Transitional</h4>
<pre class="syntax escaped html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="zh"&gt;</pre>
<h4>XHTML 1.0 Strict</h4>
<pre class="syntax escaped html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html lang="zh" xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh"&gt;</pre>
<h4>XHTML 1.0 Transitional</h4>
<pre class="syntax escaped html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"&gt;</pre>
<h4>XHTML 1.0 Frameset</h4>
<pre class="syntax escaped html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;
&lt;html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"&gt;</pre>
<h4>XHTML Mobile 1.0</h4>
<pre class="syntax escaped html">&lt;!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&gt;
&lt;html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"&gt;</pre>
<h4>XHTML 1.1</h4>
<pre class="syntax escaped html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"&gt;</pre>
<p>要留意的是, 以上各項的語言皆設成中文(<code class="syntax escaped html">zh</code>). 所以如果你的是日文(<code class="syntax escaped html">ja</code>), 英文(<code class="syntax escaped html">en</code>), 法文(<code class="syntax escaped html">fr</code>) 等其他語言的話, 所把<code class="syntax escaped html">lang="zh"</code>和<code class="syntax escaped html">xml:lang="zh"</code>中的<code class="syntax escaped html">zh</code>改成適當的ISO Language Code, 即那些2個英文字母組成, 代表語言的編碼. 可到W3School的<a title="W3School HTML IOS Language Code Reference" href="http://www.w3schools.com/tags/ref_language_codes.asp" target="_blank">HTML ISO Language Code Reference</a>作參考.</p>
]]></content:encoded>
			<wfw:commentRss>http://main.peterwongpp.com/post/1261/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
