Question

我最近一直在问很多问题，但希望这将是最后一段时间。

我举了一个例子：http://myhideout.eu/menu/

基本上所有关于我的新网站的菜单，结构设计与你通常看到的，语义和所有这些东西有点不同

基本上它由许多选项卡组成，这些选项卡不是实际的链接，尽管它们可能是。下面是一个预定义区域，它将用于两个目的之一。

假设使用不浏览菜单，该区域将用于与导航无关的内容。例如，显示横幅图像。定义为主要内容。使用菜单时，不会显示此主要内容。该区域将用于子菜单。

我认为这很简单，并且假设新浏览器没有严重的浏览器兼容性问题，此时不包括ie8及更早版本。我可能会选择支持ie8，一切都在适当的时候，实际上更多的是支持windows xp。

现在这一切都很好，而且有效，但有些问题我想回答，有些问题我想解决。

首先，如果我可以避免使用div，我想。如果还有其他更适合的元素，请告诉我。

其次，它很快就会混淆所有：悬停，什么不是。 CSS就是一团糟，所有的建议都会受到欢迎。

第三，我发现，关于显示为表格单元格的li元素的定义宽度，它们表现得相当奇怪。如果我将宽度设置为100％，则第一个单元格将尽可能宽，同时仍然显示其他单元格，但如果我设置的绝对像素值太高，则它们都会完美排列。我认为这实际上相当不错，这就是为什么宽度当前设置为等于导航区域的宽度，但这是一个很好的方法，我可以期望它在其他从不浏览器中工作，也在将来吗？或者，计算合适的宽度是否更好？

最后，在导航未使用时显示的主div实际上与导航无关，但我还没有想出如何在不将元素放入元素的情况下进行操作。对此的评论也将受到赞赏。

可能存在一些我没有注意到的问题或者我忘记提出的问题，所以再次提出任何意见都是非常受欢迎的。

我希望在这里得到一些高质量的反馈，我希望我会;）

现在就是这样。

提前致谢并致以最诚挚的问候。

编辑：考虑一些你的建议并思考一下，我稍微修改了结构：http://jsfiddle.net/hJuym/39/

我还没有找到更好的显示替代方法：table-cell 无论我最终得到奇怪的边距/填充或不整齐的边界。

EDIT2：我现在已经尝试了我能想到的一切，但仍然无法解决一个小问题。

我被告知table-cell属性是不行的。虽然这一切都很好，但它实际上正如我现在所想的那样，使用表格单元格显示属性。

因为表格单元格很糟糕，显然，我试图使其与内联一起工作，这导致奇数顶部1.5px填充或边距，我无法摆脱，但更重要的是，我m无法在li元素上设置宽度。如果您希望它们看起来很完美，那么边界也很难管理。表格单元格只是简单地将两个单元格之间的边界作为一个边界。显然。

然后我当然尝试了内联块，它取得了最大的成功，虽然我被迫删除了html中的某些空格和换行符，这很烦人，但我仍然无法设置固定宽度，虽然显然我应该能够，但边界仍然是一团糟。

当然我已经尝试过使用花车，但这让我很头疼。所以我想要10个标签。很好，只需要总宽度除以10.雅可行，除非你无法设置宽度或想要使用边框... jabba jabba jabba nit pick。

我没有生气或什么，但我很困惑，累了，放弃了。

请告诉我为什么我不能只使用实际工作的东西，主要是table-cell属性，并假设有充分的理由，请详细解释，替代方案是什么，因为我不知道看不见了.l

上次编辑中最新工作草案的示例。

最好的问候。

Answer 1

Div，如上所述。意思是“分裂”。它适用于许多场景，除非在他的回答中提到colinross，否则无需更换。如果您只需要在方便的占位符中对某个标记进行分组，请不要害怕使用div
我试图稍微清理你的代码。看到这个JSFiddle：http://jsfiddle.net/hJuym/35/。显然有一些任意的测量（如宽度，高度和各种偏移），但这并不难改变。
请勿使用table-cell进行显示。使用block，inline或inline-block，如colinross提到的那样。
如上面的jsfiddle（http://jsfiddle.net/hJuym/35/）所示，您没有必要。将所有内容包装在标题中，然后将标题拆分为导航和正常显示内容。代码解释了自己。

http://jsfiddle.net/hJuym/36/

Answer 2

特别是，html 5规范定义了一些“杰出的”新元素，我相信你在这里引用它们。

如果您愿意，

<header>（和<footer>），<nav>和<article>等等都只是语义容器。语义上的一些可以嵌套，就像<nav>内的<article>元素一样，用于文章级导航（如跳转到脚注）。

要记住的是，它们本质上与其父元素相关联，因此

<body>
<header>Hi there!</header>
<nav>This would be site-level navigation</nav>
<article>
<header>Welcome to *this page*</header>
<nav>This would be page-level navigation</nav>
<p> Here is the actual page content </p>
</article>

你可以想象这段代码在语义上代表该网站正在说“你好！”，页面上写着“欢迎使用此页面”。

请更具体地了解更好的示例/解释。

快速说明：不要将非 table-cells 定义为display：table-cell，除非你想要跨浏览器的奇怪行为。坚持显示：{none，block，inline，inline-block}

Div代表* div * ision

Answer 3

再加上我之前的答案，当推动推动时，引入的新元素通常纯粹是为了语义。 W3C（工作组）发现绝大多数网站都使用div来分隔页眉，页脚和导航块。他们添加了这些元素以努力使网站保持一致，以便浏览器和其他渲染引擎（如ARIA兼容的屏幕阅读器）和/或实用开发的解析器（如网络爬虫）能够确定元素的语义特性更一致（例如忽略body header和body navigation元素，并开始在第一个<article>元素处向用户大声朗读页面。

希望有所帮助

HTML5导航，结构和语义

3 个答案: