黑马程序员第二天
今天主要学习了表格,列表和表单。
一.表格标签
主要作用:用于显示,展示数据,不是用来布局页面的。
1.基本语法:
表格标签:<table> <.table>
用于定义表格的标签
行标签:<tr> </tr>
定义表格中的行
单元格标签:<td> </td>
定义 表格中的单元格
表头单元格标签:<th> </th>
注:<tr>嵌套在<table>里 <td>嵌套在<tr>里
表头单元格也是单元格文字,加粗,居中显示,在一行,突出重要性。
2.表格的相关属性:(不常用,通过css来设置,写在table里)
align= left左,right右,center居中。(对齐方式)
border=”1“ :边框
cellpadding=”数值“:文字和单元格之间的距离
cellspacing=”数值“:单元格和单元格之间的距离
width=”数值“:表格宽度
height=”数值“:表格高度
3. 表结构标签:
头部区域:<thead>
一个大的区域,里边一定有<tr>
主体区域:<tbody>
4.合并单元格:
①合并单元格方式:
跨行合并:rowspan=”合并单元格个数“
跨列合并:colspan=”合并单元格个数“
②目标单元格:
跨行:最上侧为目标单元格,写合并代码
跨列:最左侧为目标单元格,写合并代码
删除多余单元格
5.表格上方的标题:<caotion> </caption>
写在table开头
6.案例:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellpanding="0" cellspacing="0" width="800" height="800">
<thead>
<tr>
<th colspan="5">简介</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>姓名</td>
<td>德莱厄斯</td>
<td>专业</td>
<td>嘉里敦屋里系</td>
<td rowspan="3"></td>
</tr>
<tr>
<td>性别</td>
<td>男</td>
<td>毕业院校</td>
<td>瓦罗兰大陆诺克萨斯战争学院</td>
</tr>
<tr>
<td>民族</td>
<td>平民</td>
<td>住址</td>
<td>诺克萨斯市政街西兰花公寓六栋六楼六号</td>
</tr>
<tr>
<td>学历</td>
<td>小学二年级</td>
<td>邮箱</td>
<td>[email protected]</td>
<td>联系方式:29392132904</td>
</tr>
<tr>
<td>出生日期</td>
<td>瓦罗兰历三五八年独立日</td>
<td>电话</td>
<td>4008823823</td>
<td>邮编:710121</td>
</tr>
<tr>
<td colspan="2">实习经历</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
二.三种列表
1.无序列表:<ul> </ul>
列表项:<li> </li>
没有顺序之分,是并列的。
ul标签中只能放li标签,li标签里放什么都可以。
2.有序列表:<ol> </ol>
列表项:<li></li>
有顺序
ul标签中只能放li标签,li标签里放什么都可以。
**3.自定义列表:**用于对术语或名词进行描述
自定义列表:<dl>
定义项目或名字:<dt>
解释项目或名字:<dd>
dl标签只能放dt和dd标签
4.案例:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>去超市要买的东西</h3>
<ul>
<li>吃的</li>
<li>
<ul>
<li>饼干</li>
<li>面包</li>
<li>巧克力
<ul>
<li>德芙</li>
<li>费列罗</li>
</ul>
</li>
</ul>
</li>
<li>用的</li>
<li>喝的</li>
</ul>
</body>
</html>
三.表单
为了收集用户信息
组成:表单域,表单控件(表单,元素),提示信息
表单域:包含表单元素的区域<form>
form会把它范围内的表单元素信息提交给服务器
三种常见的属性:action=”提交到的地址“;method=”“提交方式;name=”“表单名字
1.input:输入表单元素input type=”属性值“
文本框:text
密码框:password
提交按钮:submit ,value=“字”提交按钮中显示的字
重置按钮:清空表单或回鹘默认值,reset
单选按钮:radio,可以实现多选一,但是要实现多选一,要加上name,name 是表单元素的名字,单选的选项name必须一样。
复选框:checkbox,实现多选一,复选按钮名字也要一样。value:表单中元素的值。
checked=“checked”,简写成checked:默认的选中,可以单,复。
普通按钮:button,获取短信验证码。
lable标签:将焦点(光标)转到或者选择对应的表单元素上
<lable for="text">用户名:</lable><input type="text" id="text">
for属性值对相应id属性值,应当相同。
2.select:下拉表单元素,多个选项让用户选择,节约空间
<select>
<option> </option>
</select>
selected=“selected”,简写成selected:默认选中
3.textarea:文本域标签,内容较多,用于定义多行文本输入的控件。
4.案例:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table align="center">
<!-- 第一行 -->
<tr>
<td>昵称</td>
<td><input type="text"></td>
</tr>
<!-- 第二行 -->
<tr>
<td>密码</td>
<td><input type="password"></td>
</tr>
<!-- 第三行 -->
<tr>
<td>邮箱</td>
<td><input type="text"><select name="" id="">
<option value="">qq.com</option>
</select></td>
</tr>
<!-- 第四行 -->
<tr>
<td>性别</td>
<td><input type="radio" name="xingbie" id="1" checked><label for="1">男</label>
<input type="radio" name="xingbie" id="2"><label for="2">女</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>兴趣</td>
<td><input type="checkbox" name="xingqu" id="3"><label for="3">旅游</label>
<input type="checkbox" name="xingqu" id="4"><label for="4">摄影</label>
<input type="checkbox" name="xingqu" id="5"><label for="5">运动</label>
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>个人介绍</td>
<td></td>
</tr>
<!-- 第七行 -->
<tr>
<td colspan="2">
<textarea name="" id="" cols="45" rows="5"></textarea>
</td>
</tr>
<!-- 第八行 -->
<tr align="center">
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
<!-- 第九行 -->
<tr>
<td>上传个人照片:</td>
<td></td>
</tr>
<!-- 第十行 -->
<tr>
<td colspan="2">
<input type="file" name="" id="">
</td>
</tr>
</table>
</form>
</body>
</html>
四.心得体会
今天学习的内容较多,单词也很多,需要多记多背多巩固。