html网页框架代码实例

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your Page Title</title> <!-- 在这里可以添加其他的<head>部分的内容,比如样式表和脚本 --> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head> <body> <header> <h1>Your Website Name</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section id="home"> <h2>Home</h2> <p>Welcome to our website!</p> <!-- 在这里添加主页内容 --> </section> <section id="about"> <h2>About Us</h2> <p>Learn more about our company.</p> <!-- 在这里添加关于我们的内容 --> </section> <section id="services"> <h2>Our Services</h2> <ul> <li>Service 1</li> <li>Service 2</li> <li>Service 3</li> </ul> <!-- 在这里添加服务的详细信息 --> </section> <section id="contact"> <h2>Contact Us</h2> <p>Get in touch with us.</p> <!-- 在这里添加联系信息和表单 --> </section> </main> <footer> <p>&copy; 2024 Your Website Name. All rights reserved.</p> </footer> </body> </html>

表格

html
<section id="products"> <h2>Our Products</h2> <table> <tr> <th>Product</th> <th>Price</th> </tr> <tr> <td>Product 1</td> <td>$19.99</td> </tr> <tr> <td>Product 2</td> <td>$29.99</td> </tr> </table> </section>

图片

html
<section id="gallery"> <h2>Photo Gallery</h2> <img src="image1.jpg" alt="Description of Image 1"> <img src="image2.jpg" alt="Description of Image 2"> </section>

表单

html
<section id="contact"> <h2>Contact Us</h2> <form action="submit_form.php" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Submit</button> </form> </section>

CSS样式表

创建一个名为 styles.css 的外部样式表文件,并链接到HTML文件中:

css
/* styles.css */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline; margin-right: 10px; } main { padding: 20px; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; }

JavaScript脚本

创建一个名为 script.js 的外部JavaScript脚本文件,并链接到HTML文件中:

javascript
// script.js document.addEventListener('DOMContentLoaded', function () { // 在这里添加JavaScript代码 });

标签