表格
课程表
<table border="1px">
<caption>合肥市第十六小学课程表</caption>
<tr>
<td colspan="2"></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4" width="50px">上午</td>
<td width="30px">1</td>
<td>音乐</td>
<td>体育</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>2</td>
<td>语文</td>
<td>政治</td>
<td>美术</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>3</td>
<td>语文</td>
<td>美术</td>
<td>数学</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td>4</td>
<td>美术</td>
<td>语文</td>
<td>美术</td>
<td>数学</td>
<td>体育</td>
</tr>
<tr>
<td colspan="7" align="center">中午休息</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td rowspan="3">下午</td>
<td>5</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>物理</td>
<td>地理</td>
</tr>
<tr>
<td>6</td>
<td>数学</td>
<td>大神</td>
<td>英语</td>
<td>物理</td>
<td>地理</td>
</tr>
<tr>
<td>7</td>
<td>课外活动</td>
<td colspan="4">各班各自组织,自愿参加</td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
</table>
## 表格标签:
1. 一个表格只能有一个表头(th标签定义表头),
2. caption 标签定义表格标题,表表格表题通常也只有一个。
3. tr 标签定义一行数据,
4. td 标签定义表格单元(实际放内容的)。
5. thead 标签定义表格的页眉。
6. tbody 标签定义表格的主体,如果不写,默认也会自动加上,如果不写容易出错,所以要写起,方便后面。
7. colspan 行合并,写在td标签标签中,合并行时要注意代码是否有多余的td标签。
8. rowspan 列合并,(同上)。
9. table 常用属性:
border 设置表格的边框,
width 设置表格的宽,
height 设置表格的高,
borderColor 设置表格边框颜色,
bgColor 设置表格背景颜色,
列表
列表分为:有序列表、无序列表和自定义列表。
- 无序列表;
<ui>
<li>无序列表</li>
<li>无序列表</li>
</ul>
有序列表;
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
- 自定义列表;
<dl>
<dt>电脑</dt>
<dd>笔记本电脑</dd>
<dd>台式电脑</dd>
<dt>手机</dt>
<dd>苹果手机</dd>
<dd>华为手机</dd>
</dl>
列表标签
1、 ul 定义无序列表;
2、 ol 定义有序列表;
3、 li 定义有序和无序列表的列表项,(具体数据)
4、 dl 定义自定义列表,dt定义自定义列表列表项,dd 定义自定义列表的描述(具体内容);自定义列表通常用来做网站导航栏。
表单
from 表单长用于收集用户输入的数据。
<from>
<input />
</from>
from 属性:
1、 action 定义表单提交时执行的动作,(就是提交给谁,如果省略action属性,默认则提交到当前页)
2、 method 定义提交表单时说用方式,(get、post);
get:明文方式,通过浏览器地址栏发送,不安全,有大小现在,用于不敏感的数据传输。
post:不可见,适合密码、文件、传输。
from 表单元素:
input 元素是表单最重要的元素,它有很多形态,根据不同的type 属性值,有不同的功能。
text 定义常规文本输入框;
radio 定义单选按钮,单选的name属性值必须一样,
submit 定义提交按钮;
passWord 定义密码字段;
checkbox 定义复选框;复选框的name属性值必须一样,并且是数字的形式,不然后台代码自能获取到一个数据。
button 定义按钮;
tel 定义电话号码输入字段;
search 定义搜索字段;
email 定义邮箱;
datetime-local 允许用户选择日期和时间(无时区)
<select></select>下拉列表元素。
option 定义列表选项,
<optin value="zhi">zhi</option>
语法:
<select>
<option value="zhi">
zhi
</option>
</select>
元素属性
1、 required 表示必须;
2、 checked 设置默认值;
3、 type 设置 input 控件类型;
4、 name 是后台代码获取用户提交数据的标识,(可以理解为数据变量名)
5、 value 表示数据值,它的值,就是后台代码获取到的值。
6、 id 一个标识符,用法很多。
label 标签:
label标签不会向用户呈现任何特殊效果,在label元素内点击文本,就会触发此控件。label 标签的for属性值必须与表单里对应的元素id 值相同。
示例代码
用户注册表单
<form action = "2.php" method = "POST" enctype = "multipart/form-data">
<div>
<label for = "username">账号:</label>
<input type = "text" id = "username" value = "" placeholder = "username" required />
</div>
<div><label for = "uemail">邮箱:</label>
<input type = "email" id = "uemail" value = "" placeholder = "php@qq.com" required />
</div>
<div>
<label for = "pw">密码:</label>
<input type = "password" id = "pw" value = "" placeholder = "输入6到16个字符" required />
<br />
<label for = "xingbie">性别:</label>
<input type = "radio" id = "msex" name = "xingbie" value = "" /><label for = "msex">男</label>
<input type = "radio" id = "nsex" name = "xingbie" value = "" /><label for = "nsex">女</label>
<input type = "radio" id = "bsex" name = "xingbie" value = "" checked /><label for = "bsex">保密</label>
<br />
<label for = "#">兴趣:</label>
<input type = "checkbox" name = "xingqu[]" value = "dlq" checked /><label for = "dlq">打篮球</label>
<input type = "checkbox" name = "xingqu[]" value = "bc" checked /><label for = "bc">编程</label>
<input type = "checkbox" name = "xingqu[]" value = "kc" /><label for = "kc">开车</label>
<input type = "checkbox" name = "xingqu[]" value = "youyong" /><label for = "youyong">游泳</label>
</div>
<div>
<label for = "xueli">学历:</label>
<select name = "xueli" id = "xueli">
<option value = "xx">小学</option>
<option value = "cz">初中</option>
<option value = "gz">高中</option>
<option value = "dx">大学</option>
</select>
</div>
<div>
<label for = "touxiang">头像:</label>
<input type = "hidden" name = "maxfilesize" value = "80000" />
<input type = "file" name = "usertouxiang" id = "touxiang" />
<!-- 头像占位符 -->
<div class = "" style = "grid-column: span 2"></div>
</div>
<div>
<label for = "jl">简历:</label>
<input type = "file" name = "jianli" id = "jl" />
</div>
<div>
<label for = "bz">备注:</label>
<textarea name = "beizhu" id = "bz" cols = "30" rows = "10">在此处输入备注</textarea>
</div>
<div>
<label for = "tj">提交</label>
<input type = "submit" id = "tj" />
<button>button提交</button>
</div>
</form>