Skip to content

Commit

Permalink
convert to markdown for learn/html
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Jul 25, 2022
1 parent 68fffd6 commit cf288a8
Show file tree
Hide file tree
Showing 16 changed files with 2,665 additions and 2,727 deletions.
158 changes: 65 additions & 93 deletions files/zh-tw/learn/html/howto/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,134 +3,106 @@ title: 使用HTML解決日常問題
slug: Learn/HTML/Howto
translation_of: Learn/HTML/Howto
---
<div>{{LearnSidebar}}</div>
{{LearnSidebar}}

<p>以下連結會給出 HTML 常見待解問題的方法</p>
以下連結會給出 HTML 常見待解問題的方法

<h3 id="基本結構">基本結構</h3>
### 基本結構

<p>HTML 文件的最基本結構應用。如果你是 HTML 新手，就先從這裡開始看。</p>
HTML 文件的最基本結構應用。如果你是 HTML 新手，就先從這裡開始看。

<ul>
<li><a href="/zh-TW/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">如何建立基本 HTML 文件</a></li>
<li><a href="/zh-TW/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">如何有邏輯地分割網頁</a></li>
<li><a href="/zh-TW/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">如何建立良好的標題段落結構</a></li>
</ul>
- [如何建立基本 HTML 文件](/zh-TW/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document)
- [如何有邏輯地分割網頁](/zh-TW/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections)
- [如何建立良好的標題段落結構](/zh-TW/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs)

<h3 id="基本文字語法">基本文字語法</h3>
### 基本文字語法

<p>HTML 專攻於為文件提供語義資訊，因此 HTML 可以提供使用者更精準的文件資訊傳達方式。</p>
HTML 專攻於為文件提供語義資訊，因此 HTML 可以提供使用者更精準的文件資訊傳達方式。

<ul>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">如何建立清單</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">如何強調文件的內容</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">如何表示出一段文字的重要性</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">如何顯示程式碼</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">如何為圖片加入註記</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">如何標示並註記縮寫</a></li>
<li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">如何在網頁中加入引用</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">如何加入詞語的定義</a></li>
</ul>
- [如何建立清單](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists)
- [如何強調文件的內容](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance)
- [如何表示出一段文字的重要性](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance)
- [如何顯示程式碼](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code)
- [如何為圖片加入註記](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions)
- [如何標示並註記縮寫](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations)
- [如何在網頁中加入引用](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations)
- [如何加入詞語的定義](/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML)

<h3 id="超連結">超連結</h3>
### 超連結

<p>{{Glossary("hyperlink", "超連結")}}把 HTML 導覽變得相當容易，它可以這麼用：</p>
{{Glossary("hyperlink", "超連結")}}把 HTML 導覽變得相當容易，它可以這麼用：

<ul>
<li><a href="/zh-TW/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">如何建立超連結</a></li>
<li><a href="/zh-TW/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
</ul>
- [如何建立超連結](/zh-TW/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
- [How to create a table of contents with HTML](/zh-TW/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu)

<h3 id="圖片與多媒體">圖片與多媒體</h3>
### 圖片與多媒體

<ul>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li>
</ul>
- [How to add images to a webpage](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage)
- [How to add video content to a webpage](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
- [How to add audio content to a webpage](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)

<h3 id="腳本與樣式">腳本與樣式</h3>
### 腳本與樣式

<p>HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本使內容呈現更具互動性。</p>
HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本使內容呈現更具互動性。

<ul>
<li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">如何在網頁中使用 CSS</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">如何在網頁中使用 JavaScript</a></li>
</ul>
- [如何在網頁中使用 CSS](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML)
- [如何在網頁中使用 JavaScript](/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage)

<h3 id="嵌入內容">嵌入內容</h3>
### 嵌入內容

<ul>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
<li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
</ul>
- [How to embed a webpage within another webpage](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
- [How to add Flash content within a webpage](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements)

<h2 id="不常見或進階的問題">不常見或進階的問題</h2>
## 不常見或進階的問題

<p>除了上述的基本功能外，HTML 還提供許多進階功能讓使用者解決較複雜的問題。這些文章可以幫助你處理一些較不常見的情況：</p>
除了上述的基本功能外，HTML 還提供許多進階功能讓使用者解決較複雜的問題。這些文章可以幫助你處理一些較不常見的情況：

<h3 id="表單">表單</h3>
### 表單

<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our [full dedicated guide](/en-US/docs/Web/Guide/HTML/Forms). Here is where you should start:

<ul>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
</ul>
- [How to create a simple Web form](/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form)
- [How to structure a Web form](/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form)

<h3 id="表格訊息">表格訊息</h3>
### 表格訊息

<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:

<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
</ul>
- [How to create a data spreadsheet](/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet)
- [How to make HTML tables accessible](/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible)
- [How to optimize HTML table rendering](/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering)

<h3 id="資料表示方式">資料表示方式</h3>
### 資料表示方式

<ul>
<li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
</ul>
- [How to represent numeric values with HTML](/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML)
- [How to use data attributes](/en-US/docs/Learn/HTML/Howto/Use_data_attributes)
- [How to associate human readable content with arbitrary computer data structures](/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures)

<h3 id="互動性">互動性</h3>
### 互動性

<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
</ul>
- [How to create collapsible content with HTML](/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML)
- [How to add context menus to a webpage](/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage)
- [How to create dialog boxes with HTML](/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML)

<h3 id="進階文字語法">進階文字語法</h3>
### 進階文字語法

<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
</ul>
- [How to take control of HTML line breaking](/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking)
- [How to mark changes (added and removed text)](/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion)

<h3 id="進階圖片_多媒體">進階圖片 &amp; 多媒體</h3>
### 進階圖片 & 多媒體

<ul>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
</ul>
- [How to add responsive image to a webpage](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
- [How to add vector image to a webpage](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
- [How to add a hit map on top of an image](/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image)

<h3 id="國際化">國際化</h3>
### 國際化

<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
HTML is not monolingual. It provides tools to handle common internationalization issues.

<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
</ul>
- [How to add multiple languages into a single webpage](/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage)
- [How to handle Japanese ruby characters](/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters)
- [How to display time and date with HTML](/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML)

<h3 id="效能">效能</h3>
### 效能

<ul>
<li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li>
</ul>
- [How to author fast-loading HTML pages](/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages)
Loading

0 comments on commit cf288a8

Please sign in to comment.