editplus注册码生成,用editplus做用户登录页面

2年前 (2024-04-23)

这节课，来讲一下如何做一个网页的helloworld，以及基本的标签知识。

因为操作系统型号过多，这里仅仅选取树莓派电脑Raspbian操作系统和Windows7操作系统做为代表说明，如果是其他操作系统请自行到网上搜索相关内容，大概内容应该相差不大。

开始编写代码之前，需要确认一下电脑上是否安装好了浏览器，一般来说，操作系统安装的都是打包着安装好了浏览器的。

比如苹果的操作系统一般都装好了Safari浏览器，微软的操作系统一般都装好了IE或者Edge浏览器，ubuntu操作系统一般都装好了Firefox浏览器，树莓派电脑操作系统一般都装好了Chromium浏览器。

这里建议大家统一安装Chrome浏览器，因为这个浏览器的调试功能非常出色，大家可以自行搜索关键字“Chrome下载”，然后选择对应的操作系统的安装版本文件下载和安装。

树莓派电脑默认应该安装了Chromium浏览器，它是Chrome浏览器的工程版和实验版，和Chrome浏览器是相同核心，因此树莓派电脑就无需安装Chrome浏览器了，使用Chromium浏览器就可以了：

Windows电脑下载安装后，可以到菜单中找到：

树莓派电脑打开【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>这一句下面增加一行代码：

保存代码之后，回到浏览器，点刷新按钮，就可以看到标题不是乱码了。

如果没有修改文件名，并且浏览器某个Tab窗口正在显示这个文件，则无需打开了，只要点击【刷新】按钮即可。

树莓派电脑：

Windows电脑：

可以看到，刚才修改的代码的内容体现出来了效果。

然后，在文件管理器里面找到second.html文件，右键打开，就可以看到这个网页了：

树莓派电脑：

Windows电脑：

后续教程，将会重复上面的步骤和过程，所以有2个要点要记住，新手比较容易犯错：

2.保存代码之后，网页浏览器一定记得刷新。

另外，由于我们统一采用Chrome浏览器，不同操作系统上显示的网页内容差异不大，后续的课程中，将不再说明Windows电脑的情况了，除非有不同情况才会补充说明。

来看一下，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语言规范编写的文档就可以称之为网页。

一般来说，一个html网页，少都包含了这几个标签，并且以这样的嵌套层次：

<html>

<head>

</head>

<body>

</body>

</html>

也就是html里面包含head和body两部分，而head里面包含了title。

html,head和body标签本身是不显示在浏览器内容中的，是不可见的。

但title标签中的内容是会显示在浏览器的标题栏上的，是可见的。

记住，这个次序是不能乱的，因为标签都是配对并且有层次包含关系的。

大家可以将title标签修改为“hello world 标题2”，然后刷新网页看看效果。

body标签定义了HTML文档的主体，也就是在浏览器页面当中真正要显示的内容，要全部包含在body标签当中。

目前我们仅仅显示了一段文字。

修改这段文字，然后刷新页面实施看效果。

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显示“个人简历”，内容显示“这是 X的个人简历。”。

随机文章