html02表格的使用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <form action="#" method="post"> <input type="number" min="1" max="5"> <input type="date" min="1990-01-01"> <input type="date" max="2016-12-09"> <input type="time" value="14:43"> <input type="email"> <button type="submit">提交</button> </form> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格的使用</title> </head> <body> <!-- border:表格的边框 cellspacing：单元格之间的距离 cellpadding：单元格与内容之间的距离 width:代表表格在整个浏览器中的宽度显示 bgcolor:表格的背景色 align:表格中内容的对齐方式 --> <table border="1" cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffc0cb"> <tr align="center"> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> <td>第1行第4列</td> </tr> <tr align="center"> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> <td>第2行第4列</td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>高级表格的使用</title> </head> <body> <table width="80%" cellspacing="0" cellpadding="0" border="1"> <!--标题--> <caption>年终数据报表</caption> <!--页眉--> <thead bgcolor="yellow"> <!--表头--> <tr> <th>月份</th> <th>收入</th> </tr> </thead> <!--主体--> <tbody bgcolor="pink"> <tr> <td>1</td> <td>1000</td> </tr> <tr> <td>2</td> <td>2000</td> </tr> <tr> <td>3</td> <td>3000</td> </tr> <tr> <td>4</td> <td>4000</td> </tr> </tbody> <!--页脚--> <tfoot bgcolor="green"> <tr> <td>平均月收入</td> <td>4000</td> </tr> <tr> <td>总计</td> <td>40000</td> </tr> </tfoot> </table> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格的跨行跨列</title> </head> <body> <!-- 跨行和跨列 只能在 列中td使用--> <table width="80%" cellspacing="0" cellpadding="0" border="1"> <tr> <!--学生成绩跨了3列--> <td colspan="3">学生成绩</td> </tr> <tr> <!--张三跨了2行--> <td rowspan="2">张三</td> <td>语文</td> <td>85</td> </tr> <tr> <td>数学</td> <td>85</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>85</td> </tr> <tr> <td>数学</td> <td>85</td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <!-- src:需要引入的文件路径 frameborder:是否显示边框 0 不显示 1 显示 scrolling：是否显示下拉框 auto no yes align:根据周围的元素 这是位置 srcdoc：在内联框架中显示html内容 seamless:默认不显示边框和下拉框 name:内联框架的名称 --> <iframe src="http://www.baidu.com" srcdoc="<h1>哈哈</h1>" align="top"></iframe> <iframe src="http://www.baidu.com" seamless="seamless"></iframe> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 使用iframe 内联框架 实现页面间的相互跳转--> <a href="1.html" target="mainFrame">第1页的内容</a> <a href="2.html" target="mainFrame">第2页的内容</a> <a href="3.html" target="mainFrame">第3页的内容</a> <iframe name="mainFrame" src="http://www.baidu.com" height="500px" width="800px"/> </body> </html>
