1，文件存储
确定网站项目储存位置。在该位置下创建一个文件夹（比如 web-projects）。所有网站项目都存在一处。
在这个文件夹里再新建一个文件夹（比如 test-site，读者可自由发挥想象），来存放第一个网站。
2,网站使用什么结构？
下面来看看测试网站应该使用什么结构。最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：
index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在 test-site 文件夹中新建 index.html。
images 文件夹 ：这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
styles 文件夹 ：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹中新建一个 styles 文件夹。
scripts 文件夹 ：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。在 test-site 文件夹中新建一个 scripts 文件夹。
3,文件路径
1,将火狐图案保存到 images 文件夹。
2,打开 index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的测试页面</title>
</head>
<body>
<img src="" alt="我的测试页面">
</body>
</html>
3, 是在页面里插入图像的 HTML 代码。我们需要告诉 HTML 图像的位置。这张图片在 images 目录下，而 images 目录与 index.html 处于同级目录。要从 index.html 所处一级目录进入图片所在目录，所需的文件路径是 images/image-filename.png 。例如，这里的图像叫做 firefox-icon.png ，所以文件路径就是 images/firefox-icon.png 。
4,在 HTML 代码里 src＝"" 的双引号中插入文件路径。
5,保存 HTML 文件，然后使用浏览器打开（双击文件）。火狐图案显示出来了！
特别注意：文件路径的一些通用规则：
若引用的目标文件与 HTML 文件同级，只需直接使用目标名称的文件名，比如 my-image.jpg 。
要引用子文件夹（下一级）中的文件，要在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。
若引用的目标文件位于 HTML 文件的上一级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 …/my-image.png 引用 my-image.png 。
以上方法可以随意组合，比如 …/subdirectory/another-subdirectory/my-image.png。
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
