表格
<!-- 只要表格中出现了<thead> 一定会有<tbody> 和<tfoot> -->
<table border="1">
<caption>英雄联盟大全</caption>
<thead>
<tr>
<th>英雄名称</th>
<th>英雄大招</th>
<th>英雄价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>披甲龙龟</td>
<td>地动山摇</td>
<td>3150¥</td>
</tr>
<tr>
<td>诺克萨斯统领</td>
<td>变成乌鸦</td>
<td>6300¥</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>雪人双子</td>
<td>极寒风暴</td>
<td>450¥</td>
</tr>
</tfoot>
</table><hr/>
网页效果:
table表格需设置边框线,有thead必须要有tfoot
单元格合并
<!-- 合并单元格 colspan 跨列合并,可以跨多个单元格进行合并;
rowspan 跨行合并, 当前可以跨多个tr进行合并
-->
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table><br/>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td colspan="4">跨列合并</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table><br/>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">跨行合并</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table><hr/>
网页效果:
colspan为跨列合并,数字为合并的单元格数,rowspan为跨行合并,数字为合并的单元格数
表单
<!-- 表单 -->
<!-- label - 光标自动定位,根据id值 -->
<label for="username">用户名:</label>
<input type="text" id="username" ><hr/>
<!-- textarea - 文本域控件-->
<textarea cols="10" rows="10">
秋风是多情的。花朵变得更加缤纷多彩,路边山间公园各种小花,一夜之间便把一片片一处处山川河流吹得五颜六色,吹得诗意盎然,吹得舒展酣畅。连多情的小鸟也不愿在花丛打滚,嘴馋的小羊也不忍心张口去啃。特别是那漫山遍野的山丹丹花,把天空的云彩的染得霞光满天。阵阵清香,优雅而芬芳,把那躲在暗处的萤火虫,引得打着灯笼,在山野荒原中游来游去。特别是那一株株菊花,顶住尘土的飞扬,忍得住周边花朵凋谢的寂寞,耐得住干旱的折磨,在秋风中不顾寂寞和冷落暗自开放。
</textarea><hr/>
<!-- 下拉菜单
selected - 默认选中
-->
<select>
<option>家里蹲</option>
<option>三亚</option>
<option selected="selected">泰国</option>
<option>白俄罗斯</option>
</select><hr/>
<!-- 表单域 -->
<form action="http://www.baidu.com" method="post" name="myiphone">
<label for="name">用户名:</label>
<input type="text" name="name" id="name" value="admin" /><br/>
<label for="password">密 码:</label>
<input type="password" id="password" name="password" value="admin" /><br/>
<input type="submit" id="submit" name="submit" value="提交" />
</form>
网页效果:
lable标签,可通过id实现光标自动定位,点击用户名光标自动定位到搜索框。textarea文本域控件,可设置大小。select下拉选择框,默认第一个选择标签为代码中的第一个option标签内容,selected属性可改变默认第一个选择。form表单,提交按钮可把表单内容提交到action设置的目标,action设置的是提交目标的路径,提交按钮是submit,手动提交
。