目录
关键词
- 前台：给普通用户（会员）使用的功能
- 后台：给管理员用户使用的功能
- 前端：浏览器上显示、运行的页面
- 后端：java程序以及数据库
WEB前端课程目标
- HTML负责内容
- CSS负责样式
- JavaScript负责行为
- 前端流行框架Vue.js
学习目标
- HTML简介和基本结构
- HTML基本标签
- 表格和表单
Html-介绍
超文本标记语言（英语：HyperText Markup Language，简称HTML）是一种用于创建网页的标准标记语言。
ddd
- 标记语言是一套标记标签（markup tag）
-
<标签 属性名="属性值">内容</标签> - HTML运行在浏览器上，由浏览器来解析。
- 浏览器的兼容性
-
因为不同的浏览器对同一段代码由不同的解析，显示效果不统一的情况 - Html版本
-
HTML 4.01 -
HTML5
编辑器
- notepad++
- VS Code: https://code.visualstudio.com/
- Sublime Text: http://www.sublimetext.com/
使用.htm也可以使用.html扩展名
Html5-标准结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容……
</body>
</html>
Html-结构解析
<!DOCTYPE html> 声明为HTML5文档
<html> 元素是HTML页面的根元素
<head> 元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
Html常用标记
<h?>元素定义一个标题
<p>元素定义一个段落
<a href="url">链接文本</a>
<img src="url"/>
无序列表和有序列表
< iframe>标记
通过使用框架，你可以在同一个浏览器窗口中，显示不止一个页面。
<iframe>内联框架
Html-表单标记
用来提交数据的一块区域
<form>: 表单标记
<input>: 文本输入控件
<textarea>: 多行文本输入控件
<button>: 按钮控件
<select>: 下拉列表控件
<option>: 下拉列表选项控件
<optgroup>: 下拉列表选项集合控件
Html-表格标记
用来展示行列规整的内容
<table>: 表格控件
<caption>: 表题目
<th>: 表格单元头
<tr>: 表格单元行
<td>: 表格单元列
<thead>: 表头
<tbody>: 表体
<tfood>: 表尾
练习：完成基本的表单提交功能并实现页面跳转
运行结果截图
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>致敬2019，展望2020</title>
</head>
<script language="javascript">
function validateForm() {
if (checkGivenName() && checkFamilyName() && checkLoginAccount() && checkPassword() && checkEmail())
return true;
else
return false;
}
//验证名字
function checkGivenName() {
var strName = document.form.givenname.value;
if (strName.length == 0) {
alert("名字不能为空!")
document.form.givenname.focus();
return false;
} else
for (i = 0; i < strName.length; i++) {
str = strName.substring(i, i + 1);
if (str >= "0" && str <= "9") {
alert("名字中不能包含数字");
document.form.givenname.focus();
return false;
}
}
return true;
}
//验证姓氏
function checkFamilyName() {
var strName = document.form.familyname.value;
if (strName.length == 0) {
alert("姓氏不能为空!")
document.form.familyname.focus();
return false;
} else
for (i = 0; i < strName.length; i++) {
str = strName.substring(i, i + 1);
if (str >= "0" && str <= "9") {
alert("姓氏中不能包含数字");
document.form.familyname.focus();
return false;
}
}
return true;
}
//验证登录名
function checkLoginAccount() {
var strLoginAccount = document.form.loginaccount.value;
if (strLoginAccount.length == 0) {
alert("登录名不能为空!");
document.form.loginaccount.focus();
return false;
} else
for (i = 0; i < strLoginAccount.lenght; i++) {
str1 = strLoginAccount.substring(i, i + 1);
if (!((str1 >= "0" && str1 <= "9") || (str1 >= "a" && str1 <= "z") || (str1 == "_"))) {
alert("登录名字中不能包含特殊字符");
document.form.loginaccount.focus();
return false;
}
}
return true;
}
//验证email
function checkEmail() {
var strEmail = document.form.emailaddress.value;
if (strEmail.length==0){
alert("电子邮件不能为空！");
return false;
}
if (strEmail.indexOf("@",0)==-1){
alert("电子邮件必须包括@");
return false;
}
if (strEmail.indexOf(".",0)==-1){
alert("电子邮件必须包括.");
return false;
}
return true;
}
//验证密码
function checkPassword(){
var password=document.form.pwd.value;
var rpassword=document.form.repwd.value;
if(password.length==0){
alert("密码不能为空");
document.form.pwd.focus();
return false;
}
if((rpassword.length==0)){
alert("再次输入密码不能为空");
document.form.repwd.focus();
return false;
}
else if(password.length<6){
alert("密码少于6位");
document.form.pwd.focus();
return false;
}
else
for(i=0;i<password.length;i++){
str2=password.substring(i,i+1);
if(!((str>="0"&&str2<="9")||(str2>="a"&&str2<="z")||(str2>="A"&&str2<="Z"))){
alert("密码中有非法字符");
document.form.pwd.focus();
return false;
}
}
if (password!=rpassword){
alert("密码不相符!");
document.form.pwd.focus();
return false;
}
return true;
}
</script>
<body>
<h2>练习：注册表单</h2>
<form action="/result.html" method="POST" name="form" onsubmit="return validateForm()">
<table border="1">
<tbody>
<tr>
<td>名字</td>
<td><input type="text" name="givenname""></td>
</tr>
<tr>
<td>姓氏</td>
<td><input type="text" name="familyname"></td>
</tr>
<tr>
<td>登录名</td>
<td><input type="text" id="loginaccount" name="loginaccount" placeholder="可包含a-z，0-9和下划线"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td>再次输入密码</td>
<td><input type="password" name="repwd"></td>
</tr>
<tr>
<td>电子邮箱</td>
<td><input type="text" name="emailaddress"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="sport">运动
<input type="checkbox" name="hobby" value="chat">聊天
<input type="checkbox" name="hobby" value="playgame">玩游戏
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="year" maxlength="4">年
<input type="text" name="month" maxlength="2">月
<input type="text" name="date" maxlength="2">日
</td>
</tr>
<tr>
<td><input type="reset" value="重填"></td>
<td><input type="submit" value="同意以下条款，提交注册"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
result.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
注册成功！
</body>
</html>
