ディレクトリ
キーワード
- レセプション：普通のユーザ（メンバー）には、関数を使用しました
- 背景：使用の機能への管理者ユーザー
- フロント：ブラウザに表示され、ページを実行しています
- バックエンド：Javaプログラムとデータベース
WEBフロントエンドプログラムの目標
- 内容については責任を負いHTML
- CSSはスタイルのために責任があります
- JavaScriptの責任ある行動
- 人気のフロントエンドフレームワークVue.js
学習目標
- はじめに基本的なHTML構造
- 基本的なHTMLタグ
- テーブルとフォーム
HTML-はじめに
HTML（英語：HTMLと呼ばれるハイパーテキストマークアップ言語は、）Webページのマークアップ言語を作成するための規格です。
DDD
- マークアップ言語は、マークアップタグのセットである（マークアップタグ）
-
<标签 属性名="属性值">内容</标签> - HTMLブラウザで実行ブラウザによって解決します。
- ブラウザの互換性
-
因为不同的浏览器对同一段代码由不同的解析，显示效果不统一的情况 - HTMLバージョン
-
HTML 4.01 -
HTML5
エディタ
- メモ帳++
- VSコード：https://code.visualstudio.com/
- 崇高テキスト：http://www.sublimetext.com/
使用して、あなたはまた、.html拡張子を使用することができます.HTM
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タグ
領域にデータを提出
<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>
