1. 任务背景

人生中的第一次总是让人憧憬，美好又梦幻。第一次接触电脑、第一次步入大学、第一次爬山、第一次看海…

对于编程，我最开始接触的是C/C++这样的控制台程序，运行界面是一片黑乎乎的命令行，就像下图一样，令人提不起兴趣来。

直到大二那年，偶尔一个机会，我的老师开始让我帮忙做学校的一个网页，我才知道原来还有这种东西，开发一个漂亮页面竟然这么容易(网页相对控制台那可好看多了)。激动的心啊，久久不能平静矣。

今天，我就带领大家实现第一个网页文件。

2. 任务目标

认识到网页是文件类型的一种。
理解操作系统是如何识别不同类型的文件的。

3. 相关知识点

3.1 文件类型

在学习编写网页之前，大家一定要掌握一个非常基础且不可或缺的概念，就是文件类型。

我们知道文件分为txt文本文件、word文件、excel表格文件、ppt演示文档、mp3音乐文件等等不同的类型。

那么电脑是怎么区分这些类型的呢，我们双击文件时，为什么电脑能使用对应的软件打开这个文件？

实际上，我们的电脑是通过文件的拓展名，来区分文件的，也是通过文件的拓展名，来决定打开文件时使用什么程序的。

例如：记事本编写的文件，拓展名是.txt；word编写的文档，拓展名是.doc或者.docx ，doc是早期使用的拓展名，后来又推出了docx；excel编写的表格闻到那个，拓展名是.xls或.xlsx；mp3音乐文件的拓展名，那就是.mp3了。

当我们双击某个文件时，电脑通过拓展名知道了该文件的类型，然后调用对应的程序打开该文件。

3.2 隐藏拓展名

电脑上的文件，基本都是有拓展名的，如下图，我们可以通过拓展名轻易的区分开这是一个什么文件。

但是有些同学的电脑上，是不显示拓展名的，如下图：

一定要注意的是，不显示文件的拓展名并不代表文件没有拓展名，只是隐藏了而已，我们可通过勾选文件拓展名复选框来显示拓展名。

作为一名程序员来说，我们应该始终展示文件的拓展名，便于我们随时分析文件类型。

3.3 网页的拓展名

OK，分析到这里，我们只需要知道网页的拓展名，就可以创建一个网页文件了。

网页的拓展名一般是.html，所以我们可以创建拓展名为.html的文件，因为该文件的拓展名是.html，所以电脑就会将它作为网页文件来处理。

一般来说，我们使用右键新建文件时，并没有选项让我们直接创建一个网页文件，我们可以选择创建记事本文件，然后将其拓展名.txt改为.html。

新建文本文件，如下图：

修改其拓展名，如下图：

这样我们就创建了一个网页了。

3.4 网页的打开方式

一般来说，我们会使用浏览器打开网页，但是如果我们想编辑网页的内容，我们可以通过记事本或其他编辑工具打开网页。

可以右键点击网页文件，选择具体打开方式，如下图，我们可以选择IE浏览器打开这个网页，来查看它的效果。

4. 任务实操

第1步，新建一个文本文件。

第2步，将文件拓展名改为.html，然后双击打开，观察是否默认使用浏览器打开。

第3步，右键点击文件，选择打开方式，然后选择使用记事本打开，理解我们的计算机，是可以通过不同程序打开同一个文件的。

5. 小结

本节我们创建了一个网页文件，虽然使用浏览器打开后是空白的，但它已经算是一个网页了。

接下来，我们就学习如何编写网页的内容。

零基础HTML教程(4)--动手创建第一个网页吧相关推荐

gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp
gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp 相信大家一定听说过gulp或者webpack,grunt等前端构建工具,这些是做什么用的我也不知道,也许他们会和一些前端框架用到一起,让开发 ...
Python零基础入门教程（快速入门）
前言学无止境,无止境学. 今天要给大家分享的是<Python零基础入门教程01 快速入门>,这是一个系列的教程,从零基础到项目实战.在本教程中,我会给大家介绍Python入门的一些基础知 ...
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)
一.什么是数据类型编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
视频教程-Python零基础入门教程-Python
Python零基础入门教程从2012年从事互联网至今有7年软件编程经验,曾任职国内北京互联网公司,中南林业大学授课Python 现任逻辑教育Python课程负责人,精通Python语言,精通人工智能 ...
SEO零基础入门教程（外链的发布和软文编写）
seo的作用是众所周知的,对网站进行seo优化,可以给网站带来大量的搜索引擎流量.但是想要做好网站优化也有难度,尤其是对于seo新手来说,因为缺乏理论和实战,所以seo新手需要多加练习.那么具体seo ...
html怎么在线安装,web前端零基础学习教程，如何安装HTML编辑器！
原标题:web前端零基础学习教程,如何安装HTML编辑器! HTML 编辑器推荐: 可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器: Notepad++:http ...
零基础用Unity制作你的第一个游戏(1)
零基础用Unity制作你的第一个游戏(1) 1.开发环境 2.创建项目 3.Unity界面基本介绍 1.界面介绍 2.场景视图操作 4.创建对象 1.创建地板 2.创建主角 5.不能缺少的仪式感(让游 ...
计算机pscs6教程,photoshop CS6零基础入门教程
<photoshop CS6零基础入门教程>针对零基础学员开设,以教案和实际操作演示相结合的方式,详细地介绍adobe photoshop cs6的各项工具和命令.由浅入深.循序渐进地全面 ...

零基础HTML教程(4)--动手创建第一个网页吧

文章目录