这节课，来讲一下如何做一个网页的helloworld，以及基本的标签知识。
因为操作系统型号过多，这里仅仅选取树莓派电脑Raspbian操作系统和Windows7操作系统做为代表说明，如果是其他操作系统请自行到网上搜索相关内容，大概内容应该相差不大。
确认安装了浏览器
开始编写代码之前，需要确认一下电脑上是否安装好了浏览器，一般来说，操作系统安装的都是打包着安装好了浏览器的。
比如苹果的操作系统一般都装好了Safari浏览器，微软的操作系统一般都装好了IE或者Edge浏览器，ubuntu操作系统一般都装好了Firefox浏览器，树莓派电脑操作系统一般都装好了Chromium浏览器。
这里建议大家统一安装Chrome浏览器，因为这个浏览器的调试功能非常出色，大家可以自行搜索关键字“Chrome下载”，然后选择对应的操作系统的安装版本文件下载和安装。
树莓派电脑默认应该安装了Chromium浏览器，它是Chrome浏览器的工程版和实验版，和Chrome浏览器是相同核心，因此树莓派电脑就无需安装Chrome浏览器了，使用Chromium浏览器就可以了：
Windows电脑下载安装后，可以到菜单中找到：
编写helloworld并在浏览器中查看
树莓派电脑打开【Text Editor】程序：
Windows电脑，则打开【记事本】程序。
然后编写如下代码：
然后，选择菜单【文件】-》【另存为...】-》选择目录，输入文件名helloworld.html，-》【保存】。
树莓派电脑，保存到目录/home/pi。
Windows电脑，保存到目录C:/pi，如果不存在，则先创建pi目录。注意保存类型为所有文件，编码为UTF-8：
然后，打开浏览器程序，并打开刚才保存的helloworld.html文件：
树莓派电脑，选择系统菜单【附件】->【文件管理器】，打开文件管理器程序，进入/home/pi目录，找到文件helloworld.html，单击鼠标右键，单击菜单【Chromium浏览器】，打开了浏览器，并显示了结果。
Windows电脑，打开【Windows资源管理器】程序，进入目录/home/pi，选中helloworld.html文件， 单击鼠标右键，点击菜单【打开方式】，点击菜单【Google Chrome】，打开浏览器，查看这个网页。
然后，就可以看到自己做的第一个网页了：
树莓派电脑：
Windows电脑：
通过比较可以发现，不同操作系统的浏览器可能显示的效果有略微差异，但基本差异不大可以忽略不计。
另外，发现树莓派的Chrome浏览器的标题显示的是乱码，如果要显示正常，可以按照图中提示设置浏览器可以达到目的。
当然，如果提供一个网页给其他人浏览，要求其他人每次都修改浏览器设置，好像不太合理，可以通过修改代码，让浏览器知道网页需要什么编码，从而自动进行设置，从而达到目的。
修改代码如下，在</title>这一句下面增加一行代码：
保存代码之后，回到浏览器，点刷新按钮，就可以看到标题不是乱码了。
修改代码刷新页面
回到文本编辑器，将刚才的helloworld.html代码修改一下，例如，增加：我是学哥。然后保存。
如果没有修改文件名，并且浏览器某个Tab窗口正在显示这个文件，则无需打开了，只要点击【刷新】按钮即可。
树莓派电脑：
Windows电脑：
可以看到，刚才修改的代码的内容体现出来了效果。
如果同时在编辑2个文件，该如何处理呢？
回到文本编辑器，新增一个文件，然后，将下面的代码输入，并保存为second.html文件：
然后，在文件管理器里面找到second.html文件，右键打开，就可以看到这个网页了：
树莓派电脑：
Windows电脑：
后续教程，将会重复上面的步骤和过程，所以有2个要点要记住，新手比较容易犯错：
1.修改代码之后，文本编辑器一定记得保存。
2.保存代码之后，网页浏览器一定记得刷新。
另外，由于我们统一采用Chrome浏览器，不同操作系统上显示的网页内容差异不大，后续的课程中，将不再说明Windows电脑的情况了，除非有不同情况才会补充说明。
html标签
来看一下，helloworld.html的代码内容：
先看第一行和最后一行：
第一行：<html>
最后一样：</html>
这里的<html>就可以称之为HTML标签，那么HTML标签是用来做什么呢，不得不提到HTML语言。
按照定义，HTML语言是用来描述网页的一种语言。
也就是说，浏览器为何能够显示出丰富多彩的内容，全都是靠HTML语言来实现。
HTML语言遵循一定的规范，这个规范是预先定义好的，程序员按照规范编写代码，浏览器按照规范解释执行这些代码，双方就能统一起来，就不会产生理解偏差和歧义。这样程序的世界才能运转起来。
HTML全称是（Hyper Text Markup Language)，也就是超文本标记语言。
它不是编程语言，是一种标记语言。
是通过一套标记标签来描述网页。
比如，用<html>和配对的</html>来表示，有一个网页的意思。
用<head>和配对的</head>来表示，网页的头部信息的意思。
用<title>和配对的</title>来表示，网页的标题的意思。
记住以下标签的特征：
1.HTML标签由尖括号包围的关键字组成，比如<html>，这里前面一定是<，后面一定是>
2.HTML标签通常是成对出现的，比如<title>和</title>，并且成对的范围不能错乱。
比如<html><head></head></html>是正确的，但<html><head></html></head>就是错误的。
嵌套包含的时候，必须层次也要对上。
3.不带/的标签称为开始标签，带/的标签称为结束标签，开始标签必须在结束标签前面出现。
比如<title></title>是正确的，但</title><title>就是错误的。
4.标签影响的范围就是开始标签和结束标签之间的内容。
比如<title>这是标题</title>这不是标题，只有“这是标题”会被认为是标题。
用HTML语言规范编写的文档就可以称之为网页。
head标签
一般来说，一个html网页，至少都包含了这几个标签，并且以这样的嵌套层次：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
也就是html里面包含head和body两部分，而head里面包含了title。
html,head和body标签本身是不显示在浏览器内容中的，是不可见的。
但title标签中的内容是会显示在浏览器的标题栏上的，是可见的。
记住，这个次序是不能乱的，因为标签都是配对并且有层次包含关系的。
title标签
大家可以将title标签修改为“hello world 标题2”，然后刷新网页看看效果。
body标签
body标签定义了HTML文档的主体，也就是在浏览器页面当中真正要显示的内容，要全部包含在body标签当中。
目前我们仅仅显示了一段文字。
修改这段文字，然后刷新页面实施看效果。
安装更好用的文本编辑器
之前使用的文本编辑器，虽然也可以编写代码，但是用起来感觉功能比较弱，比如没有关键字颜色提醒等等功能。
因此，学哥推荐大家安装自己喜欢的代码编辑器，提高编写程序的效率。
树莓派电脑，图形界面推荐gedit，命令行推荐使用vim，毕竟很多时候，都是通过ssh远程登录的，命令行方式使用vim文本编辑器非常方便。
Windows电脑，推荐使用editplus，支持的语言格式非常多，非常适合编写代码。
树莓派电脑，安装vim：
$sudo apt-get update
$sudo apt-get install vim
配置vim：
$sudo vi /etc/vim/vimrc
找到一句syntax on，将前面的双引号去掉
请在最后一行，输入下面几行，可以让您的VIM变得更漂亮、舒服。
set nu // 在左侧行号
set tabstop //tab 长度设置为 4
set nobackup //覆盖文件时不备份
set cursorline //突出显示当前行
set ruler //在右下角显示光标位置的状态行
set autoindent //自动缩进
保存之后，配置完毕。
上面的配置，其实是非常简单的，比如一些配色方案等，学哥并没有写入，如果您还有其他需求的话，建议网上搜索。
启动vim：
$sudo vim helloworld.html
可以看到代码颜色很好看。
至于vim和用法，和vi的用法基本一致，如果有不熟悉的话，去网上搜索看看。
树莓派电脑，安装gedit：
$sudo apt-get update
$sudo apt-get install gedit
启动gedit：单击菜单【附件】->【gedit】，打开helloworld.html如下：
Windows电脑下载安装editplus软件，请自行搜索，启动之后是这样的：
课后练习
新建一个index.html文件，然后title显示“个人简历”，内容显示“这是XXX的个人简历。”。
往期教程
因为教程是系列教程，前后关联性非常强，请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。
