2

就 html 而言,我非常缺乏经验,对于 html5 更是如此。

我有一个关于模式弹出窗口的问题 - 使用 javascript/ajax 交互的页面部分,但不一定一直显示在页面上。这些通常不在主要的 html 流程中——例如,为了可维护性,我可能会将所有模式代码放在页面末尾。问题是 - 我应该使用 html 部分标签或其他方式声明这些页面块吗?

为了更清楚地了解我所描述的情况,我有一个应用程序页面。这包含许多部分(我在这里不是指 html5)。第一部分是进入页面的模态 - 这是“如果您同意,请单击继续”部分。接下来的 5 个块属于分步申请表 - 每个步骤都使用多视图控件一次显示。然后是另一个模式 - UI 块,然后是最终决策部分。

4

5 回答 5

2

由于它们是模态的,并且出现在流程之外,因此为它们使用 div 可能是最合适的。如果您确实想使用语义块,那么您使用的将取决于内容是什么,以及它与页面其余部分的关系。以下文章应该可以帮助您做出决定:

编辑:已经添加了第三个链接,因为我现在有足够的代表这样做:-) 耶!

于 2013-09-10T09:52:55.327 回答
1

问题是 - 我应该将这些页面块声明为部分还是其他

HTML5 的一大优势是语义可读。如果您觉得您的模态弹出窗口用article标签之类的东西更好地描述,那么使用article. 使用您认为最准确地描述您的功能的标签。

例如,假设我有一个这样的示例页面:

<html>
  <head></head>
  <body>
      <article>
         <!-- Some stuff here -->
      </article>
  </body>
</html>

希望article标签的内容符合这个定义:

article 元素表示页面的一个组件,该组件由文档、页面、应用程序或站点中的自包含组合组成,并且旨在独立分发或可重复使用,例如在联合中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具,或任何其他独立的内容项目。

W3C 规范。文章元素。

注意:在这种情况下,anarticle旨在表示流内容。鉴于您的目标不是编写流程内容(正如您正确所说的那样),这不是一个很好的例子。从我提供的定义中可以清楚地看出这一点。

同样,如果我替换articlesection,我希望它符合这个定义:

章节的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。Web 站点的主页可以分为介绍、新闻项目和联系信息的部分。

W3C 规范。截面元素

如果我是你,我会查看规范并思考以下问题:

  • 我的内容对用户实际上意味着什么?
  • 我的内容将如何呈现给其他程序员?
  • 使用此内容是否给了我正确语义的提示?
于 2013-09-10T09:51:52.677 回答
1

这取决于您在模态中拥有的内容。

你可以有一个登录表单、订阅内容、广告、文章、另一个页面的框架,所以只有<section>当它们实际上是页面的一个有趣部分时才有意义,例如,你有一篇文章然后你想要要在模态框中显示autor 信息,那么我会说使用<section>.

所以总的来说,如果它是内容的一部分,那么使用它听起来不错,如果不是,你应该使用<div>.

我还要说,没有人对此有答案,因为它纯粹是固执己见,坦率地说,这并不重要。

于 2013-09-10T10:01:40.520 回答
1

还有另一种合并模式的方法。由于它们依赖于 JavaScript,您还可以通过 AJAX 加载弹出内容,而无需将它们放在文档流中。我最近从事的一个项目,首先为弹出内容(例如联系表格)呈现一个正常且完整的 HTML 页面的链接。如果启用了 JS,则会在链接中添加一个参数,以通过 AJAX 仅加载没有标题、菜单和侧边栏的主要内容。

由于模态内容并不真正属于您的网站内容(如果是,则它不应该是弹出窗口,而是在文档主要内容中),因此不应使用 somesectionmain标签进行article标记。而是使用 adiv来呈现弹出窗口或使用 aiframe如果这对您的项目是可接受的。

于 2013-09-10T10:05:08.387 回答
1

模式使用什么标签并不重要,只要它适合目的(<fieldset>例如不要使用)。通常我们看到一个<div>代表一个模态的。

您可以将role属性用于有关元素用途的语义信息。在这种情况下role="dialog"是合适的。您可以在此处role找到有关HTML5 中属性的更多信息。

另请注意ARIA属性:它们增强了可访问性。例如aria-hidden="true"指定元素不可见。屏幕阅读器使用它来跳过内容。

于 2013-09-10T10:11:43.983 回答