|
|
|
0028 如何编写第一个网站页面程序helloworld
这节课，来讲一下如何做一个网页的helloworld，以及基本的标签知识。 因为操作系统型号过多，这里仅仅选取树莓派电脑Raspbian操作系统和Windows7操作系统做为代表说明，如果是其他操作系统请自行到网上搜索相关内容，大概内容应该相差不大。 |
|
|
微信公众号：学哥量化交易学习 QQ群1：603559164 客服QQ号：44556287
工信部备案/许可证编号：沪ICP备15050545号-4 |
Windows电脑下载安装后，可以到菜单中找到：
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>这一句下面增加一行代码：
保存代码之后，回到浏览器，点刷新按钮，就可以看到标题不是乱码了。
如果没有修改文件名，并且浏览器某个Tab窗口正在显示这个文件，则无需打开了，只要点击【刷新】按钮即可。
树莓派电脑：
Windows电脑：
可以看到，刚才修改的代码的内容体现出来了效果。
如果同时在编辑2个文件，该如何处理呢？
回到文本编辑器，新增一个文件，然后，将下面的代码输入，并保存为second.html文件：
然后，在文件管理器里面找到second.html文件，右键打开，就可以看到这个网页了：
树莓派电脑：
Windows电脑：
后续教程，将会重复上面的步骤和过程，所以有2个要点要记住，新手比较容易犯错：
1.修改代码之后，文本编辑器一定记得保存。
2.保存代码之后，网页浏览器一定记得刷新。
另外，由于我们统一采用Chrome浏览器，不同操作系统上显示的网页内容差异不大，后续的课程中，将不再说明Windows电脑的情况了，除非有不同情况才会补充说明。
配置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软件，请自行搜索，启动之后是这样的：
