网页通常由三个基本组成部分构成：HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript。下面是一个简单的网页示例，包括了这三种技术的基本内容。
### HTML (index.html) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Web Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Welcome to My Web Page</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <section id="home"> <h2>Home Section</h2> <p>This is the home section of the web page.</p > </section> <section id="about"> <h2>About Section</h2> <p>Learn more about us and our services here.</p > </section> <section id="contact"> <h2>Contact Section</h2> <p>Get in touch with us using the contact form.</p > <!-- Contact form would go here --> </section> <footer> <p>Copyright © 2024 My Web Page</p > </footer> <script src="script.js"></script> </body> </html> ``` ### CSS (styles.css) ```css /* Basic reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Styling the header */ header { background-color: #333; color: white; padding: 10px 0; text-align: center; } /* Navigation menu styles */ nav ul { list-style: none; background-color: #555; text-align: center; padding: 10px 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { text-decoration: none; color: white; padding: 5px 10px; } /* Section styles */ section { margin: 20px; padding: 20px; border: 1px solid #ddd; } /* Footer styles */ footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: absolute; bottom: 0; width: 100%; } ``` ### JavaScript (script.js) ```javascript // Example JavaScript to add interactivity document.addEventListener('DOMContentLoaded', function() { // Add your JavaScript code here // For example, adding a click event listener to a navigation link document.getElementById('about').addEventListener('click', function(event) { event.preventDefault(); alert('You clicked the About link!'); }); }); ```
这个简单的网页包括一个头部（header）、导航菜单（nav）、三个内容区域（section）和一个页脚（footer）。CSS文件定义了网页的基本样式，而JavaScript文件则用于添加交互性。这个例子展示了如何使用HTML、CSS和JavaScript来构建一个基本的网页结构，并对其进行样式化和功能增强。
在实际的网页开发中，你可能会使用更复杂的布局和样式，以及更多的JavaScript功能，包括处理表单提交、与后端服务器通信（通过AJAX）、使用框架和库（如React、Vue.js或Angular）等。此外，为了提高网页的可用性和可访问性，开发者还需要遵循WCAG（Web Content Accessibility Guidelines）等无障碍标准。
