如何使用HTML和CSS创建一个响应式的文档结构？请提供一个示例说明其工作原理。

创建一个响应式的文档结构，关键在于理解HTML文档的结构化和CSS样式的设计，特别是如何使用媒体查询来适配不同屏幕尺寸。《网页设计与制作.ppt》将为你提供基础知识和设计原则，帮助你更好地理解文档结构和响应式设计的概念。

参考资源链接：[网页设计与制作.ppt](https://wenku.csdn.net/doc/22ia4wm0ag?spm=1055.2569.3001.10343)

HTML部分是构建文档结构的基础，你需要使用合适的语义标签来定义文档的不同部分，例如使用`<header>`、`<nav>`、`<article>`、`<section>`、`<aside>`、`<footer>`等。这些标签不仅有助于提高文档的可读性，还为CSS提供了更多的布局选择。

在CSS中，响应式设计的核心是媒体查询（Media Queries），它允许我们根据不同的屏幕尺寸和设备特性应用不同的样式规则。例如，我们可以设置一个基础的样式表，并在屏幕宽度小于一定值时应用另一个样式表：

/* 基础样式 */
body {
    font-family: Arial, sans-serif;
}

/* 响应式设计 - 当屏幕宽度小于768像素时 */
@media screen and (max-width: 768px) {
    body {
        background-color: lightblue;
    }
    header, nav, article, section, aside, footer {
        float: none;
        width: 100%;
    }
}

在上述示例中，我们首先定义了基础的字体样式。然后，我们使用`@media screen and (max-width: 768px)`媒体查询来设置屏幕宽度小于768像素时的样式。在小屏幕上，我们将所有区块的宽度设置为100%，并且不再使用浮动布局，以适应移动端设备的显示。

通过这种结构化和响应式的设计方法，你的文档将能够在各种设备上保持良好的用户体验和内容完整性。为了进一步深入学习关于HTML和CSS的高级特性，以及如何将这些技术应用于复杂的网页设计中，请参考《网页设计与制作.ppt》，它为你提供了更加全面的知识覆盖和详细案例分析。

参考资源链接：[网页设计与制作.ppt](https://wenku.csdn.net/doc/22ia4wm0ag?spm=1055.2569.3001.10343)