我正在学习如何使用 Angular(使用 Angular Material 和 Flex-Layout)，我不清楚的一件事是如何维护语义 HTML。在我看到的所有示例中，只提到了特定的 Material/Flex-Layout 标签，而没有提到 header、main 等基本元素。
我正在尝试构建一个非常简单的首页，并正在考虑执行以下操作，但我不知道这是否是正确的方法:
<body>
<header>header with other mat elements...</header>
<mat-sidenav-container>
<nav>
<mat-sidenav></mat-sidenav>
</nav>
<main>
<mat-sidenav-content></mat-sidenav-content>
</main>
</mat-sidenav-container>
<footer></footer>
</body>
具体来说，我的问题是: 1) header、nav、main 和 footer 的位置是否正确？ 2) 那些 Material 元素仍然需要它们吗？
谢谢!
最佳答案
在 HTML5 中标签被分类为 content models . 语义 html5 的目的是以有意义的方式构建整个页面。 See comparison between html4 and html5 .在 Angular 组件上下文中谈论语义 html5 毫无意义。在 Angular 中，您可以通过简单地命名组件来赋予组件含义。此外，Angular html 文件在编写时考虑到了独立且可重用的组件结构。
现在回答您的问题:
<body>
<header>header with other mat elements...</header> <---- this will become header-component
<mat-sidenav-container> <--- this will become main-component
<nav>
<mat-sidenav></mat-sidenav>
</nav>
<main>
<mat-sidenav-content></mat-sidenav-content>
</main>
</mat-sidenav-container>
<footer></footer> <--- this will become footer-component
</body>
所以你的结果应该是这样的:
index.html
<body>
<header-component></header-component>
<main-component></main-component>
<footer-component></footer-component>
</body>
header.component.html
<div>some header elements...</div>
main.component.html
<mat-sidenav-container>
<nav>
<mat-sidenav></mat-sidenav>
</nav>
<main>
<mat-sidenav-content></mat-sidenav-content>
</main>
</mat-sidenav-container>
footer.component.html
<div>some footer elements...</div>
关于html - 使用具有 Angular Material 和 Flex Layout 的语义 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57930721/