html基本代码

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网页</title> <style> /* 在这里可以添加 CSS 样式 */ body { font-family: Arial, sans-serif; } h1 { color: #333; } </style> </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>&copy; 2024 我的网页</p> </footer> </body> </html>

这个 HTML 基本代码包含了一个简单的网页结构,其中包括了头部、导航栏、主要内容和页脚。在样式部分中,定义了一些基本的 CSS 样式。

好的,

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #444; padding: 10px; text-align: center; } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li { display: inline; margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; } main { padding: 20px; } section { margin-bottom: 20px; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; } </style> </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> <section> <h2>最新消息</h2> <p>最新消息内容。</p> </section> </main> <footer> <p>&copy; 2024 我的网页</p> </footer> </body> </html>

在这个示例中,我添加了更多的样式以及一个最新消息的部分。样式方面,我给头部、导航栏、主要内容和页脚添加了一些背景色、颜色、内边距和定位等样式。