任务 5 添加HTML标签和CSS样式
任务目标
为创建的 formCheck.html 文件添加 HTML 标签，形成页面的基本结构；添加 CSS 样式，让网页更加美观。
任务步骤
1.下载并安装 Notepad++ 文件编辑器
下载 Notepad++ 文件编辑器软件，用于编辑 formCheck.html 文件中的代码，Notepad++ 下载官网如下：https://notepad-plus-plus.org/repository/7.x/7.6.4/npp.7.6.4.Installer.x64.exe
选择【中文】，点击【OK】。
点击【安装】。
即可安装成功。
2.下载并安装 pscp.exe 应用软件
下载并安装 pscp.exe 应用软件，用于实现将本地 Windows 文件上传到我们创建的 CVM 云服务器实例上，下载官网如下：https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html
点击 64-bit 文件。
打开安装包，点击【Next】。
选择安装地址，点击【Next】。
点击【Install】，安装完成。
3.在 formCheck.html 文件中添加 HTML 标签
右键点击 formCheck.html 文件，选择【Edit with Notepad++】，出现以下页面：
以下代码为 HTML 标签部分和 CSS 样式的代码，将这些代码复制粘贴到 formCheck.html 中，并使用 ctrl+s 键保存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript表单验证</title>
<style type="text/css">
.divAll {
width: 800px;
font-family: "黑体";
margin: 50px auto;
}
#titles {
font-weight: bold;
font-size: 18px;
height: 50px;
line-height: 50px;
background: #f5f5f5;
text-align: center;
border: 1px solid #ccc;
}
#contents {
margin-top: 20px;
background: #f5f5f5;
border: 1px solid #ccc;
}
#form-itemGroup {
padding: 10px;
}
#form-itemGroup label {
display: inline-block;
width: 100px;
height: 32px;
line-height: 32px;
color: #666;
text-align: right;
}
#form-itemGroup .userName {
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
}
#form-itemGroup .default {
width: 200px;
height: 32px;
line-height: 32px;
color: #999;
}
#form-itemGroup .error {
height: 32px;
line-height: 32px;
color: #f00;
}
#form-itemGroup .success {
height: 32px;
line-height: 32px;
color: #096;
}
.divBtn {
margin-top: 20px;
margin-left: 330px;
width: 100px;
height: 32px;
line-height: 32px;
background-color: #f93;
margin-bottom: 10px;
color: #ffffff;
font-weight: bold;
border: none;
cursor: pointer;
}
.divBtn:disabled {
margin-top: 20px;
margin-left: 330px;
width: 100px;
height: 32px;
line-height: 32px;
background-color: rgb(75, 72, 72);
margin-bottom: 10px;
color: #ffffff;
font-weight: bold;
border: none;
cursor: no-drop;
}
</style>
</head>
<body>
<div class="divAll">
<div id="titles">新用户注册</div>
<div id="contents">
<h3>基本信息</h3>
<hr width="95%" color="#f2f2f2" />
<form action="#">
<div id="form-itemGroup">
<label for="userName">用户名：</label>
<input
type="text"
id="userName"
class="userName"
onBlur="checkUserName()"
οninput="checkUserName()"
/>
<span class="default" id="nameErr">请输入至少3位的用户名</span>
</div>
<div id="form-itemGroup">
<label for="userPasword">密码：</label>
<input
type="password"
id="userPasword"
class="userName"
onBlur="checkPassword()"
οninput="checkPassword()"
/>
<span class="default" id="passwordErr">请输入4到8位的密码</span>
</div>
<div id="form-itemGroup">
<label for="userConfirmPasword">确认密码：</label>
<input
type="password"
id="userConfirmPasword"
class="userName"
onBlur="ConfirmPassword()"
οninput="ConfirmPassword()"
/>
<span class="default" id="conPasswordErr">请再输入一遍密码</span>
</div>
<div id="form-itemGroup">
<label for="userPhone">手机号码：</label>
<input
type="text"
id="userPhone"
class="userName"
onBlur="checkPhone()"
οninput="checkPhone()"
/>
<span class="default" id="phoneErr">请输入11位手机号码</span>
</div>
<div>
<button id="btn" type="submit" class="divBtn" onclick="return checkForm()">注册</button>
</div>
</form>
</div>
</div>
</body>
</html>4.将 formCheck.html 文件从本地 Windows 端上传到 CVM 云服务器端
找到 pscp.exe 应用软件所在目录，在空白处按住 Shift+右键，选择“在此处打开 Powershell 窗口”。
输入以下命令，用来将 formCheck.html 文件上传到我们创建的 CVM 云服务器实例上。
pscp -pw “linux端密码” -r “Windows端文件名” “linux用户名”@“linux端IP地址”:“linux端路径”注：
- Linux 端密码指创建 CVM 云服务器时设置的密码；
- Windows 端文件名指路径加文件全名；
- Linux 用户名默认 root ；
- Linux 端 IP 地址指 CVM 云服务器的公网地址；
- Linux 端路径是任务 4 中创建的文件夹的路径。
具体如下：
pscp -pw 311887Zzx -r D:/formCheck.html root@129.204.248.117:/usr/share/nginx/html/shop上传成功。
在 CVM 云服务器端验证 formCheck.html 文件是否上传成功，使用以下命令，查看到了 formCheck.html 文件。
ls /usr/share/nginx/html/shop5.实验验证
访问网址 http://129.204.248.117/shop/formCheck.html，其中“129.204.248.117”为 CVM 云服务器公网地址，“/shop/formCheck.html”为文件路径和 formCheck.html 文件名，查看 HTML 和 CSS 部分的代码。
学员评价