diff options
Diffstat (limited to 'files/zh-tw/learn')
| -rw-r--r-- | files/zh-tw/learn/css/howto/css_faq/index.html | 166 | ||||
| -rw-r--r-- | files/zh-tw/learn/forms/how_to_structure_a_web_form/index.html (renamed from files/zh-tw/learn/html/forms/how_to_structure_an_html_form/index.html) | 3 | ||||
| -rw-r--r-- | files/zh-tw/learn/forms/index.html (renamed from files/zh-tw/learn/html/forms/index.html) | 3 | ||||
| -rw-r--r-- | files/zh-tw/learn/how_to_contribute/index.html | 81 | ||||
| -rw-r--r-- | files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.html (renamed from files/zh-tw/learn/html/multimedia_and_embedding/html中的圖片/index.html) | 3 | ||||
| -rw-r--r-- | files/zh-tw/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html (renamed from files/zh-tw/learn/html/multimedia_and_embedding/其他_嵌入_技術/index.html) | 3 | ||||
| -rw-r--r-- | files/zh-tw/learn/html/tables/basics/index.html (renamed from files/zh-tw/learn/html/tables/基礎/index.html) | 3 | ||||
| -rw-r--r-- | files/zh-tw/learn/javascript/building_blocks/events/index.html | 86 | ||||
| -rw-r--r-- | files/zh-tw/learn/performance/multimedia/index.html (renamed from files/zh-tw/learn/performance/多媒體/index.html) | 3 | ||||
| -rw-r--r-- | files/zh-tw/learn/server-side/first_steps/introduction/index.html (renamed from files/zh-tw/learn/server-side/first_steps/介紹/index.html) | 3 |
10 files changed, 266 insertions, 88 deletions
diff --git a/files/zh-tw/learn/css/howto/css_faq/index.html b/files/zh-tw/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..8c23cbadbf --- /dev/null +++ b/files/zh-tw/learn/css/howto/css_faq/index.html @@ -0,0 +1,166 @@ +--- +title: CSS 一般問題 +slug: Learn/CSS/Howto/CSS_FAQ +tags: + - CSS + - 待審閱技術 + - 待審閱文字 + - 所有類別 +translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/Common_CSS_Questions +--- +<p> +</p> +<h4 id=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4" name=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4"> 我的 CSS 合乎規格，但繪出的版面有誤 </h4> +<p>如果想讓大部分的瀏覽器都能正確繪製標準 HTML/CSS 頁面，便須於 HTML 檔案中放上完整的正確 DOCTYPE。 +</p><p>新近瀏覽器都有兩種佈局模式： +</p> +<ul><li> <i>Quirks 模式</i>：也稱為相容模式，讓舊網頁能依照以前舊瀏覽器的方式顯現。 +</li><li> <i>標準模式</i>：瀏覽器將依循 W3C 規範決定網頁的顯示方式。 +</li></ul> +<p>以 Gecko 為核心的瀏覽器都有第三種<i><a href="zh_tw/Gecko_%e8%bf%91%e4%b9%8e%e6%a8%99%e6%ba%96%e6%a8%a1%e5%bc%8f">近乎標準</a></i>模式，其中只有一些些不合規範的地方。 +</p><p>如果你宣告的 DTD 不合標準或過期了，那麼瀏覽器就會進入 Quirks 模式。 +</p><p>以下是常用的 DTD 列表，可以讓瀏覽器進入標準或近乎標準模式。 +</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"http://www.w3.org/TR/html4/loose.dtd"> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +</pre> +<h4 id="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5" name="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5"> <code>id</code> 與 <code>class</code> 之間的差別 </h4> +<p>HTML 元素都可有 <code>id</code> 及 <code>class</code> 屬性。<code>id</code> 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；<code>class</code> 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 <code>class</code> 屬性值相同。) CSS 可以讓你以 <code>id</code> 或 <code>class</code> 來決定某元素的樣式。 +</p><p>如果你想指定某特定單一元素的樣式，則應使用 <code>id</code>。 +</p> +<hr> +<p>若有很多個元素皆有相同樣式，則可使用 <code>class</code>。 +</p><p>這方面的資訊亦可參考 <a href="zh_tw/CSS/Getting_Started/Selectors">CSS 選取符</a>。 +</p> +<hr> +<h4 id=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC" name=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC"> 恢復某特性的預設值 </h4> +<p>CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 <i>default</i> 的關鍵字。 +</p><p>所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 <code>p</code> 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。 +</p><p>此外，由於 CSS 具<i>串聯</i>特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。 +</p> +<h4 id=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F" name=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F"> 相依樣式 </h4> +<p>CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer 所寫、關於 CSS 工作小組的說明</a>。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。 +</p> +<h4 id=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5" name=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5"> 套用多重類別 </h4> +<p>你可以在 HTML 元素的 <code>class</code> 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。 +</p> +<pre><style type="text/css"> +.firstclass { background: black; color: white; } +.secondclass { font-weight: bold; } +</style> + +<div class="firstclass secondclass"> +... content ... +... content ... +... content ... +</div> +</pre> +<p>若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與<code>class</code> 屬性中的次序無關。 +</p> +<h4 id=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F" name=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F"> 無用樣式 </h4> +<p>即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。 +</p><p>以下是導致樣式被略過的常見情形： +</p> +<ul><li> HTML 元素層次問題 +</li><li> 樣式規則重新定義 +</li><li> 特性的簡寫法 +</li><li> 使用 <code>*</code> 選取符 +</li><li> CSS 明確性 +</li></ul> +<p>你可以使用 <a href="zh_tw/DOM_%e8%a7%80%e5%af%9f%e5%99%a8">DOM 觀察器</a> 的 <i>CSS Style Rules</i> 來檢查上述問題。 +</p><p><b>HTML 元素層次問題</b> +</p><p>此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。 +</p> +<pre>#section { font-weight: bold; } +.redtext { font-weight: normal; color: red; } + +<div id="section"> + 粗體、 + <span class="redtext">正常紅字、</span> + 又見粗體 +</div> +</pre> +<p>如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。 +</p><p><b>樣式規則重新定義</b> +</p><p>在 CSS 樣式表中，先後次序<b>非常</b>重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。 +</p> +<pre>#section { font-weight: bold; } +.redtext { color: red; } +/* 其他規則 */ +/* 其他規則 */ +/* 其他規則 */ +.redtext { color: green; } + +<div id="section"> +粗體、 +<span class="redtext">正常紅字？</span> +又見粗體 +</div> +</pre> +<p>為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。 +</p><p><br> +<b>特性的簡寫法</b> +</p><p>使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。 +</p> +<pre>#section { font-size: 12px; font-family: Verdana; font-weight: bold; } +.redtext { font: 14px Arial; color: red; } + +<div id="section"> + 採用 Verdana 粗體的 12px 字樣； + <span class="redtext">採用 Arial 正常字體的 14px 紅字；</span> + 還是採用 Verdana 粗體的 12px 字樣。 +</div> +</pre> +<p>前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序<b>真的</b>很重要。 +</p> +<pre>#section { + font-weight: bold; + font: 12px Verdana; /* 有了這行，font-weight 又回到預設的 normal 了 */ +} +</pre> +<p><br> +<b>使用 <code>*</code> 選取符</b> +</p><p><code>*</code> 選取符表示任何元素皆符合，但使用上應多加小心。 +</p> +<pre>body * { font-weight: normal; } +#section { font: 12px Verdana; } +.boldtext { font-weight: bold; } +.redtext { color: red; } + +<div id="section"> + 正常、 + <span class="boldtext"> + <span class="redtext">正常紅字、</span> + </span> + 又見正常。 +</div> +</pre> +<p>在此例中，選取符為 <code>body *</code> 的規則會套用到所有 <code>body</code> 內的元素，也包括 <i>redtext</i>，所以原先套用到 <i>boldtext</i> 的 <code>font-weight: bold;</code> 就被覆蓋為 <code>font-weight: normal;</code> 了。 +</p><p><br> +<b>CSS 明確性</b> +</p><p>如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的 <code>style</code> 屬性中）優先權最高，其次是以 <code>id</code> 做選取符的規則，再其次是以 <code>class</code> 套用的類別，最後則是單純以元素名稱當選取符的規則。 +</p> +<pre>div { color: black; } +#orange { color: orange; } +.green { color: green; } + +<div id="orange" class="green" style="color: red;">是紅的！</div> +</pre> +<p>如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 規格書的 6.4.3 一節</a>。 +</p> +<h4 id="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F" name="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F"> -moz-* 特性是什麼玩意？ </h4> +<p>請見 <a href="zh_tw/Mozilla_%e6%93%b4%e5%85%85%e7%9a%84_CSS">Mozilla 擴充的 CSS</a>。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。 +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS" } ) }} diff --git a/files/zh-tw/learn/html/forms/how_to_structure_an_html_form/index.html b/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.html index b403666795..75d20ace22 100644 --- a/files/zh-tw/learn/html/forms/how_to_structure_an_html_form/index.html +++ b/files/zh-tw/learn/forms/how_to_structure_a_web_form/index.html @@ -1,7 +1,8 @@ --- title: 如何建構 HTML 表單 -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +slug: Learn/Forms/How_to_structure_a_web_form translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form --- <div>{{LearnSidebar}}</div> diff --git a/files/zh-tw/learn/html/forms/index.html b/files/zh-tw/learn/forms/index.html index 589880794f..855e429d14 100644 --- a/files/zh-tw/learn/html/forms/index.html +++ b/files/zh-tw/learn/forms/index.html @@ -1,6 +1,6 @@ --- title: 網站表單-與數據合作 -slug: Learn/HTML/Forms +slug: Learn/Forms tags: - Featured - Forms @@ -11,6 +11,7 @@ tags: - Web - 待翻譯 translation_of: Learn/Forms +original_slug: Learn/HTML/Forms --- <p><span class="seoSummary">這篇指南提供了一系列的文章，幫你掌握HTML表單的基本知識。對於與使用者互動，網站表單是一項十分有力的工具，最常使用於用戶數據蒐集，或控制使用者介面。但由於一些歷史與技術上的因素，並沒有顯著的方法發揮表單的潛力。</span>在下面的指引中，我們將介紹網站表單所有基本面向，包括標記他們的HTML結構、設定控制器樣式、驗證數據及將數距提送至伺服器</p> diff --git a/files/zh-tw/learn/how_to_contribute/index.html b/files/zh-tw/learn/how_to_contribute/index.html deleted file mode 100644 index f8a864b98d..0000000000 --- a/files/zh-tw/learn/how_to_contribute/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: 如何建設 MDN 學習專區 -slug: Learn/How_to_contribute -tags: - - Documentation - - 初學者 - - 貢獻 -translation_of: Learn/How_to_contribute ---- -<div>{{LearnSidebar}}</div> - -<p>無論你是初來乍到、抑或尋至深處無怨尤、都應該是對貢獻 MDN 學習專區起了興趣吧。那很棒！</p> - -<p><span class="seoSummary">在這裡，你會看到該如何改進 MDN 學習專區的內容。視你的時間多寡、以及你是<a href="/zh-TW/Learn/How_to_contribute#我是初學者">初學者</a>、<a href="/zh-TW/Learn/How_to_contribute#我是網路開發者">網路開發者</a>、<a href="/zh-TW/Learn/How_to_contribute#我是教師">教師</a>而定，有一些你可以完成的事情。</span></p> - -<div class="note"> -<p><strong>注意</strong>：你可以在<a href="/zh-TW/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">如何撰寫幫助別人理解 Web 的文章</a>裡面找到指引如何撰寫學習專區的新文章。</p> -</div> - -<h2 id="找到特定的任務">找到特定的任務</h2> - -<p><strong>貢獻者們使用 <a href="https://trello.com/b/LDggrYSV">Trello board</a> 來組織工作事務。你可以透過這個方法，找出某個專案的工作。要加入的話，只要 <a href="https://trello.com/signup">建立一個 Trello 的帳號</a>、然後去 ping Chris Mills 叫他給你撰寫 board 的權限。</strong></p> - -<p>Contributing is a great way to have some fun while learning new stuff. If you ever feel lost or have questions, don't hesitate to reach us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> (see at the bottom of this page for details). <a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> is the topic driver for the Learning Area — you could also try pinging him directly.</p> - -<p>接下來的章節，會提供一些在你所能下的常見點子。</p> - -<h2 id="我是初學者">我是初學者</h2> - -<p>真棒！初學者在學習專區的創建與給予回饋，不但重要還很寶貴。身為目標閱聽者的你能在文章方面，提供令你成為團內重要成員的獨特觀點。如果你透過這些文章學習卻碰上問題、或是在某些地方稿不清楚，你可以自己去改它、或告訴我們以便我們修正之。</p> - -<p>我們建議你可以透過以下方法貢獻：</p> - -<dl> - <dt><a href="/zh-TW/docs/MDN/Contribute/Howto/Tag">給我們的文章添加標籤</a>（約五分鐘）</dt> - <dd>給 MDN 的文章添加標籤，是向 MDN 貢獻的最簡單方法。我們有很多功能會透過標籤助以呈現內文資訊，所以幫忙標籤的建設相當寶貴。從沒有任何標籤的<a href="/zh-TW/docs/MDN/Doc_status/Glossary#No_tags">術語表</a>以及<a href="/zh-TW/docs/MDN/Doc_status/Learn#No_tags">學習專區</a>開始吧。</dd> - <dt><a href="/zh-TW/docs/Glossary">閱讀並評價術語表</a>（約五分鐘）</dt> - <dd>我們需要身為初學者的眼光，來檢視我們的內容。如果你發現某個術語難以理解，就表示該術語需要改進。你可以作任何認為有需要的更動。如果你不認為自己有修改該術語的技能，至少請透過<a href="/zh-TW/docs/MDN/Community#Join_our_mailing_lists">我們的郵件清單</a>告訴我們。</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰寫新的術語</a>（約二十分鐘）</dt> - <dd>這是最有效的新技能學習法。選一個你想理解的概念去研究。接著，撰寫這個術語。和別人解釋，是「固著」你腦內知識的好方法。既幫自己理解所知、也幫了其他人。利人利己，大家都贏！</dd> - <dt><a href="/zh-TW/Learn/Index">閱讀並評價術語表學習專區的文章</a>（約兩小時）</dt> - <dd>和閱讀術語表差不多，但因為文章會更長了些，所以要花更多時間。</dd> -</dl> - -<h2 id="我是網路開發者">我是網路開發者</h2> - -<p>好極了！我們需要你的技能，來確保我們教給初學者的內容正確無誤。因為這裡的宗旨是理解網路，請確保解釋儘可能簡單，但不致毫無用處。比起過度精確，可以理解才是最重要的。</p> - -<dl> - <dt><a href="/zh-TW/docs/Glossary">閱讀並評價術語表</a>（約五分鐘）</dt> - <dd>我們需要你確認文章的內容是正確又不過於艱澀難懂的。請你變更任何你認為有必要改善的地方。如果你想要在做變更之前討論一下內容，歡迎透過 <a href="/zh-TW/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> 或 <a href="/zh-TW/docs/MDN/Community#Get_into_IRC">IRC channel</a>通知我們。</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰寫新的術語</a>（約二十分鐘）</dt> - <dd>闡明術語是一個簡單又精確的學習方式，初學者還會感激你。我們有<a href="/zh-TW/docs/Glossary#Contribute">很多尚未定義的用詞</a>需要你的協助，挑一個你擅長的吧。</dd> - <dt><a href="/zh-TW/Learn/Index">閱讀並評價術語表學習專區的文章</a>（約兩小時）</dt> - <dd>這跟評價數語表一樣(如上述)，只是這些文章的篇幅更常，需要花更多的時間。</dd> - <dt><a href="/zh-TW/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰寫新的學習專區文章</a> (<em>約四小時或更多</em>)</dt> - <dd>MDN缺少簡單易懂的網頁技術相關文章(例如<a href="/zh-TW/docs/Learn/CSS">HTML</a>, <a href="/zh-TW/docs/Learn/CSS">CSS</a>, <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>)。我們也有較舊的文章需要重新審視並修正，請你將技能發揮到極致，讓初學者也能使用網頁技術。</dd> - <dt><a href="/zh-TW/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">提供練習題、範例或是互動式的教學工具。</a>(<em>? 小時</em>)</dt> - <dd>我們所有的文章都需要 "active learning" 的素材在內，因為讓人們學習的最好途徑就是讓他們自己實作。這些素材會是練習題或互動式的內容，能協助使用者將文章內詳述的概念實際運用。有很多方式能夠製作 "active learning" 的內容，像是使用 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> 或相似的工具提供範例程式碼，或使用<a href="https://thimble.mozilla.org/" rel="external">Thimble</a>提供互動式的內容。 好好發揮你得創造力吧！</dd> -</dl> - -<h2 id="我是教師">我是教師</h2> - -<p>MDN 有著精良的技術史，但我們對教導新人觀念的最佳方法，缺乏深入了解。針對這方面，我們需要借重做為教師或導師身份的你。你能幫我們確保給讀者們的內容，有著良好而實用的教育路徑（educational track）。</p> - -<dl> - <dt><a href="/zh-TW/docs/Glossary">閱讀並評價術語表</a>（約十五分鐘）</dt> - <dd>Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on <a href="/zh-TW/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/zh-TW/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰寫新的術語</a>（約一小時）</dt> - <dd>Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have <a href="/zh-TW/docs/Glossary#Contribute">many undefined terms</a> which need your attention. Pick one and go for it.</dd> - <dt><a href="/en-US/docs/tag/needsSchema">添加實例或圖表至文章</a> (<em>約一小時</em>)</dt> - <dd>As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the <a href="/zh-TW/docs/tag/needsSchema">articles that lack illustrative content</a> and pick one you'd like to create graphics for.</dd> - <dt><a href="/en-US/Learn/Index">閱讀並審核教學文章</a> (約兩小時)</dt> - <dd>This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰寫新的教學文章</a> (<em>約四小時</em>)</dt> - <dd>We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">建立練習題，測驗或是互動式的學習工具</a>(<em>? 小時</em>)</dt> - <dd>All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article. There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Unleash your creativity!</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">建立學習途徑</a> (<em>? 小時</em>)</dt> - <dd>In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing to create a learning article to write.</dd> -</dl> diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/html中的圖片/index.html b/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.html index 5a2dfd7eff..90df15a4bc 100644 --- a/files/zh-tw/learn/html/multimedia_and_embedding/html中的圖片/index.html +++ b/files/zh-tw/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -1,7 +1,8 @@ --- title: HTML中的圖片 -slug: Learn/HTML/Multimedia_and_embedding/HTML中的圖片 +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +original_slug: Learn/HTML/Multimedia_and_embedding/HTML中的圖片 --- <div>{{LearnSidebar}}</div> diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/其他_嵌入_技術/index.html b/files/zh-tw/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index a1996f2537..d828b00fca 100644 --- a/files/zh-tw/learn/html/multimedia_and_embedding/其他_嵌入_技術/index.html +++ b/files/zh-tw/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -1,7 +1,8 @@ --- title: 從物件到iframe - 其他嵌入技術 -slug: Learn/HTML/Multimedia_and_embedding/其他_嵌入_技術 +slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +original_slug: Learn/HTML/Multimedia_and_embedding/其他_嵌入_技術 --- <div>{{LearnSidebar}}</div> diff --git a/files/zh-tw/learn/html/tables/基礎/index.html b/files/zh-tw/learn/html/tables/basics/index.html index 03325afbce..2d82ef2ea2 100644 --- a/files/zh-tw/learn/html/tables/基礎/index.html +++ b/files/zh-tw/learn/html/tables/basics/index.html @@ -1,7 +1,8 @@ --- title: HTML表格的基礎 -slug: Learn/HTML/Tables/基礎 +slug: Learn/HTML/Tables/Basics translation_of: Learn/HTML/Tables/Basics +original_slug: Learn/HTML/Tables/基礎 --- <div>{{LearnSidebar}}</div> diff --git a/files/zh-tw/learn/javascript/building_blocks/events/index.html b/files/zh-tw/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..9bb566a61d --- /dev/null +++ b/files/zh-tw/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,86 @@ +--- +title: Event attributes +slug: Learn/JavaScript/Building_blocks/Events +translation_of: >- + Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these +translation_of_original: Web/Guide/HTML/Event_attributes +original_slug: Web/Guide/HTML/Event_attributes +--- +<p><span class="seoSummary">每一個 HTML 元素都可以放置事件屬性，以藉此於事件發生時能執行 JavaScripte 程式。事件屬性的名稱都有一個前綴「on」，例如當使用者點選元素時要執行指定的 JavaScript，可以使用 </span><code>onclick</code><span class="seoSummary"> 屬性並把要執行的 JavaScript 當成屬性值。</span></p> + +<p>In the JavaScript code executed in response to the event, <code>this</code> is bound to the HTML element and the {{domxref("Event")}} object can be reached using the <code>event</code> variable in the scope of the attribute.</p> + +<div class="warning"> +<p><strong>Warning:</strong> These attributes should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the {{domxref("Window")}} object, polluting the global namespace.</p> +</div> + +<p>While these attributes can at times be attractively easy to use, you should avoid using them. Instead, use the {{domxref("EventTarget.addEventListener()")}} function to add a listener for the event.</p> + +<p>Event attributes can be blocked by using <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a> which if used, blocks all inline scripts unless the <em>'unsafe-inline'</em> keyword is used.</p> + +<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Example using event attributes</h2> + +<p>This example appends text to an element each time time the {{HTMLElement("div")}} is clicked.</p> + +<div class="note"> +<p><strong>Note:</strong> This is an example of how not to do things, using one of these attributes.</p> +</div> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event Attribute Example</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>"; + } + </script> + </head> + <body> + <div onclick="doSomething();">Click me!</div> + <div id="thanks"></div> + </body> +</html> +</pre> + +<p>Try this example below:</p> + +<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p> + +<h2 id="Example_using_event_listeners">Example using event listeners</h2> + +<p>Instead, you should use {{domxref("EventTarget.addEventListener()")}}, as shown here:</p> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event Attribute Example</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>"; + } + + // Called when the page is done loading; this is where we do any setup we need, + // such as creating event listeners for the elements in the page. + + function setup() { + document.getElementById("click").addEventListener("click", doSomething, true); + } + + // Install an event handler on the window to receive the "load" event, which + // indicates that the document has finished loading into the window. + + window.addEventListener("load", setup, true); + </script> + </head> + <body> + <div id="click">Click me!</div> + <div id="thanks"></div> + </body> +</html></pre> + +<p>You can see this in action below:</p> + +<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> + +<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/zh-tw/learn/performance/多媒體/index.html b/files/zh-tw/learn/performance/multimedia/index.html index cbd3d8e23a..8dd950b4cc 100644 --- a/files/zh-tw/learn/performance/多媒體/index.html +++ b/files/zh-tw/learn/performance/multimedia/index.html @@ -1,7 +1,8 @@ --- title: '多媒體: 圖像跟影片' -slug: Learn/Performance/多媒體 +slug: Learn/Performance/Multimedia translation_of: Learn/Performance/Multimedia +original_slug: Learn/Performance/多媒體 --- <p>媒體，換句話說就是圖像跟影片，平均占了網站超過70%的下載流量。以下載的效能來考慮的話，減少媒體數量和檔案大小是一個簡單可以實現的目標。 <span class="seoSummary">這篇文章聚焦在優化圖像跟影片來改善網站的效能。</span></p> diff --git a/files/zh-tw/learn/server-side/first_steps/介紹/index.html b/files/zh-tw/learn/server-side/first_steps/introduction/index.html index a0919697ee..e93c7b9c32 100644 --- a/files/zh-tw/learn/server-side/first_steps/介紹/index.html +++ b/files/zh-tw/learn/server-side/first_steps/introduction/index.html @@ -1,7 +1,8 @@ --- title: 伺服器端的介紹 -slug: Learn/Server-side/First_steps/介紹 +slug: Learn/Server-side/First_steps/Introduction translation_of: Learn/Server-side/First_steps/Introduction +original_slug: Learn/Server-side/First_steps/介紹 --- <div>{{LearnSidebar}}</div> |