Shaw
0%

HTML 网站架构

Posted on Edited on In

文档的基本组成部分

<header>：页眉。通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页

<nav>：导航栏。指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示

<main>：主内容。主内容中还可以有各种子内容区段：

  • <article>：正文部分
  • <aside>：侧边栏，经常嵌套在 <main> 中。一些外围信息、链接、引用、广告、辅助导航栏等
  • <section>：通用的分节元素

<header>：页脚。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容

布局细节

常见的有语义元素

  • <main> 一般放置每个页面独有的内容
  • <nav> 不应该包含二级链接等内容，只负责主导航栏的功能
  • <article> 包围的内容即一篇文章
  • 只有在没有更具体的元素来代表某种分节元素的时候才可以使用 <section>
  • <section> 适用于组织页面不同内容使其按功能分块（例如迷你地图板块，一篇文章的标题摘要等）

无语义元素

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML 提供了 <div> 和 <span> 元素。应配合使用 class 属性提供一些标签，使这些元素能易于查询。其中 <div> 是块级元素，<span> 内联元素

当我们使用这些元素时，我们需要给予类名 class，以便后续应用 css

1
2
3
4
<div class="wrapper a">
    <div class="card"></div>
    <div class="card"></div>
</div>

警告：<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。尽管说，你却经常能在网页的源代码中看到它的身影…

练练手吧

你将尝试建立一个博客的 HTML 基本框架

  1. <header> 放上网站的名字
  2. 导航栏 <nav> 中建立列表，列表中的项目链接到归档，分类，博主简介等网页（或者自行设计）
  3. 自定义主内容 <main>
  4. 为网站添加页脚

仅供参考的答案

See the Pen 网站结构 by KiritoShaw (@KiritoShaw) on CodePen.

技术支持

  1. Visual Studio Code
  2. CodePen

Reference

  1. 文档与网站架构 - 学习 Web 开发 | MDN