页面布局中的结构与表现分离，那么什么是结构？什么是表现呢？

在前端开发中，结构与表现分离是构建网页的一个重要原则。它指的是将网页的内容结构 (Structure) 与 视觉呈现 (Presentation) 分开处理。这样做的好处在于提高代码的可维护性、可重用性和可访问性。

结构 (Structure): 指的是网页的内容和组织方式，它关注的是“网页是什么”。结构由 HTML 来负责描述，它定义了网页中各个元素的含义和彼此之间的关系，例如：

• 标题、段落、列表、表格等内容元素
• 图片、视频等多媒体元素
• 导航链接等交互元素
• 以及这些元素之间的层级和顺序关系

你可以把它想象成房子的框架和布局，它决定了房子有哪些房间，每个房间的大小和位置，以及它们之间的连接方式。 重要的是，它不关心房间的装饰风格，只关注房间本身的结构。

表现 (Presentation): 指的是网页的视觉外观，它关注的是“网页看起来怎么样”。表现由 CSS 来负责描述，它定义了网页中各个元素的样式，例如：

• 颜色、字体、大小、背景等视觉属性
• 布局、间距、对齐方式等排版属性
• 动画、过渡等动态效果

你可以把它想象成房子的装修风格，它决定了房间的墙面颜色、地板材质、家具摆放等等。它不关心房子的结构，只关注如何让房子看起来更美观。

举例说明：

假设我们要创建一个包含标题和段落的简单网页。

• 结构 (HTML):

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

• 表现 (CSS):

h1 {
  color: blue;
  font-size: 36px;
}

p {
  color: black;
  font-size: 16px;
}

在这个例子中，HTML 定义了网页的结构：一个标题和一个段落。CSS 定义了网页的表现：标题是蓝色 36 像素大小，段落是黑色 16 像素大小。

分离的好处：

• 可维护性: 修改样式只需要修改 CSS 文件，而不会影响 HTML 结构。
• 可重用性: 相同的 HTML 结构可以应用不同的 CSS 样式，从而实现不同的视觉效果。
• 可访问性: 清晰的 HTML 结构有助于屏幕阅读器等辅助技术更好地理解网页内容，提高网页的可访问性。

总而言之，结构与表现分离的核心思想是将内容和样式分开，使代码更清晰、更易于维护和重用。 HTML 负责描述网页的结构，CSS 负责描述网页的表现。 这就像盖房子一样，先搭建好框架，然后再进行装修。