1 files changed, 157 insertions, 0 deletions
diff --git a/files/zh-cn/learn/html/howto/index.html b/files/zh-cn/learn/html/howto/index.html
new file mode 100644
index 0000000000..cf467bb4cf
--- /dev/null
+++ b/files/zh-cn/learn/html/howto/index.html
@@ -0,0 +1,157 @@
+---
+title: 使用 HTML 解决常见问题
+slug: learn/HTML/Howto
+tags:
+  - HTML
+  - 常见问题
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">下面的链接指向日常中需要用HTML解决的问题的解决方案。</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="基本结构">基本结构</h3>
+
+<p>HTML应用最基础的是文档结构。如果你是HTML新手那么你应该和我们一起从这里开始学习.</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started#实践操作_创建你的第一个HTML文档">如何创建HTML文档</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">如何将网页分成有逻辑的段落</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">如何设置一个适当的标题和段落结构</a></li>
+</ul>
+
+<h3 id="基本文本语义">基本文本语义</h3>
+
+<p>HTML专门为文档提供语义信息，因此，HTML能够解答关于如何在文档中最好地传递消息的许多问题。</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">如何用HTML创建列表项</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">如何用HTML展示计算机代码</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">如何用HTML定义术语</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="超链接">超链接</h3>
+
+<p>使用HTML的主要原因之一，就是可以使用{{Glossary("hyperlink", "hyperlinks")}}来轻松导航，实现方式有以下几种：</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">如何创建超链接</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">如何利用HTML创建表格</a></li>
+</ul>
+
+<h3 id="图像_多媒体">图像 &amp; 多媒体</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">如何在页面中添加图片</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">如何在页面中添加视频</a></li>
+ <li><font color="#0b0116"><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">如何在页面中添加音频</a></font></li>
+</ul>
+
+<h3 id="脚本_样式">脚本 &amp; 样式</h3>
+
+<p>HTML仅仅建立了文档结构。为解决演示文稿问题，可使用{{glossary("CSS")}}或脚本令页面交互。</p>
+
+<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>
+
+<h3 id="嵌入内容">嵌入内容</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">如何在网页中嵌入另一个页面</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">如何在网页中加入Flash内容</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="进阶问题">进阶问题</h2>
+
+<p>除了基本问题,HTML还有更丰富的功能,其提供了高级特性用于解决复杂问题.这些文章可以帮助你解决一些相对不常见的问题:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="表单">表单</h3>
+
+<p>表单是一种复杂的HTML结构,用于从网页向网络服务器发送数据.我们鼓励你仔细阅读<a href="/en-US/docs/Web/Guide/HTML/Forms">完整指南</a>.你可由此入门:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">如何创建一个简单的网页表单</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">如何结构化一个网页表单</a></li>
+</ul>
+
+<h3 id="表格信息">表格信息</h3>
+
+<p>一些表格化信息/数据需用行和列整合到表格中去. 而表格是最复杂的HTML结构之一,熟练掌握它并不容易:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">如何创建一张数据电子表格</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">如何使HTML表格可获取</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">如何优化HTML表格的展现</a></li>
+</ul>
+
+<h3 id="数据表示">数据表示</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">如何用HTML表示数值</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">如何使用数据属性</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">如何关联人类可读内容与无序的计算机数据结构</a></li>
+</ul>
+
+<h3 id="互动">互动</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">如何用HTML创建收缩内容</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">如何为网页添加内容目录</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">如何用HTML创建对话框</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="高级文本语义">高级文本语义</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">如何控制HTML换行</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">如何标注更改(新增和已删除文本)</a></li>
+</ul>
+
+<h3 id="高级图像_多媒体">高级图像 &amp; 多媒体</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">如何为网页添加可响应图像</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">如何为网页添加矢量图像</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">如何在图像上添加热区</a></li>
+</ul>
+
+<h3 id="国际化">国际化</h3>
+
+<p>HTML支持多语言. 其提供了用于解决常见的国际化问题的工具.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">如何为单一网页添加多语言支持</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">如何处理日语字符</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">如何用HTML展现时间和日期</a></li>
+</ul>
+
+<h3 id="性能">性能</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">如何创造快速加载的HTML页面</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>