您的位置：首页 > Web前端 > HTML

HTML基础第五课（表格，表单，行块对齐方式）

2018-03-17 15:27 691 查看

一、表格

1.table里的属性
table{
bordr-collapse:collapse(合并)|separate(不合并)
/*不合并边框的时候，可以让空的单元格隐藏*/
/*empty-cells: hide;*/
//单元格里的文字左右居中
text-align: center;

}
2.
<!-- border边框 和 css的border不一样
cellspacing：单元格之间的距离
单元格边距(表格填充)(cellpadding)  代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing)  代表表格边框与单元格补白的距离,也是单元格补白之间的距离
-->
3.a. rowspan 跨行
b. colspan 跨列-->

二、表单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
<style type="text/css">

</style>
</head>
<body>
<!-- <br/>换行单标签 -->
asdffd<br />ajjdkj
<!-- action:表单要提交的服务器接口
method：表单提交方式，默认GET
一般用POST
-->
<form action="" method="">
<!-- input 框类型 -->
<!-- 输入框 -->
<!-- placeholder="请输入用户名" 占位符 给用户的一种提示  -->
<!-- value="baidu" 最终要发送给服务器的值 -->
<!-- name 给服务器值得时候标识这个值是什么值（身高，体重，姓名等 -->
<input type="text" placeholder="请输入用户名" name="userName" value="baidu">
<label for="sg">身高</label>
<input id="sg" type="text" name="sg" placeholder="请输入身高">
<br />

<!-- 密码框 -->
<input type="password"
placeholder="请输入密码" >
<br />
<!-- 单选框 -->
<input type="radio" name="gender" value="男">
<input type="radio" name="gender" value="女">
<input type="radio" name="gender"  value="人妖">
<br />
<!-- 复选框 -->
<input type="checkbox" name="复选" value="nan">
<input type="checkbox" name="1复选" value="nv">
<input type="checkbox" name="2复选" value="renyao">
<br />
<!-- 上传文件
multiple 可以上传多个文件
-->
<input type="file" multiple>
<br />
<!-- 按钮 -->
<input type="button" value="我是按钮">
<br />
<!-- 隐藏的东西
如果想要收集一些不需要用户填写的信息。。
可以使用hidden类型input。如：注册时的设备类型
-->
<input type="hidden" name="type" value="Mac">
<br />
<!-- 提交信息按钮 -->
<input type="submit"  value="注册">
<br />
<!-- 清空表单信息 -->
<input type="reset"  value="清空">
<br>
<input type="email"  multiple="">
<br />

</form>
<!-- 如果重置/提交按钮在form外，点击按钮是无效的，可以通过
form属性关联到form表单ID来绑定到一起
-->
<input form="first" type="reset" name="" value="清空">

<!-- 下拉框 -->
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>

三、行块对齐方式

“`

div{

/display: inline-block;行块级标签/

display: inline-block;

/*

baseline 基线对齐

bottom

top

middle

*/

vertical-align: baseline

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航