我有一个单页网站，用户会看到多行标签(照片即按钮)，它们会显示新内容。强>
考虑到可访问性和搜索引擎友好性，
这是我的想法: 准确地说，我的问题是: 我应该使用 包装 是否有更好的方法来语义表示导航和此类部分的文章之间的关系？ @AlastairC 的信息丰富的回答让我朝着正确的方向前进。不过，他提出了一种更具语义的嵌套格式，不幸的是，它与 根据 Alastair 的建议，我使用 ARIA 标准修改了社区维基答案中的标记(将选项卡与其控制的内容相关联)。我想我会选择 Alastair 的答案，但如果有人可以使用替代标记评论或改进社区维基答案，我将非常感激。
在语义上什么可能被认为是最佳实践？<section class="fruits">
<h1>Fruits</h1>
<nav>
<a data-article-class="banana">
<p>Learn about <strong>Bananas</strong></p> </a>
<a data-article-class="apple" class="is-selected">
<p>Learn about <strong>Apples</strong></p> </a>
<a data-article-class="pear">
<p>Learn about <strong>Pears</strong></p> </a>
</nav>
<div>
<article class="banana">
<h1>The Banana</h1>
<p>A long yellow fruit...</p>
</article>
<article class="apple is-selected">
<h1>The Apple</h1>
<p>A round red fruit...</p>
</article>
<article class="pear">
<h1>The Pear</h1>
<p>A funny-shaped green fruit...</p>
</article>
</div>
</section>
<a> 时标签，JavaScript 放置 is-selected在 <a> 上课及其对应的<article> .<a>标签将使用 CSS 设置样式，使其看起来像可点击的图像，其中的文本清晰可见。is-selected class 表示当前选择了哪个链接和相应的文章——CSS 将 display:none;所有文章，然后 display:block;有is-selected的文章.
<nav> 吗？内部元素 <a>元素？<a> 是否多余？ s 在 <ul>/<li>这种情况下的结构？
更新:
display:table-cell; 不兼容。我想要的此制表符单元的基于布局。
最佳答案
我认为这可行，但可能有更好的整体 HTML 方法，可以用更少的工作获得更好的结果。对于可访问性(我的专业领域)，我会考虑这种情况下的这些要求:
我可以想到两种主要方法来实现您所描述的内容，到目前为止您采用的是“选项卡”方法，顶部有一组控件，下面有显示所选内容的内容选项。
另一种方式是嵌套，像这样:
<section class="fruits">
<h1>Fruits</h1>
<ul>
<li>
<a data-article-class="banana">
<p>Learn about <strong>Bananas</strong></p>
</a>
<div id="content-banana">
<h2>The Banana</h2>
<p>A long yellow fruit...</p>
</div>
</li>
...
</ul>
</section>
然后您需要将可见内容放置在您希望的位置。我无法根据描述(没有图表)判断这是否可行，但通常是可行的。
这两种方法都可以实现纯键盘和缩放场景，但您需要为屏幕阅读器做的事情却大相径庭。
对于制表符方法，您需要使用 WAI-ARIA设置控件和内容之间的关系，并花费大量时间操作键盘控件(参见 Tabs design pattern )。否则，当屏幕阅读器用户选择图片时，他们不知道内容出现在哪里。
对于嵌套方法，DOM 设置了一个内在的关系，所以事情更容易。 屏幕阅读器用户会向下浏览(通常是“箭头”)到图像并选择它。我建议在选择时将键盘焦点移动到新内容，因此在显示内容的函数末尾添加如下内容:
$('#content-banana').attr('tabindex', '-1').css('outline', 'none');
$('#content-banana').focus();
这使 div 可聚焦，删除轮廓(这是不需要的，因为无论如何您都不能“制表”)，并将焦点设置在那里。 注意:看起来您可以合并这些行，但我发现它不能跨屏幕阅读器可靠地工作。
阅读完毕后，屏幕阅读器用户可以简单地向下箭头到下一项并选择(或不选择)，没有知道内容在哪里的问题。
至于用什么标签，<article>除非内容相当多，否则这里不太适合。它可能适用于整个项目(替换 section )，但如果不是 aimed at being distributed/syndicated然后部分就可以了。
我倾向于使用列表作为容器，因为它为屏幕阅读器用户提供了一种方式，可以在他们不感兴趣时跳过其余项目。使用嵌套方法，'nav' 根本不适合。即使在选项卡方法中，W3C 也推荐了选项卡控件的列表和链接。
此外，我认为(但可以更正)在源代码中将图片和内容靠得更近有利于 SEO，因为图片更可能与其附近的词相关联.
注意:我还应该指出，如果图像有意义，它们应该是具有适当 alt 属性的前景图像。
关于HTML5 和 ARIA 语义 : DHTML Sub Navigation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18648894/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315
考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://
我正在使用Maruku，将Markdown(超集)转换为HTML，你知道我该怎么做才能从HTML转换为Markdown吗？ 最佳答案 Google发现了一个名为reverse_markdown的ruby脚本.它似乎可以满足您的需求。 关于ruby-on-rails-我需要从HTML转到markdown，有什么建议吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/175162
我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案 这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t