从零开始创建一份HTML/CSS/JS文（转）

创建文件是开始搭建你的网站的第一步，那么如何创建一份能够被浏览器或者编辑器识别的HTML/CSS/JS文件呢？这里我们推荐使用代码编辑器sublime text，同时我们也会简单介绍下记事本的使用。除此之外，我们还介绍了一些关于后缀名的知识内容，以方便你学习理解。

sublime text

下载sublime text

首先进入到sublime text官网，找到下面图中红框圈起来的下载按钮（已经自动匹配好了适合你电脑的版本），点击直接下载即可（如果你非常明确自己要选择哪个版本，可点击下图绿框圈起来的下载链接，否则直接点击红框圈起来的下载即可）。

注：sublime text虽然为收费版本，但是免费也可以一直使用，所以无需担心。

安装sublime text

以windows系统为例，双击刚刚下载的文件，会出现安装步骤如下，一直点next按钮即可（注意最后一步勾选”Add to explorer context menu“，以方便我们日后使用右键打开）：

使用sublime text新建文件

双击如下图的sublime text图标打开sublime text编辑器（以windows系统为例）：

打开sublime text之后，默认就有一个新文稿，我们可以看到光标一闪一闪的，表示我们可以输入内容了，在输入内容之前我们先保存（"ctrl + s"）该文稿为我们所需文件，如begin.html，如下图:

现在我们可以输入我们的html内容，如下图（记得”ctrl+s“是保存）：

同样我们还可以新建CSS或JS文件，使用快捷键”ctrl+n“创建一份新文稿（或者点击顶部的菜单栏中的”file“，也可以看到创建，保存等相关文件操作），存为我们对应的文件，如下图：

记事本

Windows用户

1、鼠标右键新建一份文本文档，如下图：

2、建好之后，重命名文件，并把扩展名由.txt改成.html。或者右键点击文本文档，选择属性， 修改扩展名为.html，如下图：

3、如果需要创建其他格式的文件，将扩展名更改为所需的格式，比如需要创建CSS文件，则将扩展名修改为”.css”，创建JS文件则将扩展名修改为”.js”。

Mac用户

1、打开应用程序“文本编辑”（可通过系统自带的Spotlight搜索打开）

2、新建一份文稿

3、输入任何内容，保存这份文稿为任意格式

4、右键点击保存好的文件，选择“显示简介”

5、在“名称与扩展名”中，修改扩展名（默认为”.rtf”）为“.html”

6、如果需要创建其他格式的文件，将扩展名更改为所需的格式，比如需要创建CSS文件，则将扩展名修改为”.css”，创建JS文件则将扩展名修改为”.js”。

文件扩展名

什么是文件扩展名

我们有时候会看到这样的文件名：“新建文件.txt”、”文档.doc”、“README.md”等，在这些文件名称的后面，都有一个用“.”隔开的英文缩写，我们称类似于“txt”、“doc”、“md”的英文缩写为文件的扩展名。

文件扩展名也叫后缀名，它是操作系统用来标示文件类型的一种机制。当我们说“一份HTML”文件时，指的实际上是“一份后缀名为html的文件”。

通过扩展名，系统可以选择在打开这个文件时，使用什么软件运行。比如我们打开一个txt文件，系统就会自动使用记事本打开，我们打开一个html文件，系统就会自动使用默认浏览器打开。当然，代码编辑器或者IDE也可以通过文件扩展名来用不同的高亮规则来美化你的代码。

但文件扩展名并不影响文件的内容， 甚至你可以随意修改文件扩展名，来用不同的软件打开这个文件，下面就为大家介绍如何查看以及编辑文件扩展名。

如何查看/编辑文件扩展名

Windows用户

查看/编辑文件扩展名

如果你的文件名显示形式是"xxxx.xxx"，如begin.html，则点后面的就是对应的扩展名。如要修改直接右键重命名既可以。

显示隐藏的扩展名

如果你没有看到扩展名，则可以点击工具栏的“组织->文件夹和搜索选项”，如下图：

将“隐藏已知文件类型的扩展名”选项的勾去掉：

然后就可以看到扩展名，直接重命名或者查看属性修改扩展名也可以。

Mac用户

查看显示简介

右键点击文件->显示简介->名称与扩展名，查看或编辑扩展名。

显示隐藏的扩展名

打开Fider->偏好设置->高级->显示所有文件扩展名。