diff options
Diffstat (limited to 'files/zh-cn/learn/html/howto')
| -rw-r--r-- | files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html | 119 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/howto/index.html | 157 |
2 files changed, 276 insertions, 0 deletions
diff --git a/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html new file mode 100644 index 0000000000..450e30b9eb --- /dev/null +++ b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -0,0 +1,119 @@ +--- +title: Add a hit map on top of an image +slug: learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +--- +<div class="summary"> +<p>现在我们将学习如何设置图像映射，先讨论他的缺点。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>你应该已经知道如何<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">create a basic HTML document</a> 以及<a href="/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">add accessible images to a webpage.</a></td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学习如何将一张图片的不同区域链接到不同页面。</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p>本文仅讨论客户端图像映射。不要使用服务器端图像映射，这需要用户拥有鼠标。</p> +</div> + +<h2 id="图像映射和它的缺点">图像映射和它的缺点</h2> + +<p>当你在{{htmlelement('a')}}标签中嵌套图像, 整个图像是链接到一个网页的。但在图像映射中，包含多个活动区域（称为“热点”），可以链接到不同的资源地址。</p> + +<p>图像映射原本非常流行于导航策略，但是前提需要考虑它的性能和可访问性。</p> + +<p><a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Create_a_hyperlink">Text links</a> (perhaps styled with CSS) 比图像映射更具优势：文本链接更轻量级、好维护、更易于SEO，而且支持更多形式需求的访问（如，屏幕阅读器、纯文本浏览器、翻译服务等）。</p> + +<h2 id="如何正确的插入一张图像映射">如何正确的插入一张图像映射</h2> + +<h3 id="步骤1_图片">步骤1: 图片</h3> + +<p>不是所有图片都合适。</p> + +<ul> + <li>图片必须明确表明当用户跟随图片链接时会发生什么。 <code>alt</code> 属性是必须的, 但很多人注意不到。</li> + <li>图片必须明确指出热点的开始和结束位置。</li> + <li>在任何尺寸的视口下，热点都需要足够大，方便用户可以点击。多大足够呢？<a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">72 × 72 CSS pixels 是一个推荐的最小尺寸,</a> 包括触摸目标之间额外的间隙。在 <a href="http://www.goethe-verlag.com/book2/">50languages.com</a> (as of time of writing) 上的世界地图可以完美诠释这一点。 用户点击Russia 或 North America 要比 Albania 或 Estonia容易得多。</li> +</ul> + +<p>插入图片的方式 <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">和通常一样</a> (用 {{htmlelement("img")}} 标签 和 {{htmlattrxref("alt",'img')}} 文本). 如果图片只是用作导航容器， 你可以设置图片的 <code>alt=""， 改在后面</code>{{htmlelement('area')}} 的{{htmlattrxref("alt",'area')}} 中提供合适的文本。</p> + +<p>你将需要一个特殊的 {{htmlattrxref("usemap","img")}} 属性。 为图像映射提供一个唯一标识，这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 <code>usemap</code> 属性的值:</p> + +<pre class="brush: html"><img + src="image-map.png" + alt="" + usemap="#example-map-1" /></pre> + +<h3 id="步骤2_激活你的热点">步骤2: 激活你的热点</h3> + +<p>在这一步中, 将所有代码放置 {{htmlelement('map')}} 标签中. <code><map></code> 只需要一个属性, 设置{{htmlattrxref("name","map")}} 和上面<code>usemap属性一样的map值：</code></p> + +<pre class="brush: html"><map name="example-map-1"> + +</map></pre> + +<p><code>在<map></code> 元素中，我们需要嵌套 {{htmlelement('area')}} 元素。一个 <code><area></code> 元素对应一个热点.。为保持键盘导航的直观， 请确保<code><area></code> 的源顺序和视觉上的热点顺序一致。</p> + +<p><code><area></code> 元素是空元素， 但是需要包含4个属性：</p> + +<dl> + <dt>{{htmlattrxref('shape','area')}}</dt> + <dt>{{htmlattrxref('coords','area')}}</dt> + <dd> + <p><code>shape</code> 有4个值: <code>circle</code>, <code>rect</code>, <code>poly</code>, and <code>default</code>. ( <code>default</code> <code><area></code> 表示除去您定义的其他热点的剩余空间.) 根据你选择的形状需要在 <code>coords</code> 中提供对应的坐标信息。</p> + + <ul> + <li>对于circle, 提供中心的x、y坐标，还需要提供半径。</li> + <li>对于rectangle, 提供左上角和右下角的x、y坐标。</li> + <li>对于polygon, 提供每个角的x、y坐标（至少6个值）。</li> + </ul> + + <p>坐标用CSS像素px表示。</p> + + <p>In case of overlap, source order carries the day.</p> + </dd> + <dt>{{htmlattrxref('href','area')}}</dt> + <dd>您需要链接的资源地址。 如果您不希望当前区域链接到任何地方(比方说，如果您正在创建一个空心圆)，您可以将这个属性保留为空。</dd> + <dt>{{htmlattrxref('alt','area')}}</dt> + <dd>一个必选属性，告诉用户链接的指向或功能说明。<code>alt</code> 文本仅在图像不可用时显示。请参阅我们的<a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">guidelines for writing accessible link text</a>。</dd> + <dd> + <p>如果 <code>href</code> 属性为空并且整个图像已经具备了<code>alt</code> 属性，则可以设置 <code>alt=""。</code></p> + </dd> +</dl> + +<pre class="brush: html"><map name="example-map-1"> + <area shape="circle" coords="200,250,25" + href="page-2.html" alt="circle example" /> + + + <area shape="rect" coords="10, 5, 20, 15" + href="page-3.html" alt="rectangle example" /> + +</map></pre> + +<h3 id="步骤3_确保它的可用范围">步骤3: 确保它的可用范围</h3> + +<p>你还并没有完成除非你很严格的在多个浏览器和终端测试图像映射功能。尝试仅用键盘操作。尝试关掉图片。</p> + +<p>如果你的图像映射宽度大于240px，你将需要进一步调整来适应网站的响应式。仅调整小屏幕下的图片是不够的，因为不变的坐标无法适应这样的图像。</p> + +<p>如果必须使用图像映射， 您可以看看<a href="https://github.com/stowball/jQuery-rwdImageMaps">Matt Stow's jQuery plugin.</a>。另外, Dudley Storey 示范了一种方法 <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">use SVG for an image map effect</a>，以及后来的<a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">ombined SVG-raster hack</a> for bitmap images.</p> + +<h2 id="Learn_more">Learn more</h2> + +<ul> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("map")}}</li> + <li>{{htmlelement("area")}}</li> + <li><a href="http://www.maschek.hu/imagemap/imgmap">Online image map editor</a></li> + <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Advice on handling email clients</a></li> +</ul> 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="图像_多媒体">图像 & 多媒体</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="脚本_样式">脚本 & 样式</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="高级图像_多媒体">高级图像 & 多媒体</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> |