简单的html代码

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单的 HTML 页面</title> </head> <body> <h1>欢迎来到我的网站!</h1> <p>这是一个简单的 HTML 页面示例。</p> <p>学习 HTML 很有趣!</p> <p>
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扩展的 HTML 页面</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #666; color: #fff; padding: 10px; text-align: center; } nav a { color: #fff; text-decoration: none; padding: 5px 10px; } nav a:hover { background-color: #999; } section { padding: 20px; margin: 20px; background-color: #fff; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; position: fixed; bottom: 0; width: 100%; } </style> </head> <body> <header> <h1>欢迎来到我的网站!</h1> </header> <nav> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> <section> <h2>关于我们</h2> <p>这是一个简单的 HTML 页面示例,用于演示如何创建网页。</p> </section> <footer> <p>版权所有 &copy; 2024 我的网站</p> </footer> </body> </html>

在这个示例中,我们添加了一个顶部的导航栏、一个内容区域,并且定义了页面的整体样式,包括背景颜色、字体等。Footer部分是一个固定在页面底部的版权声明。

这个示例展示了如何使用 HTML 结构和 CSS 样式来创建一个简单但功能齐全的网页。