2017年5月15号课堂笔记
2017年5月15号 周一 空气质量：良好
内容：html 按钮，文本域，文件上传，邮箱，小练习，pattern，初识css
一、按钮
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form action="02login.html" method="post">
用户名：<input type="text" name="userName" placeholder="请输入用户名"><br/>
密码：<input type="password" name="password" placeholder="请输入密码"><br/>
<!--
01.button ：不会触发表单的提交事件！
02.reset ：表单域会还原到初始状态，有默认值的显示默认值！ 不是清空！
03.submit ：触发表单的提交事件！
04.image :设置图片按钮
-->
<input type="button" value="普通按钮"/><br/>
<input type="reset" value="重置按钮"/><br/>
<input type="submit" value="登录"/><br/>
<input type="image" src="../images/sanji05.jpg"/><br/>
<!--button按钮的默认type="submit"-->
<button>提交按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
</form>
</body>
</html>
二、文本域
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<form action="02login.html" method="post">
用户名：<input type="text" name="userName" placeholder="请输入用户名"><br/>
密码：<input type="password" name="password" placeholder="请输入密码"><br/>
性别：<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" checked>女 <br/>
爱好：<input type="checkbox" name="love" value="篮球">篮球
<input type="checkbox" name="love" value="足球" checked>足球
<input type="checkbox" name="love" value="羽毛球">羽毛球
<input type="checkbox" name="love" value="乒乓球">乒乓球 <br/>
<select name="m" >
<option value="jan">1月份</option>
<option value="fe">2月份</option>
<option value="mar">3月份</option>
<option value="apr">4月份</option>
<option value="may" selected>5月份</option>
</select><br/>
<!-- 多行文本域： 适用于 协议 条款！
cols：跨的列数
rows:跨的行数
-->
<textarea name="content" cols="50" rows="20">
默认文本域的输出内容 ===value
</textarea>
<input type="submit" value="登录">
</form>
</body>
</html>
三、文件上传
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<!--
enctype="application/x-www-form-urlencoded" 默认值 会在数据到达服务器之前！对表单中的数据进行编码！
文件呢？？不需要编码！
而且只要是表单中有文件 ！ 必须设置 enctype="multipart/form-data"
-->
<form action="02login.html" method="post" enctype="multipart/form-data">
用户名：<input name="userName" type="text"> <br/>
上传文件：<input type="file" name="upload"><br/>
<input type="submit" value="登录">
</form>
</body>
</html>
四、邮箱
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>邮箱</title>
</head>
<body>
<form action="02login.html" method="get">
用户名：<input name="userName" type="text"> <br/>
<!--
type="email" ：文本框中 对 输入进行初步验证！
required：如果写在了标签中，说明这个文本框不能为空！
-->
邮箱：<input type="email" name="email" required/><br/>
<!--
type="url" 自动验证输入是否符合网址格式
-->
网址：<input type="url" name="myUrl"/><br/>
<!--
type="number" 输入数字
min：允许的最小值
max ：允许的最大值
step：每次增长或减小的数字间隔
-->
数字：<input type="number" name="num" min="0" max="100" step="20"/><br/>
<!--
step:每次移动的距离
-->
滑块：<input type="range" name="range" min="0" max="100" step="20"/><br/>
搜索框：<input name="search" type="search"> <br/>
<!--
客户端是看不到的隐藏域！
但是隐藏域中的值，会跟着表单提交到服务器！
-->
<input type="hidden" name="pageIndex" value="1">
<input type="submit" value="登录">
</form>>
</body>
</html>
五、小练习
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>小练习</title>
<style type="text/css">
/*内部样式：让页面中所有td元素都右对齐*/
td{
text-align:left;
}
</style>
</head>
<body>
<h3><strong>填写核对个人信息【查看】【修改】</strong></h3>
<form action="02Login.html" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="userName" value="君莫笑" readonly></td>
</tr>
<tr>
<td ><label for="123">真实姓名</label></td>
<td><input type="text" name="realName" id="123"></td>
</tr>
<tr>
<td>身份证号码</td>
<td><input type="text" name="sid"></td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="text" name="phoneNum"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>邮寄地址</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td>邮政编码</td>
<td><input type="number" name="postalcode"></td>
</tr>
<tr>
<td style="text-align: right"><input type="checkbox" name="choose"/></td>
<td>我已看过并同意《<a href="#">产品免责条款</a>》</td>
</tr>
<tr>
<td></td>
<td><button disabled>保存</button></td>
</tr>
<!-- w3c html5标准中，规定了 对于所有的布尔类型的值！属性值可以省略！
seleted
checked
disabled
readonly
requried
-->
</table>
</form>
</body>
</html>
六、pattern
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>pattern</title>
</head>
<body>
<!--
正则表达式： Regular Expression 规则表达式！ regex regexp
01.我们书写规则表达式！
02.用户输入的内容 和 规则表达式进行比对！
03.比对成功！用户输入的正确！可以提交表单！ 反之，不能提交表单！
必须要掌握的字符：
^ : 代表 正则表达式的 开始
$ :代表 正则表达式的 结束
* ：代表匹配的字符是 0 或者 n次
+ ：代表匹配的字符是 1 或者 n次
？：代表匹配的字符是 0 或者 1次
\d :代表只能匹配数字！
[0-9]:代表只能匹配数字！
[a-z]:代表只能匹配小写的字母！
[A-Z]:代表只能匹配大写的字母！
[a-zA-Z]:代表只能匹配大小写的字母！
[123]:代表只能是 1,2,3的其中一个
^（13|15|18）：只能是 13 15 18 开头
{9}: 代表前面的字符只能出现9次
｛9,｝:代表前面的字符至少出现9次
｛5,9｝：代表前面的字符至少出现5次，但是不能超过9次
-->
<form action="#" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="userName" value="alex" readonly></td>
</tr>
<tr>
<!-- pattern : 自己编写的正则表达式-->
<td>手机号：</td>
<td><input type="text" name="phoneNum" required pattern="^1[3578]\d{9}$"/></td>
</tr>
<tr>
<td>身份证号码：</td>
<td><input type="text" name="sid" required pattern="^(\d{18}|\d{17}X)$"/></td>
</tr>
<tr>
<td></td>
<td><button>提交</button></td>
</tr>
</table>
</form>
</body>
</html>
七、初识css
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初识css</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<!--内部样式-->
<style type="text/css">
/* 导入式 @import "css/style.css";*/
</style>
</head>
<body>
<!--
css :cascading Style Sheet (级联样式表)
实现了 样式 和 网页结构的分离！
目的：编辑网页元素，美化页面，实现良好的网页布局！
发展历程：
1996年12月份 css1.0
98年 2.0
04年 2.1
10年 3.0 css3
语法结构：
选择器｛
属性：属性值;
属性：属性值;
属性：属性值;
｝
最后一个属性值后面的; 我们可以省略！ 但是不建议！
html中引入css样式
01.行内样式
02.内部样式
03.外部样式 实现 内容和 表现的分离 ！ 常用
001.链接式 link
002.导入式 要写在 style 标签中！
链接式 和 导入式 区别：
01.link标签 属于 xhtml @import 属于css2.1
02.link标签优先加载css样式！再加载页面html内容！
@import先加载页面html内容！再加载css样式！
03.@import 存在浏览器兼容问题！
css样式引入的优先级
行内>内部>外部
-->
<div>这是一个div</div>
<!-- 行内样式 style="color: red;font-size: 50px;"-->
<div style="color: greenyellow;font-size: 50px;"->大家辛苦了</div>
</body>
</html>
八、作业和考试
1、CSS看完，一定要预习！不然跟不上了！
2、考试：
2017.05.15
15:35 开始，16: 21 结束；答题时间： 46-5(网上交流时间)=21分钟；检查时间: 0 分钟；
成绩： 80 分
历史最低分，因为自己最近太不努力，视频没看题目也没做，要好好调整学习状态了！
九、老师辛苦了
