<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML常用标签2</title>
</head>
<body>
<p>table是表格</p>
<table border="" cellspacing="2" cellpadding="10" bgcolor="aqua" align="center">
<caption><h2>caption用于表示表头</h2> </caption>
<tr>
<th>th用于表示，表格的标题</th>
<th>th的用法和td一样</th>
</tr>
<tr>
<td>tr用于表示行</td>
<td>一个table标签 有几个tr，表示有几行</td>
</tr>
<tr>
<td>td表示列</td>
<td>一个tr里有几个td，表示有几列</td>
</tr>
</table>
<p><b>table标签属性</b></p>
<p> border="1" 设置表格边框的宽度为1pixel(像素)</p>
<p>width="500" 设置表格宽度为500pixel</p>
<p>height="500"设置表格高度为500pixel </p>
<p>cellspacing="2" 设置单元格之间的距离为2pixel </p>
<p>cellpadding="10" 设置文字距单元格边框的距离</p>
<p>bgcolor="red" 设置表格的背景颜色</p>
<p>align="center" 设置对齐方式,表格相对于父容器的位置 如right,left</p>
<p align="center">colspan Table</p>
<table border="1" width="" height=""
cellspacing="0" cellpadding="50"
align="center" bgcolor="green"
>
<tr >
<td colspan="2">td属性colspan="2"</td>
<td></td>
<td></td>
<!--<td></td>-->
</tr>
<tr >
<td colspan="3">td属性colspan="3"</td>
<td></td>
<!--<td></td>
<td></td>-->
</tr>
<tr >
<td colspan="4">td属性colspan=4 </td>
<!--<td></td>
<td></td>
<td></td>-->
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p>clospand 横向合并 需要删除 本行（ tr） 里的td 否则横向会超出 ，如：有4列 td clospan="4",则此行（tr）里只需要一个td,colspan="3",则此行（tr）里需要2个td</p>
<p align="center">rowspan Table</p>
<table border="1" width="" height=""
cellspacing="0" cellpadding="50"
align="center" bgcolor="green">
<tr >
<td></td>
<td></td>
<td></td>
<td rowspan="2">tr1 td4 rowspan="2"</td>
</tr>
<tr >
<td rowspan="2">tr2 td1 rowspan="2"</td>
<td rowspan="3">tr2 td2 rowspand="3"</td>
<td></td>
<!-- 删除掉此<td></td> -->
</tr>
<tr >
<!-- 删除掉此<td></td> -->
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h2>form标签，表单</h2>
<form action="test.php" method="post" >
<fieldset>
<legend>legend标签 用于设置表单名称</legend>
<p>input标签 type="text" 文本<input type="text" name="un" maxlength="15" /> </p>
<p>input标签 type="password" 密码<input type="password" name="pd" maxlength="10" /> </p>
<p>input标签 type="radio" 单选 在实现单选效果一定要给几个控件设置相同的名称
<input type="radio" name="gender" value="m" checked="checked"/>男
<input type="radio" name="gender" value="w" />女
</p>
<select>
<option>北京</option>
<option>北京2</option>
<option>北京3</option>
<option selected="selected">selected=“selected” 设置默认选中</option>
</select>
<br />
input type="checkbox":<input type="checkbox" />多选1<input type="checkbox" />多选2<input type="checkbox" checked="checked" />默认选中
<br />
<p>input标签 type="file" 文件<input type="file" /> </p>
<p>input标签 type="url" 网址url <input type="url" /> </p>
<p>input标签 type="email" 邮箱<input type="email" /> </p>
<p>input标签 type="number" 输入为数字<input type="number" /> </p>
<p>input标签 type="date" 日期<input type="date" /> </p>
<p>input标签 type="time" 详细时间<input type="time" /> </p>
<input type="button" value="填写完毕">
<input type="reset" value="重置信息">
<input type="submit" value="完成注册">
<input type="image" src="img/HBuilder.png">
<input type="submit" value="input标签 type=submit 提交按钮"/>
</fieldset>
</form>
<p>1.aciton="test.php" 规定当提交表示时，向何处发送表单数据</p>
<p>2.method="post" 指定用于发送form-data的HTTP方法，这里是用post</p>
<p>3.fieldset标签：设置表单边框</p>
<p>4.legend标签：设置表单名称</p>
<p>5.input标签：收集用户信息，根据不同的type属性值，输入字段拥有很多种形式，比如：文本、单选框，复选框、单选按钮、按钮、邮件地址，网页地址，日期，时间等等。</p>
<p>6.在实现单选效果一定要给几个控件设置相同的名称，例如性别的选择</p>
<p>7.input type="reset" 将表单控件中的值恢复到默认值状态</p>
<p>8.input type=”image”也可以进行表单的提交</p>
<br /><br /><br />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
