您的位置：首页 > Web前端

WEB前端 | HTML基础——(5)表格和表单

2016-09-13 19:22 846 查看

一、表格

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格</title>
</head>
<body>
<ol>
<li>1</li>
</ol>
<table border="1px" cellspacing="0" cellpadding="10" width="500" height="300">
<caption>表格标题</caption>
<!--
border 代表的是边框，是table的属性和css里的border不一样。可以直接设置大小来给单元格、表格添加边框
cellspacing 单元格的外间距
cellpadding 单元格的内边距
可以通过width、height属性给整个表格设置宽和高。也可以单独设置某一行、列的宽和高来修改每一个单元格的大小。
单元格的总宽度超过表格宽度之后按照比例分配
单元格的总高度超过表格高度会把表格的高度撑开

-->
<!-- <thead>
我是head
</thead> -->
<!-- <tbody> -->
<!-- tr代表的是一行
td代表的是一行有几个单元格
tbody可以省略，浏览器会自动添加
thead、tfoot表格的头和尾被废弃了
caption 表格的标题 用的比较少

-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<!-- <td>3</td> -->
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">3</td>
<!-- <td>4</td> -->
<td>5</td>
</tr>
<tr>
<td class="t1">3</td>
<td class="t1">4</td>
<td>5</td>
</tr>
<!-- </tbody> -->
<!-- <tfoot>
我是foot
</tfoot> -->
</table>
<span>111</span>
</body>
</html>

二、表单

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单</title>
</head>
<body>
<!-- action 要提交的服务器地址  IP
method 提交的方式 POST GET
默认 GET
常用的时POST
-->
<form action="" method="">
<!-- type="text" 输入文字 显示详情
type="password" 输入密码 不显示
value="123" 默认值为123
-->
<input type="text" name="username" value="123"/>
<input type="password" value="123"/>
<!-- type="radio" 单选框 name必须一致才生效
checked="" 默认选项-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender" checked="" />
<!-- type="checkbox" 复选框 -->
<input type="checkbox" name="hobby" checked="" />
<input type="checkbox" name="hobby"/>
<input type="checkbox" name="hobby"/>
<!-- type="button" 按钮
value="" 可任意命名-->
<input type="button" value="按钮"/>
<!-- type="submit" 提交按钮 -->
<input type="submit" value="提交按钮"/>
<!-- type="reset" 重置按钮 必须在form里面作为子集 -->
<input type="reset" value="重置点我"/>
<!-- type="hidden" 隐藏按钮 -->
<input type="hidden"/>
<!-- select 下拉菜单 selected=""为默认选中值 -->
<select name="" id="">
<option value="">上海</option>
<option value="" selected="">北京</option>
<option value="">广州</option>
</select>
<!-- textarea 多行文本域
cols改变宽度 rows改变高度
outline:none 取消点击蓝色的外边框
resize:none 取消拉拽框 -->
<textarea name="" id="" cols="30" rows="10" style="outline:none;resize:none;">

</textarea>
<!-- type="file" 选择文件
默认单选 multiple可以多选文件 -->
<input type="file" multiple/>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  表格 表单 web前端 html css
相关文章推荐
新的分享
章节导航