在当今数字化时代，拥有一个个人网站成为许多人展示自我、分享知识或开展业务的重要途径。而要打造一个独具特色的个人网站，掌握丰富的源代码是关键。本文将带您走进个人网站制作源代码的大全世界，探索不同类型网站所需的代码宝藏。

一、HTML 基础代码
HTML（超文本标记语言）是构建网页的基石。一个简单的 HTML 页面基本结构如下：
```html

欢迎来到我的网站

这是一段简单的介绍文字。

```
DOCTYPE 声明定义了文档类型，html 标签是页面的根元素。head 部分包含了元数据，如字符编码和页面。body 部分则是网页实际显示的区域，h1 标签用于创建一级，p 标签用于段落文本。
二、CSS 样式代码
为了让网站更美观，CSS（层叠样式表）必不可少。假设我们要为上述 HTML 页面添加样式：
```css
body {
font-family: Arial, sans - serif;
background - color: lightblue;
}
h1 {
color: navy;
text - align: center;
}
p {
color: darkgreen;
font - size: 16px;
}
```
通过 CSS，我们可以设置页面的字体、背景颜色、文本颜色以及文本对齐方式等。这里将页面主体的字体设为 Arial 或无衬线字体，背景颜色为浅蓝色；一级颜色设为海军蓝并居中显示；段落文本颜色为深绿色，字体大小为 16 像素。
三、JavaScript 交互代码
JavaScript 为网站赋予交互性。例如，创建一个简单的按钮，点击后弹出提示框：
```html







点击我



```
当用户点击按钮时，会触发 onclick 事件，调用 showMessage 函数，弹出提示框显示指定信息。
四、导航栏代码
导航栏是网站的重要组成部分，方便用户浏览不同页面。以下是一个简单的水平导航栏代码示例：
```html

• 首页


• 关于


• 作品


• 联系我们

```
这段代码通过 CSS 对无序列表进行样式设置，使其呈现为水平导航栏。当鼠标悬停在链接上时，背景颜色会发生变化，增强用户交互体验。
五、响应式设计代码
随着移动设备的广泛使用，响应式设计至关重要。以下是一个简单的响应式布局示例，使用媒体查询：
```html