table of Contents
Key words
- Reception: to ordinary users (members) used functions
- Background: Administrator user to use features
- Front: displayed on the browser, running page
- Backend: java program and database
WEB front-end program targets
- HTML responsible for the content
- CSS is responsible for style
- JavaScript responsible behavior
- Popular front-end framework Vue.js
learning target
- Introduction and basic HTML structure
- Basic HTML tags
- Tables and forms
Html- Introduction
HTML (English: HyperText Markup Language, referred to as HTML) is a standard for creating a web page markup language.
ddd
- Markup Language is a set of markup tags (markup tag)
-
<标签 属性名="属性值">内容</标签> - HTMLRun in the browserOn to resolve by the browser.
- Browser Compatibility
-
因为不同的浏览器对同一段代码由不同的解析，显示效果不统一的情况 - Html version
-
HTML 4.01 -
HTML5
editor
- notepad++
- VS Code: https://code.visualstudio.com/
- Sublime Text: http://www.sublimetext.com/
Use .htm You can also use the .html extension
Html5- standard structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容……
</body>
</html>
Html- structural analysis
<!DOCTYPE html> 声明为HTML5文档
<html> 元素是HTML页面的根元素
<head> 元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
Html common mark
<h?>元素定义一个标题
<p>元素定义一个段落
<a href="url">链接文本</a>
<img src="url"/>
无序列表和有序列表
<Iframe> tag
By using frames, you can be in the same browser window, displays more than one page.
<iframe>内联框架
Html- form tag
Submitting data to a region
<form>: 表单标记
<input>: 文本输入控件
<textarea>: 多行文本输入控件
<button>: 按钮控件
<select>: 下拉列表控件
<option>: 下拉列表选项控件
<optgroup>: 下拉列表选项集合控件
Html- table tags
It used to show the ranks of the regular content
<table>: 表格控件
<caption>: 表题目
<th>: 表格单元头
<tr>: 表格单元行
<td>: 表格单元列
<thead>: 表头
<tbody>: 表体
<tfood>: 表尾
Exercise: complete the basic form submission features and allow the page jump
Screenshot operating results
1.html Code
<!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 Code
<!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>
