前端的页面结构

前端页面的结构通常由HTML、CSS和JavaScript组成。以下是前端页面的典型结构：

HTML（超文本标记语言）： HTML是用于定义网页结构的标记语言。它通过使用各种标签和元素来描述页面的内容、布局和组织结构。HTML提供了标题、段落、链接、图像等基本元素，可以创建网页的骨架。

一个简单的HTML结构示例：

<!DOCTYPE html>
<html><head><title>页面标题</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body><header><h1>网页标题</h1></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系方式</a></li></ul></nav><main><section><h2>欢迎访问我们的网站</h2><p>这是一个示例段落。</p></section></main><footer><p>版权信息  2023</p></footer></body>
</html>

CSS（层叠样式表）： CSS用于定义网页的样式和布局。它通过选择器和属性来选择HTML元素并应用样式。CSS可以设置字体、颜色、背景、边框等外观效果，以及页面布局和响应式设计。

一个简单的CSS样式示例：
```
body {font-family: Arial, sans-serif;background-color: #f1f1f1;
}h1 {color: #333;
}nav ul {list-style: none;margin: 0;padding: 0;
}/* 更多样式规则... */
```
JavaScript： JavaScript是一种脚本语言，用于与网页交互、添加动态功能和处理用户操作。它可以修改HTML元素、处理表单输入、发送网络请求、执行动画效果等等。JavaScript可以使网页更具交互性和动态性。

一个简单的JavaScript示例：
```
const button = document.querySelector('button');
const paragraph = document.querySelector('p');button.addEventListener('click', function() {paragraph.classList.toggle('highlight');
});
```