HTML 基础 day02
表格 (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>