舊文件

此處文件僅供參考，請自行考量時效性與適用程度，其他庫藏文件請參考文件頁面；
我們亟需您的協助，進行共筆系統搬移、及文件整理工作，詳情請查閱參與我們。

「以萬維網標準設計您的網頁」修訂間的差異

出自 MozTW Wiki

小 （修第一段）
（→‎其它棄用的元素）
行 43： 行 43：
  
 
<pre class="code">
 
<pre class="code">
−
<LAYER SRC="foo.html" height="300" width="400"> </LAYER>
+
&lt;LAYER SRC="foo.html" height="300" width="400"&gt; &lt;/LAYER&gt;
 
</pre>
 
</pre>
  
行 49： 行 49：
  
 
<pre class="code">
 
<pre class="code">
−
<iframe src="foo.html" height="300" width="400">
+
&lt;iframe src="foo.html" height="300" width="400"&gt;
−
   <a href="foo.html">Foo 內容</a>
+
   &lt;a href="foo.html"&gt;Foo 內容&lt;/a&gt;
−
</iframe>
+
&lt;/iframe&gt;
 
</pre>
 
</pre>
  
行 59： 行 59：
  
 
<pre class="code">
 
<pre class="code">
−
<object data="foo.html" type="text/html" height="300" width="400">
+
&lt;object data="foo.html" type="text/html" height="300" width="400"&gt;
−
   <a href="foo.html">Foo content</a>
+
   &lt;a href="foo.html"&gt;Foo content&lt;/a&gt;
−
</object>
+
&lt;/object&gt;
 
</code>
 
</code>
 
</pre>
 
</pre>
行 180： 行 180：
 
<pre class="code">
 
<pre class="code">
 
&lt;P style="color: blue; font-family: Helvetica, sans-serif;">
 
&lt;P style="color: blue; font-family: Helvetica, sans-serif;">
−
A really <SPAN style="font-size: larger;">big</SPAN> shoe.
+
A really &lt;SPAN style="font-size: larger;"&gt;big&lt;/SPAN&gt; shoe.
 
&lt;/P>
 
&lt;/P>
 
</pre>
 
</pre>
行 187： 行 187：
  
 
<p>更多有關 &lt;FONT&gt; 轉換：</p>
 
<p>更多有關 &lt;FONT&gt; 轉換：</p>
−
[http://www.w3.org/QA/Tips/font-size#goodpractice W3C Quality Assurance tip for webmaster: Care With Font Size, Recommended Practices: Forget <font>, use CSS]
+
[http://www.w3.org/QA/Tips/font-size#goodpractice W3C Quality Assurance tip for webmaster: Care With Font Size, Recommended Practices: Forget &lt;font&gt;, use CSS]
  
 
=== 其它棄用的元素 ===
 
=== 其它棄用的元素 ===
行 198： 行 198：
 
<tr>
 
<tr>
 
   <td><code>CENTER</code> 或 <code>align="center"</code></td>
 
   <td><code>CENTER</code> 或 <code>align="center"</code></td>
−
   <td>CSS1: text-align: center; 用於同軸（inline）元素<br>
+
   <td>CSS1: [http://www.w3.org/TR/REC-CSS1#text-align CSS1 text-align]: center; 用於同軸（inline）元素<br>
−
「[text-align 特性]定義文字[或同軸內容]該如何在元素內對齊」<br>
+
「[text-align 特性]定義文字[或同軸內容]該如何在元素內對齊」</td>
−
<cite>[http://www.w3.org/TR/REC-CSS1#text-align CSS1 text-align]</cite>||
 
 
</tr>
 
</tr>
 
<tr>
 
<tr>
行 209： 行 208：
 
Worth mentioning is the excellent tutorial:<br>
 
Worth mentioning is the excellent tutorial:<br>
 
[http://dorward.me.uk/www/centre/ Centring using CSS]（作者 David Dorward）</td>
 
[http://dorward.me.uk/www/centre/ Centring using CSS]（作者 David Dorward）</td>
 +
</tr>
 +
<tr>
 +
  <td><code>bgcolor</code> 屬性</td>
 +
  <td>CSS1 <code><a href="http://www.w3.org/TR/CSS1#background-color">background-color</a>: ;</code></td>
 +
</tr>
 +
<tr>
 +
  <td><code>S</code><br><code>STRIKE</code></td>
 +
  <td>CSS1: <code>text-decoration: line-through;</code></td>
 +
</tr>
 +
<tr>
 +
  <td><code>U</code></td>
 +
  <td>CSS1: <code>text-decoration: underline</code></td>
 +
</tr>
 +
<tr>
 +
  <td><code>DIR</code><br><code>MENU</code></td>
 +
  <td>HTML 4.01: <code>&lt;UL&gt;</code></td>
 +
</tr>
 +
</table>
 +
 +
== 其它排除的元素 ==
 +
 +
有一些用來作動畫與其它特效的專有元素不在任何資訊網標準內。本節舉出這些元素並建議一些用 W3C HTML 4.01 取得同樣效果的技巧：
 +
 +
<table border="1" cellpadding="4" cellspacing="0">
 +
<tr>
 +
  <th>排除的元素</th>
 +
  <th>W3C 代換方式</th>
 +
</tr>
 +
<tr>
 +
  <td><code>BLINK</code><br>Nav2+</td>
 +
  <td>CSS1: <code>text-decoration: blink;</code><br>
 +
用戶代理有受 CSS1 規格要求要能識別 blink 關鍵字，但沒有受要求支援閃爍效果，因此符合 CSS1 的瀏覽器不一定會將文字閃爍顯示出。最好的方法是不要用閃爍內容。</td>
 +
</tr>
 +
<tr>
 +
  <td><code>MARQUEE</code><br><i>IE2+</i></td>
 +
  <td>HTML 4.01 <code>DIV</code> 或 <code>SPAN</code>，內容字串用 JavaScript 藉由 DOM level 1 來定時轉換。<br>
 +
如閃爍文字，這類效果不受鼓勵。調查有顯示不斷移動的物件或文字會干擾閱讀與降低周邊視力。DHTML 走馬燈並且 greatly consumes user system resources (cpu, RAM) on tested browsers and will put modest systems under considerable stress. If after webpage assessment and consideration, you still want to include a marquee effect in your page, then you can use the following tutorials:<br>
 +
[http://developer-test.mozilla.org/docs/DHTML_Demonstrations_Using_DOM/Style:Stock_Ticker Cross-browser and web standard compliant Stock Ticker example] by D. Rosenberg<br>
 +
<a href="http://devedge-temp.mozilla.org/toolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive web standard compliant alternative to &lt;marquee&gt;</a> by D. Rosenberg<br>
 +
<span class="note">Mozilla 1.4+, NS 7.2 and Firefox 1.x support the non-standard &lt;marquee&gt; element. On the other hand, users can disable such support using [http://www.mozilla.org/support/firefox/tips#lay_marquee 這個 tip]</span>
 +
  </td>
 +
</tr>
 +
  <tr><td><code>BGSOUND</code><br><i>IE2+</i></td>
 +
  <td>HTML 4.01 <code>OBJECT</code>, e.g.:<br>
 +
<code>&lt;OBJECT data="audiofile.wav" type="audio/wav" ...&gt;&lt;/OBJECT&gt;</code><br>
 +
See [http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1003240 這個 DevEdge 文章] for information on rendering a sound OBJECT invisible within the page.<br>
 +
Web page background sound often slows down considerably web page loading; like the text effectsabove, music or sound accompanying a page is seldom appreciated. According to the survey page [http://www.lowendmac.com/musings/02/0528.html What we really hate on the web（我們資訊網上討厭的東西）], 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.<br>
 +
[http://www.wowwebdesigns.com/power_guides/music_off.php Why Playing Music on your Web Site is a Bad Idea] by A. Gulez</td>
 +
</tr>
 +
<tr>
 +
  <td><code>EMBED</code><br><i>Nav2+,IE3+</i></td>
 +
  <td>HTML 4.01 <code>OBJECT</code>. See [http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1003240 這個 DevEdge 文章] for information on translating <code>EMBED</code> tags into <code>OBJECT</code> tags.<br>
 +
<code>EMBED</code> has <em>never</em> been part of a W3C HTML recommendation, yet it is still supported by Gecko and other modern browsers. Quality of support varies; Internet Explorer's support is incompatible with most Netscape plug-ins. Support for <code>OBJECT</code> is not universal, either, particularly for older browsers.</td>
 
</tr>
 
</tr>
 
</table>
 
</table>

於 2005年5月20日 (五) 08:41 的修訂

原文 (重大更新中)

  • 翻譯：Daniel Wang、趙柏強
  • 原作：Mike Cowperthwaite, Marcio Galli, Jim Ley, Ian Oeschger, Simon Paquet, Gérard Talbot

Browser makers are no longer the problem. The problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers.

現在問題已經不在瀏覽器開發商，而是許多網頁設計師的思緒還停在 90 年代、以瀏覽器怪僻為主的網頁製作方式。這通常是因為他們不知道怎麼同時支援近代標準並相容較舊的瀏覽器。 Web Standards Project

一些用於嵌入 DHTML（動態 HTML）至頁面的元素及技巧已被 W3C 的 HTML 4.01 與文件物件模型（Document Object Model，DOM）規格書所排拒在外了。以 <LAYER> 標籤與 document.layers[] 物件組為例，它們實際上並非任何資訊網標準的一份子。近來相容於 W3C 標準的瀏覽器（如 Mozilla、Firefox、與 Netscape 6/7）並不支援這些非標準的元素與專有的 DOM 串組。

本文章提供您一份將網頁升級、以求符合全球資訊網標準的程序概覽。各段節會舉出一些與標準相違背之技法，並建議替代方案。所有本文章所提出的標準替代方案皆也測試與檢定過，在近代瀏覽器如 MSIE 6、Netscape 7.x、Firefox 1.x、Opera 7+、Safari 1.2+、Konqueror 3.x 等裡完全無問題。最後的一節「更動摘要」整理本文所有替換建議。

本文件內容:

  1. 升級　Layer 元素 (Netscape 4)
  2. 棄用（Deprecated）的元素
    1. Applet
    2. Font
    3. 其它棄用的
  3. 其它排除的元素
  4. 使用 W3C DOM
    1. 與 DOM 相關未支援的屬性
    2. 以 W3C DOM 存取元素
    3. 操作文件樣式及內容
  5. 開發跨瀏覽器跨平台的網頁
  6. 使用物件偵測
  7. 更動摘要

升級　Layer 元素 (Netscape 4)

本節解釋如何用符合標準的 HTML 4.01 來取代 Netscape 4 的 <layer> 與 <ilayer> 元素。因為 <layer> 與 <ilayer> 元素不屬於任何的 W3C 網路標準， Netscape 6/7、Firefox 與 Mozilla 等合乎標準的瀏覽器皆不支援 <layer> 與 <ilayer> 元素。

document.layers[] 物件集及 Netscape 4 Layer DOM 其它的特定的功能也不受支援，這些在 DOM 一節會討論。

在 Netscape 4 裡，<layer> 元素主要有兩個功用：

  • 在網頁中嵌入外部的 HTML 內容，與
  • 設定 HTML 內容特定區塊的位置；這類 HTML 內容的區塊通常在書中、在參考文件中、或在網頁作者間被稱呼為 layer﹝圖層﹞ 或 DHTML layer。

取代作為嵌入外部 HTML 內容的 <layer> 與 <ilayer>

如果你有

<LAYER SRC="foo.html" height="300" width="400"> </LAYER>

那對於 HTML 4.01 Transitional（過渡）文件你可用以下取代：

<iframe src="foo.html" height="300" width="400">
  <a href="foo.html">Foo 內容</a>
</iframe>

註：如 Netscape 4 等不支援 IFRAME 的使用代理器與非常舊的視訊瀏覽器會顯示它的內容如：「這裡，內容鏈結」。如此，內容對於較舊瀏覽器的親和力（內容退化）可以確保與最優雅化。

或著，對於 HTML 4.01 Strict（嚴格）文件你可用以下取代：

<object data="foo.html" type="text/html" height="300" width="400">
  <a href="foo.html">Foo content</a>
</object>
</code>

註：同上，不支援這物件元素的使用代理器與瀏覽器會顯示該鏈結，因此確保內容可以取得。

一般使用 <iframe> 或 <object> 的親和力策略是在 <iframe> 或 <object> 內置入最常用與支援最多的元素。如此，無法繪製 <iframe> 或 <object> 的使用代理器可以繪製這內容來代替。大多數瀏覽器遇到不名元素時的一般規則是盡所能繪製它的內容。註一

更多有關內嵌 HTML 內容：
Notes on embedded documents from W3C HTML 4.01

註一：「如果使用代理遇到它不認識的元素，它應試著繪製元素的內容。」:Notes on invalid documents

注意：本建議並非HTML 4.01 的規範。雖然這修正錯誤的機制有受廣泛地實作，資訊網作者不應盲目地依賴它。

取代作為置放(positioned)區塊的 <layer> 與 <ilayer>

要升級置放的 <layer> 元素最好的 W3C 資訊網標準的取代方法是用 <div>。<div> 元素不能夠轉置(transclude)，不能夠匯入網頁外的 HTML 內容，因此如果設定 src 屬性它將受符合 W3C 的瀏覽器所忽略。

如果你有

<LAYER style="position: absolute;" top="50" left="100"
width="150" height="200">
   ... 內容在這裡 ...
</LAYER>

你可以用這個代替： 

<div style="position: absolute; top: 50px; left: 100px;
width: 150px; height: 200px;">
   ... 內容在這裡 ...
</div>

棄用（Deprecated）的元素

HTML 4.01 內棄用的元素一般被廣泛使用，不過它們已被其它的技巧所取代了。

W3C 的階層樣式列表（CSS）建議書中承襲了許多棄用（和一些排除的）標籤的功能，樣式表提供了威力強大的展示及組織能力，但對於 CSS 的討論則不在此文的範圍之中。

Applet

APPLET 元素的功能已在 HTML 4.01 中為 OBJECT 取代而棄用。

<p>
<applet code="HelloWorldApplet.class" height="200" width="350"></applet>
</p>

可以被轉為

<p>
<object
  classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" 
  codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0" 
  codetype="application/java" standby="載入 applet 中..." 
  height="200" width="350">
<param name="code" value="HelloWorldApplet.class">
<!--[if !IE]>
Mozilla 1.x、Firefox 1.x、Netscape 7.x 與其它會用內物件(巢套物件)
-->
     <object classid="java:HelloWorldApplet.class" 
     standby="載入 applet 中..." 
     height="200" width="350">
     <p>你的瀏覽器似乎沒有啟用 java 支援或沒有 Java plug-in。<br>
     <a href="http://www.java.com/zh_TW/download/manual.jsp">你可以在這裡下載
     最新的 Java plug-in。（免費下載；15 MB）</a></p>
     </object>
<!--<![endif]-->
</object>
</p>

以上的程式碼在 will work for MSIE 6、以 Mozilla 為基礎的瀏覽器、與其它以標準為基礎的瀏覽器有效。此外，它會通過 HTML 4.01 transitional 或 HTML 4.01 strict 的查驗（validation）。

程式碼的解釋：

根據 HTML 4.01 推薦，如果 <object>（因為其內容型別不受支援或無 ActiveX 控制件的支援）不受繪製，則瀏覽器應繪製其內容：這裡，內容是另一個（代替的）<object>。在這裡，不支援由 ActiveX 控制件觸發之 Java plug-in 的瀏覽器會顯示內 <object>。

classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93": 
這個 clsid 數值使 MSIE 6 瀏覽器用（安裝在使用者系統上）最高版本的 JRE。有時候 MSIE 6 使用者有安裝數個 JRE plug-in 版本。
codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0": 
這 codebase 定義　JRE　最低版本；在這裡是 1.4.2。如果瀏覽器沒有 java plug-in 或它有的版本在 1.4.2 之前，那將會有自動最新 1.4.2 版的下載。這選擇也許有爭議，一方面最新版的 JRE plug-in 有些安全修補與問題修正，另一方面未有使用者明確的同意而強制下載 15MB 檔不會是最好的。

其它有時會用到或需要的屬性：

  • code="HelloWorldApplet.class": applet 的 class 名稱。
  • archive="JarFileName.jar": 如果 java applet class 存包在 jar 檔內這通常有.jar 副檔名。
  • codetype="application/java"; 如果 class 存包在 jar 檔內 codetype 應是「application/java-archive」。
  • data="java:HelloWorldApplet.class": applet 資料。
  • type="application/java": 資料的型別。如果 data 屬性有用到建議一並用這屬性。

其它 applet 轉換到 object 的資訊

Font

被棄用的 FONT 標籤廣泛用以指定文字的字體、色彩及尺寸，而這種功能已從 HTML 轉移至 CSS。FONT 標籤可直接以指定了相同樣式資訊的 SPAN 標籤替代：

<P><FONT color="blue" face="Helvetica">
A really <FONT size="+1">big</FONT> shoe.
</FONT></P>

可轉換為 

<pre class="code">
<P><SPAN style="color:blue; font-family: Helvetica, sans-serif;">
A really <SPAN style="font-size: larger;">big</SPAN> shoe.
</SPAN></P>

或簡潔點的方式 

<P style="color: blue; font-family: Helvetica, sans-serif;">
A really <SPAN style="font-size: larger;">big</SPAN> shoe.
</P>

這雖然適用於區域字體的改變，但卻不是使用樣式的最佳方式；CSS 的本意在於將文字及其他樣式以具邏輯的組合方式，來全域性地將樣式套用到所需的所有元素上。

更多有關 <FONT> 轉換：

W3C Quality Assurance tip for webmaster: Care With Font Size, Recommended Practices: Forget <font>, use CSS

其它棄用的元素

棄用元素與屬性 W3C 代換方式
CENTER 或 align="center" CSS1: CSS1 text-align: center; 用於同軸（inline）元素
「[text-align 特性]定義文字[或同軸內容]該如何在元素內對齊」
CENTER 或 align="center" CSS1: margin-left: auto; margin-right: auto; for block-level elements

「if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent.」
CSS1 horizontal formating
Worth mentioning is the excellent tutorial:

Centring using CSS（作者 David Dorward）
bgcolor 屬性 CSS1 <a href="http://www.w3.org/TR/CSS1#background-color">background-color</a>: ;
S
STRIKE		 CSS1: text-decoration: line-through;
U CSS1: text-decoration: underline
DIR
MENU		 HTML 4.01: <UL>

其它排除的元素

有一些用來作動畫與其它特效的專有元素不在任何資訊網標準內。本節舉出這些元素並建議一些用 W3C HTML 4.01 取得同樣效果的技巧：

排除的元素 W3C 代換方式
BLINK
Nav2+		 CSS1: text-decoration: blink;
用戶代理有受 CSS1 規格要求要能識別 blink 關鍵字，但沒有受要求支援閃爍效果，因此符合 CSS1 的瀏覽器不一定會將文字閃爍顯示出。最好的方法是不要用閃爍內容。
MARQUEE
IE2+		 HTML 4.01 DIV 或 SPAN，內容字串用 JavaScript 藉由 DOM level 1 來定時轉換。

如閃爍文字，這類效果不受鼓勵。調查有顯示不斷移動的物件或文字會干擾閱讀與降低周邊視力。DHTML 走馬燈並且 greatly consumes user system resources (cpu, RAM) on tested browsers and will put modest systems under considerable stress. If after webpage assessment and consideration, you still want to include a marquee effect in your page, then you can use the following tutorials:
Cross-browser and web standard compliant Stock Ticker example by D. Rosenberg
<a href="http://devedge-temp.mozilla.org/toolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive web standard compliant alternative to <marquee></a> by D. Rosenberg
Mozilla 1.4+, NS 7.2 and Firefox 1.x support the non-standard <marquee> element. On the other hand, users can disable such support using 這個 tip

BGSOUND
IE2+		 HTML 4.01 OBJECT, e.g.:

<OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT>
See 這個 DevEdge 文章 for information on rendering a sound OBJECT invisible within the page.
Web page background sound often slows down considerably web page loading; like the text effectsabove, music or sound accompanying a page is seldom appreciated. According to the survey page What we really hate on the web（我們資訊網上討厭的東西）, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.

Why Playing Music on your Web Site is a Bad Idea by A. Gulez
EMBED
Nav2+,IE3+		 HTML 4.01 OBJECT. See 這個 DevEdge 文章 for information on translating EMBED tags into OBJECT tags.
EMBED has never been part of a W3C HTML recommendation, yet it is still supported by Gecko and other modern browsers. Quality of support varies; Internet Explorer's support is incompatible with most Netscape plug-ins. Support for OBJECT is not universal, either, particularly for older browsers.
取自 "https://wiki.moztw.org/index.php?title=以萬維網標準設計您的網頁&oldid=7247"
個人工具