第二天、
table标签
表格标签：用于展示数据，布局
表格属性：
width:宽度
height:高度
border:边框【0：表示没有，1：有边框】
cellspacing:单元格之间的间距
cellpadding:内容到边框的间距
bordercolor:边框颜色[css 样式来代替]
bgcolor：背景颜色[css样式来代替]
td 属性：
width:
height:
设置宽高时，是以行列中最大的
align:水平对齐方式【left|center|right]
valign:垂直对齐方式【top|middle|bottom】
行列合并
td上的属性：
colspan:合并列
rowspan：合并行
方法：数格子，一个格子对应一个td，各自不能重复计数
注意：表格中的竖线，拉通全局看待，重点是，合并行列中的数值【】行为“真”，列为“假”
<table border="1" width="400" height="400" cellspacing="0"
cellpadding="" bordercolor="blue" bgcolor="aqua">
<!--table row-->
<tr >
<!--table head-->
<td align="left" valign="top">1</td>
<!--table data-->
<td align="center" valign="top" >2</td>
<td align="right" valign="top">3</td>
</tr>
<tr>
<!--table head-->
<td align="left" >1</td>
<!--table data-->
<td align="center" >2</td>
<td align="right" >3</td>
</tr>
<tr>
<!--table head-->
<td align="left" valign="bottom">1</td>
<!--table data-->
<td align="center" valign="bottom">2</td>
<td align="right" valign="bottom">3</td>
</tr>
</table>
图片展示
练习
<table border="1" cellspacing="0" cellpadding="" width="600"
height="150">
<tr>
<td></td>
<td colspan="4"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td width="10%"></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
效果图
form表单标签：
form action=“表单提交的服务器地址” method=“get|post|updata|delete”
enctype=“multipart/form-data”>
上传文件时，添加：enctype=“multipart/form-data”,方法采用post.以二进制的方式上传
提交方式的区别：
get：提交的数据会显示在接收页面的地址栏中
post：相对安全，以form-data 的形式上传
表单元素
注意：表单元素，如果没有name属性值，无法将数据提交到服务器
<form action="testsever.html" method="get">
文本输入框html4.1`
用户名：<input type="text" name="username" id="" >
<br>
密码：<input type="password" name="pwd" id="">
<br>
多行输入框：<textarea name="mytxta" id=""></textarea>
<br>
选框类
注意：value属性值都是事先设置好的，可以与文本不一样，提交的数据是以value的属性值为准
单选框
注意：必须给选项设置相同的name属性值
checked="checked"设置默认选项
性别：<input type="radio" name="sex" id="sex1" value="nan" />
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="nv" />
<label for="sex2">女</label>
<br>
复选框
爱好：<label> <input type="checkbox" name="zq" id="zq" value="zq" />足球</label>
<label> <input type="checkbox" name="lq" id="lq" value="lq" checked="checked"/>篮球</label>
<label> <input type="checkbox" name="ymq" id="ymq" value="ymq" checked="checked"/>羽毛球</label>
<br>
下拉列表框
selected="selected"设置默认选中
国籍：<select name="gj">
<option value="zg">中国</option>
<option value="usa">美国</option>
<option value="uk" selected="selected">英国</option>
</select>
<br>
文件
<input type="file" name="ff" id="file" value=""/>
按键类
提交功能
<input type="submit" name="" id="" value="提交" />
<input type="button" name="" id="" value="按钮" />
<input type="reset" name="" id="" value="重置" />
演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<form action="表单提交的服务器地址" method="get|post|updata|delete"
enctype="multipart/form-data"></form>
//上传文件时，添加：enctype="multipart/form-data",方法采用post.
//以二进制的方式上传
提交方式的区别：
get：提交的数据会显示在接收页面的地址栏中
post：相对安全，以form-data 的形式上传
-->
<form action="testsever.html" method="get">
<!--表单元素
注意：表单元素，如果没有name属性值，无法将数据提交到服务器
-->
<!--文本输入框html4.1-->
用户名：<input type="text" name="username" id="" >
<br>
密码：<input type="password" name="pwd" id="">
<br>
多行输入框：<textarea name="mytxta" id=""></textarea>
<br>
<!--选框类
注意：value属性值都是事先设置好的，
可以与文本不一样，提交的数据是以value的属性值为准
-->
<!--单选框
注意：必须给选项设置相同的name属性值
checked="checked"设置默认选项
-->
性别：<input type="radio" name="sex" id="sex1" value="nan" />
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="nv" />
<label for="sex2">女</label>
<br>
<!--复选框-->
爱好：<label> <input type="checkbox" name="zq" id="zq" value="zq" />足球</label>
<label> <input type="checkbox" name="lq" id="lq" value="lq" checked="checked"/>篮球</label>
<label> <input type="checkbox" name="ymq" id="ymq" value="ymq" checked="checked"/>羽毛球</label>
<br>
<br>
<!--下拉列表框
selected="selected"设置默认选中
-->
国籍：<select name="gj">
<option value="zg">中国</option>
<option value="usa">美国</option>
<option value="uk" selected="selected">英国</option>
</select>
<br>
<!--文件-->
<input type="file" name="ff" id="file" value=""/>
<br>
<!--按键类-->
<!--提交功能-->
<input type="submit" name="" id="" value="提交" />
<input type="button" name="" id="" value="按钮" />
<input type="reset" name="" id="" value="重置" />
<br>
<input type="submit" value="提交" >
</form>
</body>
</html>
图片演示
扩展：form-html5中Type新增属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--html中Type新增属性值-->
<form action="testsever.html" method="get">
用户名：<input type="text">
<br>
<!--type="email"提供了邮箱的完整性验证-->
邮箱：<input type="email" />
<!--type="tel" 并不提供验证，他本质的目的是为了打开移动端的数字键盘-->
<br>
电话：<input type="tel" />
<br>
<!--type="url"验证合法的网址，必须要包含请求协议或者http://-->
网址：<input type="url" />
<br>
<!--type="number" 只能包含数字
max="最大值"
min="最小值"
step="步长/精确度" 设置精确值
-->
年龄：<input type="number" max="150" min="0" step="0.1" />
<br>
搜索：<input type="search" />
<br>
<!--type="range"
max="最大值"
min="最小值"
vlaue="当前值"
-->
范围：<input type="range" max="100" min="0" value="60" >
<br>
<!-- -->
颜色：<input type="color" name="co" />
<br>
<input type="submit" value="提交" />
</form>
</body>
</html>
图片展示
HTML5表单元素新增的属性
placeholder=“提示文本”
autofocus:自动获取焦点
required=“required” 必填选项
title=“错误提示文本”
autocomplete=“on”,自动完成,on:打开，off:表示关闭
注意：autocomplete 1.成功提交过,2.元素中必须有name属性
pattern=“正则表达式”，验证数据的正确性【难点：正则表达式】
用户名：<input type="txet" placeholder="请输入用户名"
name="test"
autofocus="" required="required"
title="该项为必填项"
autocomplete="on"
>
</form>
正则表达式
####### 特殊符号
^------>以什么开头
$------>以什么结尾
量词
星号匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。等价于{0,}。
+
匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
?
匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。?等价于{0,1}。
{n}
n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。
{n,}
n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o”。
{n,m}
m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o为一组，后三个o为一组。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
######## 范围 ：
\d <=>[0-9]
[范围]---->[a-z] [A-Za-z],[13579],[1-37-9]
[^范围]===》不在范围内的 [^2-6]表示只要不是2-6内的数字都可以
|（或）x|y == [xy]
() ===>整体 1(3\d)|(8[13589])|(7[136])
数字：<input type="text" title="5到10位的整数" pattern="^[1-9]\d{4,9}">
释：输入的数是1-9的数，且最少有4位数最多有9位数
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
