使用带有 Angular Material 和 Flex 布局的语义 HTML答案

【问题标题】：Use of semantic HTML with Angular Material and Flex Layout使用带有 Angular Material 和 Flex 布局的语义 HTML
【发布时间】：2019-09-13 21:51:46
【问题描述】：

我正在学习如何使用 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) 页眉、导航、主要和页脚是否正确定位？ 2）这些材料元素仍然需要它们吗？

谢谢！

【问题讨论】：

标签： html css angular angular-material angular-flex-layout

【解决方案1】：

在 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>

如上所述，语义 html5 标记在 Angular 中没有意义。

【讨论】：