这份教程会带你从零开始，去建立一个网站，并发布到GitHub上。
通过按顺序阅读下面列出的文章，你讲逐渐建立好你自己的第一个在线网站，让我们开始吧！
文件处理HTML基础CSS基础JavaScript基础发布你的网站万维网是怎么工作的
文件处理
网站由文本、代码、样式表、媒体内容等多种文件组成。构建站点时要确保文件夹架构组织合理， 文件之间交互畅通， 没有明显错误， 然后再上传至服务器。
新建一个文件夹（比如 test-site），来存放第一个网站。
关于大小写和空格的提示
你会注意到，文章所有的文件夹名和文件都使用小写字母，且没有空格，这是因为：
- 很多计算机，特别是 Web 服务器，是对大小写敏感 的。比如，如果你保存一张图片 myImages.jpg，然后在另一处试图以 myimage.jpg访问这张图片，可能会失败。
- 浏览器，Web 服务器，还有编程语言处理空格的方式不一致。比如，一些系统会将包含空格的文件名视为两个。一些服务器将会把文件名里的空格替换成”%20“，从而使链接遭到破坏。最好使用中划线，而不是下划线来分离单词。
网站应该使用什么结构？
最基本、最常见的结构是：一个主页，一个图片文件夹，一个样式表文件和一个脚本文件夹。在 test-site 文件夹中新建以下 4 个文件
- index.html：这个文件一般包含主页内容，即用户第一次访问站点是看到的文本和图像。
- imags 文件夹：这个文件夹包含站点中的所有图像。
- styles 文件夹：这个文件夹包含所需样式表。
- scripts 文件夹：这个文件夹包含提供站点交互功能的 JavaScript 代码。
文件路径
为使文件间正常交互，应为每个文件提供访问路径，让一个文件知道另一个文件的位置。我们在 index.html中插入一小段 HTML，让其显示火狐图片
-
将火狐图片保存到 images 文件夹。
-
打开 index.html文件，粘贴以下代码 。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的测试页面</title> </head> <body> <img src="" alt="我的测试页面"> </body> </html> -
是在页面里插入图像的 HTML 代码。我们需要告诉 HTML 图像的位置，这张图片在 images 目录下，而 images 目录与 index.html 处于同级目录，例如，这里的图像叫做 fix.png，所以文件路径就是 images/fix.png，将src 设为这个路径。
-
保存 HTML 文件，然后使用浏览器打开 index.html（双击文件），火狐图案就显示出来了！
现在站点文件夹的结构应该类似于：
HTML基础
超文本标记语言（HTML）是一种用来结构化 Web 网页及其内容的标记语言，由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。例如，键入下面一行内容
我的猫咪脾气爆:)
可以将这行文字封装成一个段落（p）元素来使其在单独一行呈现：
<p>我的猫咪脾气爆:)</p>
HTML 元素讲解
这个元素的主要部分有：
- **开始标签：**包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用
- 结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠，这表示这元素的结尾。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果
- 内容：元素的内容，本例中就是所输入的文本本身
- 元素：开始标签、结束标签与其内容相结合，便是一个完整的元素
HTML文档详解
以上介绍了一些基本的 HTML 元素，但孤木不成林，现在来看看单个元素如何彼此协作同构成一个完整的 HTML 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的测试页面</title>
</head>
<body>
<img src="images/fix.png" alt="我的测试页面">
</body>
</html>
- ——文档类型。DOCTYPE在当今作用有限，仅用于保证文档正常读取
- ——元素。该元素包含整个页面的内容，也称作根元素
- —— 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等
-
——该元素指定文档使用 UTF-8 字符编码
- ——元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字
- ——元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图片、视频等
标记文本
标题
HTML包括六个级别的标题，
-
，一般最多用3-4 级标题。
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
可以尝试在 元素上添加一个合适的标题
段落
如上文所讲，
元素时用来指定段落的，通常用于指定常规的文本内容：
<p>这是一个段落</p>
试着添加一些文本到一个或几个段落中，并把它们放在你的元素下方
列表
最常见的列表类型为：
- 无序列表，用一个
- 元素包围
- 有序列表，用一个
- 元素包围
列表的每个项目用一个列表项目元素
- 包围，试着在实例页面中添加一个有序列表和无序列表
<p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p> <ul> <li>技术人员</li> <li>思考者</li> <li>建造者</li> </ul> <p>我们致力于……</p>链接
链接非常重要——它们富裕 Web 网络属性，要植入一个链接，我们需要使用一个简单的元素-，a 是”anchor“（锚）的缩写。要将一些文本添加到连接中，需要如下几步：
-
选择一些文本。比如”Mozilla 宣言“
-
<a>Mozilla 宣言</a> -
为此元素添加一个 href 属性，并把 href 的值设置为所需网址
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>
小结
如果你一直跟着这篇文章里的知道做的话，你应该完成了一个像下面这样的页面
-
- 有序列表，用一个
