域名频道IDC知识库制作一个简单的静态网页通常涉及HTML、CSS和JavaScript（虽然JavaScript在静态网页中不是必需的，但可以用于添加交互性）。下面是一个使用HTML5编写的简单静态网页的源代码示例：
| <html lang=“zh-CN”> | |
| <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; | |
| background-color: #f4f4f4; | |
| } | |
| header { | |
| background-color: #333; | |
| color: #fff; | |
| padding: 10px 0; | |
| text-align: center; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: center; | |
| background-color: #444; | |
| } | |
| nav a { | |
| color: #fff; | |
| padding: 14px 20px; | |
| text-decoration: none; | |
| text-align: center; | |
| } | |
| nav a:hover { | |
| background-color: #555; | |
| } | |
| main { | |
| padding: 20px; | |
| } | |
| footer { | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| padding: 10px 0; | |
| position: fixed; | |
| width: 100%; | |
| bottom: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>欢迎来到我的静态网页</h1> | |
| </header> | |
| <nav> | |
| <a href=“#home”>主页</a> | |
| <a href=“#about”>关于我们</a> | |
| <a href=“#services”>服务</a> | |
| <a href=“#contact”>联系我们</a> | |
| </nav> | |
| <main> | |
| <section id=“home”> | |
| <h2>主页</h2> | |
| <p>这是主页的内容。你可以在这里添加更多信息。</p> | |
| </section> | |
| <section id=“about”> | |
| <h2>关于我们</h2> | |
| <p>这是关于我们的内容。介绍你自己或你的公司。</p> | |
| </section> | |
| <section id=“services”> | |
| <h2>服务</h2> | |
| <p>这是我们的服务内容。列出你提供的服务。</p> | |
| </section> | |
| <section id=“contact”> | |
| <h2>联系我们</h2> | |
| <p>这是联系我们的信息。你可以添加联系表单或联系方式。</p> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>版权所有 © 2023 我的公司</p> | |
| </footer> | |
| </body> | |
| </html> |
代码说明：
- DOCTYPE声明：
<!DOCTYPE html>声明文档类型为HTML5。 - HTML结构：
<html>：根元素。<head>：包含文档的元数据，如字符集、视口设置、标题和样式。<body>：包含文档的内容。
- 元数据：
<meta charset="UTF-8">：设置字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使网页在移动设备上正确显示。<title>：设置网页标题。
- 样式：
- 使用
<style>标签在HTML文档中嵌入CSS样式。 - 设置了基本的样式，如字体、背景颜色、导航栏样式等。
- 使用
- 内容：
<header>：网页的头部，包含标题。<nav>：导航栏，包含链接。<main>：网页的主要内容，分为多个<section>。<footer>：网页的底部，包含版权信息。
你可以根据需要修改和扩展这个示例，添加更多的内容、样式和功能。
百搭云智能自助建站系统是域名频道推出的全新基于云计算技术的PC网站+手机网站+微信+APP+微信小程序五站合一的智能自助建站系统，有近三千套建站模板，不管生产类企业网站模板，还是电商购物网站，适配各行各业，自己选择合适的网站模板，不会设计也可以做出精美网站。系统拥有文章、产品、营销、统计等丰富功能，满足您所有需求；五站同源，网站数据统一管理；一次制作，多端适配，让更多人看到你的站点！所见即所得的操作方式，无需专业技术，不用解码，可自由添加组件，拖拽式操作，想怎么搭，就怎么搭！百搭云建站详情点击链接http://www.dns110.com/web/
我们提供域名注册、虚拟主机、空间租用、建站服务、网站制作、网站优化、网站推广等服务。
所有的云建站系统自带强大的管理面板，即使你不懂程序也能正常使用，拖曳操作，简简单单。
所有的虚拟主机都自带强大的管理面板，即使你不懂程序，一般情况下也能正常使用。
百搭云微信小程序自助建站申请入口：域名频道http://http://www.dns110.com/web/xcx.asp