今天心血来潮，想搞个自己的网页玩玩，顺便记录一下，省得以后忘。
先合计合计要弄啥
一开始也没啥头绪，就想着弄个简单的，能展示点东西就行。后来决定，就搞个个人介绍的页面，放点照片，写点个人爱好啥的。
动手开干
先在电脑上建个文件夹，起名叫“我的网页”。然后在里面又建几个文件夹，分别放图片（images）、样式（css）和脚本（js），虽然现在脚本还用不上，但先建好再说，万一以后要用。
用文本编辑器（我用的Sublime Text，你们用啥都行）新建一个文件，起名叫“*”，这就是网页的主文件。然后，就开始往里面写代码。
先搭个架子
网页嘛得有个基本结构，就像盖房子先打地基一样。我照着网上的教程，写这么一段：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
</head>
<body>
<!-- 这里是网页的内容 -->
</body>
</html>
大概解释一下，<!DOCTYPE html>是告诉浏览器这是个HTML5的网页。<html>标签是整个网页的根元素。<head>里面放的是网页的配置信息，比如标题<title>，编码方式<meta charset="UTF-8">（这个很重要，不然中文会乱码）。<body>里面放的就是网页上能看到的内容。
填充内容
有架子，就开始往里面填东西。我先放个大标题，用的是<h2>标签：
<body>
<h2>欢迎来到我的地盘！</h2>
</body>
然后，放张自己的照片，用的是<img>标签：
<body>
<h2>欢迎来到我的地盘！</h2>
<img src="images/*" alt="我的照片">
</body>
这里要注意，src属性写的是图片的路径，我把照片放在“images”文件夹里，所以路径是“images/*”。alt属性是图片的替代文本，如果图片加载不出来，就会显示这个文本。
我又写段自我介绍，用的是<p>标签：
<body>
<h2>欢迎来到我的地盘！</h2>
<img src="images/*" alt="我的照片">
<p>大家我是XXX，一个热爱生活，喜欢折腾的家伙...</p>
</body>
为让内容更丰富，我又加个列表，列出我的兴趣爱用的是<ul>（无序列表）和<li>（列表项）：
<body>
<h2>欢迎来到我的地盘！</h2>
<img src="images/*" alt="我的照片">
<p>大家我是XXX，一个热爱生活，喜欢折腾的家伙...</p>
<p>我的爱</p>
<ul>
<li>看电影</li>
<li>听音乐</li>
<li>打游戏</li>
<li>瞎琢磨</li>
</ul>
</body>
美化一下
现在网页的内容有，但光秃秃的不好看，得给它打扮打扮。这就需要用到CSS。我在“css”文件夹里新建一个文件，起名叫“*”，然后在里面写一些样式。
先给整个网页定个基调
body {
font-family: "微软雅黑", sans-serif; / 设置字体 /
background-color: #f0f0f0; / 设置背景颜色 /
margin: 0; / 去掉默认的外边距 /
padding: 0; / 去掉默认的内边距 /
再给标题加点颜色
h2 {
color: #333; / 设置标题颜色 /
text-align: center; / 让标题居中 /
让图片小一点，圆一点
img {
width: 200px; / 设置图片宽度 /
height: 200px; / 设置图片高度 /
border-radius: 50%; / 让图片变成圆形 /
display: block; / 让图片独占一行 /
margin: 20px auto; / 让图片水平居中 /
段落和列表也收拾收拾
p {
color: #666; / 设置段落颜色 /
line-height: 1.5; / 设置行高 /
text-indent: 2em; / 首行缩进 /
ul {
list-style: none; / 去掉列表前面的点 /
padding: 0; / 去掉默认的内边距 /
li {
margin-bottom: 5px; / 设置列表项之间的间距 /
写好CSS后，记得在HTML文件中引用它，在<head>标签里加上这么一句：
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
<link rel="stylesheet" href="css/*">
</head>
大功告成！
保存好所有文件，用浏览器打开“*”，就能看到我的个人主页！虽然很简单，但也是自己一点一点做出来的，还是挺有成就感的。
今天的折腾就到这里，以后有空再继续完善它，比如加个留言板啥的。大家也可以试试，挺好玩的！
