如何在网页的模式部分使用html5元素？
[英]How should I use html5 elements with modal sections of my web page?
问题描述
就html而言，我还很缺乏经验，而对于html5则更少。
我有一个关于模式弹出窗口的问题-使用javascript / ajax与之交互的页面部分，但不一定一直显示在页面上。 这些通常不在主要的html流程中-例如，为了保持可维护性，我可能将所有模式代码放在页面的末尾。 问题是-我应该使用html节标记或其他内容声明页面的这些块吗？
为了更加了解我所描述的情况，我有一个应用程序页面。 其中包含许多部分（我在这里不是指html5）。 第一部分是进入页面的模式-这是“如果您同意，请单击以继续”部分。 接下来的5个块属于分步申请表-使用多视图控件一次显示每个步骤。 然后是另一个模态-UI块，后面是最终决策部分。
5 个解决方案
解决方案1
2 2013-09-10 09:52:55
由于它们是模态的，并且不显示在流程中，因此最可能为它们使用div。 如果确实要使用语义块，则使用的内容将取决于内容是什么，以及它与页面其余部分的关系。 以下文章应帮助您做出决定：
- http://html5doctor.com/the-section-element/
- http://html5doctor.com/the-article-element/
- http://html5doctor.com/avoiding-common-html5-mistakes/ （特别是该文章的第一部分-“请勿将其用作样式包装器”）
编辑：已经添加了第3个链接，因为我现在有足够的代表做到这一点:-)耶！
解决方案2
1 已采纳 2013-09-10 09:51:52
问题是-我应该将页面的这些块声明为部分还是其他内容
HTML5的一大优点是它的语义可读性。 如果您觉得您的模式弹出式窗口可以更好地用article标签来描述，请使用article 。 使用您认为最能准确描述功能的标签。
例如，假设我有一个示例页面，如下所示：
<html>
<head></head>
<body>
<article>
<!-- Some stuff here -->
</article>
</body>
</html>
我希望该article标签的内容符合以下定义：
文章元素表示页面的组件，该组件由文档，页面，应用程序或站点中的独立组成组成，并且旨在独立分发或重用，例如在联合组织中。 这可以是论坛帖子，杂志或报纸文章，博客条目，用户提交的评论，交互式小部件或小工具，或任何其他独立的内容。
注意 ：在这种情况下， article旨在表示流程内容。 鉴于您的目标不是写流内容（如您正确地指出的那样），所以这不是一个好例子。 根据我提供的定义，这非常清楚。
同样，如果我用section代替article ，我希望它符合以下定义：
部分的示例包括章节，选项卡式对话框中的各个选项卡式页面或论文的编号部分。 网站的主页可以分为几个部分，以进行介绍，新闻和联系信息。
如果您是我，请仔细阅读一下规格并思考以下问题：
- 我的内容实际上对用户意味着什么？
- 我的内容将如何显示给其他程序员？
- 使用此内容是否可以提示我正确的语义？
解决方案3
1 2013-09-10 10:01:40
这取决于您的模态。
您可能具有登录表单，订阅内容，广告，文章，另一页的框架，因此只有在<section>实际上是页面的有趣部分时才使用<section>才有意义，例如，您有一篇文章，然后您想在模式框中显示autor信息 ，那么我说使用<section>是可以接受的。
因此，总体而言，如果它是内容的一部分，那么可以使用它，如果不是，则应该使用<div> 。
我还要说，没有人对此有答案，因为它是纯粹的自以为是的，坦率地说没关系。
解决方案4
1 2013-09-10 10:05:08
还有另一种合并模态的方法。 由于它们依赖于JavaScript，因此您也可以通过AJAX加载弹出内容，而无需将其包含在文档流中。 我最近从事的一个项目，首先呈现指向正常且完整的HTML页面的链接，以显示弹出内容（例如，联系表格）。 如果启用了JS，则会在链接中添加一个参数，以仅通过AJAX加载主内容，而没有标题，菜单和侧边栏。
由于模态内容并不真正属于您的网站内容（如果确实不属于弹出窗口，而应该位于文档的主要内容之内），则该内容不应标有section ， main或article标签。 相反，请使用div渲染弹出窗口，或者使用iframe如果您的项目允许）。
解决方案5
1 2013-09-10 10:11:43
如何在我的Web应用程序中使用单个模式，并避免每个页面上出现重复的html？
[英]How can I use a single modal across my web application and avoid repetative html on every page?
我应该如何使用html5编写“归档页面”或“类别索引”？
[英]How should I write an “archive page” or “category index” with html5?
如何正确使用基本的 HTML5 部分以获得干净的文档大纲？
[英]How to use basic HTML5 sections properly for a clean document outline?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.