表格 （table）
学习目标
- 表格是用来做什么的？ 展示数据， 可以让数据显示整齐规范；
- 列表是用来做什么的？ 列表用来布局，可以让页面布局整齐规范；
- 表单用来做什么的？ 表单用来收集用户数据。
创建表格
<tbble>
<caption>标题</caption>
<thead>
<tr>
<th>表头单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容单元格</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>| 标签名 | 属性名 |
|---|---|
| table | 表格标签 |
| caption | 表格标题标签 |
| thead | 表格头部标签 |
| tr | 行标签 |
| td | 单元格标签 |
| th | 单元格标签，表头 |
| tbody | 表格主题标签 |
| tfoot | 脚注标签 |
表格属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 这是表格的边框 border="1" | 像素值 |
| cellspacing | 设置单元格与单元格之间的空白间距 | 像素值（默认2像素） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认1像素） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的的水平居中方式 | left，center，right |
注意 平时开发的过程中我们这三个参数为0 ； border，cellspacing ，cellpadding
合并单元格
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
合并单元格三部曲
- 先确定是跨行还是跨列合并；
- 根据 先上后下 先左后右的原则找到目标单元格 然后写上合并方式 还有要合并的单元格数量 例：
<td rowspan="2"> </td> - 删除多余的单元格
列表标签
学习目标
- 无序列表语法；ul
自定义列表语法；ol
有序列表语法；
无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，都是并列的
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ul> </ul>中只能嵌套<li> </li>， 直接在<ul> </ul>标签中输入其他的标签或者文字是被允许的。<li>与</li>之间相当于一个容器， 可以容纳所有元素- 无序列表会带有自己的样式属性
有序列表 ol
<ol>
<li>列表项1</li>
...
</ol>自定义列表
<dl>
<dt>上海市</dt>
<dd>闵行区</dd>
<dd>松江区</dd>
</dl>使用场景
表单标签
input 控件
<input type="" value="" />| 属性 | 属性值 | 说明 |
|---|---|---|
| type | password | 密码输入框 |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式提交按钮 | |
| file | 文件域 | |
| name | 用户自定义 | 控件的名称 |
| value | 用户自定义 | input控件中默认的文本值 |
| size | 正整数 | input在页面中显示的宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许被输入的最多字符数 |
image 控件
<!-- image 一定要加上 src 属性 -->
<input type="image" src="../.png" />注意: 页面中表单很多 , name主要作用就是用于区别不同的表单
<!-- 如果要实现单选的话, 就需要指定相同的 name 属性 -->
男 <input type="radio" name="sex" /> <br />
女 <input type="radio" name="sex" />label 标签
label 标签主要目的是为了提高用户体验
概念 : label 标签为 input 元素定义标注 (标签)
作用 : 用于绑定一个表单元素 , 当点击 label 标签的时候 , 被绑定的表单元素就会获取输入焦点 .
如何绑定元素 ?
用 label 直接包裹 input 表单
<label> 用户名: <input type="text" value="" /></label>用 for 和 id 属性规定 label 与哪个表单元素绑定
<label for="username"></label> 用户名: <input type="text" value="" id="username" />
textarea 文本域
<!-- cols: 一行最多显示的字数
rows: 最多显示的行数 -->
<textarea cols="30" rows="10">
</textarea>select 下拉列表
<select name="" id="">
<options value="">北京</options>
<options vaule="">上海</options>
<!-- selected 表示默认选中 -->
<options vaule="" selected>郑州</options>
<options vaule="">南京</options>
</select>form 表单域
收集用户的信息怎么传递给服务器 ?
通过 form 表单域
在 HTML 中 , form 标签被用于定义表单域 , 以实现用户信息的手机与传递 , form 中的所有内容都会被提交给服务器 .
<form action="" method="" name="">
各种表单控件
</form>| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
| method | get/post | 用于设置表单数据的提交方式, 其取值为 get / post |
| name | 名称 | 用于指定表单的名称 , 以区分同一个页面中的多个表单 . |
示例 :
<form action="" method="get" name="">
<input type="text" name="username"/>
<input type="password" name="password"/>
</form>