域名頻道IDC知識庫制作一個簡單的靜態(tài)網(wǎng)頁通常涉及HTML、CSS和JavaScript（雖然JavaScript在靜態(tài)網(wǎng)頁中不是必需的，但可以用于添加交互性）。下面是一個使用HTML5編寫的簡單靜態(tài)網(wǎng)頁的源代碼示例：
| <html lang=“zh-CN”> | |
| <head> | |
| <meta charset=“UTF-8”> | |
| <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> | |
| <title>我的靜態(tài)網(wǎng)頁</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>歡迎來到我的靜態(tài)網(wǎng)頁</h1> | |
| </header> | |
| <nav> | |
| <a href=“#home”>主頁</a> | |
| <a href=“#about”>關(guān)于我們</a> | |
| <a href=“#services”>服務(wù)</a> | |
| <a href=“#contact”>聯(lián)系我們</a> | |
| </nav> | |
| <main> | |
| <section id=“home”> | |
| <h2>主頁</h2> | |
| <p>這是主頁的內(nèi)容。你可以在這里添加更多信息。</p> | |
| </section> | |
| <section id=“about”> | |
| <h2>關(guān)于我們</h2> | |
| <p>這是關(guān)于我們的內(nèi)容。介紹你自己或你的公司。</p> | |
| </section> | |
| <section id=“services”> | |
| <h2>服務(wù)</h2> | |
| <p>這是我們的服務(wù)內(nèi)容。列出你提供的服務(wù)。</p> | |
| </section> | |
| <section id=“contact”> | |
| <h2>聯(lián)系我們</h2> | |
| <p>這是聯(lián)系我們的信息。你可以添加聯(lián)系表單或聯(lián)系方式。</p> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>版權(quán)所有 © 2023 我的公司</p> | |
| </footer> | |
| </body> | |
| </html> |
代碼說明：
- DOCTYPE聲明：
<!DOCTYPE html>?聲明文檔類型為HTML5。 - HTML結(jié)構(gòu)：
<html>：根元素。<head>：包含文檔的元數(shù)據(jù)，如字符集、視口設(shè)置、標(biāo)題和樣式。<body>：包含文檔的內(nèi)容。
- 元數(shù)據(jù)：
<meta charset="UTF-8">：設(shè)置字符編碼為UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">：設(shè)置視口，使網(wǎng)頁在移動設(shè)備上正確顯示。<title>：設(shè)置網(wǎng)頁標(biāo)題。
- 樣式：
- 使用
<style>標(biāo)簽在HTML文檔中嵌入CSS樣式。 - 設(shè)置了基本的樣式，如字體、背景顏色、導(dǎo)航欄樣式等。
- 使用
- 內(nèi)容：
<header>：網(wǎng)頁的頭部，包含標(biāo)題。<nav>：導(dǎo)航欄，包含鏈接。<main>：網(wǎng)頁的主要內(nèi)容，分為多個<section>。<footer>：網(wǎng)頁的底部，包含版權(quán)信息。
你可以根據(jù)需要修改和擴(kuò)展這個示例，添加更多的內(nèi)容、樣式和功能。
百搭云智能自助建站系統(tǒng)是域名頻道推出的全新基于云計(jì)算技術(shù)的PC網(wǎng)站+手機(jī)網(wǎng)站+微信+APP+微信小程序五站合一的智能自助建站系統(tǒng)，有近三千套建站模板，不管生產(chǎn)類企業(yè)網(wǎng)站模板，還是電商購物網(wǎng)站，適配各行各業(yè)，自己選擇合適的網(wǎng)站模板，不會設(shè)計(jì)也可以做出精美網(wǎng)站。系統(tǒng)擁有文章、產(chǎn)品、營銷、統(tǒng)計(jì)等豐富功能，滿足您所有需求；五站同源，網(wǎng)站數(shù)據(jù)統(tǒng)一管理；一次制作，多端適配，讓更多人看到你的站點(diǎn)！所見即所得的操作方式，無需專業(yè)技術(shù)，不用解碼，可自由添加組件，拖拽式操作，想怎么搭，就怎么搭！百搭云建站詳情點(diǎn)擊鏈接http://www.tom51.com/web/
我們提供域名注冊、虛擬主機(jī)、空間租用、建站服務(wù)、網(wǎng)站制作、網(wǎng)站優(yōu)化、網(wǎng)站推廣等服務(wù)。
所有的云建站系統(tǒng)自帶強(qiáng)大的管理面板，即使你不懂程序也能正常使用，拖曳操作，簡簡單單。
所有的虛擬主機(jī)都自帶強(qiáng)大的管理面板，即使你不懂程序，一般情況下也能正常使用。
百搭云微信小程序自助建站申請入口：域名頻道http://http://www.tom51.com/web/xcx.asp