Form label: (form)
attributes: (1) action: submit address (access server) to the back-end server
(2) method: submission
submission usual: get, post (the other head, PUT, the Delete)
GET submission:
Description: (1) to submit user information to the address bar
back-end server addresses url key1 = value1 & key2 = value2 ...?
limited data size (2) get submitted (not more than 4KB)
(3) GET is not suitable to submit sensitive data, such as : password
password should be submitted to: require a password to encrypt
post submission:
Description: (1) data is not submitted to the address bar
http network protocol stack of server response headers, the browser request header information
entity content: formData
key1 = value1 & key2 = value2 ...
(2) submit the data size is no limit
(3) for sensitive data (password required specific encryption)
JS event programming:
the onsubmit event: that form submission is successful, returns true, the form is submitted successfully Note:
Note: the form item in the form of required attributes: name attribute
role: wrote to mark the contents of the current system background (background can acquire content)
Scenarios form tag: registration, login
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签1</title>
</head>
<!-- form表单标签
两个属性：
action:提交后台的地址
method：提交方式
常用：get,post(其他的head,put,delete)
js事件编程
onsubmit事件：表示表单提交是否成功
返回true,表单提交成功
-->
<body>
<form action="#" method="post" onsubmit="return checkAll()">
用户名：<input type="text" name="username" /><br />
密 码:<input type="password" name="pwd" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
Results:
Table of individual classification:
the INPUT tag
type = "text": text input box
type = "password": Enter the password box
type = "radio": radio button
type = "checkbox": box
type = "date" (date components h5 provided)
of the type = "tel" (component h5 provided)
of the type = "file": Upload the file
type = "button": push button, you must specify the value attribute
type = "submit": submission
type = "reset ": reset button
type =" hidden ": hidden fields
selsct labels drop-down menu
option: drop-down menu (application scenarios: provinces linkage)
the TextArea: text field (scenario: personal self-description)
specific operations to achieve:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br />
密码：<input type="password" name="pwd" placeholder="请输入密码" /><br />
性别：
<input type="radio" value="男" name="gender" />男
<input type="radio" value="女" name="gender" />女<br />
想去的公司：
<input type="checkbox" value="华为" name="company" />华为
<input type="checkbox" value="阿里巴巴" name="company" />阿里巴巴
<input type="checkbox" value="腾讯" name="company" />腾讯<br />
出生日期：
<input type="date" name="date" /><br />
手机号：
<input type="tel" name="phone" /><br />
上传图片：
<input type="file" name="photo" />
<!--隐藏域携带数据-->
<input type="hidden" name="id" /><br />
籍贯：
<select name="jiguan">
<option value="请选择">-请选择-</option>
<option value="陕西省">-陕西省-</option>
<option value="重庆">-重庆-</option>
<option value="广东">-广东-</option>
</select>
<br />
自我描述：
<!--
rows:可以写多少行
cols:一行中的字符数
-->
<textarea rows="5" cols="20">
求实创新
</textarea>
<select name="anniu">
<input type="button" value="普通按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</select>
</form>
</body>
</html>
Results:
Frame Tag: frame
a frame included in a html page, if the frame structure has two or more than two pages composition, referred frameset: a frame set
frame attribute:
the src: contains html link
frameset properties:
rows :( viewed from above) horizontal partitions
cols :( from left to right), each part (Frame) part of the percentage of the total
Note:
frameset body can not coexist and
specific operations:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<frameset rows="20%,*,10%">
<!--每一个frame包含的html页面-->
<frame src="header.html" />
<frameset cols="15%,*">
<frame src="menu.html" />
<!--
frame
name属性：给当前main.html的frame起名称
-->
<frame src="main.html" name="main" />
</frameset>
<frame src="footer.html" />
</frameset>
</html>
main.html achieve:
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center><strong>欢迎登录学校成绩管理系统</strong></center>
</body>
</html>
header.html achieve :( head tag)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center><h2>xxx学校管理系统</h2></center>
</body>
</html>
The results: 
footer.html realize statement :( copyrighted)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>XXX学校©1995-2050 </center>
</body>
</html>
menu.html realized (menu item)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
菜单选项:
<ul>
<!--
target：1)表示打开资源文件的方式：_self,_blank
2)在指定的frame中打开 ：需要frame中的name属性一致
-->
<li><a href="成绩.html" target="main">成绩管理</a></li>
<li><a href="http://www.bai.com">选课管理</a></li>
<li><a href="成绩.html">教务管理</a></li>
</ul>
</body>
</html>
CSS is used:
mode 1: inline style
specified in the tag style attribute: writing style
style = "css style attributes 1: CSS style property value 1; CSS style attributes 2: CSS style property 2; ..."
drawbacks:
(1) a You can control only one label
(2) code and html mixed style is not conducive to the late management
Embodiment 2: internal (inline) style
specify style tags in the head tag
format:
selector {
CSS style attributes 1: 1 CSS style property value;
...
}
be a good than the first, but not help manage
cursor: pointer; // default properties, passes into a small hand
Embodiment 3: external (outreach) pattern
(1) create an external css file
(2) the introduction of external css file
specified link tag in the head
href attribute: link css document
rel attribute: reformatting this stylesheet (association cascading style sheets)
Specific achieve:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用方式</title>
<style>
a{
font-size:30px;
color:#0F0;
/*去掉下划线*/
text-decoration:none;
/*鼠标经过元素之后，显示小手状态*/
cursor:pointer;
}
</style>
<link href="css/01.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
CSS selector:
three basic selectors (focus)
(1) id selector
specified id attribute value in the tag
Features: id attribute value must be unique within the same html page
DOM operations using js: document.getElementById ( "id attribute value ")
format:
#id attribute values {
writing style;
}
(2) class selector
specifies the class attribute in the tag
characteristic: under the same html page, a plurality of the same name tag specifies the class attribute
.class attribute values {
writing style
}
(3) label (element) selector
format: {name tag
writing style;
}
priority: id selector> class selector> tag selector
Other selectors:
and diversity selector:
selector 1, selector 2 .. . . {
Writing style;
}
intersection selector (selector child element)
Selector Selector Selector 2 1 3. . {
Writing style;
}
Wildcard Selector: *
specific operations implemented:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*标签选择器*/
div{
font-size:20px;
color:#00F;
}
/*class选择器*/
.cll{
font-size:30px;
color:#0F0;
}
/*id选择器*/
#dl2{
font-size:35px;
color:#0000FF;
}
/* 并集选择器 ：同时给第一个div和第二个div设置样式*/
.cll,#dl2{
font-size:30px;
color:#F00;
text-decoration: underline;
}
/*交集（子元素）*/
.cll span{
font-size:20px;
color:#F00;
}
*{
font-size: 25px;
color: gray;
}
</style>
<body>
<div class="cl1">div1<span>行内标签</span></div>
<div id="dl2">div2</div>
<div>div3</div>
<span>行内标签</span>
</body>
</html>
