列表,表格与表单
列表
列表分为:无序列表(ul),有序列表(ol)跟自定义列表(dl)
无序列表ul
<ul> <li></li> </ul>
有序列表ol<ol> <li></li> </ol>
自定义列表dl<dl> <dt>dt是列表标题</dt> <dd>dd是列表项</dd> </dl>
*li的父元素最好是ul,ol中的一个,利于抓取
*列表标签中可以包含其他标签,可以用来写导航,图文列表等
表格
表格的组成标签:table,tbody,thead,tr,td/th
<table cellpadding="0" cellspacing="0" border="1">
<!-- 表格标题-->
<caption>
商品信息表
</caption>
<!-- 表头-->
<thead>
<tr>
<td>ID</td>
<td>品名</td>
<td>单位</td>
<td>数量</td>
<td>金额</td>
</tr>
</thead>
<!-- 表格的主体,一个表格可以有多个主体,但只能有一个表头-->
<tbody>
<tr>
<td>a666</td>
<td>手机</td>
<td>888</td>
<td>部</td>
<td>1</td>
</tr>
<tr>
<td>a666</td>
<td>手机</td>
<td>888</td>
<td>部</td>
<td>1</td>
</tr>
<tr>
<td>a666</td>
<td>手机</td>
<td>888</td>
<td>部</td>
<td>1</td>
</tr>
<tr>
<td>a666</td>
<td>手机</td>
<td>888</td>
<td>部</td>
<td>1</td>
</tr>
<tr>
<td>a666</td>
<td>手机</td>
<td>888</td>
<td>部</td>
<td>1</td>
</tr>
</tbody>
</table>
<!-- 表格:行与列的合并-->
colspan合并列,rowspan合并行
<table cellpadding="0" cellspacing="0" border="1">
<caption>
课程表
</caption>
<thead>
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>生物</td>
<td>地理</td>
</tr>
<tr>
<td>1</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>生物</td>
<td>地理</td>
</tr>
<tr>
<td>1</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>生物</td>
<td>地理</td>
</tr>
<tr>
<td>1</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>生物</td>
<td>地理</td>
</tr>
</tbody>
</table>
*caption 标签必须紧随 table 标签之后,
只能对每个表格定义一个标题,
通常这个标题会被居中于表格之上。*所有的数据必须填充到td/th中,th是td的plus,自带加粗,居中
表单
- from
属性action:处理表单的程序
method:表单提交的类型——GET/POST两种,默认GET
input
文本框
type:控件类型
name:数据的变量名
value:数据的值
required:必填选项
placeholder:提示信息type="text"
<input type="text" id="username" name="username" required/>
type="email"
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="youxiang@163.com" required>
type="password"
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="不少于6位" required/>
- 单选按钮
一组单选,必须公用一个name属性值(name相同)
默认值:checked<label for="man">性别</label>
<input type="radio" name="gender" value="male" id="man" checked><label for="man">男</label>
<input type="radio" name="gender" value="male" id="women"><label for="women">女</label>
- 复选框
name值应该写成数组格式,这样才能确保服务器可以收到一组数据,默认值也是添加checked<label for="">兴趣:</label>
<span><input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label></span>
<span><input type="checkbox" name="hobby[]" value="game" id="shoot"><label for="shoot">摄影</label></span>
<span><input type="checkbox" name="hobby[]" value="game" id="travel" checked><label for="travel">旅游</label></span>
<span><input type="checkbox" name="hobby[]" value="game" id="program" checked><label for="program">编程</label></span>
- 文件域和隐藏域
1.请求类型必须是POST
2.将表单数据编码设置为:enctype = “application/x-www-form-urlencoded”,传文件用multipart/form-data
3.name是js或者php或者服务器中的数据,注意命名规则<form action="" method="post" enctype="multipart/form-data">
<label for="user-pic">头像:</label>
<input type="file" name="user_pic" id="user-pic">
<!-- 隐藏域,在前端看不见,值供后台处理时用-->
<input type="hidden" name="MAX_FILE_SIZE" value="80000">
<!--头像占位符-->
<div class="user-pic" style="grid-column:span 2;"></div>
</form>
- select下拉框
<!-- multiple显示成列表 size显示数量,默认项是添加selected-->
<label for="">学历:</label
<select name="edu" id="edu">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>大专</option>
<option value="4">本科</option>
<option value="5">研究生</option>
<option value="6" label="高级选项">这里的数据没有用</option>
</select>
textarea多行文本框
<label for="comment">备注:</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
- 表单控件的form属性
<!-- 不建议用此方法,会影响布局-->
<!-- form 中没有写东西,在要提交的标签上写上form=‘form的id’-->
<form action="" method="get" id="info"></form>
<div class="form-content">
<div>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="不能为空" form="info" required>
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" form="info">
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" form="info">
</div>
<button form="info">提交</button>
</div>
tbody虽然能自动生成,但是不能省略
label中for = input中的ID
get能看到密码等,不安全;
GET可以上传非敏感数据,数量不能太多,例如页码是可以的
作业
课程表
<table cellpadding="0" cellspacing="0" border="1">
<caption>
课程表
</caption>
<thead>
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>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">中午休息</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>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>
</tbody>
</table>
`